zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify style

Browse Source
This commit is contained in:
MaysWind
2024-04-05 03:16:27 +08:00
parent 4a16b82700
commit 2a2cb3acc9
35 changed files with 307 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/AmountInput.vue
+11 -1
View File
@@ -8,7 +8,7 @@
:rules="enableRules ? rules : []" v-model="currentValue" :rules="enableRules ? rules : []" v-model="currentValue"
@keydown="onKeyUpDown" @keyup="onKeyUpDown"> @keydown="onKeyUpDown" @keyup="onKeyUpDown">
<template #prepend-inner v-if="currency && prependText"> <template #prepend-inner v-if="currency && prependText">
<div style="margin-top: 2px">{{ prependText }}</div> <div>{{ prependText }}</div>
</template> </template>
<template #append-inner v-if="currency && appendText"> <template #append-inner v-if="currency && appendText">
<div class="text-no-wrap">{{ appendText }}</div> <div class="text-no-wrap">{{ appendText }}</div>
@@ -71,6 +71,10 @@ export default {
finalClass += ` text-${this.color}`; finalClass += ` text-${this.color}`;
} }
if (this.currency && this.prependText) {
finalClass += ` has-pretend-text`;
}
return finalClass; return finalClass;
}, },
prependText() { prependText() {
@@ -168,3 +172,9 @@ export default {
} }
} }
</script> </script>
<style>
.text-field-with-colored-label.has-pretend-text .v-field__input {
padding-left: 0.5rem;
}
</style>
src/components/desktop/ConfirmDialog.vue
+2 -2
View File
@@ -4,8 +4,8 @@
<v-toolbar :color="finalColor"> <v-toolbar :color="finalColor">
<v-toolbar-title>{{ titleContent }}</v-toolbar-title> <v-toolbar-title>{{ titleContent }}</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-card-text v-if="textContent" class="pa-4">{{ textContent }}</v-card-text> <v-card-text v-if="textContent" class="pa-4 pb-6">{{ textContent }}</v-card-text>
<v-card-actions> <v-card-actions class="px-4 pb-4">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn> <v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
<v-btn :color="finalColor" @click="confirm">{{ $t('OK') }}</v-btn> <v-btn :color="finalColor" @click="confirm">{{ $t('OK') }}</v-btn>
src/components/desktop/DateRangeSelectionDialog.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<v-card class="pa-2 pa-sm-4 pa-md-4"> <v-card class="pa-2 pa-sm-4 pa-md-4">
<template #title> <template #title>
<div class="d-flex align-center justify-center"> <div class="d-flex align-center justify-center">
<h5 class="text-h5">{{ title }}</h5> <h4 class="text-h4">{{ title }}</h4>
</div> </div>
</template> </template>
<template #subtitle> <template #subtitle>
src/components/desktop/SwitchToMobileDialog.vue
+2 -2
View File
@@ -3,11 +3,11 @@
<v-card class="pa-2 pa-sm-4 pa-md-4"> <v-card class="pa-2 pa-sm-4 pa-md-4">
<template #title> <template #title>
<div class="d-flex align-center justify-center"> <div class="d-flex align-center justify-center">
<h5 class="text-h5">{{ $t('Use on Mobile Device') }}</h5> <h4 class="text-h4">{{ $t('Use on Mobile Device') }}</h4>
</div> </div>
</template> </template>
<template #subtitle> <template #subtitle>
<div class="text-body-1 text-center text-wrap mt-6">{{ $t('You can scan the below QR code on your mobile device.') }}</div> <div class="text-body-1 text-center text-wrap mt-4">{{ $t('You can scan the below QR code on your mobile device.') }}</div>
</template> </template>
<v-card-text class="mb-md-4"> <v-card-text class="mb-md-4">
<v-row> <v-row>
src/desktop-main.js
+23 -16
View File
@@ -190,6 +190,7 @@ const vuetify = createVuetify({
}, },
VAutocomplete: { VAutocomplete: {
variant: 'outlined', variant: 'outlined',
density: 'comfortable',
color: 'primary', color: 'primary',
hideDetails: 'auto' hideDetails: 'auto'
}, },
@@ -216,14 +217,17 @@ const vuetify = createVuetify({
color: 'primary' color: 'primary'
}, },
VPagination: { VPagination: {
density: 'comfortable',
activeColor: 'primary' activeColor: 'primary'
}, },
VRadio: { VRadio: {
density: 'comfortable',
color: 'primary', color: 'primary',
hideDetails: 'auto' hideDetails: 'auto'
}, },
VSelect: { VSelect: {
variant: 'outlined', variant: 'outlined',
density: 'comfortable',
color: 'primary', color: 'primary',
hideDetails: 'auto' hideDetails: 'auto'
}, },
@@ -232,6 +236,7 @@ const vuetify = createVuetify({
hideDetails: 'auto' hideDetails: 'auto'
}, },
VSwitch: { VSwitch: {
inset: true,
color: 'primary', color: 'primary',
hideDetails: 'auto' hideDetails: 'auto'
}, },
@@ -252,11 +257,13 @@ const vuetify = createVuetify({
}, },
VTextarea: { VTextarea: {
variant: 'outlined', variant: 'outlined',
density: 'comfortable',
color: 'primary', color: 'primary',
hideDetails: 'auto' hideDetails: 'auto'
}, },
VTextField: { VTextField: {
variant: 'outlined', variant: 'outlined',
density: 'comfortable',
color: 'primary', color: 'primary',
hideDetails: 'auto' hideDetails: 'auto'
}, },
@@ -274,22 +281,22 @@ const vuetify = createVuetify({
dark: false, dark: false,
colors: { colors: {
'primary': '#c67e48', 'primary': '#c67e48',
'primary-darken-1': '#9a6238', 'primary-darken-1': '#b67443',
'on-primary': '#ffffff', 'on-primary': '#ffffff',
'secondary': '#8a8d93', 'secondary': '#8a8d93',
'secondary-darken-1': '#545659', 'secondary-darken-1': '#545659',
'on-secondary': '#ffffff', 'on-secondary': '#ffffff',
'success': '#4cd964', 'success': '#4cd964',
'success-darken-1': '#3ba64d', 'success-darken-1': '#40b654',
'on-success': '#ffffff', 'on-success': '#ffffff',
'info': '#2196f3', 'info': '#2196f3',
'info-darken-1': '#1a74bd', 'info-darken-1': '#1e85d7',
'on-info': '#ffffff', 'on-info': '#ffffff',
'warning': '#ff9500', 'warning': '#ff9500',
'warning-darken-1': '#d07a01', 'warning-darken-1': '#de8201',
'on-warning': '#ffffff', 'on-warning': '#ffffff',
'error': '#ff3b30', 'error': '#ff3b30',
'error-darken-1': '#c73027', 'error-darken-1': '#e1342b',
'on-error': '#ffffff', 'on-error': '#ffffff',
'income': '#ff3b30', 'income': '#ff3b30',
'expense': '#009688', 'expense': '#009688',
@@ -315,7 +322,7 @@ const vuetify = createVuetify({
variables: { variables: {
'code-color': '#ff8000', 'code-color': '#ff8000',
'overlay-scrim-background': '#413935', 'overlay-scrim-background': '#413935',
'tooltip-background': '#1A0E33', 'tooltip-background': '#212121',
'overlay-scrim-opacity': 0.5, 'overlay-scrim-opacity': 0.5,
'hover-opacity': 0.04, 'hover-opacity': 0.04,
'focus-opacity': 0.1, 'focus-opacity': 0.1,
@@ -326,12 +333,12 @@ const vuetify = createVuetify({
'disabled-opacity': 0.4, 'disabled-opacity': 0.4,
'border-color': '#413f3b', 'border-color': '#413f3b',
'border-opacity': 0.12, 'border-opacity': 0.12,
'table-header-color': '#F6F7FB', 'table-header-color': '#fdfcf9',
'high-emphasis-opacity': 0.9, 'high-emphasis-opacity': 0.9,
'medium-emphasis-opacity': 0.7, 'medium-emphasis-opacity': 0.7,
// 👉 shadows // 👉 shadows
'shadow-key-umbra-color': '#2E263D', 'shadow-key-umbra-color': '#413935',
'shadow-xs-opacity': '0.16', 'shadow-xs-opacity': '0.16',
'shadow-sm-opacity': '0.18', 'shadow-sm-opacity': '0.18',
'shadow-md-opacity': '0.20', 'shadow-md-opacity': '0.20',
@@ -343,22 +350,22 @@ const vuetify = createVuetify({
dark: true, dark: true,
colors: { colors: {
'primary': '#c67e48', 'primary': '#c67e48',
'primary-darken-1': '#9a6238', 'primary-darken-1': '#b67443',
'on-primary': '#ffffff', 'on-primary': '#ffffff',
'secondary': '#8a8d93', 'secondary': '#8a8d93',
'secondary-darken-1': '#545659', 'secondary-darken-1': '#545659',
'on-secondary': '#fff', 'on-secondary': '#fff',
'success': '#4cd964', 'success': '#4cd964',
'success-darken-1': '#3ba64d', 'success-darken-1': '#40b654',
'on-success': '#ffffff', 'on-success': '#ffffff',
'info': '#2196f3', 'info': '#2196f3',
'info-darken-1': '#1a74bd', 'info-darken-1': '#1e85d7',
'on-info': '#ffffff', 'on-info': '#ffffff',
'warning': '#ff9500', 'warning': '#ff9500',
'warning-darken-1': '#d07a01', 'warning-darken-1': '#de8201',
'on-warning': '#ffffff', 'on-warning': '#ffffff',
'error': '#ff3b30', 'error': '#ff3b30',
'error-darken-1': '#c73027', 'error-darken-1': '#e1342b',
'on-error': '#ffffff', 'on-error': '#ffffff',
'income': '#ff3b30', 'income': '#ff3b30',
'expense': '#009688', 'expense': '#009688',
@@ -384,7 +391,7 @@ const vuetify = createVuetify({
variables: { variables: {
'code-color': '#ff8000', 'code-color': '#ff8000',
'overlay-scrim-background': '#1c1c1d', 'overlay-scrim-background': '#1c1c1d',
'tooltip-background': '#F7F4FF', 'tooltip-background': '#212121',
'overlay-scrim-opacity': 0.5, 'overlay-scrim-opacity': 0.5,
'hover-opacity': 0.04, 'hover-opacity': 0.04,
'focus-opacity': 0.1, 'focus-opacity': 0.1,
@@ -395,12 +402,12 @@ const vuetify = createVuetify({
'dragged-opacity': 0.1, 'dragged-opacity': 0.1,
'border-color': '#edece9', 'border-color': '#edece9',
'border-opacity': 0.12, 'border-opacity': 0.12,
'table-header-color': '#3D3759', 'table-header-color': '#312f2b',
'high-emphasis-opacity': 0.9, 'high-emphasis-opacity': 0.9,
'medium-emphasis-opacity': 0.7, 'medium-emphasis-opacity': 0.7,
// 👉 Shadows // 👉 Shadows
'shadow-key-umbra-color': '#131120', 'shadow-key-umbra-color': '#67615d',
'shadow-xs-opacity': '0.20', 'shadow-xs-opacity': '0.20',
'shadow-sm-opacity': '0.22', 'shadow-sm-opacity': '0.22',
'shadow-md-opacity': '0.24', 'shadow-md-opacity': '0.24',
src/styles/desktop/global.scss
+49 -4
View File
@@ -241,10 +241,6 @@ input[type=number] {
} }
} }
.v-btn-group--density-comfortable.v-btn-group {
height: 38px;
}
.text-field-with-colored-label.v-text-field.text-primary .v-field-label.v-label { .text-field-with-colored-label.v-text-field.text-primary .v-field-label.v-label {
color: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important; color: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important;
} }
@@ -257,6 +253,55 @@ input[type=number] {
color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important; color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important;
} }
.v-switch.v-switch--inset {
.v-switch__track {
min-width: 1.875rem !important;
}
}
body .v-tabs:not(.v-tabs-pill) {
&.v-tabs--vertical {
.v-tab__slider {
inset-inline-end: unset;
inset-inline-start: 0;
}
}
.v-tab {
&.v-tab--selected {
&.v-btn.v-btn--variant-text {
&:hover, &:active, &:focus {
.v-btn__overlay {
--v-hover-opacity: 0.04;
}
}
}
}
&:not(.v-tab--selected) {
&.v-btn.v-btn--variant-text {
&:hover, &:active, &:focus {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
.v-btn__overlay {
--v-hover-opacity: 0.04;
}
}
}
}
}
}
body .v-btn-group {
&.v-btn-group--density-comfortable {
height: 38px;
}
&.v-btn-group--divided .v-btn:not(:last-child) {
border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
}
/** Replacing the default style of @vuepic/vue-datepicker **/ /** Replacing the default style of @vuepic/vue-datepicker **/
.dp__theme_light { .dp__theme_light {
--dp-primary-color: #c67e48; --dp-primary-color: #c67e48;
src/styles/desktop/template/vuetify/_overrides.scss
+1 -1
View File
@@ -1,4 +1,4 @@
/** Materio Template Vuetify variables **/ /** Materio Template Vuetify override styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/base/utils"; @use "@/styles/desktop/template/base/utils";
src/styles/desktop/template/vuetify/index.scss
+1 -1
View File
@@ -1,4 +1,4 @@
/** Materio Template Vuetify variables **/ /** Materio Template Vuetify styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/base/libs/vuetify"; @use "@/styles/desktop/template/base/libs/vuetify";
src/views/desktop/ExchangeRatesPage.vue
+11 -10
View File
@@ -5,7 +5,7 @@
<v-layout> <v-layout>
<v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav"> <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
<div class="mx-6 my-4"> <div class="mx-6 my-4">
<small>{{ $t('Data source') }}</small> <span class="text-subtitle-2">{{ $t('Data source') }}</span>
<p class="text-body-1 mt-1 mb-3"> <p class="text-body-1 mt-1 mb-3">
<a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a> <a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
<span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span> <span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
@@ -14,23 +14,23 @@
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
<small v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</small> <span class="text-subtitle-2" v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</span>
<p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime || loading"> <p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime || loading">
<span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span> <span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
<span v-if="loading"> <span v-if="loading">
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
</div> </div>
<v-divider /> <v-divider />
<div class="mx-6 mt-4"> <div class="mx-6 mt-4">
<small>{{ $t('Base Amount') }}</small> <span class="text-subtitle-2">{{ $t('Base Amount') }}</span>
<amount-input class="mt-2" density="compact" <amount-input class="mt-2" density="compact"
:disabled="loading || !exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length" :disabled="loading || !exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length"
v-model="baseAmount"/> v-model="baseAmount"/>
</div> </div>
<div class="mx-6 mt-4"> <div class="mx-6 mt-4">
<small>{{ $t('Base Currency') }}</small> <span class="text-subtitle-2">{{ $t('Base Currency') }}</span>
</div> </div>
<v-tabs show-arrows class="mb-4" direction="vertical" <v-tabs show-arrows class="mb-4" direction="vertical"
:disabled="loading" v-model="baseCurrency" :disabled="loading" v-model="baseCurrency"
@@ -64,20 +64,21 @@
<v-icon :icon="icons.menu" size="24" /> <v-icon :icon="icons.menu" size="24" />
</v-btn> </v-btn>
<span>{{ $t('Exchange Rates Data') }}</span> <span>{{ $t('Exchange Rates Data') }}</span>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" class="ml-2" :icon="true" :loading="loading" @click="reload">
v-if="!loading" @click="reload"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
</div> </div>
</template> </template>
<v-table class="exchange-rates-table table-striped" :hover="!loading"> <v-table class="exchange-rates-table table-striped" :hover="!loading">
<thead> <thead>
<tr> <tr>
<th class="text-uppercase"> <th>
<div class="d-flex align-center"> <div class="d-flex align-center">
<span>{{ $t('Currency') }}</span> <span>{{ $t('Currency') }}</span>
<v-spacer/> <v-spacer/>
src/views/desktop/ForgetPasswordPage.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="d-flex align-center justify-center h-100"> <div class="d-flex align-center justify-center h-100">
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500"> <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text> <v-card-text>
<h5 class="text-h5 mb-3">{{ $t('Forget Password?') }}</h5> <h4 class="text-h4 mb-2">{{ $t('Forget Password?') }}</h4>
<p class="mb-0">{{ $t('Please input your email address used for registration and we\'ll send you an email with reset password link') }}</p> <p class="mb-0">{{ $t('Please input your email address used for registration and we\'ll send you an email with reset password link') }}</p>
</v-card-text> </v-card-text>
src/views/desktop/HomePage.vue
+16 -15
View File
@@ -7,31 +7,32 @@
<div class="d-flex align-baseline"> <div class="d-flex align-baseline">
<span class="text-2xl font-weight-bold">{{ displayDateRange.thisMonth.displayTime }}</span> <span class="text-2xl font-weight-bold">{{ displayDateRange.thisMonth.displayTime }}</span>
<span>·</span> <span>·</span>
<small>{{ $t('Expense') }}</small> <span style="font-size: 1rem">{{ $t('Expense') }}</span>
</div> </div>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" class="ml-2" :icon="true" :loading="loadingOverview" @click="reload(true)">
v-if="!loadingOverview" @click="reload(true)"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingOverview"></v-progress-circular>
</div> </div>
</template> </template>
<v-card-text> <v-card-text>
<h5 class="text-2xl font-weight-medium text-primary"> <h4 class="text-2xl font-weight-medium text-primary">
<span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span> <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span>
<v-skeleton-loader class="d-inline-block skeleton-no-margin mt-3 pb-1" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader> <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-3 pb-1" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
<v-btn class="ml-1" density="compact" color="default" variant="text" <v-btn class="ml-1" density="compact" color="default" variant="text"
:icon="true" @click="showAmountInHomePage = !showAmountInHomePage"> :icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
<v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" /> <v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
</v-btn> </v-btn>
</h5> </h4>
<div class="mt-2 mb-3"> <div class="mt-1 mb-3">
<span class="mr-2">{{ $t('Monthly income') }}</span> <span class="mr-2">{{ $t('Monthly income') }}</span>
<span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span> <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
<v-skeleton-loader class="d-inline-block skeleton-no-margin mt-1" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader> <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
</div> </div>
<v-btn size="small" to="/transaction/list?dateType=7">{{ $t('View Details') }}</v-btn> <v-btn size="small" to="/transaction/list?dateType=7">{{ $t('View Details') }}</v-btn>
<v-img class="overview-card-background" src="img/desktop/card-background.png"/> <v-img class="overview-card-background" src="img/desktop/card-background.png"/>
@@ -47,10 +48,10 @@
</template> </template>
<v-card-text> <v-card-text>
<h6 class="text-sm font-weight-medium mb-6"> <div class="mb-8">
<span v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span> <span class="text-body-1" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
<v-skeleton-loader class="skeleton-no-margin mt-1 mb-2 pb-1" width="200px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-1 mb-2 pb-1" width="200px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</h6> </div>
<v-row> <v-row>
<v-col cols="12" md="4"> <v-col cols="12" md="4">
@@ -63,7 +64,7 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Total assets') }}</span> <span class="text-caption">{{ $t('Total assets') }}</span>
<span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span> <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span>
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</div> </div>
</div> </div>
@@ -79,7 +80,7 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Total liabilities') }}</span> <span class="text-caption">{{ $t('Total liabilities') }}</span>
<span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span> <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span>
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</div> </div>
</div> </div>
@@ -95,7 +96,7 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Net assets') }}</span> <span class="text-caption">{{ $t('Net assets') }}</span>
<span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span> <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span>
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</div> </div>
</div> </div>
src/views/desktop/LoginPage.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="d-flex align-center justify-center h-100"> <div class="d-flex align-center justify-center h-100">
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500"> <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text> <v-card-text>
<h5 class="text-h5 mb-3">{{ $t('Welcome to ezBookkeeping') }}</h5> <h4 class="text-h4 mb-2">{{ $t('Welcome to ezBookkeeping') }}</h4>
<p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p> <p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
</v-card-text> </v-card-text>
src/views/desktop/MainLayout.vue
+8 -4
View File
@@ -15,7 +15,7 @@
:options="{ wheelPropagation: false }" :options="{ wheelPropagation: false }"
@ps-scroll-y="handleNavScroll" @ps-scroll-y="handleNavScroll"
> >
<li class="nav-link"> <li class="nav-link home-link">
<router-link to="/"> <router-link to="/">
<v-icon class="nav-item-icon" :icon="icons.overview"/> <v-icon class="nav-item-icon" :icon="icons.overview"/>
<span class="nav-item-title">{{ $t('Overview') }}</span> <span class="nav-item-title">{{ $t('Overview') }}</span>
@@ -119,7 +119,7 @@
<v-list> <v-list>
<v-list-item> <v-list-item>
<template #prepend> <template #prepend>
<v-list-item-action start> <v-list-item-action>
<v-avatar color="primary" variant="tonal"> <v-avatar color="primary" variant="tonal">
<v-img :src="currentUserAvatar" v-if="currentUserAvatar"> <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
<template #placeholder> <template #placeholder>
@@ -322,7 +322,11 @@ export default {
<style> <style>
.main-logo { .main-logo {
width: 1.8em; width: 1.75rem;
height: 1.8em; height: 1.75rem;
}
.nav-link.home-link > a:not(.router-link-exact-active):hover::before {
opacity: calc(var(--v-hover-opacity)* var(--v-theme-overlay-multiplier));
} }
</style> </style>
src/views/desktop/ResetPasswordPage.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="d-flex align-center justify-center h-100"> <div class="d-flex align-center justify-center h-100">
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500"> <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text> <v-card-text>
<h5 class="text-h5 mb-3">{{ $t('Reset Password') }}</h5> <h4 class="text-h4 mb-2">{{ $t('Reset Password') }}</h4>
<p class="mb-0">{{ $t('Please input your email address again, and input the new password.') }}</p> <p class="mb-0">{{ $t('Please input your email address again, and input the new password.') }}</p>
</v-card-text> </v-card-text>
src/views/desktop/SignupPage.vue
+5 -6
View File
@@ -25,7 +25,7 @@
<v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep"> <v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep">
<v-form> <v-form>
<v-window-item value="basicSetting"> <v-window-item value="basicSetting">
<h5 class="text-h5 mb-1">{{ $t('Basic Information') }}</h5> <h4 class="text-h4 mb-1">{{ $t('Basic Information') }}</h4>
<p class="text-sm mt-2 mb-5"> <p class="text-sm mt-2 mb-5">
<span>{{ $t('Already have an account?') }}</span> <span>{{ $t('Already have an account?') }}</span>
<router-link class="ml-1" to="/login">{{ $t('Click here to log in') }}</router-link> <router-link class="ml-1" to="/login">{{ $t('Click here to log in') }}</router-link>
@@ -145,13 +145,12 @@
</v-window-item> </v-window-item>
<v-window-item value="presetCategories" class="signup-preset-categories"> <v-window-item value="presetCategories" class="signup-preset-categories">
<h5 class="text-h5 mb-1">{{ $t('Preset Categories') }}</h5> <h4 class="text-h4 mb-1">{{ $t('Preset Categories') }}</h4>
<p class="text-sm mt-2 mb-5">{{ $t('Set Whether You Use The Preset Transaction Categories') }}</p> <p class="text-sm mt-2 mb-5">{{ $t('Set Whether You Use The Preset Transaction Categories') }}</p>
<v-row class="mb-5"> <v-row>
<v-col cols="12" sm="6"> <v-col cols="12" sm="6">
<v-switch inset <v-switch :disabled="submitting || navigateToHomePage"
:disabled="submitting || navigateToHomePage"
:label="$t('Use Preset Transaction Categories')" :label="$t('Use Preset Transaction Categories')"
v-model="usePresetCategories"/> v-model="usePresetCategories"/>
</v-col> </v-col>
@@ -208,7 +207,7 @@
</v-window-item> </v-window-item>
<v-window-item value="finalResult" v-if="finalResultMessage"> <v-window-item value="finalResult" v-if="finalResultMessage">
<h5 class="text-h5 mb-1">{{ $t('Registration Complete') }}</h5> <h4 class="text-h4 mb-1">{{ $t('Registration Complete') }}</h4>
<p class="my-5">{{ finalResultMessage }}</p> <p class="my-5">{{ finalResultMessage }}</p>
</v-window-item> </v-window-item>
</v-form> </v-form>
src/views/desktop/UnlockPage.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="d-flex align-center justify-center h-100"> <div class="d-flex align-center justify-center h-100">
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500"> <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text> <v-card-text>
<h5 class="text-h5 mb-3">{{ $t('Unlock Application') }}</h5> <h4 class="text-h4 mb-2">{{ $t('Unlock Application') }}</h4>
<p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p> <p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p>
<p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p> <p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p>
</v-card-text> </v-card-text>
src/views/desktop/VerifyEmailPage.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="d-flex align-center justify-center h-100"> <div class="d-flex align-center justify-center h-100">
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500"> <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
<v-card-text> <v-card-text>
<h5 class="text-h5 mb-3">{{ $t('Verify your email') }}</h5> <h4 class="text-h4 mb-2">{{ $t('Verify your email') }}</h4>
<p class="mb-0" v-if="token && loading">{{ $t('Verifying...') }}</p> <p class="mb-0" v-if="token && loading">{{ $t('Verifying...') }}</p>
<p class="mb-0" v-if="token && verified">{{ $t('Email has been verified') }}</p> <p class="mb-0" v-if="token && verified">{{ $t('Email has been verified') }}</p>
<p class="mb-0" v-if="token && !verified && errorMessage">{{ errorMessage }}</p> <p class="mb-0" v-if="token && !verified && errorMessage">{{ errorMessage }}</p>
src/views/desktop/accounts/ListPage.vue
+51 -12
View File
@@ -5,22 +5,22 @@
<v-layout> <v-layout>
<v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav"> <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
<div class="mx-6 my-4"> <div class="mx-6 my-4">
<small>{{ $t('Net assets') }}</small> <span class="text-subtitle-2">{{ $t('Net assets') }}</span>
<p class="text-body-1 text-income text-truncate mt-1 mb-3"> <p class="account-statistic-item-value text-income text-truncate mt-1 mb-3">
<span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span> <span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span>
<span v-else-if="loading && allAccountCount <= 0"> <span v-else-if="loading && allAccountCount <= 0">
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
<small>{{ $t('Total liabilities') }}</small> <span class="text-subtitle-2">{{ $t('Total liabilities') }}</span>
<p class="text-body-1 text-expense text-truncate mt-1 mb-3"> <p class="account-statistic-item-value text-expense text-truncate mt-1 mb-3">
<span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span> <span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span>
<span v-else-if="loading && allAccountCount <= 0"> <span v-else-if="loading && allAccountCount <= 0">
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
<small>{{ $t('Total assets') }}</small> <span class="text-subtitle-2">{{ $t('Total assets') }}</span>
<p class="text-body-1 mt-1"> <p class="account-statistic-item-value mt-1">
<span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span> <span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span>
<span v-else-if="loading && allAccountCount <= 0"> <span v-else-if="loading && allAccountCount <= 0">
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
@@ -35,7 +35,7 @@
<ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" /> <ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
<div class="d-flex flex-column text-truncate ml-2"> <div class="d-flex flex-column text-truncate ml-2">
<small class="text-truncate text-left smaller" v-if="!loading || allAccountCount > 0">{{ accountCategoryTotalBalance(accountCategory) }}</small> <small class="text-truncate text-left smaller" v-if="!loading || allAccountCount > 0">{{ accountCategoryTotalBalance(accountCategory) }}</small>
<small class="text-truncate text-left smaller" v-else-if="loading && allAccountCount <= 0"> <small class="text-truncate text-left smaller my-1" v-else-if="loading && allAccountCount <= 0">
<v-skeleton-loader class="skeleton-no-margin" <v-skeleton-loader class="skeleton-no-margin"
width="100px" height="16" type="text" :loading="true"></v-skeleton-loader> width="100px" height="16" type="text" :loading="true"></v-skeleton-loader>
</small> </small>
@@ -60,13 +60,14 @@
<v-btn class="ml-3" color="primary" variant="tonal" <v-btn class="ml-3" color="primary" variant="tonal"
:disabled="loading" @click="saveSortResult" :disabled="loading" @click="saveSortResult"
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn> v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :disabled="loading" class="ml-2" :icon="true" :loading="loading" @click="reload">
v-if="!loading" @click="reload"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading" :icon="true"> :disabled="loading" :icon="true">
@@ -86,7 +87,7 @@
</template> </template>
<v-card-text class="accounts-overview-title text-truncate pt-0"> <v-card-text class="accounts-overview-title text-truncate pt-0">
<span class="text-subtitle-1">{{ $t('Balance') }}</span> <span class="accounts-overview-subtitle">{{ $t('Balance') }}</span>
<v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && !hasAccount(activeAccountCategory)"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && !hasAccount(activeAccountCategory)"></v-skeleton-loader>
<span class="accounts-overview-amount ml-3" v-else-if="!loading || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span> <span class="accounts-overview-amount ml-3" v-else-if="!loading || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span>
<v-btn class="ml-2" density="compact" color="default" variant="text" <v-btn class="ml-2" density="compact" color="default" variant="text"
@@ -603,6 +604,10 @@ export default {
</script> </script>
<style> <style>
.account-statistic-item-value {
font-size: 1rem;
}
.account-category-tabs .v-tab.v-tab.v-btn { .account-category-tabs .v-tab.v-tab.v-btn {
height: calc(var(--v-tabs-height) * 1.5); height: calc(var(--v-tabs-height) * 1.5);
} }
@@ -621,6 +626,11 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.accounts-overview-subtitle {
font-size: 1rem;
line-height: 1.75rem;
}
.account-card > .v-card-item { .account-card > .v-card-item {
padding-top: 0.875rem; padding-top: 0.875rem;
padding-bottom: 0.875rem; padding-bottom: 0.875rem;
@@ -645,6 +655,35 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.account-card .account-subaccounts.v-btn-toggle {
height: auto !important;
padding: 0;
border: none;
}
.account-card .account-subaccounts.v-btn-toggle > .v-btn {
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
.account-card .account-subaccounts.v-btn-toggle > .v-btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
.account-card .account-subaccounts.v-btn-toggle > .v-btn:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.account-card .account-subaccounts.v-btn-toggle > .v-btn {
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.account-card .account-subaccounts.v-btn-toggle button.v-btn {
width: auto !important;
}
.account-card .account-toolbar { .account-card .account-toolbar {
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
src/views/desktop/accounts/list/dialogs/EditDialog.vue
+3 -3
View File
@@ -4,7 +4,7 @@
<template #title> <template #title>
<div class="d-flex align-center justify-center"> <div class="d-flex align-center justify-center">
<div class="d-flex w-100 align-center justify-center"> <div class="d-flex w-100 align-center justify-center">
<h5 class="text-h5">{{ $t(title) }}</h5> <h4 class="text-h4">{{ $t(title) }}</h4>
<v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular> <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
</div> </div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true" <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
@@ -20,7 +20,7 @@
</v-btn> </v-btn>
</div> </div>
</template> </template>
<v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4"> <v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
<div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts"> <div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
<v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex"> <v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
<v-tab :value="-1"> <v-tab :value="-1">
@@ -147,7 +147,7 @@
/> />
</v-col> </v-col>
<v-col class="py-0" cols="12" md="12" v-if="editAccountId"> <v-col class="py-0" cols="12" md="12" v-if="editAccountId">
<v-switch inset :disabled="loading || submitting" <v-switch :disabled="loading || submitting"
:label="$t('Visible')" v-model="selectedAccount.visible"/> :label="$t('Visible')" v-model="selectedAccount.visible"/>
</v-col> </v-col>
</v-row> </v-row>
src/views/desktop/app/AppSettingsPage.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab"> <v-tabs show-arrows v-model="activeTab">
<v-tab value="basicSetting" @click="pushRouter('basicSetting')"> <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
<v-icon size="20" start :icon="icons.basicSetting"/> <v-icon size="20" start :icon="icons.basicSetting"/>
{{ $t('Basic') }} {{ $t('Basic') }}
src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
+2 -3
View File
@@ -12,11 +12,10 @@
</v-card-text> </v-card-text>
<v-card-text v-if="isEnableApplicationLock"> <v-card-text v-if="isEnableApplicationLock">
<v-switch inset :disabled="true" <v-switch :disabled="true"
:label="$t('Unlock By PIN Code')" :label="$t('Unlock By PIN Code')"
v-model="isEnableApplicationLock"/> v-model="isEnableApplicationLock"/>
<v-switch inset <v-switch class="mt-2" :label="$t('Unlock By WebAuthn')"
:label="$t('Unlock By WebAuthn')"
:loading="enablingWebAuthn" :loading="enablingWebAuthn"
v-model="isEnableApplicationLockWebAuthn"/> v-model="isEnableApplicationLockWebAuthn"/>
</v-card-text> </v-card-text>
src/views/desktop/categories/ListPage.vue
+6 -5
View File
@@ -45,13 +45,14 @@
<v-btn class="ml-3" color="primary" variant="tonal" <v-btn class="ml-3" color="primary" variant="tonal"
:disabled="loading || updating" @click="saveSortResult" :disabled="loading || updating" @click="saveSortResult"
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn> v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :disabled="loading || updating" class="ml-2" :icon="true" :loading="loading || updating" @click="reload">
v-if="!loading" @click="reload"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading || updating" :icon="true"> :disabled="loading || updating" :icon="true">
@@ -73,7 +74,7 @@
<v-table class="transaction-category-table table-striped" :hover="!loading"> <v-table class="transaction-category-table table-striped" :hover="!loading">
<thead> <thead>
<tr> <tr>
<th class="text-uppercase"> <th>
<div class="d-flex align-center"> <div class="d-flex align-center">
<span>{{ $t('Category Name') }}</span> <span>{{ $t('Category Name') }}</span>
<v-spacer/> <v-spacer/>
src/views/desktop/categories/list/dialogs/EditDialog.vue
+4 -4
View File
@@ -3,12 +3,12 @@
<v-card class="pa-2 pa-sm-4 pa-md-8"> <v-card class="pa-2 pa-sm-4 pa-md-8">
<template #title> <template #title>
<div class="d-flex align-center justify-center"> <div class="d-flex align-center justify-center">
<h5 class="text-h5">{{ $t(title) }}</h5> <h4 class="text-h4">{{ $t(title) }}</h4>
<v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular> <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
</div> </div>
</template> </template>
<v-card-text> <v-card-text class="pt-0">
<v-form class="mt-2 mt-md-6"> <v-form class="mt-md-6">
<v-row> <v-row>
<v-col cols="12" md="12"> <v-col cols="12" md="12">
<v-text-field <v-text-field
@@ -47,7 +47,7 @@
/> />
</v-col> </v-col>
<v-col class="py-0" cols="12" md="12" v-if="editCategoryId"> <v-col class="py-0" cols="12" md="12" v-if="editCategoryId">
<v-switch inset :disabled="loading || submitting" <v-switch :disabled="loading || submitting"
:label="$t('Visible')" v-model="category.visible"/> :label="$t('Visible')" v-model="category.visible"/>
</v-col> </v-col>
</v-row> </v-row>
src/views/desktop/categories/list/dialogs/PresetDialog.vue
+2 -2
View File
@@ -3,10 +3,10 @@
<v-card class="pa-2 pa-sm-4 pa-md-8"> <v-card class="pa-2 pa-sm-4 pa-md-8">
<template #title> <template #title>
<div class="d-flex align-center justify-center"> <div class="d-flex align-center justify-center">
<h5 class="text-h5">{{ $t('Default Categories') }}</h5> <h4 class="text-h4">{{ $t('Default Categories') }}</h4>
</div> </div>
</template> </template>
<v-card-text class="preset-transaction-categories mt-0 mt-sm-2 mt-md-4 pb-4"> <v-card-text class="preset-transaction-categories mt-sm-2 mt-md-4 pt-0">
<template :key="categoryType" v-for="(categories, categoryType) in allPresetCategories"> <template :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
<div class="d-flex align-center mb-1"> <div class="d-flex align-center mb-1">
<h4>{{ getCategoryTypeName(categoryType) }}</h4> <h4>{{ getCategoryTypeName(categoryType) }}</h4>
src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
+5 -5
View File
@@ -4,7 +4,7 @@
<v-avatar color="secondary" size="38"> <v-avatar color="secondary" size="38">
<v-icon size="24" :icon="icon" /> <v-icon size="24" :icon="icon" />
</v-avatar> </v-avatar>
<span class="text-base font-weight-bold ml-3">{{ title }}</span> <span class="font-weight-bold ml-3">{{ title }}</span>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"> <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true">
<v-icon :icon="icons.more" /> <v-icon :icon="icons.more" />
@@ -15,11 +15,11 @@
</v-menu> </v-menu>
</v-btn> </v-btn>
</v-card-text> </v-card-text>
<v-card-text class="mt-1 pb-2"> <v-card-text class="mt-1 pb-1">
<div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div> <div class="font-weight-semibold text-truncate text-red text-h4 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
<v-skeleton-loader class="skeleton-no-margin mt-4 mb-7" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mt-4 mb-7" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
<div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div> <div class="text-truncate text-h5 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
<v-skeleton-loader class="skeleton-no-margin mb-2" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin mb-1" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
</v-card-text> </v-card-text>
<v-card-text class="mt-6"> <v-card-text class="mt-6">
<span class="text-caption">{{ datetime }}</span> <span class="text-caption">{{ datetime }}</span>
src/views/desktop/statistics/TransactionPage.vue
+15 -9
View File
@@ -11,7 +11,7 @@
</div> </div>
<v-divider /> <v-divider />
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'"> <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
<small>{{ $t('Chart Type') }}</small> <span class="text-subtitle-2">{{ $t('Chart Type') }}</span>
<v-select <v-select
item-title="name" item-title="name"
item-value="type" item-value="type"
@@ -31,7 +31,7 @@
</v-select> </v-select>
</div> </div>
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'"> <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
<small>{{ $t('Sort By') }}</small> <span class="text-subtitle-2">{{ $t('Sort By') }}</span>
<v-select <v-select
item-title="name" item-title="name"
item-value="type" item-value="type"
@@ -103,13 +103,14 @@
@click="shiftDateRange(query.startTime, query.endTime, 1)"/> @click="shiftDateRange(query.startTime, query.endTime, 1)"/>
</v-btn-group> </v-btn-group>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :disabled="loading" class="ml-2" :icon="true" :loading="loading" @click="reload">
v-if="!loading" @click="reload"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading" :icon="true"> :disabled="loading" :icon="true">
@@ -134,7 +135,7 @@
<v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }" <v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }"
v-if="initing || (statisticsData && statisticsData.items && statisticsData.items.length)"> v-if="initing || (statisticsData && statisticsData.items && statisticsData.items.length)">
<span class="text-subtitle-1">{{ totalAmountName }}</span> <span class="statistics-subtitle">{{ totalAmountName }}</span>
<span class="statistics-overview-amount ml-3" <span class="statistics-overview-amount ml-3"
:class="statisticsTextColor" :class="statisticsTextColor"
v-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length"> v-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
@@ -147,7 +148,7 @@
<v-card-text class="statistics-overview-title pt-0" <v-card-text class="statistics-overview-title pt-0"
v-else-if="!initing && (!statisticsData || !statisticsData.items || !statisticsData.items.length)"> v-else-if="!initing && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
<span class="text-subtitle-1 statistics-overview-empty-tip">{{ $t('No transaction data') }}</span> <span class="statistics-subtitle statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
</v-card-text> </v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Pie"> <v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Pie">
@@ -203,7 +204,7 @@
<v-divider v-if="itemIdx < 3"/> <v-divider v-if="itemIdx < 3"/>
</template> </template>
</v-list> </v-list>
<v-list rounded lines="two" v-else-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length"> <v-list class="py-0" rounded lines="two" v-else-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
<template :key="idx" <template :key="idx"
v-for="(item, idx) in statisticsData.items"> v-for="(item, idx) in statisticsData.items">
<v-list-item class="pl-0" v-if="!item.hidden"> <v-list-item class="pl-0" v-if="!item.hidden">
@@ -660,6 +661,11 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.statistics-subtitle {
font-size: 1rem;
line-height: 1.75rem
}
.statistics-overview-empty-tip { .statistics-overview-empty-tip {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important; color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
} }
src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
+6 -1
View File
@@ -3,7 +3,7 @@
<template #title> <template #title>
<div class="d-flex align-center justify-center" v-if="dialogMode"> <div class="d-flex align-center justify-center" v-if="dialogMode">
<div class="w-100 text-center"> <div class="w-100 text-center">
<h5 class="text-h5">{{ $t(title) }}</h5> <h4 class="text-h4">{{ $t(title) }}</h4>
</div> </div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading || !hasAnyAvailableAccount" :icon="true"> :disabled="loading || !hasAnyAvailableAccount" :icon="true">
@@ -307,4 +307,9 @@ export default {
.account-categories .v-expansion-panel-text__wrapper { .account-categories .v-expansion-panel-text__wrapper {
padding: 0 0 0 20px; padding: 0 0 0 20px;
} }
.account-categories .v-expansion-panel--active:not(:first-child),
.account-categories .v-expansion-panel--active + .v-expansion-panel {
margin-top: 1rem;
}
</style> </style>
src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
+6 -1
View File
@@ -3,7 +3,7 @@
<template #title> <template #title>
<div class="d-flex align-center justify-center" v-if="dialogMode"> <div class="d-flex align-center justify-center" v-if="dialogMode">
<div class="w-100 text-center"> <div class="w-100 text-center">
<h5 class="text-h5">{{ $t(title) }}</h5> <h4 class="text-h4">{{ $t(title) }}</h4>
</div> </div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading || !hasAnyAvailableCategory" :icon="true"> :disabled="loading || !hasAnyAvailableCategory" :icon="true">
@@ -327,5 +327,10 @@ export default {
.category-types .v-expansion-panel-text__wrapper { .category-types .v-expansion-panel-text__wrapper {
padding: 0 0 0 20px; padding: 0 0 0 20px;
} }
.category-types .v-expansion-panel--active:not(:first-child),
.category-types .v-expansion-panel--active + .v-expansion-panel {
margin-top: 1rem;
}
</style> </style>
src/views/desktop/tags/ListPage.vue
+26 -8
View File
@@ -10,13 +10,15 @@
<v-btn class="ml-3" color="primary" variant="tonal" <v-btn class="ml-3" color="primary" variant="tonal"
:disabled="loading || updating || hasEditingTag" @click="saveSortResult" :disabled="loading || updating || hasEditingTag" @click="saveSortResult"
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn> v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag" class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag"
v-if="!loading" @click="reload"> :loading="loading" @click="reload">
<template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading || updating || hasEditingTag" :icon="true"> :disabled="loading || updating || hasEditingTag" :icon="true">
@@ -38,7 +40,7 @@
<v-table class="transaction-tags-table table-striped" :hover="!loading"> <v-table class="transaction-tags-table table-striped" :hover="!loading">
<thead> <thead>
<tr> <tr>
<th class="text-uppercase"> <th>
<div class="d-flex align-center"> <div class="d-flex align-center">
<span>{{ $t('Tag Title') }}</span> <span>{{ $t('Tag Title') }}</span>
<v-spacer/> <v-spacer/>
@@ -81,7 +83,7 @@
<v-icon size="20" start :icon="icons.tag"/> <v-icon size="20" start :icon="icons.tag"/>
</v-badge> </v-badge>
<v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/> <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
<span>{{ element.name }}</span> <span class="transaction-tag-name">{{ element.name }}</span>
</div> </div>
<v-text-field class="w-100 mr-2" type="text" <v-text-field class="w-100 mr-2" type="text"
@@ -470,7 +472,19 @@ export default {
} }
.transaction-tags-table tr.transaction-tags-table-row-tag:hover .hover-display { .transaction-tags-table tr.transaction-tags-table-row-tag:hover .hover-display {
display: grid; display: inline-grid;
}
.transaction-tags-table tr:not(:last-child) > td > div {
padding-bottom: 1px;
}
.transaction-tags-table .has-bottom-border tr:last-child > td > div {
padding-bottom: 1px;
}
.transaction-tags-table tr.transaction-tags-table-row-tag .right-bottom-icon .v-badge__badge {
padding-bottom: 1px;
} }
.transaction-tags-table .v-text-field .v-input__prepend { .transaction-tags-table .v-text-field .v-input__prepend {
@@ -483,7 +497,7 @@ export default {
} }
.transaction-tags-table .v-text-field.v-input--plain-underlined .v-input__prepend { .transaction-tags-table .v-text-field.v-input--plain-underlined .v-input__prepend {
padding-top: 6px; padding-top: 10px;
} }
.transaction-tags-table .v-text-field .v-field__input { .transaction-tags-table .v-text-field .v-field__input {
@@ -492,7 +506,11 @@ export default {
color: rgba(var(--v-theme-on-surface)); color: rgba(var(--v-theme-on-surface));
} }
.transaction-tags-table tr:last-child .v-text-field .v-field__input { .transaction-tags-table .transaction-tag-name {
font-size: 0.875rem;
}
.transaction-tags-table tr .v-text-field .v-field__input {
padding-bottom: 1px; padding-bottom: 1px;
} }
src/views/desktop/transactions/ListPage.vue
+15 -14
View File
@@ -15,7 +15,7 @@
</div> </div>
<v-divider /> <v-divider />
<div class="mx-6 mt-4"> <div class="mx-6 mt-4">
<small>{{ $t('Transactions Per Page') }}</small> <span class="text-subtitle-2">{{ $t('Transactions Per Page') }}</span>
<v-select class="mt-2" density="compact" :disabled="loading" <v-select class="mt-2" density="compact" :disabled="loading"
:items="[ 5, 10, 15, 20, 25, 30, 50 ]" :items="[ 5, 10, 15, 20, 25, 30, 50 ]"
v-model="countPerPage" v-model="countPerPage"
@@ -42,13 +42,14 @@
<span>{{ $t('Transaction List') }}</span> <span>{{ $t('Transaction List') }}</span>
<v-btn class="ml-3" color="default" variant="outlined" <v-btn class="ml-3" color="default" variant="outlined"
:disabled="loading || !canAddTransaction" @click="add">{{ $t('Add') }}</v-btn> :disabled="loading || !canAddTransaction" @click="add">{{ $t('Add') }}</v-btn>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :disabled="loading" class="ml-2" :icon="true" :loading="loading" @click="reload">
v-if="!loading" @click="reload"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
<v-spacer/> <v-spacer/>
<div class="transaction-keyword-filter ml-2"> <div class="transaction-keyword-filter ml-2">
<v-text-field density="compact" :disabled="loading" <v-text-field density="compact" :disabled="loading"
@@ -72,13 +73,13 @@
</span> </span>
<span class="text-body-1 transaction-list-datetime-range-text ml-2" <span class="text-body-1 transaction-list-datetime-range-text ml-2"
v-else-if="query.minTime || query.maxTime"> v-else-if="query.minTime || query.maxTime">
<v-btn class="mr-1" size="small" <v-btn class="mr-1" size="x-small"
density="comfortable" color="default" variant="outlined" density="compact" color="default" variant="outlined"
:icon="icons.arrowLeft" :disabled="loading" :icon="icons.arrowLeft" :disabled="loading"
@click="shiftDateRange(query.minTime, query.maxTime, -1)"/> @click="shiftDateRange(query.minTime, query.maxTime, -1)"/>
<span class="text-sm">{{ `${queryMinTime} - ${queryMaxTime}` }}</span> <span class="text-sm">{{ `${queryMinTime} - ${queryMaxTime}` }}</span>
<v-btn class="ml-1" size="small" <v-btn class="ml-1" size="x-small"
density="comfortable" color="default" variant="outlined" density="compact" color="default" variant="outlined"
:icon="icons.arrowRight" :disabled="loading" :icon="icons.arrowRight" :disabled="loading"
@click="shiftDateRange(query.minTime, query.maxTime, 1)"/> @click="shiftDateRange(query.minTime, query.maxTime, 1)"/>
</span> </span>
@@ -105,8 +106,8 @@
<v-table class="transaction-table" :hover="!loading"> <v-table class="transaction-table" :hover="!loading">
<thead> <thead>
<tr> <tr>
<th class="transaction-table-column-time text-uppercase">{{ $t('Time') }}</th> <th class="transaction-table-column-time">{{ $t('Time') }}</th>
<th class="transaction-table-column-category text-uppercase"> <th class="transaction-table-column-category">
<v-menu ref="categoryFilterMenu" class="transaction-category-menu" <v-menu ref="categoryFilterMenu" class="transaction-category-menu"
eager location="bottom" max-height="500" eager location="bottom" max-height="500"
:disabled="query.type === 1" :disabled="query.type === 1"
@@ -191,8 +192,8 @@
</v-list> </v-list>
</v-menu> </v-menu>
</th> </th>
<th class="transaction-table-column-amount text-uppercase">{{ $t('Amount') }}</th> <th class="transaction-table-column-amount">{{ $t('Amount') }}</th>
<th class="transaction-table-column-account text-uppercase"> <th class="transaction-table-column-account">
<v-menu ref="accountFilterMenu" class="transaction-account-menu" <v-menu ref="accountFilterMenu" class="transaction-account-menu"
eager location="bottom" max-height="500" eager location="bottom" max-height="500"
@update:model-value="scrollAccountMenuToSelectedItem"> @update:model-value="scrollAccountMenuToSelectedItem">
@@ -235,7 +236,7 @@
</v-list> </v-list>
</v-menu> </v-menu>
</th> </th>
<th class="transaction-table-column-description text-uppercase">{{ $t('Description') }}</th> <th class="transaction-table-column-description">{{ $t('Description') }}</th>
</tr> </tr>
</thead> </thead>
src/views/desktop/transactions/list/dialogs/EditDialog.vue
+2 -2
View File
@@ -4,7 +4,7 @@
<template #title> <template #title>
<div class="d-flex align-center justify-center"> <div class="d-flex align-center justify-center">
<div class="d-flex w-100 align-center justify-center"> <div class="d-flex w-100 align-center justify-center">
<h5 class="text-h5">{{ $t(title) }}</h5> <h4 class="text-h4">{{ $t(title) }}</h4>
<v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular> <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
</div> </div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true" <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
@@ -36,7 +36,7 @@
</v-btn> </v-btn>
</div> </div>
</template> </template>
<v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4"> <v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
<div class="mb-4"> <div class="mb-4">
<v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': mode !== 'add' }" <v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': mode !== 'add' }"
:disabled="loading || submitting" v-model="transaction.type"> :disabled="loading || submitting" v-model="transaction.type">
src/views/desktop/user/UserSettingsPage.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab"> <v-tabs show-arrows v-model="activeTab">
<v-tab value="basicSetting" @click="pushRouter('basicSetting')"> <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
<v-icon size="20" start :icon="icons.basicSetting"/> <v-icon size="20" start :icon="icons.basicSetting"/>
{{ $t('Basic') }} {{ $t('Basic') }}
src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+13 -12
View File
@@ -5,13 +5,14 @@
<template #title> <template #title>
<div class="d-flex align-center"> <div class="d-flex align-center">
<span>{{ $t('Data Management') }}</span> <span>{{ $t('Data Management') }}</span>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" class="ml-2" :icon="true" :loading="loadingDataStatistics" @click="reloadUserDataStatistics(true)">
v-if="!loadingDataStatistics" @click="reloadUserDataStatistics(true)"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingDataStatistics"></v-progress-circular>
</div> </div>
</template> </template>
@@ -27,8 +28,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction') }}</span> <span class="text-caption">{{ $t('Transaction') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span> <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
</div> </div>
</div> </div>
</v-col> </v-col>
@@ -42,8 +43,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Accounts') }}</span> <span class="text-caption">{{ $t('Accounts') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span> <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
</div> </div>
</div> </div>
</v-col> </v-col>
@@ -57,8 +58,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction Categories') }}</span> <span class="text-caption">{{ $t('Transaction Categories') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span> <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
</div> </div>
</div> </div>
</v-col> </v-col>
@@ -72,8 +73,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction Tags') }}</span> <span class="text-caption">{{ $t('Transaction Tags') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader> <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span> <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
</div> </div>
</div> </div>
</v-col> </v-col>
src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
+9 -8
View File
@@ -77,23 +77,24 @@
<template #title> <template #title>
<div class="d-flex align-center"> <div class="d-flex align-center">
<span>{{ $t('Device & Sessions') }}</span> <span>{{ $t('Device & Sessions') }}</span>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" class="ml-2" :icon="true" :loading="loadingSession" @click="reloadSessions">
v-if="!loadingSession" @click="reloadSessions"> <template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" /> <v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn> </v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingSession"></v-progress-circular>
</div> </div>
</template> </template>
<v-table class="table-striped text-no-wrap" :hover="!loadingSession"> <v-table class="table-striped text-no-wrap" :hover="!loadingSession">
<thead> <thead>
<tr> <tr>
<th class="text-uppercase">{{ $t('Type') }}</th> <th>{{ $t('Type') }}</th>
<th class="text-uppercase">{{ $t('Device Info') }}</th> <th>{{ $t('Device Info') }}</th>
<th class="text-uppercase">{{ $t('Last Activity Time') }}</th> <th>{{ $t('Last Activity Time') }}</th>
<th class="text-uppercase text-right"> <th class="text-right">
<v-btn density="comfortable" color="error" variant="tonal" <v-btn density="comfortable" color="error" variant="tonal"
:disabled="sessions.length < 2 || loadingSession" :disabled="sessions.length < 2 || loadingSession"
@click="revokeAllSessions"> @click="revokeAllSessions">
src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
+5 -1
View File
@@ -84,7 +84,7 @@
<template #title> <template #title>
<span>{{ $t('Backup Code') }}</span> <span>{{ $t('Backup Code') }}</span>
<v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon" <v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
density="compact" color="default" variant="text" density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true"> class="ml-2" :icon="true">
<v-icon :icon="icons.copy" size="20" /> <v-icon :icon="icons.copy" size="20" />
<v-tooltip activator="parent">{{ $t('Copy') }}</v-tooltip> <v-tooltip activator="parent">{{ $t('Copy') }}</v-tooltip>
@@ -349,4 +349,8 @@ export default {
.backup-code { .backup-code {
font-family: monospace; font-family: monospace;
} }
.backup-code textarea {
resize: none;
}
</style> </style>