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
2023-08-20 16:17:04 +08:00
parent 04e580b40f
commit feea5f3518
2 changed files with 95 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/accounts/ListPage.vue
+50 -12
View File
@@ -7,22 +7,22 @@
<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-body-1 text-income text-truncate mt-1 mb-3"> <p class="text-body-1 text-income text-truncate mt-1 mb-3">
<span v-if="!loading">{{ netAssets }}</span> <span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span>
<span v-else-if="loading"> <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> <small>{{ $t('Total liabilities') }}</small>
<p class="text-body-1 text-expense text-truncate mt-1 mb-3"> <p class="text-body-1 text-expense text-truncate mt-1 mb-3">
<span v-if="!loading">{{ totalLiabilities }}</span> <span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span>
<span v-else-if="loading"> <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> <small>{{ $t('Total assets') }}</small>
<p class="text-body-1 mt-1"> <p class="text-body-1 mt-1">
<span v-if="!loading">{{ totalAssets }}</span> <span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span>
<span v-else-if="loading"> <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>
@@ -34,7 +34,11 @@
v-for="accountCategory in allAccountCategories"> v-for="accountCategory in allAccountCategories">
<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">{{ 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">
<v-skeleton-loader class="skeleton-no-margin"
width="100px" height="16" type="text" :loading="true"></v-skeleton-loader>
</small>
<span class="text-truncate text-left">{{ $t(accountCategory.name) }}</span> <span class="text-truncate text-left">{{ $t(accountCategory.name) }}</span>
</div> </div>
</v-tab> </v-tab>
@@ -93,10 +97,39 @@
</v-btn> </v-btn>
</v-card-text> </v-card-text>
<div class="pl-2 pr-2 pr-md-4 mt-n4" v-if="loading && !hasAccount(activeAccountCategory)"> <v-row class="pl-6 pr-6 pr-md-8" v-if="loading && !hasAccount(activeAccountCategory)">
<v-skeleton-loader type="paragraph" :loading="loading" <v-col cols="12">
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader> <v-card border class="card-title-with-bg account-card mb-8 h-auto">
</div> <template #title>
<div class="account-title d-flex align-center">
<v-icon class="disabled mr-0" size="28px" :icon="icons.square" />
<span class="account-name text-truncate ml-2">
<v-skeleton-loader class="skeleton-no-margin my-1"
width="120px" type="text" :loading="true"></v-skeleton-loader>
</span>
<v-spacer/>
<span class="align-self-center">
<v-icon class="disabled" :icon="icons.drag"/>
</span>
</div>
</template>
<v-divider/>
<v-card-text>
<div class="d-flex account-toolbar align-center">
<v-btn class="px-2" density="comfortable" color="default" variant="text"
:disabled="true" :prepend-icon="icons.transactions">
{{ $t('Transaction List') }}
</v-btn>
<v-spacer/>
<span class="account-balance ml-2">
<v-skeleton-loader class="skeleton-no-margin"
width="100px" type="text" :loading="true"></v-skeleton-loader>
</span>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row class="pl-5 pr-2 pr-md-4" v-if="!loading && !hasAccount(activeAccountCategory)"> <v-row class="pl-5 pr-2 pr-md-4" v-if="!loading && !hasAccount(activeAccountCategory)">
<v-col cols="12"> <v-col cols="12">
@@ -244,12 +277,13 @@ import {
mdiEyeOutline, mdiEyeOutline,
mdiEyeOffOutline, mdiEyeOffOutline,
mdiRefresh, mdiRefresh,
mdiSquareRounded,
mdiMenu, mdiMenu,
mdiPencilOutline, mdiPencilOutline,
mdiDeleteOutline, mdiDeleteOutline,
mdiListBoxOutline, mdiListBoxOutline,
mdiDrag, mdiDrag,
mdiDotsVertical, mdiDotsVertical
} from '@mdi/js'; } from '@mdi/js';
export default { export default {
@@ -272,6 +306,7 @@ export default {
eye: mdiEyeOutline, eye: mdiEyeOutline,
eyeSlash: mdiEyeOffOutline, eyeSlash: mdiEyeOffOutline,
refresh: mdiRefresh, refresh: mdiRefresh,
square: mdiSquareRounded,
menu: mdiMenu, menu: mdiMenu,
edit: mdiPencilOutline, edit: mdiPencilOutline,
show: mdiEyeOutline, show: mdiEyeOutline,
@@ -297,6 +332,9 @@ export default {
categorizedAccounts() { categorizedAccounts() {
return this.accountsStore.allCategorizedAccounts; return this.accountsStore.allCategorizedAccounts;
}, },
allAccountCount() {
return this.accountsStore.allAvailableAccountsCount;
},
netAssets() { netAssets() {
const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance); const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
return this.getDisplayCurrency(netAssets, this.defaultCurrency); return this.getDisplayCurrency(netAssets, this.defaultCurrency);
src/views/desktop/statistics/TransactionPage.vue
+45 -12
View File
@@ -112,17 +112,17 @@
</div> </div>
</template> </template>
<div v-if="initing">
<v-skeleton-loader type="paragraph" :loading="initing"
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4 ]"></v-skeleton-loader>
</div>
<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="text-subtitle-1">{{ totalAmountName }}</span>
<span class="statistics-overview-amount ml-3" :class="statisticsTextColor"> <span class="statistics-overview-amount ml-3"
:class="statisticsTextColor"
v-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }} {{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }}
</span> </span>
<v-skeleton-loader class="skeleton-no-margin ml-3 mb-2"
width="120px" type="text" :loading="true"
v-else-if="initing"></v-skeleton-loader>
</v-card-text> </v-card-text>
<v-card-text class="statistics-overview-title pt-0" <v-card-text class="statistics-overview-title pt-0"
@@ -130,7 +130,19 @@
<span class="text-subtitle-1 statistics-overview-empty-tip">{{ $t('No transaction data') }}</span> <span class="text-subtitle-1 statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
</v-card-text> </v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Pie"> <v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Pie">
<pie-chart
:items="[
{id: '1', name: '---', value: 60, color: '7c7c7f'},
{id: '2', name: '---', value: 20, color: 'a5a5aa'},
{id: '3', name: '---', value: 20, color: 'c5c5c9'}
]"
id-field="id"
name-field="name"
value-field="value"
color-field="color"
v-if="initing"
></pie-chart>
<pie-chart <pie-chart
:items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []" :items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []"
:min-valid-percent="0.0001" :min-valid-percent="0.0001"
@@ -143,13 +155,32 @@
percent-field="percent" percent-field="percent"
currency-field="currency" currency-field="currency"
hidden-field="hidden" hidden-field="hidden"
v-else-if="!initing"
@click="clickPieChartItem" @click="clickPieChartItem"
/> />
</v-card-text> </v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Bar"> <v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Bar">
<v-list rounded lines="two" <v-list rounded lines="two" v-if="initing">
v-if="statisticsData && statisticsData.items && statisticsData.items.length"> <template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
<v-list-item class="pl-0">
<template #prepend>
<v-icon class="disabled mr-0" size="34" :icon="icons.square" />
</template>
<div class="d-flex flex-column ml-2">
<div class="d-flex">
<v-skeleton-loader class="skeleton-no-margin my-2"
width="120px" type="text" :loading="true"></v-skeleton-loader>
</div>
<div>
<v-progress-linear :model-value="0" :height="4"></v-progress-linear>
</div>
</div>
</v-list-item>
<v-divider v-if="itemIdx < 3"/>
</template>
</v-list>
<v-list 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">
@@ -234,11 +265,12 @@ import {
mdiArrowRight, mdiArrowRight,
mdiSort, mdiSort,
mdiRefresh, mdiRefresh,
mdiSquareRounded,
mdiMenu, mdiMenu,
mdiFilterOutline, mdiFilterOutline,
mdiFilterCogOutline, mdiFilterCogOutline,
mdiPencilOutline, mdiPencilOutline,
mdiDotsVertical, mdiDotsVertical
} from '@mdi/js'; } from '@mdi/js';
import AccountFilterSettingsCard from './settings/cards/AccountFilterSettingsCard.vue'; import AccountFilterSettingsCard from './settings/cards/AccountFilterSettingsCard.vue';
@@ -267,6 +299,7 @@ export default {
right: mdiArrowRight, right: mdiArrowRight,
sort: mdiSort, sort: mdiSort,
refresh: mdiRefresh, refresh: mdiRefresh,
square: mdiSquareRounded,
menu: mdiMenu, menu: mdiMenu,
filter: mdiFilterOutline, filter: mdiFilterOutline,
filterSettings: mdiFilterCogOutline, filterSettings: mdiFilterCogOutline,