From 89015521128d1c39d9977a0a9892849c2ad5bd2a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Nov 2024 17:25:58 +0200
Subject: [PATCH] style/layout improvements

---
 .../settings_modal_user_content.scss          |  15 ++
 .../settings_modal/tabs/appearance_tab.vue    |   2 +-
 .../tabs/style_tab/style_tab.js               |   8 +-
 .../tabs/style_tab/style_tab.scss             | 109 +++++++-------
 .../tabs/style_tab/style_tab.vue              | 133 +++++++++---------
 src/i18n/en.json                              |   2 +-
 6 files changed, 143 insertions(+), 126 deletions(-)

diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index 74172c82..b7e258fd 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/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;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 1b43a690..764fa3fe 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/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"
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 0f91eb27..9156774b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/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('')
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 1f63e9c6..a9c35c08 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -48,6 +48,42 @@
     }
   }
 
+  .meta-preview {
+    display: grid;
+    grid-template:
+      "meta meta preview preview"
+      "meta meta preview preview"
+      "meta meta preview preview"
+      "meta meta preview preview";
+    grid-gap: 0.5em;
+    grid-template-columns: min-content min-content 6fr max-content;
+
+    ul.setting-list {
+      padding: 0;
+      margin: 0;
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-area: meta;
+
+      > li {
+        margin: 0;
+      }
+
+      .meta-field {
+        margin: 0;
+
+        .setting-label {
+          display: inline-block;
+          margin-bottom: 0.5em;
+        }
+      }
+    }
+
+    #edited-style-preview {
+      grid-area: preview;
+    }
+  }
+
   .setting-item {
     padding-bottom: 0;
 
@@ -62,65 +98,6 @@
     &: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"
-        "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;
-        margin: 0;
-        display: grid;
-        grid-template-rows: subgrid;
-        grid-area: meta;
-
-        > li {
-          margin: 0;
-        }
-
-        .meta-field {
-          margin: 0;
-
-          .setting-label {
-            display: inline-block;
-            margin-bottom: 0.5em;
-          }
-        }
-      }
-
-      #edited-style-preview {
-        grid-area: preview;
-      }
-
-      .button-save {
-        grid-area: save;
-      }
-
-      .button-load {
-        grid-area: load;
-      }
-
-      .button-new {
-        grid-area: new;
-      }
-
-      .button-refresh {
-        grid-area: refresh;
-      }
-
-      .button-apply {
-        grid-area: apply;
-      }
-    }
   }
 
   .list-editor {
@@ -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;
+    }
+  }
+}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index f95c7aca..eabbb582 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,70 +4,75 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
-      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-      <component
-        :is="'style'"
-        v-html="overallPreviewCssRules"
-      />
-      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-      <Preview id="edited-style-preview" />
-      <button
-        class="btn button-default button-new"
-        @click="clearTheme"
-      >
-        <FAIcon icon="file" />
-        {{ $t('settings.style.themes3.editor.new_style') }}
-      </button>
-      <button
-        class="btn button-default button-load"
-        @click="importStyle"
-      >
-        <FAIcon icon="folder-open" />
-        {{ $t('settings.style.themes3.editor.load_style') }}
-      </button>
-      <button
-        class="btn button-default button-save"
-        @click="exportStyle"
-      >
-        <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"
-      >
-        <FAIcon icon="check" />
-        {{ $t('settings.style.themes3.editor.apply_preview') }}
-      </button>
-      <ul class="setting-list style-metadata">
-        <li>
-          <StringSetting class="meta-field" v-model="name">
-            {{ $t('settings.style.themes3.editor.style_name') }}
-          </StringSetting>
-        </li>
-        <li>
-          <StringSetting class="meta-field" v-model="author">
-            {{ $t('settings.style.themes3.editor.style_author') }}
-          </StringSetting>
-        </li>
-        <li>
-          <StringSetting class="meta-field" v-model="license">
-            {{ $t('settings.style.themes3.editor.style_license') }}
-          </StringSetting>
-        </li>
-        <li>
-          <StringSetting class="meta-field" v-model="website">
-            {{ $t('settings.style.themes3.editor.style_website') }}
-          </StringSetting>
-        </li>
-      </ul>
+      <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'"
+          v-html="overallPreviewCssRules"
+        />
+        <!-- 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="arrows-rotate" />
+                {{ $t('settings.style.themes3.editor.reset_style') }}
+              </button>
+              <button
+                class="btn button-default button-load"
+                @click="importStyle"
+              >
+                <FAIcon icon="folder-open" />
+                {{ $t('settings.style.themes3.editor.load_style') }}
+              </button>
+              <button
+                class="btn button-default button-save"
+                @click="exportStyle"
+              >
+                <FAIcon icon="floppy-disk" />
+                {{ $t('settings.style.themes3.editor.save_style') }}
+              </button>
+              <button
+                class="btn button-default button-apply"
+                @click="applyStyle"
+              >
+                <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">
+              {{ $t('settings.style.themes3.editor.style_name') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting class="meta-field" v-model="author">
+              {{ $t('settings.style.themes3.editor.style_author') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting class="meta-field" v-model="license">
+              {{ $t('settings.style.themes3.editor.style_license') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting class="meta-field" v-model="website">
+              {{ $t('settings.style.themes3.editor.style_website') }}
+            </StringSetting>
+          </li>
+        </ul>
+      </div>
     </div>
     <tab-switcher>
       <div
diff --git a/src/i18n/en.json b/src/i18n/en.json
index dd3877ee..bcc03ddf 100644
--- a/src/i18n/en.json
+++ b/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",