Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

src/App.js

@@ -67,6 +67,9 @@ export default {
     themeApplied () {
       return this.$store.state.interface.themeApplied
     },
+    layoutModalClass () {
+      return '-' + this.layoutType
+    },
     classes () {
       return [
         {

src/App.vue

@@ -70,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal />
+    <SettingsModal :class="layoutModalClass"/>
     <UpdateNotification />
     <GlobalNoticeList />
   </div>

src/components/palette_editor/palette_editor.vue

@@ -168,6 +168,25 @@ const updatePalette = (paletteKey, value) => {
         grid-column: 1 / span 2;
       }
     }
+
+    .-mobile & {
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(10, 1fr) auto;
+
+      .palette-import-button {
+        grid-column: 1;
+      }
+
+      .palette-export-button {
+        grid-column: 1;
+      }
+
+      &.-apply {
+        .palette-apply-button {
+          grid-column: 1;
+        }
+      }
+    }
   }
 }
 </style>

src/components/settings_modal/helpers/unit_setting.vue

@@ -10,31 +10,33 @@
       <slot />
     </label>
     {{ ' ' }}
-    <input
+    <span class="no-break">
-      :id="path"
+      <input
-      class="input number-input"
+        :id="path"
-      type="number"
+        class="input number-input"
-      :step="step"
+        type="number"
-      :disabled="disabled"
+        :step="step"
-      :min="min || 0"
+        :disabled="disabled"
-      :value="stateValue"
+        :min="min || 0"
-      @change="updateValue"
+        :value="stateValue"
-    >
+        @change="updateValue"
-    <Select
-      :id="path"
-      :model-value="stateUnit"
-      :disabled="disabled"
-      class="unit-input unstyled"
-      @change="updateUnit"
-    >
-      <option
-        v-for="option in units"
-        :key="option"
-        :value="option"
       >
-        {{ getUnitString(option) }}
+      <Select
-      </option>
+        :id="path"
-    </Select>
+        :model-value="stateUnit"
+        :disabled="disabled"
+        class="unit-input unstyled"
+        @change="updateUnit"
+      >
+        <option
+          v-for="option in units"
+          :key="option"
+          :value="option"
+        >
+          {{ getUnitString(option) }}
+        </option>
+      </Select>
+    </span>
     {{ ' ' }}
     <ModifiedIndicator
       :changed="isChanged"
@@ -47,6 +49,10 @@
 
 <style lang="scss">
 .UnitSetting {
+  .no-break {
+    display: inline-block;
+  }
+
   .number-input {
     max-width: 6.5em;
     text-align: right;

src/components/settings_modal/settings_modal.scss

@@ -76,6 +76,23 @@
     }
   }
 
+  &.-mobile {
+    .setting-list,
+    .option-list {
+      padding-left: 0.25em;
+
+      > li {
+        margin: 1em 0;
+        line-height: 1.5em;
+        vertical-align: center;
+      }
+
+      &.two-column {
+        column-count: 1;
+      }
+    }
+  }
+
   &.peek {
     .settings-modal-panel {
       /* Explanation:

src/components/settings_modal/settings_modal_admin_content.scss

@@ -17,10 +17,13 @@
     }
 
     .select-multiple {
+      margin-top: 0.5em;
       display: flex;
+      flex-direction: column;
 
       .option-list {
         margin: 0;
+        margin-top: 0.5em;
         padding-left: 0.5em;
       }
     }

src/components/settings_modal/settings_modal_user_content.js

@@ -67,6 +67,9 @@ const SettingsModalContent = {
     },
     expertLevel () {
       return this.$store.state.config.expertLevel
+    },
+    isMobileLayout () {
+      return this.$store.state.interface.layoutType === 'mobile'
     }
   },
   methods: {

src/components/settings_modal/settings_modal_user_content.scss

@@ -31,10 +31,13 @@
     }
 
     .select-multiple {
+      margin-top: 1em;
       display: flex;
+      flex-direction: column;
 
       .option-list {
         margin: 0;
+        margin-top: 0.5em;
         padding-left: 0.5em;
       }
     }

src/components/settings_modal/settings_modal_user_content.vue

@@ -21,6 +21,7 @@
       <AppearanceTab />
     </div>
     <div
+      v-if="expertLevel > 0 && !isMobileLayout"
       :label="$t('settings.style.themes3.editor.title')"
       icon="palette"
       data-tab-name="style"
@@ -28,7 +29,7 @@
       <StyleTab />
     </div>
     <div
-      v-if="expertLevel > 0"
+      v-if="expertLevel > 0 && !isMobileLayout"
       :label="$t('settings.theme_old')"
       icon="paint-brush"
       data-tab-name="theme"

src/components/settings_modal/tabs/appearance_tab.js

@@ -119,6 +119,8 @@ const AppearanceTab = {
       }))
     })
 
+    this.userPalette = this.$store.state.interface.paletteDataUsed || {}
+
     updateIndex('palette').then(bundledPalettes => {
       bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
         let palette
@@ -140,10 +142,6 @@ const AppearanceTab = {
           palette = { key, ...v }
         }
         this.bundledPalettes.push(palette)
-
-        if (this.isPaletteActive(key)) {
-          this.userPalette = palette
-        }
       }))
     })
 
@@ -169,7 +167,15 @@ const AppearanceTab = {
       })
     })
   },
+  watch: {
+    paletteDataUsed () {
+      this.userPalette = this.paletteDataUsed || {}
+    }
+  },
   computed: {
+    paletteDataUsed () {
+      return this.$store.state.interface.paletteDataUsed
+    },
     availableStyles () {
       return [
         ...this.availableThemesV3,
@@ -184,11 +190,6 @@ const AppearanceTab = {
     },
     stylePalettes () {
       const ruleset = this.$store.state.interface.styleDataUsed || []
-      console.log(
-        'ASR',
-        this.$store.state.interface.paletteDataUsed,
-        this.$store.state.interface.styleDataUsed
-      )
       if (!ruleset && ruleset.length === 0) return
       const meta = ruleset.find(x => x.component === '@meta')
       const result = ruleset.filter(x => x.component.startsWith('@palette'))

src/components/settings_modal/tabs/appearance_tab.scss

@@ -35,9 +35,11 @@
   .palette-entry {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    padding: 0 0.5em;
 
-    > label {
+    .palette-label label {
-      flex: 1 0 auto;
+      text-align: center;
     }
 
     .palette-square {
@@ -60,6 +62,26 @@
     margin-top: 0.5em;
   }
 
+  .modal-view.-mobile & {
+    .palette-entry {
+      flex-wrap: wrap;
+      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;
+    }
+  }
+
   .theme-list {
     list-style: none;
     display: flex;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -93,15 +93,19 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPalette(p.key, p)"
             >
-              <label>
+              <div class="palette-label">
-                {{ p.name }}
+                <label>
-              </label>
+                  {{ p.name }}
-              <span
+                </label>
-                v-for="c in palettesKeys"
+              </div>
-                :key="c"
+              <div class="palette-preview">
-                class="palette-square"
+                <span
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                  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') }}
@@ -113,20 +117,25 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPaletteCustom(p)"
             >
-              <label>
+              <div class="palette-label">
-                {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+                <label>
-              </label>
+                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
-              <span
+                </label>
-                v-for="c in palettesKeys"
+              </div>
-                :key="c"
+              <div class="palette-preview">
-                class="palette-square"
+                <span
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                  v-for="c in palettesKeys"
-              />
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
             </button>
-            <h4>
+            <h4 v-if="expertLevel > 0">
               {{ $t('settings.style.themes3.palette.user') }}
             </h4>
             <PaletteEditor
+              v-if="expertLevel > 0"
               class="userPalette"
               v-model="userPalette"
               :compact="true"

src/components/tab_switcher/tab_switcher.scss

@@ -139,6 +139,11 @@
           margin-right: calc(0.25em - 200px);
           margin-left: 0.25em;
 
+          &:not(.active) {
+            margin-top: 0;
+            margin-left: 0.5em;
+          }
+
           .text {
             display: none;
           }

static/styles/Breezy DX.piss

@@ -6,28 +6,29 @@
 }
 
 @palette.Dark {
-  bg: #121a24;
+  bg: #292C32;
-  fg: #182230;
+  fg: #292C32;
-  text: #b9b9ba;
+  text: #ffffff;
-  link: #d8a070;
+  link: #1CA4F3;
-  accent: #d8a070;
+  accent: #1CA4F3;
-  cRed: #FF0000;
+  cRed: #f41a51;
-  cBlue: #0095ff;
+  cBlue: #1CA4F3;
-  cGreen: #0fa00f;
+  cGreen: #1af46e;
-  cOrange: #ffa500;
+  cOrange: #f4af1a;
 }
 
 @palette.Light {
-  bg: #f2f6f9;
+  bg: #EFF0F2;
-  fg: #d6dfed;
+  fg: #EFF0F2;
-  text: #304055;
+  text: #1B1F22;
   underlay: #5d6086;
-  accent: #f55b1b;
+  accent: #1CA4F3;
-  cBlue: #0095ff;
+  cBlue: #1CA4F3;
-  cRed: #d31014;
+  cRed: #f41a51;
-  cGreen: #0fa00f;
+  cGreen: #1af46e;
-  cOrange: #ffa500;
+  cOrange: #f4af1a;
   border: #d8e6f9;
+  link: #1CA4F3;
 }
 
 Root {
@@ -36,7 +37,7 @@ Root {
   --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1;
   --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35;
   --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1;
-  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05, inset 0 20 0 80 --accent / 0.2;
+  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05;
   --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35;
   --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
   --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
@@ -50,6 +51,14 @@ Button:hover {
   shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
 }
 
+Button:toggled {
+  background: $blend(--bg 0.8 --accent)
+}
+
+Button:pressed {
+  background: $blend(--bg 0.8 --accent)
+}
+
 Input {
   shadow: --defaultInputBevel
 }