QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-04-21 20:24:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Facelift for v3

Browse Source
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 01:52:03 +02:00
parent eb0a588164
commit 7fbe3d85a3
11 changed files with 78 additions and 1150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/scripts/admin/layouts/partials/TheSiteHeader.vue
View File

@@ -74,9 +74,10 @@
w-8 w-8
h-8 h-8
ml-2 ml-2
text-sm text-black text-sm text-white
bg-white bg-white/20
rounded rounded-lg
hover:bg-white/30
md:h-9 md:w-9 md:h-9 md:w-9
" "
> >
@@ -143,7 +144,7 @@
<template #activator> <template #activator>
<img <img
:src="previewAvatar" :src="previewAvatar"
class="block w-8 h-8 rounded md:h-9 md:w-9 object-cover" class="block w-8 h-8 rounded-full ring-2 ring-white/30 md:h-9 md:w-9 object-cover"
/> />
</template> </template>

26
resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
View File

@@ -78,7 +78,7 @@
> >
<div <div
v-if="menu[0] && menu[0].group_label" v-if="menu[0] && menu[0].group_label"
class="px-4 pt-4 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider border-t border-gray-200" class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
> >
{{ $t(menu[0].group_label) }} {{ $t(menu[0].group_label) }}
</div> </div>
@@ -88,9 +88,9 @@
:to="item.link" :to="item.link"
:class="[ :class="[
hasActiveUrl(item.link) hasActiveUrl(item.link)
? 'text-primary-500 border-l-primary-500 bg-gray-100 ' ? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-black border-l-transparent', : 'text-gray-600 hover:bg-gray-50',
'cursor-pointer px-0 pl-4 py-3 flex items-center border-l-4 border-solid text-sm not-italic font-medium', 'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
]" ]"
@click="globalStore.setSidebarVisibility(false)" @click="globalStore.setSidebarVisibility(false)"
> >
@@ -98,9 +98,9 @@
:name="item.icon" :name="item.icon"
:class="[ :class="[
hasActiveUrl(item.link) hasActiveUrl(item.link)
? 'text-primary-500 ' ? 'text-primary-500'
: 'text-gray-400', : 'text-gray-400',
'mr-4 shrink-0 h-5 w-5', 'mr-3 shrink-0 h-5 w-5',
]" ]"
@click="globalStore.setSidebarVisibility(false)" @click="globalStore.setSidebarVisibility(false)"
/> />
@@ -138,7 +138,7 @@
> >
<div <div
v-if="menu[0] && menu[0].group_label" v-if="menu[0] && menu[0].group_label"
class="px-6 pt-4 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider border-t border-gray-200" class="px-6 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
> >
{{ $t(menu[0].group_label) }} {{ $t(menu[0].group_label) }}
</div> </div>
@@ -148,18 +148,18 @@
:to="item.link" :to="item.link"
:class="[ :class="[
hasActiveUrl(item.link) hasActiveUrl(item.link)
? 'text-primary-500 border-l-primary-500 bg-gray-100 ' ? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-black border-l-transparent', : 'text-gray-600 hover:bg-gray-50',
'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid text-sm not-italic font-medium', 'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
]" ]"
> >
<BaseIcon <BaseIcon
:name="item.icon" :name="item.icon"
:class="[ :class="[
hasActiveUrl(item.link) hasActiveUrl(item.link)
? 'text-primary-500 group-hover:text-primary-500 ' ? 'text-primary-500'
: 'text-gray-400 group-hover:text-black', : 'text-gray-400 group-hover:text-gray-600',
'mr-4 shrink-0 h-5 w-5 ', 'mr-3 shrink-0 h-5 w-5',
]" ]"
/> />

2
resources/scripts/admin/views/dashboard/DashboardChart.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<div <div
v-if="dashboardStore.isDashboardDataLoaded" v-if="dashboardStore.isDashboardDataLoaded"
class="grid grid-cols-10 mt-8 bg-white rounded shadow" class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
> >
<!-- Chart --> <!-- Chart -->
<div <div

16
resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
View File

@@ -5,22 +5,24 @@
relative relative
flex flex
justify-between justify-between
p-3 p-5
bg-white bg-white
rounded rounded-xl
shadow shadow-sm
hover:bg-gray-50 border border-gray-100
xl:p-4 hover:shadow-md
transition-shadow
xl:p-6
lg:col-span-2 lg:col-span-2
" "
:class="{ 'lg:!col-span-3': large }" :class="{ 'lg:!col-span-3': large }"
:to="route" :to="route"
> >
<div> <div>
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl"> <span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
<slot /> <slot />
</span> </span>
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg"> <span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
{{ label }} {{ label }}
</span> </span>
</div> </div>

4
resources/scripts/admin/views/dashboard/DashboardTable.vue
View File

@@ -7,7 +7,7 @@
class="due-invoices" class="due-invoices"
> >
<div class="relative z-10 flex items-center justify-between mb-3"> <div class="relative z-10 flex items-center justify-between mb-3">
<h6 class="mb-0 text-xl font-semibold leading-normal"> <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
{{ $t('dashboard.recent_invoices_card.title') }} {{ $t('dashboard.recent_invoices_card.title') }}
</h6> </h6>
@@ -57,7 +57,7 @@
class="recent-estimates" class="recent-estimates"
> >
<div class="relative z-10 flex items-center justify-between mb-3"> <div class="relative z-10 flex items-center justify-between mb-3">
<h6 class="mb-0 text-xl font-semibold leading-normal"> <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
{{ $t('dashboard.recent_estimate_card.title') }} {{ $t('dashboard.recent_estimate_card.title') }}
</h6> </h6>

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

