TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-28 12:11:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

add dark dropdown & company switch (#1167)

Browse Source 
* add dark mode in basedropdown

* dark mod add in global search, header

* add dark mode in company switch

* indentation issue fix company switch

* fix dropdown issues

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
This commit is contained in:
Yash Kanakiya
2023-03-28 11:30:00 +05:30
committed by GitHub
parent c5acf1343e
commit f6639f5863
21 changed files with 225 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
resources/scripts/components/CompanySwitcher.vue
View File

@ -1,21 +1,23 @@
<template>
<div ref="companySwitchBar" class="relative rounded">
<div ref="companySwitchBar" class="relative rounded dark:text-white">
<CompanyModal />
<div
class="
flex
items-center
justify-center
px-3
h-8
md:h-9
ml-2
text-sm text-white
bg-white
rounded
cursor-pointer
bg-opacity-20
flex
items-center
justify-center
px-3
h-8
md:h-9
ml-2
text-sm
text-white
bg-white
rounded
cursor-pointer
bg-opacity-20
dark:bg-gray-700
"
@click="isShow = !isShow"
>
@ -38,28 +40,42 @@
>
<div
v-if="isShow"
class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
class="
absolute
right-0
mt-2
bg-white
rounded-md
shadow-lg
dark:border
dark:border-white/10
dark:text-white
dark:bg-gray-800/[.95]
dark:shadow-glass
dark:backdrop-blur-xl
"
>
<BaseDarkHighlight class="z-[-1] top-0 left-0" />
<div
class="
overflow-y-auto
scrollbar-thin scrollbar-thumb-rounded-full
w-[250px]
max-h-[350px]
scrollbar-thumb-gray-300 scrollbar-track-gray-10
pb-4
overflow-y-auto
scrollbar-thin
scrollbar-thumb-rounded-full
w-[250px] max-h-[350px]
scrollbar-thumb-gray-300
scrollbar-track-gray-10
pb-4
"
>
<label
class="
px-3
py-2
text-xs
font-semibold
text-gray-400
mb-0.5
block
uppercase
px-3
py-2
text-xs
font-semibold
text-gray-400
mb-0.5
block uppercase
"
>
{{ $t('company_switcher.label') }}
@ -68,13 +84,13 @@
<div
v-if="companyStore.companies.length < 1"
class="
flex flex-col
items-center
justify-center
p-2
px-3
mt-4
text-base text-gray-400
flex flex-col
items-center
justify-center
p-2
px-3
mt-4
text-base text-gray-400
"
>
<BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@ -86,14 +102,17 @@
v-for="(company, index) in companyStore.companies"
:key="index"
class="
p-2
px-3
rounded-md
cursor-pointer
hover:bg-gray-100 hover:text-primary-500
p-2
px-3
rounded-md
cursor-pointer
hover:bg-gray-100 hover:text-primary-500
dark:hover:bg-gray-700
text-gray-900
dark:text-white
"
:class="{
'bg-gray-100 text-primary-500':
'bg-gray-100 text-primary-500 dark:bg-gray-700':
companyStore.selectedCompany.id === company.id,
}"
@click="changeCompany(company)"
@ -101,18 +120,19 @@
<div class="flex items-center">
<span
class="
flex
items-center
justify-center
mr-3
overflow-hidden
text-base
font-semibold
bg-gray-200
rounded-md
w-9
h-9
text-primary-500
flex
items-center
justify-center
mr-3
overflow-hidden
text-sm
font-semibold
bg-gray-200
rounded-md
w-9
h-9
text-primary-500
dark:bg-gray-900
"
>
<span v-if="!company.logo">
@ -136,15 +156,17 @@
<div
v-if="userStore.currentUser.is_owner"
class="
flex
items-center
justify-center
p-4
pl-3
border-t-2 border-gray-100
cursor-pointer
text-primary-400
hover:text-primary-500
flex
items-center
justify-center
p-4
pl-3
border-t-2
border-gray-100
cursor-pointer
text-primary-400
hover:text-primary-500
dark:border-gray-600
"
@click="addNewCompany"
>

12
resources/scripts/components/GlobalSearchBar.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="searchBar" class="hidden rounded md:block relative">
<div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
<div>
<BaseInput
v-model="name"
@ -41,6 +41,11 @@
w-[300px]
h-[200px]
right-0
dark:border-white/10
dark:text-white
dark:bg-gray-800/[.95]
dark:shadow-glass
dark:backdrop-blur-xl
"
>
<div
@ -68,7 +73,7 @@
<div
v-for="(customer, index) in usersStore.customerList"
:key="index"
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
>
<router-link
:to="{ path: `/admin/customers/${customer.id}/view` }"
@ -87,6 +92,7 @@
bg-gray-200
rounded-full
text-primary-500
dark:bg-gray-600
"
>
{{ initGenerator(customer.name) }}
@ -116,7 +122,7 @@
<div
v-for="(user, index) in usersStore.userList"
:key="index"
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
>
<router-link
:to="{ path: `/admin/users/${user.id}/edit` }"

3
resources/scripts/components/base/BaseDropdown.vue
View File

@ -69,7 +69,8 @@ const props = defineProps({
})
const containerClasses = computed(() => {
const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
const baseClass = `dark:border dark:border-white/10 dark:text-white dark:bg-gray-800 dark:shadow-glass
origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
return `${baseClass} ${props.containerClass}`
})

10
resources/scripts/components/base/BaseDropdownItem.vue
View File

@ -2,16 +2,20 @@
<MenuItem v-slot="{ active }" v-bind="$attrs">
<a
href="#"
class="group flex items-center px-4 py-2 text-sm font-normal"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'group flex items-center px-4 py-2 text-sm font-normal',
active
? 'bg-gray-100 text-gray-900 dark:text-white dark:bg-gray-700'
: 'text-gray-700 dark:text-gray-200',
]"
>
<slot :active="active" />
<slot :active="active" :class="defaultIconClass" />
</a>
</MenuItem>
</template>
<script setup>
import { MenuItem } from '@headlessui/vue'
const defaultIconClass =
'w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white'
</script>