support setting app font size
This commit is contained in:
MaysWind
+200
-11
@@ -13,7 +13,7 @@ import { mapStores } from 'pinia';
|
||||
import { useTokensStore } from '@/stores/token.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
|
||||
|
||||
import { isModalShowing } from '@/lib/ui.mobile.js';
|
||||
import { isModalShowing, setAppFontSize } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -110,6 +110,8 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setAppFontSize(this.$settings.getFontSize());
|
||||
|
||||
f7ready((f7) => {
|
||||
this.isDarkMode = f7.darkMode;
|
||||
this.setThemeColorMeta(f7.darkMode);
|
||||
@@ -215,7 +217,7 @@ body {
|
||||
}
|
||||
|
||||
.smaller {
|
||||
font-size: 10px;
|
||||
font-size: var(--ebk-smaller-font-size);
|
||||
}
|
||||
|
||||
.readonly {
|
||||
@@ -258,13 +260,204 @@ body {
|
||||
}
|
||||
|
||||
i.icon.la, i.icon.las, i.icon.lab {
|
||||
font-size: 28px;
|
||||
font-size: var(--ebk-icon-font-size);
|
||||
}
|
||||
|
||||
.ios .searchbar-disable-button {
|
||||
font-size: var(--f7-searchbar-disable-button-font-size);
|
||||
}
|
||||
|
||||
.chip.chip-placeholder {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/** multiple font size **/
|
||||
:root {
|
||||
--ebk-icon-font-size: 28px;
|
||||
--ebk-icon-text-margin: 2px;
|
||||
--ebk-hide-icon-font-size: 18px;
|
||||
--ebk-big-icon-button-size: 42px;
|
||||
--ebk-right-bottom-icon-font-size: 13px;
|
||||
--ebk-list-item-checked-icon-font-size: 20px;
|
||||
--ebk-smaller-font-size: 10px;
|
||||
--ebk-large-footer-font-size: 13px;
|
||||
--ebk-sheet-title-font-size: 18px;
|
||||
--ebk-numpad-value-height: 50px;
|
||||
--ebk-numpad-value-small-font-size: 20px;
|
||||
--ebk-numpad-value-normal-font-size: 22px;
|
||||
--ebk-numpad-value-large-font-size: 24px;
|
||||
--ebk-numpad-normal-button-font-size: 28px;
|
||||
--ebk-numpad-confirm-button-font-size: 20px;
|
||||
--ebk-amount-small-font-size: 32px;
|
||||
--ebk-amount-normal-font-size: 36px;
|
||||
--ebk-amount-large-font-size: 40px;
|
||||
--ebk-pie-chart-toolbox-percentage-height: 30px;
|
||||
--ebk-pie-chart-toolbox-percentage-font-size: 18px;
|
||||
--ebk-pie-chart-toolbox-text-font-size: 16px;
|
||||
--ebk-account-list-group-title-height: 36px;
|
||||
--ebk-transaction-date-width: 25px;
|
||||
--ebk-transaction-day-font-size: 16px;
|
||||
--ebk-transaction-day-of-week-font-size: 12px;
|
||||
--ebk-license-popup-title-font-size: 30px;
|
||||
}
|
||||
|
||||
:root.font-large {
|
||||
font-size: 17px;
|
||||
--f7-font-size: 17px;
|
||||
--f7-navbar-font-size: 20px;
|
||||
--f7-searchbar-input-font-size: 20px;
|
||||
--f7-searchbar-disable-button-font-size: 20px;
|
||||
--f7-toolbar-font-size: 20px;
|
||||
--f7-tabbar-icon-size: 30px;
|
||||
--f7-toolbar-height: 60px;
|
||||
--f7-tabbar-icons-height: 60px;
|
||||
--f7-tabbar-label-font-size: 17px;
|
||||
--f7-label-font-size: 16px;
|
||||
--f7-input-font-size: 20px;
|
||||
--f7-button-font-size: 18px;
|
||||
--f7-button-small-font-size: 15px;
|
||||
--f7-button-large-font-size: 20px;
|
||||
--f7-chip-font-size: 16px;
|
||||
--f7-block-title-font-size: 20px;
|
||||
--f7-block-font-size: 20px;
|
||||
--f7-block-footer-font-size: 15px;
|
||||
--f7-card-header-font-size: 20px;
|
||||
--f7-list-group-title-font-size: 22px;
|
||||
--f7-list-item-header-font-size: 16px;
|
||||
--f7-list-item-title-font-size: 20px;
|
||||
--f7-list-item-text-font-size: 17px;
|
||||
--f7-list-font-size: 20px;
|
||||
--f7-list-item-after-font-size: 20px;
|
||||
--f7-list-item-footer-font-size: 15px;
|
||||
--f7-list-button-font-size: 20px;
|
||||
--f7-treeview-label-font-size: 20px;
|
||||
--f7-swipeout-button-font-size: 20px;
|
||||
--f7-dialog-title-font-size: 20px;
|
||||
--f7-dialog-font-size: 17px;
|
||||
--f7-dialog-button-font-size: 20px;
|
||||
--f7-actions-button-font-size: 22px;
|
||||
--ebk-icon-font-size: 32px;
|
||||
--ebk-icon-text-margin: 4px;
|
||||
--ebk-hide-icon-font-size: 24px;
|
||||
--ebk-big-icon-button-size: 52px;
|
||||
--ebk-right-bottom-icon-font-size: 15px;
|
||||
--ebk-list-item-checked-icon-font-size: 24px;
|
||||
--ebk-smaller-font-size: 14px;
|
||||
--ebk-large-footer-font-size: 16px;
|
||||
--ebk-sheet-title-font-size: 22px;
|
||||
--ebk-numpad-value-height: 60px;
|
||||
--ebk-numpad-value-small-font-size: 22px;
|
||||
--ebk-numpad-value-normal-font-size: 26px;
|
||||
--ebk-numpad-value-large-font-size: 30px;
|
||||
--ebk-numpad-normal-button-font-size: 32px;
|
||||
--ebk-numpad-confirm-button-font-size: 22px;
|
||||
--ebk-amount-small-font-size: 32px;
|
||||
--ebk-amount-normal-font-size: 36px;
|
||||
--ebk-amount-large-font-size: 40px;
|
||||
--ebk-pie-chart-toolbox-percentage-height: 30px;
|
||||
--ebk-pie-chart-toolbox-percentage-font-size: 22px;
|
||||
--ebk-pie-chart-toolbox-text-font-size: 20px;
|
||||
--ebk-account-list-group-title-height: 40px;
|
||||
--ebk-transaction-date-width: 32px;
|
||||
--ebk-transaction-day-font-size: 20px;
|
||||
--ebk-transaction-day-of-week-font-size: 15px;
|
||||
--ebk-license-popup-title-font-size: 36px;
|
||||
}
|
||||
|
||||
:root.font-extra-large {
|
||||
font-size: 21px;
|
||||
--f7-font-size: 21px;
|
||||
--f7-navbar-font-size: 24px;
|
||||
--f7-searchbar-input-font-size: 24px;
|
||||
--f7-searchbar-disable-button-font-size: 24px;
|
||||
--f7-toolbar-font-size: 24px;
|
||||
--f7-tabbar-icon-size: 30px;
|
||||
--f7-toolbar-height: 66px;
|
||||
--f7-tabbar-icons-height: 66px;
|
||||
--f7-tabbar-label-font-size: 21px;
|
||||
--f7-label-font-size: 20px;
|
||||
--f7-label-height: 22px;
|
||||
--f7-input-font-size: 24px;
|
||||
--f7-input-height: 60px;
|
||||
--f7-button-font-size: 22px;
|
||||
--f7-button-small-font-size: 19px;
|
||||
--f7-button-large-font-size: 24px;
|
||||
--f7-button-height: 32px;
|
||||
--f7-chip-font-size: 20px;
|
||||
--f7-block-title-font-size: 24px;
|
||||
--f7-block-title-line-height: 26px;
|
||||
--f7-block-font-size: 24px;
|
||||
--f7-block-footer-font-size: 19px;
|
||||
--f7-card-header-font-size: 24px;
|
||||
--f7-list-group-title-font-size: 26px;
|
||||
--f7-list-group-title-height: 48px;
|
||||
--f7-list-item-header-font-size: 20px;
|
||||
--f7-list-item-title-font-size: 24px;
|
||||
--f7-list-item-text-font-size: 21px;
|
||||
--f7-list-font-size: 24px;
|
||||
--f7-list-item-after-font-size: 24px;
|
||||
--f7-list-item-footer-font-size: 19px;
|
||||
--f7-list-button-font-size: 24px;
|
||||
--f7-list-item-min-height: 54px;
|
||||
--f7-treeview-label-font-size: 24px;
|
||||
--f7-swipeout-button-font-size: 24px;
|
||||
--f7-dialog-title-font-size: 24px;
|
||||
--f7-dialog-font-size: 21px;
|
||||
--f7-dialog-button-font-size: 24px;
|
||||
--f7-actions-button-font-size: 26px;
|
||||
--ebk-icon-font-size: 36px;
|
||||
--ebk-icon-text-margin: 4px;
|
||||
--ebk-hide-icon-font-size: 28px;
|
||||
--ebk-big-icon-button-size: 58px;
|
||||
--ebk-right-bottom-icon-font-size: 19px;
|
||||
--ebk-list-item-checked-icon-font-size: 28px;
|
||||
--ebk-smaller-font-size: 18px;
|
||||
--ebk-large-footer-font-size: 20px;
|
||||
--ebk-sheet-title-font-size: 26px;
|
||||
--ebk-numpad-value-height: 60px;
|
||||
--ebk-numpad-value-small-font-size: 26px;
|
||||
--ebk-numpad-value-normal-font-size: 26px;
|
||||
--ebk-numpad-value-large-font-size: 30px;
|
||||
--ebk-numpad-normal-button-font-size: 32px;
|
||||
--ebk-numpad-confirm-button-font-size: 26px;
|
||||
--ebk-amount-small-font-size: 34px;
|
||||
--ebk-amount-normal-font-size: 40px;
|
||||
--ebk-amount-large-font-size: 44px;
|
||||
--ebk-pie-chart-toolbox-percentage-height: 30px;
|
||||
--ebk-pie-chart-toolbox-percentage-font-size: 26px;
|
||||
--ebk-pie-chart-toolbox-text-font-size: 24px;
|
||||
--ebk-account-list-group-title-height: 44px;
|
||||
--ebk-transaction-date-width: 40px;
|
||||
--ebk-transaction-day-font-size: 24px;
|
||||
--ebk-transaction-day-of-week-font-size: 19px;
|
||||
--ebk-license-popup-title-font-size: 40px;
|
||||
}
|
||||
|
||||
/** custom class **/
|
||||
.ebk-small-amount {
|
||||
--f7-list-item-title-font-size: var(--ebk-amount-small-font-size) !important;
|
||||
}
|
||||
|
||||
.ebk-normal-amount {
|
||||
--f7-list-item-title-font-size: var(--ebk-amount-normal-font-size) !important;
|
||||
}
|
||||
|
||||
.ebk-large-amount {
|
||||
--f7-list-item-title-font-size: var(--ebk-amount-large-font-size) !important;
|
||||
}
|
||||
|
||||
.ebk-list-item-error-info div.item-footer {
|
||||
color: var(--f7-input-error-text-color)
|
||||
}
|
||||
|
||||
.ebk-sheet-title {
|
||||
font-size: var(--ebk-sheet-title-font-size);
|
||||
}
|
||||
|
||||
.ebk-hide-icon {
|
||||
font-size: var(--ebk-hide-icon-font-size);
|
||||
}
|
||||
|
||||
/** Replacing the default style of @vuepic/vue-datepicker **/
|
||||
.dp__theme_light {
|
||||
--dp-primary-color: #c67e48;
|
||||
@@ -426,7 +619,7 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
}
|
||||
|
||||
.list .item-content .list-item-checked-icon {
|
||||
font-size: 20px;
|
||||
font-size: var(--ebk-list-item-checked-icon-font-size);
|
||||
color: var(--f7-radio-active-color, var(--f7-theme-color));
|
||||
margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
|
||||
}
|
||||
@@ -439,10 +632,6 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ebk-list-item-error-info div.item-footer {
|
||||
color: var(--f7-input-error-text-color)
|
||||
}
|
||||
|
||||
.skeleton-text .list-item-toggle .item-after {
|
||||
height: var(--f7-toggle-height);
|
||||
}
|
||||
@@ -472,9 +661,9 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
}
|
||||
|
||||
.badge.right-bottom-icon > .icon {
|
||||
font-size: 13px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
font-size: var(--ebk-right-bottom-icon-font-size);
|
||||
width: var(--ebk-right-bottom-icon-font-size);
|
||||
height: var(--ebk-right-bottom-icon-font-size);
|
||||
}
|
||||
|
||||
/** Swipe handler **/
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top" v-if="hint">{{ hint }}</p>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content class="margin-top no-padding-top">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half" v-if="hint">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</f7-page-content>
|
||||
<f7-page-content class="no-margin-top no-padding-top" v-else-if="!knownMapProvider">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Unsupported Map Provider') }}</b></div>
|
||||
<div class="ebk-sheet-title"><b>{{ $t('Unsupported Map Provider') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin">{{ $t('Please refresh the page and try again. If the error is still displayed, make sure that server map settings are set correctly.') }}</p>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content class="margin-top no-padding-top">
|
||||
<div class="numpad-values">
|
||||
<span class="numpad-value" :style="{ fontSize: currentDisplayFontSize + 'px' }">{{ currentDisplay }}</span>
|
||||
<span class="numpad-value" :class="currentDisplayNumClass">{{ currentDisplay }}</span>
|
||||
</div>
|
||||
<div class="numpad-buttons">
|
||||
<f7-button class="numpad-button numpad-button-num" @click="inputNum(7)">
|
||||
@@ -97,15 +97,15 @@ export default {
|
||||
return currentValue;
|
||||
}
|
||||
},
|
||||
currentDisplayFontSize() {
|
||||
currentDisplayNumClass() {
|
||||
const currentDisplay = this.currentDisplay || '';
|
||||
|
||||
if (currentDisplay.length >= 24) {
|
||||
return 20;
|
||||
return 'numpad-value-small';
|
||||
} else if (currentDisplay.length >= 16) {
|
||||
return 22;
|
||||
return 'numpad-value-normal';
|
||||
} else {
|
||||
return 24;
|
||||
return 'numpad-value-large';
|
||||
}
|
||||
},
|
||||
confirmText() {
|
||||
@@ -333,12 +333,24 @@ export default {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
line-height: 1;
|
||||
height: 50px;
|
||||
height: var(--ebk-numpad-value-height);
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.numpad-value-small {
|
||||
font-size: var(--ebk-numpad-value-small-font-size);
|
||||
}
|
||||
|
||||
.numpad-value-normal {
|
||||
font-size: var(--ebk-numpad-value-normal-font-size);
|
||||
}
|
||||
|
||||
.numpad-value-large {
|
||||
font-size: var(--ebk-numpad-value-large-font-size);
|
||||
}
|
||||
|
||||
.numpad-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -374,7 +386,7 @@ export default {
|
||||
|
||||
.numpad-button-text {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-size: var(--ebk-numpad-normal-button-font-size);
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -388,6 +400,6 @@ export default {
|
||||
}
|
||||
|
||||
.numpad-button-text-confirm {
|
||||
font-size: 20px;
|
||||
font-size: var(--ebk-numpad-confirm-button-font-size);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content class="margin-top no-padding-top">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin" v-if="hint">{{ hint }}</p>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content class="margin-top no-padding-top">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin" v-if="hint">{{ hint }}</p>
|
||||
|
||||
@@ -308,9 +308,9 @@ export default {
|
||||
}
|
||||
|
||||
.pie-chart-toolbox-info {
|
||||
--f7-chip-height: 30px;
|
||||
--f7-chip-font-size: 18px;
|
||||
font-size: 16px;
|
||||
--f7-chip-height: var(--ebk-pie-chart-toolbox-percentage-height);
|
||||
--f7-chip-font-size: var(--ebk-pie-chart-toolbox-percentage-font-size);
|
||||
font-size: var(--ebk-pie-chart-toolbox-text-font-size);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content class="margin-top no-padding-top">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ title }}</b></div>
|
||||
<div class="ebk-sheet-title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin">{{ hint }}</p>
|
||||
|
||||
@@ -8,6 +8,7 @@ const serverSettingsCookieKey = 'ebk_server_settings';
|
||||
|
||||
const defaultSettings = {
|
||||
theme: 'auto',
|
||||
fontSize: 'default',
|
||||
timeZone: '',
|
||||
debug: false,
|
||||
applicationLock: false,
|
||||
@@ -126,6 +127,8 @@ export default {
|
||||
isProduction: () => process.env.NODE_ENV === 'production',
|
||||
getTheme: () => getOption('theme'),
|
||||
setTheme: value => setOption('theme', value),
|
||||
getFontSize: () => getOption('fontSize'),
|
||||
setFontSize: value => setOption('fontSize', value),
|
||||
getTimezone: () => getOption('timeZone'),
|
||||
setTimezone: value => setOption('timeZone', value),
|
||||
isEnableDebug: () => getOption('debug'),
|
||||
|
||||
@@ -129,3 +129,19 @@ export function autoChangeTextareaSize(el) {
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
export function setAppFontSize(value) {
|
||||
let fontSizeClass = 'font-default';
|
||||
|
||||
if (value === 'extraLarge') {
|
||||
fontSizeClass = 'font-extra-large';
|
||||
} else if (value === 'large') {
|
||||
fontSizeClass = 'font-large';
|
||||
}
|
||||
|
||||
elements('html')
|
||||
.removeClass('font-default')
|
||||
.removeClass('font-large')
|
||||
.removeClass('font-extra-large')
|
||||
.addClass(fontSizeClass);
|
||||
}
|
||||
|
||||
@@ -937,6 +937,10 @@ export default {
|
||||
'Theme': 'Theme',
|
||||
'Light': 'Light',
|
||||
'Dark': 'Dark',
|
||||
'Font Size': 'Font Size',
|
||||
'Default': 'Default',
|
||||
'Large': 'Large',
|
||||
'Extra Large': 'Extra Large',
|
||||
'Timezone': 'Timezone',
|
||||
'System Default': 'System Default',
|
||||
'Language Default': 'Language Default',
|
||||
|
||||
@@ -937,6 +937,10 @@ export default {
|
||||
'Theme': '主题',
|
||||
'Light': '浅色',
|
||||
'Dark': '深色',
|
||||
'Font Size': '字体大小',
|
||||
'Default': '默认',
|
||||
'Large': '大',
|
||||
'Extra Large': '最大',
|
||||
'Timezone': '时区',
|
||||
'System Default': '系统默认',
|
||||
'Language Default': '语言默认',
|
||||
|
||||
@@ -79,6 +79,6 @@ export default {
|
||||
}
|
||||
|
||||
.license-popup .subnavbar-title {
|
||||
--f7-subnavbar-title-font-size: 30px;
|
||||
--f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<f7-list-item
|
||||
class="currency-base-amount"
|
||||
link="#" no-chevron
|
||||
:style="{ fontSize: baseAmountFontSize + 'px' }"
|
||||
:class="baseAmountFontSizeClass"
|
||||
:header="$t('Base Amount')"
|
||||
:title="displayBaseAmount"
|
||||
@click="showBaseAmountSheet = true"
|
||||
@@ -145,8 +145,14 @@ export default {
|
||||
displayBaseAmount() {
|
||||
return this.$locale.getDisplayCurrency(this.baseAmount);
|
||||
},
|
||||
baseAmountFontSize() {
|
||||
return this.getFontSizeByAmount(this.baseAmount);
|
||||
baseAmountFontSizeClass() {
|
||||
if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
|
||||
return 'ebk-small-amount';
|
||||
} else if (this.baseAmount >= 1000000 || this.baseAmount <= -1000000) {
|
||||
return 'ebk-normal-amount';
|
||||
} else {
|
||||
return 'ebk-large-amount';
|
||||
}
|
||||
},
|
||||
allowedMinAmount() {
|
||||
return transactionConstants.minAmount;
|
||||
@@ -247,15 +253,6 @@ export default {
|
||||
|
||||
this.baseCurrency = currency;
|
||||
this.baseAmount = stringCurrencyToNumeric(amount.toString());
|
||||
},
|
||||
getFontSizeByAmount(amount) {
|
||||
if (amount >= 100000000 || amount <= -100000000) {
|
||||
return 32;
|
||||
} else if (amount >= 1000000 || amount <= -1000000) {
|
||||
return 36;
|
||||
} else {
|
||||
return 40;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<span class="month-expense" v-if="loading">0.00 USD</span>
|
||||
<span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span>
|
||||
<f7-link class="margin-left-half" @click="toggleShowAmountInHomePage()">
|
||||
<f7-icon :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
|
||||
<f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
|
||||
</f7-link>
|
||||
</p>
|
||||
<p class="no-margin">
|
||||
@@ -432,7 +432,7 @@ export default {
|
||||
|
||||
.overview-transaction-list .overview-transaction-footer {
|
||||
padding-top: 6px;
|
||||
font-size: 13px;
|
||||
font-size: var(--ebk-large-footer-font-size);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -453,13 +453,13 @@ export default {
|
||||
}
|
||||
|
||||
.tabbar.main-tabbar .link i + span.tabbar-label {
|
||||
margin-top: 2px;
|
||||
margin-top: var(--ebk-icon-text-margin);
|
||||
}
|
||||
|
||||
.tabbar.main-tabbar .link i.ebk-tarbar-big-icon {
|
||||
font-size: 42px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-size: var(--ebk-big-icon-button-size);
|
||||
width: var(--ebk-big-icon-button-size);
|
||||
height: var(--ebk-big-icon-button-size);
|
||||
line-height: var(--ebk-big-icon-button-size);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Two-Factor Authentication') }}</b></div>
|
||||
<div class="ebk-sheet-title"><b>{{ $t('Two-Factor Authentication') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<f7-list strong class="no-margin">
|
||||
|
||||
@@ -26,6 +26,17 @@
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_fontSize'"
|
||||
:title="$t('Font Size')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Font Size'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="fontSize">
|
||||
<option value="default">{{ $t('Default') }}</option>
|
||||
<option value="large">{{ $t('Large') }}</option>
|
||||
<option value="extraLarge">{{ $t('Extra Large') }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_timezone'"
|
||||
:title="$t('Timezone')"
|
||||
@@ -102,6 +113,7 @@ import { useUserStore } from '@/stores/user.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
|
||||
|
||||
import currencyConstants from '@/consts/currency.js';
|
||||
import { setAppFontSize } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
@@ -135,6 +147,17 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
fontSize: {
|
||||
get: function () {
|
||||
return this.$settings.getFontSize();
|
||||
},
|
||||
set: function (value) {
|
||||
if (value !== this.$settings.getFontSize()) {
|
||||
this.$settings.setFontSize(value);
|
||||
setAppFontSize(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
currentTimezone: {
|
||||
get: function () {
|
||||
return this.$locale.getTimezone();
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<span class="net-assets" v-if="loading">0.00 USD</span>
|
||||
<span class="net-assets" v-else-if="!loading">{{ netAssets }}</span>
|
||||
<f7-link class="margin-left-half" @click="toggleShowAccountBalance()">
|
||||
<f7-icon :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
|
||||
<f7-icon class="ebk-hide-icon" :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
|
||||
</f7-link>
|
||||
</p>
|
||||
<p class="no-margin">
|
||||
@@ -463,8 +463,8 @@ export default {
|
||||
}
|
||||
|
||||
.account-list {
|
||||
--f7-list-group-title-height: 36px;
|
||||
--f7-list-item-footer-font-size: 13px;
|
||||
--f7-list-group-title-height: var(--ebk-account-list-group-title-height);
|
||||
--f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
|
||||
}
|
||||
|
||||
.account-list .item-footer {
|
||||
|
||||
@@ -394,7 +394,7 @@ export default {
|
||||
|
||||
<style>
|
||||
.category-list {
|
||||
--f7-list-item-footer-font-size: 13px;
|
||||
--f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
|
||||
}
|
||||
|
||||
.category-list .item-footer {
|
||||
|
||||
@@ -43,8 +43,7 @@
|
||||
<f7-list-item
|
||||
class="transaction-edit-amount"
|
||||
link="#" no-chevron
|
||||
:class="{ 'readonly': mode === 'view', 'color-teal': transaction.type === allTransactionTypes.Expense, 'color-red': transaction.type === allTransactionTypes.Income }"
|
||||
:style="{ fontSize: sourceAmountFontSize + 'px' }"
|
||||
:class="sourceAmountClass"
|
||||
:header="$t(sourceAmountName)"
|
||||
:title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)"
|
||||
@click="showSourceAmountSheet = true"
|
||||
@@ -59,8 +58,7 @@
|
||||
<f7-list-item
|
||||
class="transaction-edit-amount"
|
||||
link="#" no-chevron
|
||||
:class="{ 'readonly': mode === 'view' }"
|
||||
:style="{ fontSize: destinationAmountFontSize + 'px' }"
|
||||
:class="destinationAmountClass"
|
||||
:header="$t('Transfer In Amount')"
|
||||
:title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)"
|
||||
@click="showDestinationAmountSheet = true"
|
||||
@@ -608,11 +606,25 @@ export default {
|
||||
transactionDisplayTimezoneName() {
|
||||
return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
|
||||
},
|
||||
sourceAmountFontSize() {
|
||||
return this.getFontSizeByAmount(this.transaction.sourceAmount);
|
||||
sourceAmountClass() {
|
||||
const classes = {
|
||||
'readonly': this.mode === 'view',
|
||||
'color-teal': this.transaction.type === this.allTransactionTypes.Expense,
|
||||
'color-red': this.transaction.type === this.allTransactionTypes.Income,
|
||||
};
|
||||
|
||||
classes[this.getFontClassByAmount(this.transaction.sourceAmount)] = true;
|
||||
|
||||
return classes;
|
||||
},
|
||||
destinationAmountFontSize() {
|
||||
return this.getFontSizeByAmount(this.transaction.destinationAmount);
|
||||
destinationAmountClass() {
|
||||
const classes = {
|
||||
'readonly': this.mode === 'view'
|
||||
};
|
||||
|
||||
classes[this.getFontClassByAmount(this.transaction.destinationAmount)] = true;
|
||||
|
||||
return classes;
|
||||
},
|
||||
geoLocationStatusInfo() {
|
||||
if (this.geoLocationStatus === 'success') {
|
||||
@@ -1006,13 +1018,13 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
getFontSizeByAmount(amount) {
|
||||
getFontClassByAmount(amount) {
|
||||
if (amount >= 100000000 || amount <= -100000000) {
|
||||
return 32;
|
||||
return 'ebk-small-amount';
|
||||
} else if (amount >= 1000000 || amount <= -1000000) {
|
||||
return 36;
|
||||
return 'ebk-normal-amount';
|
||||
} else {
|
||||
return 40;
|
||||
return 'ebk-large-amount';
|
||||
}
|
||||
},
|
||||
getDisplayAmount(amount, hideAmount) {
|
||||
|
||||
@@ -906,24 +906,24 @@ export default {
|
||||
}
|
||||
|
||||
.list.transaction-info-list li.transaction-info .transaction-date {
|
||||
width: 25px;
|
||||
width: var(--ebk-transaction-date-width);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.list.transaction-info-list li.transaction-info .transaction-day {
|
||||
opacity: 0.6;
|
||||
font-size: 16px;
|
||||
font-size: var(--ebk-transaction-day-font-size);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.list.transaction-info-list li.transaction-info .transaction-day-of-week {
|
||||
opacity: 0.6;
|
||||
font-size: 12px;
|
||||
font-size: var(--ebk-transaction-day-of-week-font-size);
|
||||
}
|
||||
|
||||
.list.transaction-info-list li.transaction-info .transaction-comment {
|
||||
font-size: 13px;
|
||||
font-size: var(--ebk-large-footer-font-size);
|
||||
line-height: 20px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content class="margin-top no-padding-top">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Are you sure you want to export all data to csv file?') }}</b></div>
|
||||
<div class="ebk-sheet-title"><b>{{ $t('Are you sure you want to export all data to csv file?') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ $t('It may take a long time, please wait for a few minutes.') }}</p>
|
||||
|
||||
Reference in New Issue
Block a user