zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify overview page loading style

Browse Source
This commit is contained in:
MaysWind
2023-07-31 00:20:35 +08:00
parent 5b52c1adbb
commit cc08ad46e3
3 changed files with 66 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/HomePage.vue
+21 -15
View File
@@ -21,15 +21,17 @@
<v-card-text> <v-card-text>
<h5 class="text-2xl font-weight-medium text-primary"> <h5 class="text-2xl font-weight-medium text-primary">
{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }} <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span>
<v-btn density="compact" color="default" variant="text" <v-skeleton-loader class="d-inline-block overview-card-skeleton mt-4" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
<v-btn class="ml-1" density="compact" color="default" variant="text"
:icon="true" @click="showAmountInHomePage = !showAmountInHomePage"> :icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
<v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" /> <v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
</v-btn> </v-btn>
</h5> </h5>
<div class="mt-2 mb-3"> <div class="mt-2 mb-3">
<span class="mr-2">{{ $t('Monthly income') }}</span> <span class="mr-2">{{ $t('Monthly income') }}</span>
<span>{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span> <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
<v-skeleton-loader class="d-inline-block overview-card-skeleton" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
</div> </div>
<v-btn size="small" to="/transactions?dateType=7">{{ $t('View Details') }}</v-btn> <v-btn size="small" to="/transactions?dateType=7">{{ $t('View Details') }}</v-btn>
<v-img class="overview-card-background" src="img/desktop/card-background.png"/> <v-img class="overview-card-background" src="img/desktop/card-background.png"/>
@@ -40,10 +42,10 @@
<v-col cols="12" lg="2" md="6"> <v-col cols="12" lg="2" md="6">
<income-expense-overview-card <income-expense-overview-card
:disabled="loadingOverview" :icon="icons.calendarToday" :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
:title="$t('Today')" :title="$t('Today')"
:expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : '-'" :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
:income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : '-'" :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
:datetime="displayDateRange.today.displayTime" :datetime="displayDateRange.today.displayTime"
> >
<template #menus> <template #menus>
@@ -56,10 +58,10 @@
<v-col cols="12" lg="2" md="6"> <v-col cols="12" lg="2" md="6">
<income-expense-overview-card <income-expense-overview-card
:disabled="loadingOverview" :icon="icons.calendarWeek" :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
:title="$t('This Week')" :title="$t('This Week')"
:expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : '-'" :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
:income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : '-'" :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
:datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime" :datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
> >
<template #menus> <template #menus>
@@ -72,10 +74,10 @@
<v-col cols="12" lg="2" md="6"> <v-col cols="12" lg="2" md="6">
<income-expense-overview-card <income-expense-overview-card
:disabled="loadingOverview" :icon="icons.calendarMonth" :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
:title="$t('This Month')" :title="$t('This Month')"
:expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-'" :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
:income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-'" :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
:datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime" :datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
> >
<template #menus> <template #menus>
@@ -88,10 +90,10 @@
<v-col cols="12" lg="2" md="6"> <v-col cols="12" lg="2" md="6">
<income-expense-overview-card <income-expense-overview-card
:disabled="loadingOverview" :icon="icons.calendarYear" :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
:title="$t('This Year')" :title="$t('This Year')"
:expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : '-'" :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : ''"
:income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : '-'" :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : ''"
:datetime="displayDateRange.thisYear.displayTime" :datetime="displayDateRange.thisYear.displayTime"
> >
<template #menus> <template #menus>
@@ -308,4 +310,8 @@ export default {
inset-block-end: 0.5rem; inset-block-end: 0.5rem;
inset-inline-end: 1rem; inset-inline-end: 1rem;
} }
.overview-card-skeleton .v-skeleton-loader__text {
margin: 0;
}
</style> </style>
src/views/desktop/overview/IncomeExpenseOverviewCard.vue
+11 -4
View File
@@ -16,10 +16,10 @@
</v-btn> </v-btn>
</v-card-text> </v-card-text>
<v-card-text class="pb-2"> <v-card-text class="pb-2">
<div class="d-flex align-center mb-2"> <div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
<span class="font-weight-semibold text-truncate text-red text-h5 text-income me-2">{{ incomeAmount }}</span> <v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
</div> <div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
<span class="text-truncate text-h6 text-expense">{{ expenseAmount }}</span> <v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
</v-card-text> </v-card-text>
<v-card-text> <v-card-text>
<span class="text-caption">{{ datetime }}</span> <span class="text-caption">{{ datetime }}</span>
@@ -34,6 +34,7 @@ import {
export default { export default {
props: [ props: [
'loading',
'disabled', 'disabled',
'icon', 'icon',
'title', 'title',
@@ -50,3 +51,9 @@ export default {
} }
} }
</script> </script>
<style>
.income-expense-overview-card-skeleton .v-skeleton-loader__text {
margin: 0;
}
</style>
src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
+34 -6
View File
@@ -4,13 +4,36 @@
<span class="text-2xl font-weight-bold">{{ $t('Trend in Income and Expense') }}</span> <span class="text-2xl font-weight-bold">{{ $t('Trend in Income and Expense') }}</span>
</template> </template>
<v-card-text class="overview-monthly-chart overview-monthly-chart-no-data-tips" v-if="!loading && !hasAnyData"> <v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-if="loading && !hasAnyData">
<div class="overview-monthly-chart-skeleton-container h-100" style="margin-top: -30px">
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
</div>
</v-card-text>
<v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-else-if="!loading && !hasAnyData">
<div class="d-flex flex-column align-center justify-center w-100 h-100"> <div class="d-flex flex-column align-center justify-center w-100 h-100">
<h2 style="margin-top: -40px">{{ $t('No data') }}</h2> <h2 style="margin-top: -40px">{{ $t('No data') }}</h2>
</div> </div>
</v-card-text> </v-card-text>
<v-chart autoresize class="overview-monthly-chart" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/> <v-chart autoresize class="overview-monthly-chart-container" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
</v-card> </v-card>
</template> </template>
@@ -266,14 +289,19 @@ export default {
</script> </script>
<style> <style>
.overview-monthly-chart-no-data-tips { .overview-monthly-chart-container {
width: 100%;
height: 400px;
}
.overview-monthly-chart-overlay {
position: absolute !important; position: absolute !important;
z-index: 10; z-index: 10;
} }
.overview-monthly-chart { .overview-monthly-chart-skeleton-container {
width: 100%; display: grid;
height: 400px; grid-template-columns: repeat(6, minmax(0, 1fr));
} }
.overview-monthly-chart-tooltip-indicator { .overview-monthly-chart-tooltip-indicator {