style/layout improvements

src/components/settings_modal/settings_modal_user_content.scss

@@ -1,6 +1,21 @@
 .settings_tab-switcher {
   height: 100%;
 
+  h1 {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
+
+  h4 {
+    margin-bottom: 0;
+    margin-top: 0.25em;
+  }
+
+  h5 {
+    margin-bottom: 0;
+    margin-top: 0.25em;
+  }
+
   .setting-item {
     border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -3,7 +3,7 @@
     class="appearance-tab"
     :label="$t('settings.general')"
   >
-    <div class="setting-item heading">
+    <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <button
         class="btn button-default"

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -1,4 +1,4 @@
-import { ref, reactive, computed, watch, watchEffect, provide } from 'vue'
+import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
 import { useStore } from 'vuex'
 import { get, set, unset, throttle } from 'lodash'
 
@@ -84,6 +84,12 @@ export default {
     // All rules that are made by editor
     const allEditedRules = reactive({})
 
+    exports.isActive = computed(() => {
+      const tabSwitcher = getCurrentInstance().parent.ctx
+      console.log('TABSW', tabSwitcher)
+      return tabSwitcher ? tabSwitcher.isActive('style') : false
+    })
+
     // ## Meta stuff
     exports.name = ref('')
     exports.author = ref('')

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -48,33 +48,15 @@
     }
   }
 
-  .setting-item {
+  .meta-preview {
-    padding-bottom: 0;
-
-    .btn {
-      padding: 0 0.5em;
-    }
-
-    &:not(:first-child) {
-      margin-top: 0.5em;
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 0.5em;
-    }
-
-    &.heading {
     display: grid;
     grid-template:
       "meta meta preview preview"
       "meta meta preview preview"
       "meta meta preview preview"
-        "meta meta preview preview"
+      "meta meta preview preview";
-        "new  new  preview preview"
-        "load save refresh apply";
     grid-gap: 0.5em;
     grid-template-columns: min-content min-content 6fr max-content;
-      grid-template-rows: repeat(4, min-content) repeat(2, 2em);
 
     ul.setting-list {
       padding: 0;
@@ -100,26 +82,21 @@
     #edited-style-preview {
       grid-area: preview;
     }
-
-      .button-save {
-        grid-area: save;
   }
 
-      .button-load {
+  .setting-item {
-        grid-area: load;
+    padding-bottom: 0;
+
+    .btn {
+      padding: 0 0.5em;
     }
 
-      .button-new {
+    &:not(:first-child) {
-        grid-area: new;
+      margin-top: 0.5em;
     }
 
-      .button-refresh {
+    &:not(:last-child) {
-        grid-area: refresh;
+      margin-bottom: 0.5em;
-      }
-
-      .button-apply {
-        grid-area: apply;
-      }
     }
   }
 
@@ -271,3 +248,17 @@
     }
   }
 }
+
+.extra-content {
+  .style-actions-container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+
+    .style-actions {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(7em, 1fr));
+      grid-gap: 0.25em;
+    }
+  }
+}

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -4,6 +4,8 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
+      <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
+      <div class="meta-preview">
         <!-- eslint-disable vue/no-v-text-v-html-on-component -->
         <component
           :is="'style'"
@@ -11,12 +13,18 @@
         />
         <!-- eslint-enable vue/no-v-text-v-html-on-component -->
         <Preview id="edited-style-preview" />
+        <teleport
+          v-if="isActive"
+          to="#unscrolled-content"
+        >
+          <div class="style-actions-container">
+            <div class="style-actions">
               <button
                 class="btn button-default button-new"
                 @click="clearTheme"
               >
-        <FAIcon icon="file" />
+                <FAIcon icon="arrows-rotate" />
-        {{ $t('settings.style.themes3.editor.new_style') }}
+                {{ $t('settings.style.themes3.editor.reset_style') }}
               </button>
               <button
                 class="btn button-default button-load"
@@ -32,13 +40,6 @@
                 <FAIcon icon="floppy-disk" />
                 {{ $t('settings.style.themes3.editor.save_style') }}
               </button>
-      <button
-        class="btn button-default button-refresh"
-        @click="updateOverallPreview"
-      >
-        <FAIcon icon="arrows-rotate" />
-        {{ $t('settings.style.themes3.editor.refresh_preview') }}
-      </button>
               <button
                 class="btn button-default button-apply"
                 @click="applyStyle"
@@ -46,6 +47,9 @@
                 <FAIcon icon="check" />
                 {{ $t('settings.style.themes3.editor.apply_preview') }}
               </button>
+            </div>
+          </div>
+        </teleport>
         <ul class="setting-list style-metadata">
           <li>
             <StringSetting class="meta-field" v-model="name">
@@ -69,6 +73,7 @@
           </li>
         </ul>
       </div>
+    </div>
     <tab-switcher>
       <div
         key="component"

src/i18n/en.json

@@ -777,7 +777,7 @@
         },
         "editor": {
           "title": "Style",
-          "new_style": "New",
+          "reset_style": "Reset",
           "load_style": "Open",
           "save_style": "Save",
           "style_name": "Stylesheet name",