From 57922e3071d80454fbe3ea46a704e6b8e0e5a64e Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 25 Aug 2023 23:30:52 +0800
Subject: [PATCH] modify style

---
 .../desktop/statistics/TransactionPage.vue     |  4 +++-
 .../user/settings/tabs/UserBasicSettingTab.vue | 14 ++++++++------
 .../tabs/UserDataManagementSettingTab.vue      | 18 +++++++++++-------
 .../tabs/UserTwoFactorAuthSettingTab.vue       |  7 ++++---
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index b0f36d0f..9d862b61 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -166,7 +166,9 @@
                                             <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" />
+                                                        <div>
+                                                            <v-icon class="disabled mr-0" size="34" :icon="icons.square" />
+                                                        </div>
                                                     </template>
                                                     <div class="d-flex flex-column ml-2">
                                                         <div class="d-flex">
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index d598bc4e..caa99cab 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -19,14 +19,16 @@
                         <v-icon size="48" :icon="icons.user" v-else-if="!oldProfile.avatar"/>
                     </v-avatar>
                     <div class="d-flex flex-column justify-center gap-5">
-                        <p class="text-body-1 mb-0">
+                        <div class="d-flex text-body-1">
                             <span class="me-1">{{ $t('Username:') }}</span>
-                            <span>{{ oldProfile.username }}</span>
-                        </p>
-                        <p class="text-body-1 mb-0">
+                            <v-skeleton-loader class="skeleton-no-margin" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
+                            <span v-if="!loading">{{ oldProfile.username }}</span>
+                        </div>
+                        <div class="d-flex text-body-1">
                             <span class="me-1">{{ $t('Avatar Provider:') }}</span>
-                            <span>{{ currentUserAvatarProvider }}</span>
-                        </p>
+                            <v-skeleton-loader class="skeleton-no-margin" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
+                            <span v-if="!loading">{{ currentUserAvatarProvider }}</span>
+                        </div>
                     </div>
                 </v-card-text>
 
diff --git a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
index fb4dab0a..51d95e8a 100644
--- a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
@@ -27,7 +27,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Transaction') }}</span>
-                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</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>
+                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -41,7 +42,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Accounts') }}</span>
-                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</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>
+                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -55,7 +57,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Transaction Categories') }}</span>
-                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</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>
+                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -69,7 +72,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Transaction Tags') }}</span>
-                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</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>
+                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -85,7 +89,7 @@
                 </v-card-text>
 
                 <v-card-text class="d-flex flex-wrap gap-4">
-                    <v-btn :disabled="exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'" @click="exportData">
+                    <v-btn :disabled="loadingDataStatistics || exportingData || !dataStatistics || !dataStatistics.totalTransactionCount || dataStatistics.totalTransactionCount === '0'" @click="exportData">
                         {{ $t('Export Data') }}
                         <v-progress-circular indeterminate size="24" class="ml-2" v-if="exportingData"></v-progress-circular>
                     </v-btn>
@@ -115,7 +119,7 @@
                                     autocomplete="current-password"
                                     clearable variant="underlined"
                                     color="error"
-                                    :disabled="clearingData"
+                                    :disabled="loadingDataStatistics || clearingData"
                                     :placeholder="$t('Current Password')"
                                     :type="isCurrentPasswordVisible ? 'text' : 'password'"
                                     :append-inner-icon="isCurrentPasswordVisible ? icons.eyeSlash : icons.eye"
@@ -128,7 +132,7 @@
                     </v-card-text>
 
                     <v-card-text class="d-flex flex-wrap gap-4">
-                        <v-btn color="error" :disabled="!currentPasswordForClearData || clearingData" @click="clearData">
+                        <v-btn color="error" :disabled="loadingDataStatistics || !currentPasswordForClearData || clearingData" @click="clearData">
                             {{ $t('Clear User Data') }}
                             <v-progress-circular indeterminate size="24" class="ml-2" v-if="clearingData"></v-progress-circular>
                         </v-btn>
diff --git a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
index 923be0b1..157e5357 100644
--- a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
@@ -8,13 +8,14 @@
                 </template>
 
                 <v-card-text class="pb-0">
-                    <p class="text-body-1 font-weight-semibold" v-if="!new2FAQRCode">
+                    <v-skeleton-loader class="skeleton-no-margin pt-2 pb-5" type="text" style="width: 150px" :loading="true" v-if="loading"></v-skeleton-loader>
+                    <p class="text-body-1 font-weight-semibold" v-if="!loading && !new2FAQRCode">
                         {{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }}
                     </p>
-                    <p class="text-body-1" v-if="new2FAQRCode">
+                    <p class="text-body-1" v-if="!loading && new2FAQRCode">
                         {{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}
                     </p>
-                    <p class="text-body-1" v-if="status === true">
+                    <p class="text-body-1" v-if="!loading && 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.') }}
                     </p>
                 </v-card-text>