Skip to content
Snippets Groups Projects
Commit c41c0134 authored by Aulia  Adila's avatar Aulia Adila
Browse files

fix name display

parent 6216e1ad
3 merge requests!38Main,!36Main,!35fix name display
...@@ -6,29 +6,32 @@ ...@@ -6,29 +6,32 @@
class="ms-1" class="ms-1"
style="border: none; background-color:transparent" style="border: none; background-color:transparent"
@click="toggleVisibility" @click="toggleVisibility"
v-click-away="hideDropdown"
> >
<slot name="start-button-item"> Start-button-content</slot> <slot name="start-button-item"> Start-button-content</slot>
</button> </button>
</div> </div>
<Transition name="fade"> <Transition name="fade">
<ul v-if="isVisible" class="item-parent" :style="topMargin"> <div class="item-container">
<li class="item" style="margin-right:var(--right-margin)"> <ul v-if="isVisible" class="item-parent" :style="topMargin">
<slot name="item-1"></slot> <li class="item" style="margin-right:var(--right-margin)">
</li> <slot name="item-1"></slot>
<li class="item" style="margin-right:var(--left-margin)"> </li>
<slot name="item-2"></slot> <li class="item" style="margin-right:var(--left-margin)">
</li> <slot name="item-2"></slot>
</ul> </li>
</ul>
</div>
</Transition> </Transition>
</div> </div>
</template> </template>
<script> <script>
import { mixin as VueClickAway } from "vue3-click-away"; //import { mixin as VueClickAway } from "vue3-click-away";
export default{ export default{
mixins: [VueClickAway], //mixins: [VueClickAway],
props:['type'], props:['type'],
data(){ data(){
return{ return{
...@@ -36,6 +39,7 @@ export default{ ...@@ -36,6 +39,7 @@ export default{
top: 0, top: 0,
right: 0, right: 0,
left: 0, left: 0,
// bgColor: 'transparent',
} }
}, },
methods: { methods: {
...@@ -49,6 +53,7 @@ export default{ ...@@ -49,6 +53,7 @@ export default{
if (this.type === "dropdownUser"){ if (this.type === "dropdownUser"){
this.top = 2.08; this.top = 2.08;
this.right = 7.5; this.right = 7.5;
// this.bgColor = "white";
} }
else if (this.type === "addUser"){ else if (this.type === "addUser"){
this.top = 10.25; this.top = 10.25;
...@@ -64,6 +69,7 @@ export default{ ...@@ -64,6 +69,7 @@ export default{
'--top-margin': (this.top) + "rem", '--top-margin': (this.top) + "rem",
'--right-margin': (this.right) + "em", '--right-margin': (this.right) + "em",
'--left-margin': (this.left) + "em" '--left-margin': (this.left) + "em"
// '--bg-color': (this.bgColor)
} }
} }
} }
...@@ -90,10 +96,19 @@ export default{ ...@@ -90,10 +96,19 @@ export default{
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
top: var(--top-margin); top: var(--top-margin);
/* border: 1px;
border-color: black; */
} }
.item { .item {
position: absolute; position: absolute;
list-style:none; list-style:none;
width: 150px; width: 150px;
/* background-color: var(--bg-color); */
} }
/* .item-container {
display: flex;
border-color: black;
border-style: solid;
} */
</style> </style>
\ No newline at end of file
...@@ -28,12 +28,10 @@ ...@@ -28,12 +28,10 @@
<div class="col"> <div class="col">
<div <div
class="d-flex flex-row-reverse justify-content-start align-items-center illustration" class="d-flex flex-row-reverse justify-content-start align-items-center illustration"
> >
<h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
<Dropdown type="dropdownUser"> <Dropdown type="dropdownUser">
<template v-slot:start-button-item> <template v-slot:start-button-item>
<i <i @click="onDisplayName"
class="icon ion-ios-person-outline text-red" class="icon ion-ios-person-outline text-red"
style="font-size: 65px" style="font-size: 65px"
></i> ></i>
...@@ -51,7 +49,7 @@ ...@@ -51,7 +49,7 @@
</button> </button>
</template> </template>
</Dropdown> </Dropdown>
<Name v-if="isNameDisplayed" :value="this.name"></Name>
</div> </div>
</div> </div>
</div> </div>
...@@ -63,12 +61,14 @@ ...@@ -63,12 +61,14 @@
<script> <script>
import Dropdown from "../components/dropdown"; import Dropdown from "../components/dropdown";
import Name from "../components/name"
import { HTTP } from '../http-common' import { HTTP } from '../http-common'
export default { export default {
name: "Header", name: "Header",
components: { components: {
Dropdown, Dropdown,
Name
}, },
data() { data() {
return { return {
...@@ -76,7 +76,9 @@ export default { ...@@ -76,7 +76,9 @@ export default {
isModalVisible: false, isModalVisible: false,
profile_employee:[], profile_employee:[],
profile_admin:[], profile_admin:[],
isNameDisplayed: true,
name:"", name:"",
helloName:"",
id: null, id: null,
user_id: null, user_id: null,
is_admin: false, is_admin: false,
...@@ -86,6 +88,9 @@ export default { ...@@ -86,6 +88,9 @@ export default {
onclick() { onclick() {
this.nav_active = !this.nav_active; this.nav_active = !this.nav_active;
}, },
onDisplayName(){
this.isNameDisplayed = !this.isNameDisplayed;
},
toProfile(){ toProfile(){
if (this.is_admin){ if (this.is_admin){
this.$router.push({ name: "profil-admin", params: { id: this.id }}); this.$router.push({ name: "profil-admin", params: { id: this.id }});
...@@ -116,6 +121,7 @@ export default { ...@@ -116,6 +121,7 @@ export default {
this.user_id = this.profile_employee.user_id this.user_id = this.profile_employee.user_id
} }
}}) }})
// console.log(this.isNameDisplayed)
}, },
}, },
mounted(){ mounted(){
......
<template> <template>
<h2 class="text-red" style="text-align: right">Hello, {{name}}</h2> <h2 class="text-red" style="text-align: right">Hello, {{value}}</h2>
</template> </template>
<script> <script>
export default { export default {
name: "Name", name: "Name",
props:{name: String}, props:{value: String},
}; };
</script> </script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment