#168 adapted labels and rearranged text settings

asterics · Jan 22, 2025 · 4bbde2c · 4bbde2c
1 parent 283e572
commit 4bbde2c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/app/lang/i18n.en.json b/app/lang/i18n.en.json
@@ -1104,15 +1104,15 @@
   "top": "Top",
   "bottom": "Bottom",
   "fontFamily": "Font family",
-  "fontSize": "Font size",
+  "fontSize": "Font size (text + image)",
   "modeForHandlingTooLongTexts": "Mode for handling too long texts",
   "adaptAutomatically": "Adapt automatically",
   "truncate": "Truncate",
   "ellipsisDotDotDot": "Ellipsis (\"...\")",
-  "maximumNumberOfLines": "Maximum number of lines",
-  "lineHeight": "Line height",
-  "onlyTextFontSize": "Font size (text-only elements)",
-  "onlyTextLineHeight": "Line height (text-only elements)",
+  "maximumNumberOfLines": "Maximum number of lines (text + image)",
+  "lineHeight": "Line height (text + image)",
+  "onlyTextFontSize": "Font size (text-only)",
+  "onlyTextLineHeight": "Line height (text-only)",
   "autoSizeKeyboardLetters": "Auto-size keyboard letters",
   "appearanceDemo": "Appearance demo",
   "testElementLabel": "Test element label",

diff --git a/src/vue-components/views/settings/settingsAppearance.vue b/src/vue-components/views/settings/settingsAppearance.vue
@@ -35,6 +35,9 @@
                 <div class="srow mb-0">
                     <slider-input label="fontSize" unit="%" id="fontSize" min="0" max="100" step="1" v-model.number="metadata.textConfig.fontSizePct" @change="saveMetadata(metadata)"/>
                 </div>
+                <div class="srow">
+                    <slider-input label="onlyTextFontSize" unit="%" id="onlyTextFontSize" min="0" max="100" step="1" v-model.number="metadata.textConfig.onlyTextFontSizePct" @change="saveMetadata(metadata)"/>
+                </div>
                 <div class="srow mb-5">
                     <accordion :acc-label="$t('advancedOptions')" class="eleven columns">
                         <div class="srow">
@@ -45,6 +48,13 @@
                                 <option :value="TextConfig.TOO_LONG_ELLIPSIS">{{ $t('ellipsisDotDotDot') }}</option>
                             </select>
                         </div>
+                        <div class="srow">
+                            <label class="three columns" for="fontColor">
+                                <span>{{ $t('fontColor') }}</span>
+                            </label>
+                            <input id="fontColor" v-model="metadata.textConfig.fontColor" class="five columns" type="color" @change="saveMetadata(metadata)">
+                            <button class="three columns" @click="metadata.textConfig.fontColor = constants.DEFAULT_ELEMENT_FONT_COLOR; saveMetadata(metadata)">{{ $t('reset') }}</button>
+                        </div>
                         <div class="srow">
                             <label class="three columns" for="maxLines">{{ $t('maximumNumberOfLines') }}</label>
                             <select id="maxLines" v-model="metadata.textConfig.maxLines" class="five columns" @change="saveMetadata(metadata)">
@@ -56,19 +66,9 @@
                         <div class="srow mt-3">
                             <slider-input label="lineHeight" id="lineHeight" min="1" max="3" step="0.1" v-model.number="metadata.textConfig.lineHeight" @change="saveMetadata(metadata)"/>
                         </div>
-                        <div class="srow">
-                            <slider-input label="onlyTextFontSize" unit="%" id="onlyTextFontSize" min="0" max="100" step="1" v-model.number="metadata.textConfig.onlyTextFontSizePct" @change="saveMetadata(metadata)"/>
-                        </div>
                         <div class="srow mb-2">
                             <slider-input label="onlyTextLineHeight" id="onlyTextLineHeight" min="1" max="3" step="0.1" v-model.number="metadata.textConfig.onlyTextLineHeight" @change="saveMetadata(metadata)"/>
                         </div>
-                        <div class="srow">
-                            <label class="three columns" for="fontColor">
-                                <span>{{ $t('fontColor') }}</span>
-                            </label>
-                            <input id="fontColor" v-model="metadata.textConfig.fontColor" class="five columns" type="color" @change="saveMetadata(metadata)">
-                            <button class="three columns" @click="metadata.textConfig.fontColor = constants.DEFAULT_ELEMENT_FONT_COLOR; saveMetadata(metadata)">{{ $t('reset') }}</button>
-                        </div>
                         <div class="srow">
                             <input id="autoSizeKeyboardLetters" type="checkbox" v-model="metadata.textConfig.autoSizeKeyboardLetters" @change="saveMetadata(metadata)"/>
                             <label for="autoSizeKeyboardLetters">{{ $t('autoSizeKeyboardLetters') }}</label>