mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-19 09:14:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify style

Browse Source
This commit is contained in:
MaysWind
2023-07-22 23:04:08 +08:00
parent 35b8d8ca25
commit 9f0657683a
11 changed files with 87 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/desktop-main.js
+3
View File
@@ -227,6 +227,9 @@ const vuetify = createVuetify({
VSnackbar: { VSnackbar: {
timeout: 3000 timeout: 3000
}, },
VTable: {
hover: true
},
VTabs: { VTabs: {
color: 'primary', color: 'primary',
VSlideGroup: { VSlideGroup: {
src/styles/desktop/global.scss
+28
View File
@@ -109,6 +109,30 @@ input[type=number] {
th { th {
background: rgb(var(--v-table-header-background)) !important; background: rgb(var(--v-table-header-background)) !important;
} }
tr:nth-child(even) {
background: #fcfcfc;
}
tr.even-row {
background: #fcfcfc;
}
tbody.has-bottom-border > tr:last-child > td {
border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
}
.v-theme--dark {
.v-table {
tr:nth-child(even) {
background: #161616;
}
tr.even-row {
background: #161616;
}
}
} }
.right-bottom-icon .v-badge__badge { .right-bottom-icon .v-badge__badge {
@@ -126,6 +150,10 @@ input[type=number] {
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
} }
.text-caption {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
.v-label { .v-label {
&:not(.v-field-label--floating) { &:not(.v-field-label--floating) {
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
src/views/desktop/AboutPage.vue
+6 -6
View File
@@ -5,26 +5,26 @@
<v-card-text> <v-card-text>
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12" md="2"> <v-col cols="12" md="2">
<span class="text-subtitle-1">{{ $t('Version') }}</span> <span class="text-body-1">{{ $t('Version') }}</span>
</v-col> </v-col>
<v-col cols="12" md="10" class="mb-6"> <v-col cols="12" md="10" class="mb-6">
<span class="text-subtitle-1">{{ version }}</span> <span class="text-body-1">{{ version }}</span>
</v-col> </v-col>
</v-row> </v-row>
<v-row no-gutters v-if="buildTime"> <v-row no-gutters v-if="buildTime">
<v-col cols="12" md="2"> <v-col cols="12" md="2">
<span class="text-subtitle-1">{{ $t('Build Time') }}</span> <span class="text-body-1">{{ $t('Build Time') }}</span>
</v-col> </v-col>
<v-col cols="12" md="10" class="mb-6"> <v-col cols="12" md="10" class="mb-6">
<span class="text-subtitle-1">{{ buildTime }}</span> <span class="text-body-1">{{ buildTime }}</span>
</v-col> </v-col>
</v-row> </v-row>
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12" md="2"> <v-col cols="12" md="2">
<span class="text-subtitle-1">{{ $t('Official Website') }}</span> <span class="text-body-1">{{ $t('Official Website') }}</span>
</v-col> </v-col>
<v-col cols="12" md="10" class="mb-6"> <v-col cols="12" md="10" class="mb-6">
<a class="text-subtitle-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank"> <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
https://github.com/mayswind/ezbookkeeping https://github.com/mayswind/ezbookkeeping
</a> </a>
</v-col> </v-col>
src/views/desktop/AccountsPage.vue
+18 -12
View File
@@ -6,24 +6,24 @@
<div> <div>
<div class="mx-6 my-4"> <div class="mx-6 my-4">
<small>{{ $t('Net assets') }}</small> <small>{{ $t('Net assets') }}</small>
<p class="text-subtitle-1 text-income mb-2"> <p class="text-body-1 text-income mt-1 mb-3">
<span v-if="!loading">{{ netAssets }}</span> <span v-if="!loading">{{ netAssets }}</span>
<span v-else-if="loading"> <span v-else-if="loading">
<v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
<small>{{ $t('Total liabilities') }}</small> <small>{{ $t('Total liabilities') }}</small>
<p class="text-subtitle-1 text-expense mb-2"> <p class="text-body-1 text-expense mt-1 mb-3">
<span v-if="!loading">{{ totalLiabilities }}</span> <span v-if="!loading">{{ totalLiabilities }}</span>
<span v-else-if="loading"> <span v-else-if="loading">
<v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
<small>{{ $t('Total assets') }}</small> <small>{{ $t('Total assets') }}</small>
<p class="text-subtitle-1"> <p class="text-body-1 mt-1">
<span v-if="!loading">{{ totalAssets }}</span> <span v-if="!loading">{{ totalAssets }}</span>
<span v-else-if="loading"> <span v-else-if="loading">
<v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
</div> </div>
@@ -116,10 +116,10 @@
<v-card border class="card-title-with-bg account-card mb-8 h-auto" v-if="showHidden || !element.hidden"> <v-card border class="card-title-with-bg account-card mb-8 h-auto" v-if="showHidden || !element.hidden">
<template #title> <template #title>
<div class="account-title d-flex align-baseline"> <div class="account-title d-flex align-baseline">
<ItemIcon icon-type="account" :icon-id="element.icon" <ItemIcon size="1.5rem" icon-type="account" :icon-id="element.icon"
:color="element.color" :hidden-status="element.hidden" /> :color="element.color" :hidden-status="element.hidden" />
<span class="account-name ml-3">{{ element.name }}</span> <span class="account-name ml-2">{{ element.name }}</span>
<small class="account-currency ml-3"> <small class="account-currency ml-2">
{{ accountCurrency(element) }} {{ accountCurrency(element) }}
</small> </small>
<v-spacer/> <v-spacer/>
@@ -147,9 +147,9 @@
<v-btn :key="subAccount.id" :value="subAccount.id" <v-btn :key="subAccount.id" :value="subAccount.id"
v-for="subAccount in element.subAccounts" v-for="subAccount in element.subAccounts"
v-show="showHidden || !subAccount.hidden"> v-show="showHidden || !subAccount.hidden">
<ItemIcon icon-type="account" :icon-id="subAccount.icon" <ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
:color="subAccount.color" :hidden-status="subAccount.hidden" /> :color="subAccount.color" :hidden-status="subAccount.hidden" />
<span class="ml-3">{{ subAccount.name }}</span> <span class="ml-2">{{ subAccount.name }}</span>
</v-btn> </v-btn>
</v-btn-toggle> </v-btn-toggle>
</div> </div>
@@ -521,7 +521,13 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.account-card > .v-card-item {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.account-card .account-title { .account-card .account-title {
font-size: 1rem;
line-height: 1.5rem !important; line-height: 1.5rem !important;
} }
@@ -545,7 +551,7 @@ export default {
} }
.account-card .account-balance { .account-card .account-balance {
font-size: 1.5rem; font-size: 1.25rem;
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
} }
</style> </style>
src/views/desktop/ExchangeRatesPage.vue
+7 -7
View File
@@ -6,19 +6,19 @@
<div> <div>
<div class="mx-6 my-4"> <div class="mx-6 my-4">
<small>{{ $t('Data source') }}</small> <small>{{ $t('Data source') }}</small>
<p class="text-subtitle-1 mb-2"> <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>
<span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span> <span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span>
<span v-else-if="loading"> <span v-else-if="loading">
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
<small v-if="exchangeRatesDataUpdateTime">{{ $t('Last Updated') }}</small> <small v-if="exchangeRatesDataUpdateTime">{{ $t('Last Updated') }}</small>
<p class="text-subtitle-1" v-if="exchangeRatesDataUpdateTime"> <p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime">
<span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span> <span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
<span v-if="loading"> <span v-if="loading">
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
</span> </span>
</p> </p>
</div> </div>
@@ -86,10 +86,10 @@
<tr :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates"> <tr :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
<td> <td>
<span>{{ exchangeRate.currencyDisplayName }}</span> <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
<small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small> <span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
</td> </td>
<td class="text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td> <td class="text-sm text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td>
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
src/views/desktop/TransactionTagsPage.vue
+13 -11
View File
@@ -8,7 +8,7 @@
<v-btn class="ml-3" color="default" variant="outlined" <v-btn class="ml-3" color="default" variant="outlined"
:disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn> :disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn>
<v-btn class="ml-3" color="primary" variant="tonal" <v-btn class="ml-3" color="primary" variant="tonal"
:disabled="loading" @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"
class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag" class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag"
@@ -61,19 +61,20 @@
item-key="id" item-key="id"
handle=".drag-handle" handle=".drag-handle"
ghost-class="dragging-item" ghost-class="dragging-item"
:class="{ 'has-bottom-border': newTag }"
:disabled="noAvailableTag" :disabled="noAvailableTag"
v-model="tags" v-model="tags"
@change="onMove"> @change="onMove">
<template #item="{ element }"> <template #item="{ element }">
<tr v-show="showHidden || !element.hidden"> <tr class="text-sm" v-if="showHidden || !element.hidden">
<td> <td>
<div class="d-flex align-center" v-if="editingTag.id !== element.id"> <div class="d-flex align-center" v-if="editingTag.id !== element.id">
<v-badge class="right-bottom-icon" color="secondary" <v-badge class="right-bottom-icon" color="secondary"
location="bottom right" offset-x="8" :icon="icons.hide" location="bottom right" offset-x="8" :icon="icons.hide"
v-if="element.hidden"> v-if="element.hidden">
<v-icon size="24" start :icon="icons.tag"/> <v-icon size="20" start :icon="icons.tag"/>
</v-badge> </v-badge>
<v-icon size="24" start :icon="icons.tag" v-else-if="!element.hidden"/> <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
{{ element.name }} {{ element.name }}
</div> </div>
<v-text-field <v-text-field
@@ -91,9 +92,9 @@
<v-badge class="right-bottom-icon" color="secondary" <v-badge class="right-bottom-icon" color="secondary"
location="bottom right" offset-x="8" :icon="icons.hide" location="bottom right" offset-x="8" :icon="icons.hide"
v-if="element.hidden"> v-if="element.hidden">
<v-icon size="24" start :icon="icons.tag"/> <v-icon size="20" start :icon="icons.tag"/>
</v-badge> </v-badge>
<v-icon size="24" start :icon="icons.tag" v-else-if="!element.hidden"/> <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
</template> </template>
</v-text-field> </v-text-field>
</td> </td>
@@ -151,14 +152,14 @@
</draggable-list> </draggable-list>
<tbody v-if="newTag"> <tbody v-if="newTag">
<tr> <tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
<td> <td>
<v-text-field type="text" color="primary" clearable <v-text-field type="text" color="primary" clearable
density="compact" variant="underlined" density="compact" variant="underlined"
:disabled="loading || updating" :placeholder="$t('Tag Title')" :disabled="loading || updating" :placeholder="$t('Tag Title')"
v-model="newTag.name" @keyup.enter="save(newTag)"> v-model="newTag.name" @keyup.enter="save(newTag)">
<template #prepend> <template #prepend>
<v-icon size="24" start :icon="icons.tag"/> <v-icon size="20" start :icon="icons.tag"/>
</template> </template>
</v-text-field> </v-text-field>
</td> </td>
@@ -462,15 +463,16 @@ export default {
} }
.transaction-tags-table .v-text-field.v-text-field--plain-underlined .v-input__prepend { .transaction-tags-table .v-text-field.v-text-field--plain-underlined .v-input__prepend {
padding-top: 10px; padding-top: 12px;
} }
.transaction-tags-table tr:last-child .v-text-field.v-text-field--plain-underlined .v-input__prepend { .transaction-tags-table tr:last-child .v-text-field.v-text-field--plain-underlined .v-input__prepend {
padding-top: 9px; padding-top: 11px;
} }
.transaction-tags-table .v-text-field .v-field__input { .transaction-tags-table .v-text-field .v-field__input {
padding-top: 2px; font-size: 0.875rem;
padding-top: 1px;
color: rgba(var(--v-theme-on-surface)); color: rgba(var(--v-theme-on-surface));
} }
</style> </style>
src/views/desktop/app/settings/AppLockSettingTab.vue
+4 -4
View File
@@ -3,10 +3,10 @@
<v-col cols="12"> <v-col cols="12">
<v-card :title="$t('Application Lock')"> <v-card :title="$t('Application Lock')">
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock"> <p class="text-body-1 font-weight-semibold" v-if="!isEnableApplicationLock">
{{ $t('Application lock is not enabled') }} {{ $t('Application lock is not enabled') }}
</p> </p>
<p class="text-subtitle-1" v-if="isEnableApplicationLock"> <p class="text-body-1" v-if="isEnableApplicationLock">
{{ $t('Application lock has been enabled') }} {{ $t('Application lock has been enabled') }}
</p> </p>
</v-card-text> </v-card-text>
@@ -22,10 +22,10 @@
</v-card-text> </v-card-text>
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock"> <p class="text-body-1 font-weight-semibold" v-if="!isEnableApplicationLock">
{{ $t('Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }} {{ $t('Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}
</p> </p>
<p class="text-subtitle-1 font-weight-semibold" v-if="isEnableApplicationLock"> <p class="text-body-1 font-weight-semibold" v-if="isEnableApplicationLock">
{{ $t('Please enter your current PIN code when disable application lock.') }} {{ $t('Please enter your current PIN code when disable application lock.') }}
</p> </p>
</v-card-text> </v-card-text>
src/views/desktop/statistics/AccountFilterSettingsCard.vue
+1 -1
View File
@@ -52,7 +52,7 @@
</div> </div>
<v-card-text v-if="!loading && !hasAnyAvailableAccount"> <v-card-text v-if="!loading && !hasAnyAvailableAccount">
<span class="text-subtitle-1">{{ $t('No available account') }}</span> <span class="text-body-1">{{ $t('No available account') }}</span>
</v-card-text> </v-card-text>
<v-card-text v-else-if="!loading && hasAnyAvailableAccount"> <v-card-text v-else-if="!loading && hasAnyAvailableAccount">
src/views/desktop/user/settings/UserDataManagementSettingTab.vue
+2 -2
View File
@@ -81,7 +81,7 @@
<v-col cols="12" v-if="isDataExportingEnabled"> <v-col cols="12" v-if="isDataExportingEnabled">
<v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')"> <v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
<v-card-text> <v-card-text>
<span class="text-subtitle-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span> <span class="text-body-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
</v-card-text> </v-card-text>
<v-card-text class="d-flex flex-wrap gap-4"> <v-card-text class="d-flex flex-wrap gap-4">
@@ -101,7 +101,7 @@
<v-form> <v-form>
<v-card-text class="py-0"> <v-card-text class="py-0">
<span class="text-subtitle-1 text-error"> <span class="text-body-1 text-error">
<v-icon :icon="icons.alert"/> <v-icon :icon="icons.alert"/>
{{ $t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please input your current password to confirm.') }} {{ $t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please input your current password to confirm.') }}
</span> </span>
src/views/desktop/user/settings/UserSecuritySettingTab.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<v-card :class="{ 'disabled': updatingPassword }" :title="$t('Modify Password')"> <v-card :class="{ 'disabled': updatingPassword }" :title="$t('Modify Password')">
<v-form> <v-form>
<v-card-text class="pt-0"> <v-card-text class="pt-0">
<span class="text-subtitle-1">{{ $t('After the password is changed, other devices will be logged out, please log in again on other devices by using the new password.') }}</span> <span class="text-body-1">{{ $t('After the password is changed, other devices will be logged out, please log in again on other devices by using the new password.') }}</span>
</v-card-text> </v-card-text>
<v-card-text> <v-card-text>
src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
+4 -4
View File
@@ -8,13 +8,13 @@
</template> </template>
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<p class="text-subtitle-1 font-weight-semibold" v-if="!new2FAQRCode"> <p class="text-body-1 font-weight-semibold" v-if="!new2FAQRCode">
{{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }} {{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }}
</p> </p>
<p class="text-subtitle-1" v-if="new2FAQRCode"> <p class="text-body-1" v-if="new2FAQRCode">
{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }} {{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}
</p> </p>
<p class="text-subtitle-1" v-if="status === true"> <p class="text-body-1" v-if="status === true">
{{ $t('Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }} {{ $t('Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}
</p> </p>
</v-card-text> </v-card-text>
@@ -91,7 +91,7 @@
</template> </template>
<v-card-text> <v-card-text>
<p class="text-subtitle-1" v-if="status === true"> <p class="text-body-1" v-if="status === true">
{{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }} {{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}
</p> </p>
<v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/> <v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/>