add font settings page

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>