QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-04-18 10:44:08 +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
h-8
ml-2
text-sm text-black
bg-white
rounded
text-sm text-white
bg-white/20
rounded-lg
hover:bg-white/30
md:h-9 md:w-9
"
>
@@ -143,7 +144,7 @@
<template #activator>
<img
: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>

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

@@ -78,7 +78,7 @@
>
<div
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) }}
</div>
@@ -88,9 +88,9 @@
:to="item.link"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 border-l-primary-500 bg-gray-100 '
: 'text-black border-l-transparent',
'cursor-pointer px-0 pl-4 py-3 flex items-center border-l-4 border-solid text-sm not-italic font-medium',
? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-gray-600 hover:bg-gray-50',
'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)"
>
@@ -98,9 +98,9 @@
:name="item.icon"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 '
? 'text-primary-500'
: 'text-gray-400',
'mr-4 shrink-0 h-5 w-5',
'mr-3 shrink-0 h-5 w-5',
]"
@click="globalStore.setSidebarVisibility(false)"
/>
@@ -138,7 +138,7 @@
>
<div
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) }}
</div>
@@ -148,18 +148,18 @@
:to="item.link"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 border-l-primary-500 bg-gray-100 '
: 'text-black border-l-transparent',
'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',
? 'text-primary-600 bg-primary-50 font-semibold'
: 'text-gray-600 hover:bg-gray-50',
'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
]"
>
<BaseIcon
:name="item.icon"
:class="[
hasActiveUrl(item.link)
? 'text-primary-500 group-hover:text-primary-500 '
: 'text-gray-400 group-hover:text-black',
'mr-4 shrink-0 h-5 w-5 ',
? 'text-primary-500'
: 'text-gray-400 group-hover:text-gray-600',
'mr-3 shrink-0 h-5 w-5',
]"
/>

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

@@ -2,7 +2,7 @@
<div>
<div
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 -->
<div

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

@@ -5,22 +5,24 @@
relative
flex
justify-between
p-3
p-5
bg-white
rounded
shadow
hover:bg-gray-50
xl:p-4
rounded-xl
shadow-sm
border border-gray-100
hover:shadow-md
transition-shadow
xl:p-6
lg:col-span-2
"
:class="{ 'lg:!col-span-3': large }"
:to="route"
>
<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 />
</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 }}
</span>
</div>

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

@@ -7,7 +7,7 @@
class="due-invoices"
>
<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') }}
</h6>
@@ -57,7 +57,7 @@
class="recent-estimates"
>
<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') }}
</h6>

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

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

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

@@ -1,5 +1,5 @@
<template>
<div class="bg-white rounded-lg shadow">
<div class="bg-white rounded-xl shadow-sm border border-gray-100">
<div
v-if="hasHeaderSlot"
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
overflow-hidden
bg-white
border-b border-gray-200
shadow
sm:rounded-lg
border border-gray-100
shadow-sm
rounded-xl
"
>
<slot name="header" />

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

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

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

@@ -28,13 +28,13 @@ export default {
},
},
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(() => {
return !!slots.icon
})
let containerClass = computed(() => {
if (props.active) return `${defaultClass} text-primary-500`
else return `${defaultClass} text-gray-500`
if (props.active) return `${defaultClass} text-primary-600 bg-primary-50 font-semibold`
else return `${defaultClass} text-gray-600 hover:bg-gray-50 hover:text-gray-900`
})
return {
hasIconSlot,