Text styling settings styling and code cleanup

simjanos-dev · Dec 21, 2024 · 880e047 · 880e047
1 parent bb0e463
commit 880e047
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/resources/js/components/UserSettings/ThemeSettings/UserSettingsTextStyling.vue b/resources/js/components/UserSettings/ThemeSettings/UserSettingsTextStyling.vue
@@ -423,8 +423,10 @@
                     <user-settings-text-styling-sample />
                 </div>
 
-                <v-btn rounded depressed color="primary" @click="showResetTextStylingDialog">Reset</v-btn>
-                <v-btn rounded depressed color="primary" @click="logTextStylingSettingsObject">Console log settings</v-btn>
+                <div class="d-flex justify-end mt-2">
+                    <v-btn rounded depressed color="primary" @click="showResetTextStylingDialog">Reset</v-btn>
+                    <!-- <v-btn rounded depressed color="primary" @click="logTextStylingSettingsObject">Console log settings</v-btn> -->
+                </div>
             </v-container>
         </v-card>
     </div>
@@ -529,13 +531,16 @@
                 // reset only selected word/phrase level
                 if (resetType === 'level') {
                     this.textStyling[this.selectedTheme][this.selectedLevel] = JSON.parse(JSON.stringify(defaultTextThemes[this.selectedTheme][this.selectedLevel]))
+                    this.updateSampleTextStyling()
                     return
                 }
 
                 // reset whole theme
                 this.levels.forEach((level) => {
                     this.textStyling[this.selectedTheme][level] = JSON.parse(JSON.stringify(defaultTextThemes[this.selectedTheme][level]))
                 })
+
+                this.updateSampleTextStyling()
             },
             selectedLevelInputChanged(value) {
                 this.selectedLevelIndex = this.levels.indexOf(value);
@@ -544,7 +549,6 @@
                 this.selectedThemeIndex = this.themes.indexOf(value);
             },
             resetColor(colorName) {
-                console.log('default color', defaultTextThemes[this.selectedTheme][this.selectedLevel][colorName])
                 this.textStyling[this.selectedTheme][this.selectedLevel][colorName] = JSON.parse(JSON.stringify(defaultTextThemes[this.selectedTheme][this.selectedLevel][colorName]));
                 this.updateSampleTextColors()
             },
@@ -561,13 +565,11 @@
                 })
 
 
-                console.log('text styling', this.highlightedStyling)
 
                 this.textStyling = JSON.parse(JSON.stringify(this.textStyling))
                 this.$emit('update', this.textStyling)
             },
             logTextStylingSettingsObject() {
-                console.log('text styling', this.textStyling)
             },
             updateSampleTextColors() {
                 this.highlightedStyling[`--interactive-text-${this.levelMapping[this.selectedLevel]}-border-color`] = this.textStyling[this.selectedTheme][this.selectedLevel].borderColor;
@@ -579,7 +581,6 @@
                 this.loading = true
 
                 axios.post('/settings/user/get', {settingNames: ['textStyling']}).then((response) => {
-                    console.log('textStyling loaded')
                     if (response.data.textStyling) {
                         this.textStyling = response.data.textStyling
                     }

diff --git a/resources/js/components/UserSettings/ThemeSettings/UserSettingsTextStylingSample.vue b/resources/js/components/UserSettings/ThemeSettings/UserSettingsTextStylingSample.vue
@@ -2,8 +2,8 @@
     <!-- Sample text -->
     <div class="w-100 mt-8">
         <!-- Language selection -->
-        <div class="d-flex justify-space-between mb-2">
-            <label class="mb-0">
+        <div class="d-flex flex-wrap justify-space-between mb-1">
+            <label class="mb-2">
                 Sample text
 
                 <v-menu offset-y nudge-top="-12px">
@@ -17,6 +17,7 @@
             </label>
 
             <v-btn-toggle
+                class="mb-1"
                 v-model="selectedLanguage"
                 mandatory
                 rounded

diff --git a/resources/js/services/TextStylingService.js b/resources/js/services/TextStylingService.js
@@ -40,7 +40,6 @@ class TextStylingService {
 
     // returns an object with css styling for a single theme/word level combination
     getCssSettingObject(textStylingSettings, theme, level) {
-        console.log('getCssSettingObject start')
         const levelMapping = {
             'Level 1 word': 'wordLevel-1',
             'Level 2 word': 'wordLevel-2',
@@ -144,7 +143,6 @@ class TextStylingService {
         }
 
 
-        console.log('getCssSettingObject end')
         return cssVariables
     }
 }

diff --git a/resources/sass/UserSettings/UserSettings.scss b/resources/sass/UserSettings/UserSettings.scss
@@ -64,4 +64,17 @@
             }
         }
     }
+}
+
+@media (max-width: 580px) {
+    #user-settings-themes {
+        #border-positions, #font-options {
+            flex-wrap: wrap;
+
+            .v-input {
+                width: 100%;
+                margin-left: 0px !important;
+            }
+        }
+    }
 }