@@ -13,8 +13,10 @@
ml-2 ml-2
text-sm text-white text-sm text-white
bg-white/20 bg-white/20
rounded rounded-lg
cursor-pointer cursor-pointer
hover:bg-white/30
transition-colors
" "
@click="isShow = !isShow" @click="isShow = !isShow"
> >

2
resources/scripts/components/base/BaseCard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="bg-white rounded-lg shadow"> <div class="bg-white rounded-xl shadow-sm border border-gray-100">
<div <div
v-if="hasHeaderSlot" v-if="hasHeaderSlot"
class="px-5 py-4 text-black border-b border-gray-100 border-solid" class="px-5 py-4 text-black border-b border-gray-100 border-solid"

1118
resources/scripts/components/base/BaseGlobalLoader.vue
View File

File diff suppressed because it is too large Load Diff

6
resources/scripts/components/base/base-table/BaseTable.vue
View File

@@ -7,9 +7,9 @@
relative relative
overflow-hidden overflow-hidden
bg-white bg-white
border-b border-gray-200 border border-gray-100
shadow shadow-sm
sm:rounded-lg rounded-xl
" "
> >
<slot name="header" /> <slot name="header" />

35
resources/scripts/components/base/base-table/BaseTablePagination.vue
View File

@@ -29,7 +29,7 @@
font-medium font-medium
text-gray-700 text-gray-700
bg-white bg-white
border border-gray-300 border border-gray-200
rounded-md rounded-md
hover:bg-gray-50 hover:bg-gray-50
" "
@@ -54,7 +54,7 @@
font-medium font-medium
text-gray-700 text-gray-700
bg-white bg-white
border border-gray-300 border border-gray-200
rounded-md rounded-md
hover:bg-gray-50 hover:bg-gray-50
" "
@@ -107,7 +107,7 @@
</div> </div>
<div> <div>
<nav <nav
class="relative z-0 inline-flex -space-x-px rounded-md shadow-xs" class="relative z-0 inline-flex -space-x-px rounded-lg shadow-sm"
aria-label="Pagination" aria-label="Pagination"
> >
<a <a
@@ -126,8 +126,8 @@
font-medium font-medium
text-gray-500 text-gray-500
bg-white bg-white
border border-gray-300 border border-gray-200
rounded-l-md rounded-l-lg
hover:bg-gray-50 hover:bg-gray-50
" "
@click="pageClicked(pagination.currentPage - 1)" @click="pageClicked(pagination.currentPage - 1)"
@@ -140,9 +140,9 @@
href="#" href="#"
aria-current="page" aria-current="page"
:class="{ :class="{
'z-10 bg-primary-50 border-primary-500 text-primary-600': 'z-10 bg-primary-500 border-primary-500 text-white':
isActive(1), isActive(1),
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50': 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
!isActive(1), !isActive(1),
}" }"
class=" class="
@@ -172,7 +172,7 @@
font-medium font-medium
text-gray-700 text-gray-700
bg-white bg-white
border border-gray-300 border border-gray-200
" "
> >
... ...
@@ -182,9 +182,9 @@
:key="page" :key="page"
href="#" href="#"
:class="{ :class="{
'z-10 bg-primary-50 border-primary-500 text-primary-600': 'z-10 bg-primary-500 border-primary-500 text-white':
isActive(page), isActive(page),
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50': 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
!isActive(page), !isActive(page),
disabled: page === '...', disabled: page === '...',
}" }"
@@ -196,10 +196,7 @@
py-2 py-2
text-sm text-sm
font-medium font-medium
text-gray-500 border
bg-white
border border-gray-300
hover:bg-gray-50
md:inline-flex md:inline-flex
" "
@click="pageClicked(page)" @click="pageClicked(page)"
@@ -219,7 +216,7 @@
font-medium font-medium
text-gray-700 text-gray-700
bg-white bg-white
border border-gray-300 border border-gray-200
" "
> >
... ...
@@ -229,9 +226,9 @@
href="#" href="#"
aria-current="page" aria-current="page"
:class="{ :class="{
'z-10 bg-primary-50 border-primary-500 text-primary-600': 'z-10 bg-primary-500 border-primary-500 text-white':
isActive(pagination.totalPages), isActive(pagination.totalPages),
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50': 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
!isActive(pagination.totalPages), !isActive(pagination.totalPages),
}" }"
class=" class="
@@ -260,8 +257,8 @@
font-medium font-medium
text-gray-500 text-gray-500
bg-white bg-white
border border-gray-300 border border-gray-200
rounded-r-md rounded-r-lg
hover:bg-gray-50 hover:bg-gray-50
" "
:class="{ :class="{

6
resources/scripts/components/list/BaseListItem.vue
View File

@@ -28,13 +28,13 @@ export default {
}, },
}, },
setup(props, { slots }) { setup(props, { slots }) {
const defaultClass = `cursor-pointer pb-2 pr-0 text-sm font-medium leading-5 flex items-center` const defaultClass = `cursor-pointer px-3 py-2 mb-0.5 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors`
let hasIconSlot = computed(() => { let hasIconSlot = computed(() => {
return !!slots.icon return !!slots.icon
}) })
let containerClass = computed(() => { let containerClass = computed(() => {
if (props.active) return `${defaultClass} text-primary-500` if (props.active) return `${defaultClass} text-primary-600 bg-primary-50 font-semibold`
else return `${defaultClass} text-gray-500` else return `${defaultClass} text-gray-600 hover:bg-gray-50 hover:text-gray-900`
}) })
return { return {
hasIconSlot, hasIconSlot,