Глобальный рефакторинг SettingsPage (закончено)

client/components/Reader/SettingsPage/ViewTab/Text/Text.vue

@@ -0,0 +1,210 @@
+<template>
+    <div>
+        <!---------------------------------------------->
+        <div class="hidden sets-part-header">
+            Текст
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Интервал
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.lineInterval" class="col-left" :min="0" :max="200" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Параграф
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.p" class="col-left" :min="0" :max="2000" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Сдвиг
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.textVertShift" class="col-left" :min="-100" :max="100">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Сдвиг текста по вертикали в процентах от размера шрифта.<br>
+                        Отрицательное значение сдвигает вверх, положительное -<br>
+                        вниз.
+                    </q-tooltip>
+                </NumInput>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Скроллинг
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.scrollingDelay" class="col-left" :min="1" :max="10000">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Замедление скроллинга в миллисекундах.<br>
+                        Определяет время, за которое текст<br>
+                        прокручивается на одну строку.
+                    </q-tooltip>
+                </NumInput>
+
+                <div class="q-px-sm" />
+                <q-select
+                    v-model="form.scrollingType" class="col" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Вид скроллинга: линейный,<br>
+                        ускорение-замедление и пр.
+                    </q-tooltip>
+                </q-select>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Выравнивание
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.textAlignJustify" size="xs" label="По ширине" />
+                <q-checkbox v-model="form.wordWrap" class="q-ml-sm" size="xs" label="Перенос по слогам" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-left column justify-center text-right">
+                Компактность
+            </div>
+            <div class="q-px-sm" />
+            <NumInput v-model="form.compactTextPerc" class="col" :min="0" :max="100">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Степень компактности текста в процентах.<br>
+                    Чем больше компактность, тем хуже выравнивание<br>
+                    по правому краю.
+                </q-tooltip>
+            </NumInput>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Обработка
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-left column justify-center text-right">
+                Добавлять пустые
+            </div>
+            <div class="q-px-sm" />
+            <NumInput v-model="form.addEmptyParagraphs" class="col" :min="0" :max="2" />
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Изображения
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.showImages" size="xs" label="Показывать" />
+                <q-checkbox v-model="form.showInlineImagesInCenter" class="q-ml-sm" :disable="!form.showImages" size="xs" label="Инлайн в центр" @update:modelValue="needReload">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Выносить все изображения в центр экрана
+                    </q-tooltip>
+                </q-checkbox>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col row">
+                <q-checkbox v-model="form.imageFitWidth" size="xs" label="Ширина не более размера страницы" :disable="!form.showImages || form.dualPageMode" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-left column justify-center text-right">
+                Высота не более
+            </div>
+            <div class="q-px-sm" />
+            <NumInput v-model="form.imageHeightLines" class="col" :min="1" :max="100" :disable="!form.showImages">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Определяет высоту изображения количеством строк.<br>
+                    В случае превышения высоты, изображение будет<br>
+                    уменьшено с сохранением пропорций так, чтобы<br>
+                    помещаться в указанное количество строк.
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../../vueComponent.js';
+import NumInput from '../../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput,
+    },
+    watch: {
+        form: {
+            handler() {
+                this.formChanged();//no await
+            },
+            deep: true,
+        },
+    },
+};
+class Text {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    statusBarColorFiltered = '';
+
+    created() {
+        this.formChanged();//no await
+    }
+
+    mounted() {
+    }
+
+    async formChanged() {
+        this.isFormChanged = true;
+        try {
+            //
+        } finally {
+            await this.$nextTick();
+            this.isFormChanged = false;
+        }
+    }
+
+    needReload() {
+        this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
+    }
+}
+
+export default vueComponent(Text);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 145px;
+}
+</style>