overall preview + layout changes

src/components/settings_modal/helpers/string_setting.vue

@@ -5,6 +5,7 @@
   >
     <label
       :for="path"
+      class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
       <template v-if="backendDescriptionLabel">

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

@@ -13,9 +13,13 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+import Preview from '../theme_tab/theme_preview.vue'
 
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
-import { getCssRules } from 'src/services/theme_data/css_utils.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
 import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
 import {
@@ -29,7 +33,7 @@ import {
 } from 'src/services/export_import/export_import.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons'
+import { faFloppyDisk, faFolderOpen, faFile, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
 
 // helper for debugging
 // eslint-disable-next-line no-unused-vars
@@ -41,7 +45,8 @@ const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'no
 library.add(
   faFile,
   faFloppyDisk,
-  faFolderOpen
+  faFolderOpen,
+  faArrowsRotate
 )
 
 export default {
@@ -57,7 +62,8 @@ export default {
     ColorInput,
     PaletteEditor,
     OpacityInput,
-    ContrastRatio
+    ContrastRatio,
+    Preview
   },
   setup () {
     // All rules that are made by editor
@@ -549,6 +555,40 @@ export default {
       value: 'foobar'
     })
 
+    const overallPreviewRules = ref()
+    const updateOverallPreview = () => {
+      try {
+        // This normally would be handled by Root but since we pass something
+        // else we have to make do ourselves
+
+        const { name, ...rest } = selectedPalette.value
+        const paletteRule = {
+          component: 'Root',
+          directives: Object
+            .entries(rest)
+            .map(([k, v]) => ['--' + k, v])
+            .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
+        }
+
+        const rules = init({
+          inputRuleset: [
+            ...editorFriendlyToOriginal.value,
+            paletteRule
+          ],
+          ultimateBackgroundColor: '#000000',
+          liteMode: true,
+          debug: true
+        }).eager
+
+        overallPreviewRules.value = getScopedVersion(
+          getCssRules(rules),
+          '#edited-style-preview'
+        ).join('\n')
+      } catch (e) {
+        console.error('Could not compile preview theme', e)
+      }
+    }
+
     // ## Export and Import
     const styleExporter = newExporter({
       filename: name.value || 'pleroma_theme',
@@ -628,6 +668,10 @@ export default {
       previewCss,
       previewClass,
 
+      // overall preview
+      overallPreviewRules,
+      updateOverallPreview,
+
       // ## Variables
       virtualDirectives,
       selectedVirtualDirective,

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

@@ -65,24 +65,56 @@
 
     &.heading {
       display: grid;
-      align-items: baseline;
-      grid-template-columns: 1fr auto auto auto;
+      grid-template:
+        "meta meta preview"
+        "meta meta preview"
+        "meta meta preview"
+        "meta meta preview"
+        "new  new  preview"
+        "load save refresh";
       grid-gap: 0.5em;
+      grid-template-columns: min-content min-content 6fr;
+      grid-template-rows: repeat(4, min-content) repeat(2, 2em);
 
-      h2 {
-        flex: 1 0 auto;
-      }
-    }
+      ul.setting-list {
+        padding: 0;
+        margin: 0;
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-area: meta;
 
-    &.metadata {
-      display: flex;
+        > li {
+          margin: 0;
+        }
 
-      .setting-item {
-        flex: 2 0 auto;
+        .meta-field {
+          margin: 0;
+
+          .setting-label {
+            display: inline-block;
+            margin-bottom: 0.5em;
+          }
+        }
       }
 
-      li {
-        text-align: right;
+      #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;
       }
     }
   }
@@ -119,7 +151,9 @@
     }
   }
 
-  .palettes-editor {
+  .palette-editor {
+    width: min-content;
+
     .list-edit-area {
       align-self: baseline;
     }

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

@@ -4,49 +4,59 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
-      <!-- TODO: This needs to go -->
-      <h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
+      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+      <component
+        :is="'style'"
+        v-html="overallPreviewRules"
+      />
+      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+      <Preview id="edited-style-preview" />
       <button
-        class="btn button-default"
+        class="btn button-default button-new"
         @click="clearTheme"
       >
         <FAIcon icon="file" />
         {{ $t('settings.style.themes3.editor.new_style') }}
       </button>
       <button
-        class="btn button-default"
+        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"
+        class="btn button-default button-save"
         @click="exportStyle"
       >
         <FAIcon icon="floppy-disk" />
         {{ $t('settings.style.themes3.editor.save_style') }}
       </button>
-    </div>
-    <div class="setting-item metadata">
-      <ul class="setting-list">
+      <button
+        class="btn button-default button-refresh"
+        @click="updateOverallPreview"
+      >
+        <FAIcon icon="arrows-rotate" />
+        {{ $t('settings.style.themes3.editor.refresh_preview') }}
+      </button>
+      <ul class="setting-list style-metadata">
         <li>
-          <StringSetting v-model="name">
+          <StringSetting class="meta-field" v-model="name">
             {{ $t('settings.style.themes3.editor.style_name') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting v-model="author">
+          <StringSetting class="meta-field" v-model="author">
             {{ $t('settings.style.themes3.editor.style_author') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting v-model="license">
+          <StringSetting class="meta-field" v-model="license">
             {{ $t('settings.style.themes3.editor.style_license') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting v-model="website">
+          <StringSetting class="meta-field" v-model="website">
             {{ $t('settings.style.themes3.editor.style_website') }}
           </StringSetting>
         </li>
@@ -262,34 +272,34 @@
         :label="$t('settings.style.themes3.editor.palette_tab')"
         class="setting-item list-editor palette-editor"
       >
-          <label
-            class="list-select-label"
-            for="palette-selector"
+        <label
+          class="list-select-label"
+          for="palette-selector"
+        >
+          {{ $t('settings.style.themes3.palette.label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          id="palette-selector"
+          v-model="selectedPaletteId"
+          class="list-select"
+          size="4"
+        >
+          <option
+            v-for="(p, index) in palettes"
+            :key="p.name"
+            :value="index"
           >
-            {{ $t('settings.style.themes3.palette.label') }}
-            {{ ' ' }}
-          </label>
-          <Select
-            id="palette-selector"
-            v-model="selectedPaletteId"
-            class="list-select"
-            size="4"
-          >
-            <option
-              v-for="(p, index) in palettes"
-              :key="p.name"
-              :value="index"
-            >
-              {{ p.name }}
-            </option>
-          </Select>
-          <SelectMotion
-            class="list-select-movement"
-            v-model="palettes"
-            :get-add-value="getNewPalette"
-            :selected-id="selectedPaletteId"
-            @update:selectedId="e => selectedPaletteId = e"
-          />
+            {{ p.name }}
+          </option>
+        </Select>
+        <SelectMotion
+          class="list-select-movement"
+          v-model="palettes"
+          :get-add-value="getNewPalette"
+          :selected-id="selectedPaletteId"
+          @update:selectedId="e => selectedPaletteId = e"
+        />
         <PaletteEditor
           class="list-edit-area"
           v-model="selectedPalette"

src/components/shadow_control/shadow_control.scss

@@ -112,7 +112,7 @@
 
   .shadow-preview {
     grid-area: preview;
-    min-width: 10em;
+    min-width: 25em;
     margin-left: 0.125em;
     align-self: start;
     justify-self: center;

src/i18n/en.json

@@ -799,6 +799,7 @@
           "link_color": "Link color",
           "include_in_rule": "Add to rule",
           "test_string": "TEST",
+          "refresh_preview": "Refresh preview",
           "text_auto": {
             "label": "Auto-contrast",
             "no-preserve": "Black or White",