modify style

This commit is contained in:
MaysWind
2023-08-25 23:30:52 +08:00
parent ad36dfd448
commit 57922e3071
4 changed files with 26 additions and 17 deletions
@@ -166,7 +166,9 @@
<template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"> <template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
<v-list-item class="pl-0"> <v-list-item class="pl-0">
<template #prepend> <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> </template>
<div class="d-flex flex-column ml-2"> <div class="d-flex flex-column ml-2">
<div class="d-flex"> <div class="d-flex">
@@ -19,14 +19,16 @@
<v-icon size="48" :icon="icons.user" v-else-if="!oldProfile.avatar"/> <v-icon size="48" :icon="icons.user" v-else-if="!oldProfile.avatar"/>
</v-avatar> </v-avatar>
<div class="d-flex flex-column justify-center gap-5"> <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 class="me-1">{{ $t('Username:') }}</span>
<span>{{ oldProfile.username }}</span> <v-skeleton-loader class="skeleton-no-margin" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
</p> <span v-if="!loading">{{ oldProfile.username }}</span>
<p class="text-body-1 mb-0"> </div>
<div class="d-flex text-body-1">
<span class="me-1">{{ $t('Avatar Provider:') }}</span> <span class="me-1">{{ $t('Avatar Provider:') }}</span>
<span>{{ currentUserAvatarProvider }}</span> <v-skeleton-loader class="skeleton-no-margin" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
</p> <span v-if="!loading">{{ currentUserAvatarProvider }}</span>
</div>
</div> </div>
</v-card-text> </v-card-text>
@@ -27,7 +27,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction') }}</span> <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>
</div> </div>
</v-col> </v-col>
@@ -41,7 +42,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Accounts') }}</span> <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>
</div> </div>
</v-col> </v-col>
@@ -55,7 +57,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction Categories') }}</span> <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>
</div> </div>
</v-col> </v-col>
@@ -69,7 +72,8 @@
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction Tags') }}</span> <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>
</div> </div>
</v-col> </v-col>
@@ -85,7 +89,7 @@
</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">
<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') }} {{ $t('Export Data') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="exportingData"></v-progress-circular> <v-progress-circular indeterminate size="24" class="ml-2" v-if="exportingData"></v-progress-circular>
</v-btn> </v-btn>
@@ -115,7 +119,7 @@
autocomplete="current-password" autocomplete="current-password"
clearable variant="underlined" clearable variant="underlined"
color="error" color="error"
:disabled="clearingData" :disabled="loadingDataStatistics || clearingData"
:placeholder="$t('Current Password')" :placeholder="$t('Current Password')"
:type="isCurrentPasswordVisible ? 'text' : 'password'" :type="isCurrentPasswordVisible ? 'text' : 'password'"
:append-inner-icon="isCurrentPasswordVisible ? icons.eyeSlash : icons.eye" :append-inner-icon="isCurrentPasswordVisible ? icons.eyeSlash : icons.eye"
@@ -128,7 +132,7 @@
</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">
<v-btn color="error" :disabled="!currentPasswordForClearData || clearingData" @click="clearData"> <v-btn color="error" :disabled="loadingDataStatistics || !currentPasswordForClearData || clearingData" @click="clearData">
{{ $t('Clear User Data') }} {{ $t('Clear User Data') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="clearingData"></v-progress-circular> <v-progress-circular indeterminate size="24" class="ml-2" v-if="clearingData"></v-progress-circular>
</v-btn> </v-btn>
@@ -8,13 +8,14 @@
</template> </template>
<v-card-text class="pb-0"> <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.') }} {{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }}
</p> </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') }} {{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}
</p> </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.') }} {{ $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>