add font settings page

src/mobile-main.js

@@ -24,6 +24,7 @@ import Framework7Input from 'framework7/components/input';
 import Framework7Checkbox from 'framework7/components/checkbox';
 import Framework7Radio from 'framework7/components/radio';
 import Framework7Toggle from 'framework7/components/toggle';
+import Framework7Range from 'framework7/components/range';
 import Framework7SmartSelect from 'framework7/components/smart-select';
 import Framework7Grid from 'framework7/components/grid';
 import Framework7Picker from 'framework7/components/picker';
@@ -56,6 +57,7 @@ import 'framework7/components/input/css';
 import 'framework7/components/checkbox/css';
 import 'framework7/components/radio/css';
 import 'framework7/components/toggle/css';
+import 'framework7/components/range/css';
 import 'framework7/components/smart-select/css';
 import 'framework7/components/grid/css';
 import 'framework7/components/picker/css';
@@ -151,6 +153,14 @@ import TextareaAutoSize from '@/directives/mobile/textareaAutoSize.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
+import '@/styles/mobile/font-size-default.css';
+import '@/styles/mobile/font-size-small.css';
+import '@/styles/mobile/font-size-large.css';
+import '@/styles/mobile/font-size-x-large.css';
+import '@/styles/mobile/font-size-xx-large.css';
+import '@/styles/mobile/font-size-xxx-large.css';
+import '@/styles/mobile/font-size-xxxx-large.css';
+
 import App from '@/MobileApp.vue';
 
 Framework7.use([
@@ -173,6 +183,7 @@ Framework7.use([
     Framework7Checkbox,
     Framework7Radio,
     Framework7Toggle,
+    Framework7Range,
     Framework7SmartSelect,
     Framework7Grid,
     Framework7Picker,

src/router/mobile.js

@@ -16,6 +16,8 @@ import StatisticsSettingsPage from '@/views/mobile/statistics/SettingsPage.vue';
 import StatisticsAccountFilterSettingsPage from '@/views/mobile/statistics/AccountFilterSettingsPage.vue';
 import StatisticsCategoryFilterSettingsPage from '@/views/mobile/statistics/CategoryFilterSettingsPage.vue';
 
+import FontSizeSettingsPage from '@/views/mobile/settings/FontSizeSettingsPage.vue';
+
 import SettingsPage from '@/views/mobile/SettingsPage.vue';
 import ApplicationLockPage from '@/views/mobile/ApplicationLockPage.vue';
 import ExchangeRatesPage from '@/views/mobile/ExchangeRatesPage.vue';
@@ -195,6 +197,11 @@ const routes = [
         async: asyncResolve(StatisticsCategoryFilterSettingsPage),
         beforeEnter: [checkLogin]
     },
+    {
+        path: '/settings/fontsize',
+        async: asyncResolve(FontSizeSettingsPage),
+        beforeEnter: [checkLogin]
+    },
     {
         path: '/settings',
         async: asyncResolve(SettingsPage),

src/views/mobile/SettingsPage.vue

@@ -26,16 +26,7 @@
                 </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 :title="$t('Font Size')" link="/settings/fontsize"></f7-list-item>
 
             <f7-list-item
                 :key="currentLocale + '_timezone'"
@@ -113,7 +104,6 @@ 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: [
@@ -147,17 +137,6 @@ 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();

src/views/mobile/settings/FontSizeSettingsPage.vue

@@ -0,0 +1,90 @@
+<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>