modify style
This commit is contained in:
MaysWind
@@ -7,22 +7,22 @@
|
||||
<div class="mx-6 my-4">
|
||||
<small>{{ $t('Net assets') }}</small>
|
||||
<p class="text-body-1 text-income text-truncate mt-1 mb-3">
|
||||
<span v-if="!loading">{{ netAssets }}</span>
|
||||
<span v-else-if="loading">
|
||||
<span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span>
|
||||
<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>
|
||||
</span>
|
||||
</p>
|
||||
<small>{{ $t('Total liabilities') }}</small>
|
||||
<p class="text-body-1 text-expense text-truncate mt-1 mb-3">
|
||||
<span v-if="!loading">{{ totalLiabilities }}</span>
|
||||
<span v-else-if="loading">
|
||||
<span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span>
|
||||
<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>
|
||||
</span>
|
||||
</p>
|
||||
<small>{{ $t('Total assets') }}</small>
|
||||
<p class="text-body-1 mt-1">
|
||||
<span v-if="!loading">{{ totalAssets }}</span>
|
||||
<span v-else-if="loading">
|
||||
<span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span>
|
||||
<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>
|
||||
</span>
|
||||
</p>
|
||||
@@ -34,7 +34,11 @@
|
||||
v-for="accountCategory in allAccountCategories">
|
||||
<ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
|
||||
<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>
|
||||
</div>
|
||||
</v-tab>
|
||||
@@ -93,10 +97,39 @@
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
|
||||
<div class="pl-2 pr-2 pr-md-4 mt-n4" v-if="loading && !hasAccount(activeAccountCategory)">
|
||||
<v-skeleton-loader type="paragraph" :loading="loading"
|
||||
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
|
||||
</div>
|
||||
<v-row class="pl-6 pr-6 pr-md-8" v-if="loading && !hasAccount(activeAccountCategory)">
|
||||
<v-col cols="12">
|
||||
<v-card border class="card-title-with-bg account-card mb-8 h-auto">
|
||||
<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-col cols="12">
|
||||
@@ -244,12 +277,13 @@ import {
|
||||
mdiEyeOutline,
|
||||
mdiEyeOffOutline,
|
||||
mdiRefresh,
|
||||
mdiSquareRounded,
|
||||
mdiMenu,
|
||||
mdiPencilOutline,
|
||||
mdiDeleteOutline,
|
||||
mdiListBoxOutline,
|
||||
mdiDrag,
|
||||
mdiDotsVertical,
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
@@ -272,6 +306,7 @@ export default {
|
||||
eye: mdiEyeOutline,
|
||||
eyeSlash: mdiEyeOffOutline,
|
||||
refresh: mdiRefresh,
|
||||
square: mdiSquareRounded,
|
||||
menu: mdiMenu,
|
||||
edit: mdiPencilOutline,
|
||||
show: mdiEyeOutline,
|
||||
@@ -297,6 +332,9 @@ export default {
|
||||
categorizedAccounts() {
|
||||
return this.accountsStore.allCategorizedAccounts;
|
||||
},
|
||||
allAccountCount() {
|
||||
return this.accountsStore.allAvailableAccountsCount;
|
||||
},
|
||||
netAssets() {
|
||||
const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(netAssets, this.defaultCurrency);
|
||||
|
||||
@@ -112,17 +112,17 @@
|
||||
</div>
|
||||
</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-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-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) }}
|
||||
</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 class="statistics-overview-title pt-0"
|
||||
@@ -130,7 +130,19 @@
|
||||
<span class="text-subtitle-1 statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
|
||||
</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
|
||||
:items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []"
|
||||
:min-valid-percent="0.0001"
|
||||
@@ -143,13 +155,32 @@
|
||||
percent-field="percent"
|
||||
currency-field="currency"
|
||||
hidden-field="hidden"
|
||||
v-else-if="!initing"
|
||||
@click="clickPieChartItem"
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Bar">
|
||||
<v-list rounded lines="two"
|
||||
v-if="statisticsData && statisticsData.items && statisticsData.items.length">
|
||||
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Bar">
|
||||
<v-list rounded lines="two" v-if="initing">
|
||||
<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"
|
||||
v-for="(item, idx) in statisticsData.items">
|
||||
<v-list-item class="pl-0" v-if="!item.hidden">
|
||||
@@ -234,11 +265,12 @@ import {
|
||||
mdiArrowRight,
|
||||
mdiSort,
|
||||
mdiRefresh,
|
||||
mdiSquareRounded,
|
||||
mdiMenu,
|
||||
mdiFilterOutline,
|
||||
mdiFilterCogOutline,
|
||||
mdiPencilOutline,
|
||||
mdiDotsVertical,
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
import AccountFilterSettingsCard from './settings/cards/AccountFilterSettingsCard.vue';
|
||||
@@ -267,6 +299,7 @@ export default {
|
||||
right: mdiArrowRight,
|
||||
sort: mdiSort,
|
||||
refresh: mdiRefresh,
|
||||
square: mdiSquareRounded,
|
||||
menu: mdiMenu,
|
||||
filter: mdiFilterOutline,
|
||||
filterSettings: mdiFilterCogOutline,
|
||||
|
||||
Reference in New Issue
Block a user