From feea5f35182c1ec79ad82c434a5b0a0a0f67f0d5 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 20 Aug 2023 16:17:04 +0800
Subject: [PATCH] modify style

---
 src/views/desktop/accounts/ListPage.vue       | 62 +++++++++++++++----
 .../desktop/statistics/TransactionPage.vue    | 57 +++++++++++++----
 2 files changed, 95 insertions(+), 24 deletions(-)

diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index bcf81ae6..8361ad0f 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -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);
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index c1eafc35..970982a6 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -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,