Merge branch 'themes-updates' into shigusegubu-themes3

src/components/emoji_reactions/emoji_reactions.js

@@ -87,7 +87,10 @@ const EmojiReactions = {
           'btn',
           'button-default',
           'emoji-reaction-count-button',
-          { '-picked-reaction': this.reactedWith(reaction.name) }
+          {
+            '-picked-reaction': this.reactedWith(reaction.name),
+            toggled: this.reactedWith(reaction.name)
+          }
         ],
         'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
       }

src/components/emoji_reactions/emoji_reactions.vue

@@ -10,7 +10,7 @@
         v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
         role="button"
         class="emoji-reaction btn button-default"
-        :class="{ '-picked-reaction': reactedWith(reaction.name) }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name), toggled: reactedWith(reaction.name) }"
         :title="reaction.url ? reaction.name : undefined"
         :aria-pressed="reactedWith(reaction.name)"
         @click="emojiOnClick(reaction.name, $event)"

src/components/palette_editor/palette_editor.vue

@@ -30,6 +30,8 @@
       v-if="apply"
       class="btn button-default palette-apply-button"
       @click="applyPalette"
+      :disabled="disabled"
+      :class="{ disabled }"
     >
       {{ $t('settings.style.themes3.palette.apply') }}
     </button>
@@ -67,7 +69,7 @@ const paletteKeys = [
   'wallpaper'
 ]
 
-const props = defineProps(['modelValue', 'compact', 'apply'])
+const props = defineProps(['modelValue', 'compact', 'apply', 'disabled'])
 const emit = defineEmits(['update:modelValue', 'applyPalette'])
 const getExportedObject = () => paletteKeys.reduce((acc, key) => {
   const value = props.modelValue[key]

src/components/settings_modal/tabs/appearance_tab.js

@@ -186,6 +186,9 @@ const AppearanceTab = {
     }
   },
   computed: {
+    switchInProgress () {
+      return this.$store.state.interface.themeChangeInProgress
+    },
     paletteDataUsed () {
       return this.$store.state.interface.paletteDataUsed
     },

src/components/settings_modal/tabs/appearance_tab.scss

@@ -20,14 +20,25 @@
     }
   }
 
+  h4 {
+    margin: 0.5em 0;
+  }
+
   .palettes {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 0.5em;
+    height: 15em;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    margin: -0.5em;
+    padding: 0.5em;
 
-    h4,
+    h4 {
-    .unsupported-theme-v2,
+      margin: 0;
-    .userPalette {
       grid-column: 1 / span 2;
     }
   }
@@ -37,6 +48,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 0.5em;
+    height: 2.5em;
 
     .palette-label label {
       text-align: center;
@@ -73,13 +85,13 @@
       margin-top: 0.5em;
       width: 100%;
     }
+  }
 
-    .palette-preview {
+  .palette-preview {
-      display: grid;
+    display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
-      grid-template-rows: 1em 1em;
+    grid-template-rows: 1em 1em;
-      margin-bottom: 0.5em;
+    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,54 +91,61 @@
       </div>
       <div class="setting-item">
         <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
-        <div class="palettes">
+        <div
+          v-if="customThemeVersion === 'v3'"
+          class="palettes"
+        >
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <button
+            v-for="p in stylePalettes || []"
+            :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 ?? $t('settings.style.themes3.palette.user') }}
+              </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>{{ $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>
           <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>
-            <button
-              v-for="p in stylePalettes || []"
-              :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 ?? $t('settings.style.themes3.palette.user') }}
-                </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="expertLevel > 0">
               {{ $t('settings.style.themes3.palette.user') }}
             </h4>
@@ -145,6 +156,7 @@
               :compact="true"
               :apply="true"
               @applyPalette="data => setPaletteCustom(data)"
+              :disabled="switchInProgress"
             />
           </template>
           <template v-else-if="customThemeVersion === 'v2'">

src/components/top_bar.style.js

@@ -23,6 +23,15 @@ export default {
           alpha: 0.6
         }]
       }
+    },
+    {
+      component: 'Link',
+      parent: {
+        component: 'TopBar'
+      },
+      directives: {
+        textColor: '--text'
+      }
     }
   ]
 }

src/modules/interface.js

@@ -10,6 +10,7 @@ const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
 const defaultState = {
   localFonts: null,
   themeApplied: false,
+  themeChangeInProgress: false,
   themeVersion: 'v3',
   styleNameUsed: null,
   styleDataUsed: null,
@@ -556,11 +557,13 @@ const interfaceMod = {
         themeDebug,
         theme3hacks
       } = rootState.config
+      state.themeChangeInProgress = true
       // If we're not not forced to recompile try using
       // cache (tryLoadCache return true if load successful)
 
       const forceRecompile = forceThemeRecompilation || recompile
       if (!forceRecompile && !themeDebug && await tryLoadCache()) {
+        state.themeChangeInProgress = false
         return commit('setThemeApplied')
       }
       window.splashUpdate('splash.theme')
@@ -669,7 +672,9 @@ const interfaceMod = {
         return applyTheme(
           rulesetArray.flat(),
           () => commit('setThemeApplied'),
-          () => {},
+          () => {
+            state.themeChangeInProgress = false
+          },
           themeDebug
         )
       } catch (e) {

static/palettes/index.json

@@ -25,10 +25,52 @@
     "cRed": "#cc6666",
     "cBlue": "#8abeb7",
     "cGreen": "#b5bd68",
-    "cOrange": "#de935f",
+    "cOrange": "#de935f"
-    "_cYellow": "#f0c674",
+  },
-    "_cPurple": "#b294bb"
+  "dracula": {
+    "name": "Dracula",
+    "bg": "#282A36",
+    "fg": "#44475A",
+    "link": "#BC92F9",
+    "text": "#f8f8f2",
+    "cRed": "#FF5555",
+    "cBlue": "#8BE9FD",
+    "cGreen": "#50FA7B",
+    "cOrange": "#FFB86C"
   },
   "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
-  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ]
+  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
+  "purple-stream": {
+    "name": "Purple stream",
+    "bg": "#17171A",
+    "fg": "#450F92",
+    "link": "#8769B4",
+    "text": "#C0C0C5",
+    "cRed": "#EB0300",
+    "cBlue": "#4656FF",
+    "cGreen": "#B0E020",
+    "cOrange": "#FF9046"
+  },
+  "feud": {
+    "name": "Feud",
+    "bg": "#323337",
+    "fg": "#1D1E21",
+    "link": "#18A0E3",
+    "text": "#DBDDE0",
+    "cRed": "#E05053",
+    "cBlue": "#6671E2",
+    "cGreen": "#3A8D5D",
+    "cOrange": "#DCAA45"
+  },
+  "constabulary": {
+    "name": "Constabulary",
+    "bg": "#FFFFFF",
+    "fg": "#3B5897",
+    "link": "#28487C",
+    "text": "#333333",
+    "cRed": "#FA3C4C",
+    "cBlue": "#0083FF",
+    "cGreen": "#44BDC6",
+    "cOrange": "#FFC200"
+  }
 }