mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 16:07:33 +08:00
improve text size settings
This commit is contained in:
MaysWind
@@ -15,7 +15,7 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-subnavbar :title="$t('License') "></f7-subnavbar>
|
||||
</f7-navbar>
|
||||
<f7-block strong outline>
|
||||
<f7-block strong outline class="license-content">
|
||||
<p>
|
||||
<span :key="num" v-for="(line, num) in licenseLines"
|
||||
:style="{ 'display': line ? 'initial' : 'block', 'padding' : line ? '0' : '0 0 1em 0' }">
|
||||
@@ -81,4 +81,8 @@ export default {
|
||||
.license-popup .subnavbar-title {
|
||||
--f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
|
||||
}
|
||||
|
||||
.license-content {
|
||||
font-size: var(--ebk-license-content-font-size);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Font Size')" link="/settings/fontsize"></f7-list-item>
|
||||
<f7-list-item :title="$t('Text Size')" link="/settings/textsize"></f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_timezone'"
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('Font Size')"></f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link :text="$t('Done')" @click="setFontSize"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
<f7-list strong inset>
|
||||
<f7-list-item>
|
||||
<div class="full-line padding-bottom padding-top-half">
|
||||
<div class="display-flex justify-content-space-between">
|
||||
<div class="fontsize-minimum">A</div>
|
||||
<div class="fontsize-maximum">A</div>
|
||||
<div class="fontsize-default" :style="'left: ' + (100 / maxFontSizeType - 6) + '%'">{{ $t('Default') }}</div>
|
||||
</div>
|
||||
<f7-range
|
||||
:min="minFontSizeType"
|
||||
:max="maxFontSizeType"
|
||||
:step="1"
|
||||
:scale="true"
|
||||
:scale-steps="maxFontSizeType"
|
||||
:scale-sub-steps="1"
|
||||
:format-scale-label="getFontSizeName"
|
||||
v-model:value="fontSize"
|
||||
/>
|
||||
</div>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fontConstants from '@/consts/font.js';
|
||||
import { setAppFontSize } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
fontSize: this.$settings.getFontSize()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
minFontSizeType() {
|
||||
return 0;
|
||||
},
|
||||
maxFontSizeType() {
|
||||
return fontConstants.allFontSizeArray.length - 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setFontSize() {
|
||||
const router = this.f7router;
|
||||
|
||||
if (this.fontSize !== this.$settings.getFontSize()) {
|
||||
this.$settings.setFontSize(this.fontSize);
|
||||
setAppFontSize(this.fontSize);
|
||||
}
|
||||
|
||||
router.back();
|
||||
},
|
||||
getFontSizeName() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fontsize-minimum {
|
||||
font-size: 15px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.fontsize-maximum {
|
||||
font-size: 24px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.fontsize-default {
|
||||
font-size: 17px;
|
||||
position: absolute;
|
||||
align-self: end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('Text Size')"></f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link :text="$t('Done')" @click="setFontSize"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
<f7-block class="no-padding no-margin readonly" :class="fontSizePreviewClassName">
|
||||
<f7-block class="combination-list-wrapper margin-vertical">
|
||||
<f7-accordion-item>
|
||||
<f7-block-title>
|
||||
<f7-accordion-toggle>
|
||||
<f7-list strong inset dividers media-list
|
||||
class="transaction-amount-list combination-list-header combination-list-opened">
|
||||
<f7-list-item>
|
||||
<template #title>
|
||||
<small>{{ currentLongYearMonth }}</small>
|
||||
<small class="transaction-amount-statistics">
|
||||
<span class="text-color-red">{{ `+${getDisplayAmount('12345')}` }}</span>
|
||||
<span class="text-color-teal">{{ `-${getDisplayAmount('67890')}` }}</span>
|
||||
</small>
|
||||
<f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-accordion-toggle>
|
||||
</f7-block-title>
|
||||
<f7-accordion-content style="height: auto">
|
||||
<f7-list strong inset dividers media-list accordion-list class="transaction-info-list combination-list-content">
|
||||
<f7-list-item chevron-center class="transaction-info" link="#">
|
||||
<template #media>
|
||||
<div class="display-flex flex-direction-column transaction-date">
|
||||
<span class="transaction-day full-line flex-direction-column">{{ currentDayOfMonth }}</span>
|
||||
<span class="transaction-day-of-week full-line flex-direction-column">{{ currentDayOfWeek }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #inner>
|
||||
<div class="display-flex no-padding-horizontal">
|
||||
<div class="item-media">
|
||||
<div class="transaction-icon display-flex align-items-center">
|
||||
<f7-icon f7="pencil_ellipsis_rectangle"></f7-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actual-item-inner">
|
||||
<div class="item-title-row">
|
||||
<div class="item-title">
|
||||
<div class="transaction-category-name no-padding">
|
||||
<span>{{ $t('Category Name') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after">
|
||||
<div class="transaction-amount">
|
||||
<span>{{ getDisplayAmount('12345') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<div class="transaction-comment">
|
||||
<span>{{ $t('Description') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<div class="transaction-footer">
|
||||
<span>{{ currentShortTime }}</span>
|
||||
<span>·</span>
|
||||
<span>{{ $t('Account Name') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-accordion-content>
|
||||
</f7-accordion-item>
|
||||
</f7-block>
|
||||
</f7-block>
|
||||
|
||||
<f7-block class="fontsize-panel no-padding margin-bottom">
|
||||
<f7-block strong inset class="no-padding-bottom margin-bottom">
|
||||
<div class="full-line padding-bottom padding-top-half">
|
||||
<div class="display-flex justify-content-space-between">
|
||||
<div class="fontsize-minimum">A</div>
|
||||
<div class="fontsize-maximum">A</div>
|
||||
<div class="fontsize-default" :style="`left: calc(${100 / maxFontSizeType}% - 6px)`">{{ $t('Default') }}</div>
|
||||
</div>
|
||||
<f7-range
|
||||
:min="minFontSizeType"
|
||||
:max="maxFontSizeType"
|
||||
:step="1"
|
||||
:scale="true"
|
||||
:scale-steps="maxFontSizeType"
|
||||
:scale-sub-steps="1"
|
||||
:format-scale-label="getFontSizeName"
|
||||
v-model:value="fontSize"
|
||||
/>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
|
||||
import fontConstants from '@/consts/font.js';
|
||||
import { getCurrentUnixTime, getDay, getDayOfWeekName } from '@/lib/datetime.js';
|
||||
import { setAppFontSize, getFontSizePreviewClassName } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
currentTime: getCurrentUnixTime(),
|
||||
fontSize: self.$settings.getFontSize()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUserStore),
|
||||
minFontSizeType() {
|
||||
return 0;
|
||||
},
|
||||
maxFontSizeType() {
|
||||
return fontConstants.allFontSizeArray.length - 1;
|
||||
},
|
||||
fontSizePreviewClassName() {
|
||||
return getFontSizePreviewClassName(this.fontSize);
|
||||
},
|
||||
currentLongYearMonth() {
|
||||
return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, this.currentTime);
|
||||
},
|
||||
currentDayOfMonth() {
|
||||
return getDay(this.currentTime);
|
||||
},
|
||||
currentDayOfWeek() {
|
||||
return this.$t(`datetime.${getDayOfWeekName(this.currentTime)}.short`);
|
||||
},
|
||||
currentShortTime() {
|
||||
return this.$locale.formatUnixTimeToShortTime(this.userStore, this.currentTime);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setFontSize() {
|
||||
const router = this.f7router;
|
||||
|
||||
if (this.fontSize !== this.$settings.getFontSize()) {
|
||||
this.$settings.setFontSize(this.fontSize);
|
||||
setAppFontSize(this.fontSize);
|
||||
}
|
||||
|
||||
router.back();
|
||||
},
|
||||
getFontSizeName() {
|
||||
return '';
|
||||
},
|
||||
getDisplayAmount(value) {
|
||||
return this.$locale.getDisplayCurrency(value, this.userStore.currentUserDefaultCurrency);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fontsize-panel {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.fontsize-minimum {
|
||||
font-size: 15px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.fontsize-maximum {
|
||||
font-size: 24px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.fontsize-default {
|
||||
font-size: 17px;
|
||||
position: absolute;
|
||||
align-self: end;
|
||||
}
|
||||
</style>
|
||||
@@ -1047,10 +1047,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.category-separate-icon {
|
||||
.category-separate-icon.icon {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
font-size: 18px;
|
||||
font-size: var(--ebk-category-separate-icon-font-size);
|
||||
line-height: 16px;
|
||||
color: var(--f7-color-gray-tint);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user