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

update command palettes background

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-27 10:00:51 +07:00
parent 4fc30443e3
commit 32a2f1b2f5
2 changed files with 65 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1547,6 +1547,10 @@ select {
--tw-divide-opacity: 0.1;
}
.divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
}
.overflow-auto {
overflow: auto;
}
@ -1821,6 +1825,10 @@ select {
--tw-bg-opacity: 0.8;
}
.bg-opacity-100 {
--tw-bg-opacity: 1;
}
.fill-gray-500 {
fill: #6b7280;
}
@ -2324,6 +2332,11 @@ select {
color: rgb(153 153 0 / var(--tw-text-opacity));
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.text-opacity-40 {
--tw-text-opacity: 0.4;
}

54
src/components/CommandPalettes.vue
View File

@ -10,8 +10,9 @@
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100" leave="ease-in duration-200" leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95">
<!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
<DialogPanel
class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl bg-opacity-80 ring-0 ring-black ring-opacity-5">
class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-100 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5">
<Combobox>
<div class="relative">
<MagnifyingGlassIcon
@ -29,7 +30,7 @@
class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
Terakhir Diakses
</h2>
<ul class="text-sm text-gray-700">
<!-- <ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path" v-slot="{ active }">
<li @click="command.openMenu(menu)"
@ -73,6 +74,55 @@
Buka
</span>
</li>
</ComboboxOption>
</ul> -->
<ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path" v-slot="{ active }">
<li @click="command.openMenu(menu)"
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-primary-500 text-white']">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/keluhan/')"
:is="navigationIcon[1]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/monalisa/')"
:is="navigationIcon[2]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/check-in-out/')"
:is="navigationIcon[3]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/anomali-pengaduan/')"
:is="navigationIcon[4]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
:is="navigationIcon[5]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/material/')"
:is="navigationIcon[6]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/transaksi/')"
:is="navigationIcon[7]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else :is="navigationIcon[8]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<div class="flex flex-col flex-1 ml-3 space-y-1">
<span
:class="[active ? 'text-white' : 'text-gray-800', 'text-sm font-medium line-clamp-1']">
{{ menu.name }}
</span>
<span
:class="[active ? 'text-white' : 'text-gray-500', 'text-xs line-clamp-1']">
{{ menu.path.replace('/home/', '') }}
</span>
</div>
<span v-if="active" class="flex-none ml-3 text-gray-200">
Buka
</span>
</li>
</ComboboxOption>
</ul>