defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update header

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-18 17:19:27 +07:00
parent e7be28f565
commit 3ee41c209c
2 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/style.css
View File

@ -1731,6 +1731,11 @@ select {
background-color: rgb(204 204 0 / var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-opacity-25 {
--tw-bg-opacity: 0.25;
}
@ -2250,6 +2255,11 @@ select {
color: rgb(1 36 45 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-opacity-100 {
--tw-text-opacity: 1;
}

35
src/components/Header.vue
View File

@ -2,8 +2,6 @@
<script setup lang="ts">
import CommandPalettes from '@/components/CommandPalettes.vue'
import MessageBox from '@/components/MessageBox.vue'
import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import { useCommandPalattesStore } from '@/stores/command'
@ -19,7 +17,6 @@ import {
Bars3BottomLeftIcon
} from '@heroicons/vue/24/outline'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
import { onMounted, onUnmounted, ref } from 'vue'
import PictureInitial from './PictureInitial.vue'
import Icon from '@/assets/images/pln-with-text.png'
import { useDialogStore } from '@/stores/dialog'
@ -33,16 +30,6 @@ const dialog = useDialogStore()
const openSideBar = () => menu.toggleSidebar()
const dialogChangePassword = ref(false)
const handleOnDismissDialogChangePassword = () => {
dialogChangePassword.value = false
}
const showDialogChangePassword = () => {
dialogChangePassword.value = true
}
const showDialogLogout = () => {
dialog.type = 'error'
dialog.title = 'Logout dari akun?'
@ -124,34 +111,29 @@ const showDialogLogout = () => {
leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
<MenuItems
class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="flex-shrink-0 block px-4 py-2 border-b border-gray-50 group">
class="absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50 group">
<div class="flex items-center">
<div>
<!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
<PictureInitial class-name="nline-block" size-class="w-9 h-9"
background-class="bg-gray-100" font-class="font-bold text-gray-600 text-md"
background-class="bg-secondary-100"
font-class="text-xs font-normal font-semibold text-primary-500"
:name="user.user_name" />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
<div class="ml-3 space-y-1">
<p class="text-sm font-medium text-primary-50 ">
{{ user.user_name }}
</p>
<p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
<p class="text-xs font-normal text-primary-50">
{{ user.user_access }}
</p>
</div>
</div>
</div>
<MenuItem v-slot="{ active }">
<button @click="showDialogChangePassword"
:class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
Ubah Password
</button>
</MenuItem>
<MenuItem v-slot="{ active }">
<button @click="showDialogLogout"
:class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
:class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-3 text-base text-gray-800']">
Log out
</button>
</MenuItem>
@ -162,7 +144,6 @@ const showDialogLogout = () => {
</div>
</div>
<ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
<CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
<MessageBox :open="message.open" @onClose="message.handleOnDismissMessageBox" />
</template>