Merge branch 'themes-updates' into 'develop'

Themes updates/fixes

See merge request pleroma/pleroma-fe!1962

src/components/settings_modal/tabs/appearance_tab.js

@@ -43,7 +43,7 @@ const AppearanceTab = {
       bundledPalettes: [],
       compilationCache: {},
       fileImporter: newImporter({
-        accept: '.json, .piss',
+        accept: '.json, .iss',
         validator: this.importValidator,
         onImport: this.onImport,
         parser: this.importParser,
@@ -186,6 +186,9 @@ const AppearanceTab = {
     }
   },
   computed: {
+    switchInProgress () {
+      return this.$store.state.interface.themeChangeInProgress
+    },
     paletteDataUsed () {
       return this.$store.state.interface.paletteDataUsed
     },
@@ -302,14 +305,14 @@ const AppearanceTab = {
     importParser (file, filename) {
       if (filename.endsWith('.json')) {
         return JSON.parse(file)
-      } else if (filename.endsWith('.piss')) {
+      } else if (filename.endsWith('.iss')) {
         return deserialize(file)
       }
     },
     onImport (parsed, filename) {
       if (filename.endsWith('.json')) {
         this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
-      } else if (filename.endsWith('.piss')) {
+      } else if (filename.endsWith('.iss')) {
         this.$store.dispatch('setStyleCustom', parsed)
       }
     },
@@ -321,7 +324,7 @@ const AppearanceTab = {
       if (filename.endsWith('.json')) {
         const version = parsed._pleroma_theme_version
         return version >= 1 || version <= 2
-      } else if (filename.endsWith('.piss')) {
+      } else if (filename.endsWith('.iss')) {
         if (!Array.isArray(parsed)) return false
         if (parsed.length < 1) return false
         if (parsed.find(x => x.component === '@meta') == null) return false

src/components/settings_modal/tabs/appearance_tab.scss

@@ -20,26 +20,47 @@
     }
   }
 
+  h4 {
+    margin: 0.5em 0;
+  }
+
+  .palettes-container {
+    height: 15em;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    margin: -0.5em;
+  }
+
   .palettes {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 0.5em;
+    padding: 0.5em;
+    width: 100%;
 
-    h4,
-    .unsupported-theme-v2,
-    .userPalette {
+    h4 {
+      margin: 0;
       grid-column: 1 / span 2;
     }
   }
 
   .palette-entry {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     align-items: center;
     justify-content: space-between;
     padding: 0 0.5em;
+    height: max-content;
 
-    .palette-label label {
-      text-align: center;
+    .palette-label {
+      height: auto;
+
+      label {
+        text-align: center;
+      }
     }
 
     .palette-square {
@@ -63,23 +84,26 @@
   }
 
   .modal-view.-mobile & {
+    .palettes {
+      grid-template-columns: 1fr;
+    }
+
     .palette-entry {
-      flex-wrap: wrap;
+      grid-column: 1;
       justify-content: center;
     }
 
     .palette-label {
       line-height: 1.5em;
       margin-top: 0.5em;
-      width: 100%;
     }
+  }
 
-    .palette-preview {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      grid-template-rows: 1em 1em;
-      margin-bottom: 0.5em;
-    }
+  .palette-preview {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1em 1em;
+    margin: 0.5em 0;
   }
 
   .theme-list {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -12,8 +12,9 @@
         <button
           class="button-default theme-preview"
           data-theme-key="stock"
-          :class="{ toggled: isStyleActive('stock') }"
           @click="resetTheming"
+          :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
+          :disabled="switchInProgress"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <!-- eslint-disable vue/no-v-html -->
@@ -56,8 +57,9 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isStyleActive(style.key) }"
+          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
+          :disabled="switchInProgress"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <!-- eslint-disable vue/no-v-html -->
@@ -80,6 +82,8 @@
         <button
           class="btn button-default"
           @click="importFile"
+          :class="{ disabled: switchInProgress }"
+          :disabled="switchInProgress"
         >
           <FAIcon icon="folder-open" />
           {{ $t('settings.style.themes3.editor.load_style') }}
@@ -87,38 +91,20 @@
       </div>
       <div class="setting-item">
         <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
-        <div class="palettes">
-          <template v-if="customThemeVersion === 'v3'">
-            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
-            <button
-              v-for="p in bundledPalettes"
-              :key="p.name"
-              class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
-              @click="() => setPalette(p.key, p)"
-            >
-              <div class="palette-label">
-                <label>
-                  {{ p.name }}
-                </label>
-              </div>
-              <div class="palette-preview">
-                <span
-                  v-for="c in palettesKeys"
-                  :key="c"
-                  class="palette-square"
-                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-                />
-              </div>
-            </button>
-            <h4 v-if="stylePalettes?.length > 0">
-              {{ $t('settings.style.themes3.palette.style') }}
-            </h4>
+        <div
+          v-if="customThemeVersion === 'v3'"
+          class="palettes-container"
+        >
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <div class="palettes">
             <button
               v-for="p in stylePalettes || []"
               :key="p.name"
               class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
               @click="() => setPalette(p.key, p)"
             >
               <div class="palette-label">
@@ -135,6 +121,33 @@
                 />
               </div>
             </button>
+            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+            <button
+              v-for="p in bundledPalettes"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+        <div>
+          <template v-if="customThemeVersion === 'v3'">
             <h4 v-if="expertLevel > 0">
               {{ $t('settings.style.themes3.palette.user') }}
             </h4>
@@ -145,6 +158,7 @@
               :compact="true"
               :apply="true"
               @applyPalette="data => setPaletteCustom(data)"
+              :disabled="switchInProgress"
             />
           </template>
           <template v-else-if="customThemeVersion === 'v2'">

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

@@ -604,7 +604,7 @@ export default {
     const styleExporter = newExporter({
       filename: () => exports.name.value ?? 'pleroma_theme',
       mime: 'text/plain',
-      extension: 'piss',
+      extension: 'iss',
       getExportedObject: () => exportStyleData.value
     })
 
@@ -636,7 +636,7 @@ export default {
     }
 
     const styleImporter = newImporter({
-      accept: '.piss',
+      accept: '.iss',
       parser (string) { return deserialize(string) },
       onImportFailure (result) {
         console.error('Failure importing style:', result)