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

optimize statistics page style

Browse Source
This commit is contained in:
MaysWind
2022-08-01 00:33:19 +08:00
parent 1977e436d6
commit fd7905833e
3 changed files with 39 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/filters/currency.js
+10 -8
View File
@@ -2,7 +2,7 @@ import currency from '../consts/currency.js';
import settings from '../lib/settings.js'; import settings from '../lib/settings.js';
import utils from '../lib/utils.js'; import utils from '../lib/utils.js';
export default function ({i18n}, value, currencyCode) { export default function ({i18n}, value, currencyCode, notConvertValue) {
if (!utils.isNumber(value) && !utils.isString(value)) { if (!utils.isNumber(value) && !utils.isString(value)) {
return value; return value;
} }
@@ -11,16 +11,18 @@ export default function ({i18n}, value, currencyCode) {
value = value.toString(); value = value.toString();
} }
const hasIncompleteFlag = utils.isString(value) && value.charAt(value.length - 1) === '+'; if (!notConvertValue) {
const hasIncompleteFlag = utils.isString(value) && value.charAt(value.length - 1) === '+';
if (hasIncompleteFlag) { if (hasIncompleteFlag) {
value = value.substr(0, value.length - 1); value = value.substr(0, value.length - 1);
} }
value = utils.numericCurrencyToString(value); value = utils.numericCurrencyToString(value);
if (hasIncompleteFlag) { if (hasIncompleteFlag) {
value = value + '+'; value = value + '+';
}
} }
const currencyDisplayMode = settings.getCurrencyDisplayMode(); const currencyDisplayMode = settings.getCurrencyDisplayMode();
src/mobile-main.js
+1 -1
View File
@@ -165,7 +165,7 @@ Vue.filter('format', (value, format) => formatFilter(value, format));
Vue.filter('optionName', (value, options, keyField, nameField, defaultName) => optionNameFilter(value, options, keyField, nameField, defaultName)); Vue.filter('optionName', (value, options, keyField, nameField, defaultName) => optionNameFilter(value, options, keyField, nameField, defaultName));
Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate)); Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate));
Vue.filter('languageName', (languageCode) => languageNameFilter(languageCode)); Vue.filter('languageName', (languageCode) => languageNameFilter(languageCode));
Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode)); Vue.filter('currency', (value, currencyCode, notConvertValue) => currencyFilter({ i18n }, value, currencyCode, notConvertValue));
Vue.filter('exchangeRate', (value, currentCurrency, allExchangeRates) => exchangeRateFilter(value, currentCurrency, allExchangeRates)); Vue.filter('exchangeRate', (value, currentCurrency, allExchangeRates) => exchangeRateFilter(value, currentCurrency, allExchangeRates));
Vue.filter('utcOffset', (value) => utcOffsetFilter(value)); Vue.filter('utcOffset', (value) => utcOffsetFilter(value));
Vue.filter('textLimit', (value, maxLength) => textLimitFilter(value, maxLength)); Vue.filter('textLimit', (value, maxLength) => textLimitFilter(value, maxLength));
src/views/mobile/statistics/Transaction.vue
+28 -25
View File
@@ -25,11 +25,11 @@
</f7-popover> </f7-popover>
<f7-card v-if="query.chartType === $constants.statistics.allChartTypes.Pie"> <f7-card v-if="query.chartType === $constants.statistics.allChartTypes.Pie">
<f7-card-header class="no-border"> <f7-card-header class="no-border display-block">
<small class="full-line text-align-right"> <div class="statistics-chart-header full-line text-align-right">
<span style="margin-right: 4px;">{{ $t('Sort By') }}</span> <span style="margin-right: 4px;">{{ $t('Sort By') }}</span>
<f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link> <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link>
</small> </div>
</f7-card-header> </f7-card-header>
<f7-card-content class="pie-chart-container" style="margin-top: -6px" :padding="false"> <f7-card-content class="pie-chart-container" style="margin-top: -6px" :padding="false">
<pie-chart <pie-chart
@@ -74,11 +74,26 @@
</f7-card> </f7-card>
<f7-card v-else-if="query.chartType === $constants.statistics.allChartTypes.Bar"> <f7-card v-else-if="query.chartType === $constants.statistics.allChartTypes.Bar">
<f7-card-header class="no-border"> <f7-card-header class="no-border display-block">
<small class="full-line text-align-right"> <div class="statistics-chart-header display-flex full-line justify-content-space-between">
<span style="margin-right: 4px;">{{ $t('Sort By') }}</span> <div>
<f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link> {{ query.chartDataType | totalAmountName(allChartDataTypes) | localized }}
</small> </div>
<div class="align-self-flex-end">
<span style="margin-right: 4px;">{{ $t('Sort By') }}</span>
<f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link>
</div>
</div>
<div class="display-flex full-line">
<div :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
<span v-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
{{ statisticsData.totalAmount | currency(defaultCurrency) | finalAmount(showAccountBalance, query.chartDataType, allChartDataTypes) }}
</span>
<span v-else-if="loading || !statisticsData || !statisticsData.items || !statisticsData.items.length">
{{ '---' | currency(defaultCurrency, true) }}
</span>
</div>
</div>
</f7-card-header> </f7-card-header>
<f7-card-content class="no-safe-areas" style="margin-top: -14px" :padding="false"> <f7-card-content class="no-safe-areas" style="margin-top: -14px" :padding="false">
<f7-list class="statistics-list-item skeleton-text" v-if="loading"> <f7-list class="statistics-list-item skeleton-text" v-if="loading">
@@ -153,15 +168,6 @@
<f7-list-item :title="$t('No transaction data')"></f7-list-item> <f7-list-item :title="$t('No transaction data')"></f7-list-item>
</f7-list> </f7-list>
<f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length"> <f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
<f7-list-item class="statistics-list-item-overview">
<div slot="header">
{{ query.chartDataType | totalAmountName(allChartDataTypes) | localized }}
</div>
<div slot="title"
:class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
{{ statisticsData.totalAmount | currency(defaultCurrency) | finalAmount(showAccountBalance, query.chartDataType, allChartDataTypes) }}
</div>
</f7-list-item>
<f7-list-item v-for="(item, idx) in statisticsData.items" :key="idx" <f7-list-item v-for="(item, idx) in statisticsData.items" :key="idx"
class="statistics-list-item" class="statistics-list-item"
:link="item | itemLinkUrl(query, allChartDataTypes)" :link="item | itemLinkUrl(query, allChartDataTypes)"
@@ -729,6 +735,10 @@ export default {
display: none; display: none;
} }
.statistics-chart-header {
font-size: var(--f7-list-item-header-font-size);
}
.statistics-pie-chart .pie-chart-text-group { .statistics-pie-chart .pie-chart-text-group {
fill: #fff; fill: #fff;
text-anchor: middle; text-anchor: middle;
@@ -755,15 +765,12 @@ export default {
transform: translateY(1.5em); transform: translateY(1.5em);
} }
.statistics-list-item-overview {
margin-bottom: 6px;
}
.statistics-list-item-overview-amount { .statistics-list-item-overview-amount {
margin-top: 2px; margin-top: 2px;
font-size: 1.5em; font-size: 1.5em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-bottom: 6px;
} }
.statistics-list-item-text { .statistics-list-item-text {
@@ -776,10 +783,6 @@ export default {
margin-bottom: 12px; margin-bottom: 12px;
} }
.statistics-list-item-overview .item-inner:after, .statistics-list-item .item-inner:after {
background-color: transparent;
}
.statistics-icon { .statistics-icon {
margin-bottom: -2px; margin-bottom: -2px;
} }