Merge branch 'themes-updates' into shigusegubu-themes3

add 'toggled' to picked react emoji
always use text color in top bar
2024-12-27 00:29:21 +02:00 · 2024-12-27 00:27:41 +02:00 · 2024-12-27 00:22:20 +02:00 · 2024-12-27 00:22:08 +02:00 · 2024-12-26 23:45:43 +02:00
9 changed files with 154 additions and 66 deletions
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/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 })
      }
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/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)"
--- a/src/components/palette_editor/palette_editor.vue
+++ b/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]
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/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
    },
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/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,
-    .unsupported-theme-v2,
-    .userPalette {
+    h4 {
+      margin: 0;
      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 {
-      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 {
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/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'">
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@ -23,6 +23,15 @@ export default {
          alpha: 0.6
        }]
      }
+    },
+    {
+      component: 'Link',
+      parent: {
+        component: 'TopBar'
+      },
+      directives: {
+        textColor: '--text'
+      }
    }
  ]
 }
--- a/src/modules/interface.js
+++ b/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) {
--- a/static/palettes/index.json
+++ b/static/palettes/index.json
@ -25,10 +25,52 @@
    "cRed": "#cc6666",
    "cBlue": "#8abeb7",
    "cGreen": "#b5bd68",
-    "cOrange": "#de935f",
-    "_cYellow": "#f0c674",
-    "_cPurple": "#b294bb"
+    "cOrange": "#de935f"
+  },
+  "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"
+  }
 }
Author	SHA1	Message	Date
Henry Jameson	4b89c96799	Merge branch 'themes-updates' into shigusegubu-themes3	2024-12-27 00:29:21 +02:00
Henry Jameson	3caa45a8c5	add 'toggled' to picked react emoji	2024-12-27 00:27:41 +02:00
Henry Jameson	202a0e8dd7	always use text color in top bar	2024-12-27 00:22:20 +02:00
Henry Jameson	2869d7ef50	fresh new color schemes	2024-12-27 00:22:08 +02:00
Henry Jameson	6a1a3ebf13	update to palettes GUI + disable theme-setting stuff while change is in progress	2024-12-26 23:45:43 +02:00