Merge branch 'appearance-tab' into shigusegubu-themes3

changelog.d/appearance-tab.change

@@ -0,0 +1 @@
+Reorganized Settings modal to move out visual stuff into Appearance tab

changelog.d/emoji-scale.add

@@ -0,0 +1 @@
+Ability to change size of emoji

changelog.d/firefox-redmon.fix

@@ -0,0 +1 @@
+Bug with firefox and redmond themes

changelog.d/theme-selector.add

@@ -0,0 +1 @@
+Theme selector with visual previews of the theme

changelog.d/ui-scale.add

@@ -0,0 +1 @@
+Ability to resize UI (and certain components) scale independent of browser/text scale

changelog.d/user-overrides.add

@@ -0,0 +1 @@
+Ability to override certain aspects of UI style independent of theme used (UI roundness, fonts, underlay)

src/components/font_control/font_control.js

@@ -50,10 +50,10 @@ export default {
       return typeof this.modelValue !== 'undefined'
     },
     localFontsList () {
-      return this.$store.state.interface.localFonts?.values()
+      return this.$store.state.interface.localFonts
     },
     localFontsSize () {
-      return this.$store.state.interface.localFonts?.size
+      return this.$store.state.interface.localFonts?.length
     }
   }
 }

src/components/font_control/font_control.vue

@@ -82,9 +82,9 @@
         </button>
         <Select
           :id="name + '-local-font-switcher'"
-          :model-value="modelValue.family"
+          :model-value="modelValue?.family"
           class="custom-font"
-          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+          @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
         >
           <optgroup
             :label="$t('settings.style.themes3.font.group-builtin')"

src/components/settings_modal/helpers/unit_setting.vue

@@ -13,7 +13,7 @@
       :id="path"
       class="input number-input"
       type="number"
-      step="step"
+      :step="step"
       :disabled="disabled"
       :min="min || 0"
       :value="stateValue"

src/components/settings_modal/settings_modal_user_content.js

@@ -20,7 +20,8 @@ import {
   faBell,
   faDownload,
   faEyeSlash,
-  faInfo
+  faInfo,
+  faWindowRestore
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -31,7 +32,8 @@ library.add(
   faBell,
   faDownload,
   faEyeSlash,
-  faInfo
+  faInfo,
+  faWindowRestore
 )
 
 const SettingsModalContent = {

src/components/settings_modal/settings_modal_user_content.vue

@@ -23,7 +23,7 @@
     </div>
     <div
       :label="$t('settings.appearance')"
-      icon="paint-brush"
+      icon="window-restore"
       data-tab-name="appearance"
     >
       <AppearanceTab />

src/components/settings_modal/tabs/appearance_tab.js

@@ -151,9 +151,21 @@ const AppearanceTab = {
     ...SharedComputedObject()
   },
   methods: {
+    updateFont (key, value) {
+      console.log(key, value)
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
     isThemeActive (key) {
       const { theme } = this.mergedConfig
-      console.log(key, theme)
       return key === theme
     },
     setTheme (name) {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -73,42 +73,42 @@
           <ul class="setting-list">
             <li>
               <FontControl
-                :model-value="fontsOverride.interface"
+                :model-value="mergedConfig.theme3hacks.fonts.interface"
                 name="ui"
                 :label="$t('settings.style.fonts.components.interface')"
                 :fallback="{ family: 'sans-serif' }"
                 no-inherit="1"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
+                @update:modelValue="v => updateFont('interface', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.input"
+                :model-value="mergedConfig.theme3hacks.fonts.input"
                 name="input"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
+                @update:modelValue="v => updateFont('input', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.post"
+                :model-value="mergedConfig.theme3hacks.fonts.post"
                 name="post"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
+                @update:modelValue="v => updateFont('post', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.postCode"
+                :model-value="mergedConfig.theme3hacks.fonts.monospace"
                 name="postCode"
                 :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.postCode')"
+                :label="$t('settings.style.fonts.components.monospace')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+                @update:modelValue="v => updateFont('monospace', v)"
               />
             </li>
           </ul>

src/i18n/en.json

@@ -898,7 +898,7 @@
           "interface": "Interface",
           "input": "Input fields",
           "post": "Post text",
-          "postCode": "Monospaced text in a post (rich text)"
+          "monospace": "Monospaced text"
         },
         "family": "Font name",
         "size": "Size (in px)",

src/modules/config.js

@@ -49,10 +49,14 @@ export const defaultState = {
   // V3
   themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
   forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
-  palette: null, // not used yet, will be used for V3
   theme3hacks: { // Hacks, user overrides that are independent of theme used
     underlay: 'none',
-    badgeColor: null
+    fonts: {
+      interface: undefined,
+      input: undefined,
+      post: undefined,
+      monospace: undefined
+    }
   },
 
   hideISP: false,
@@ -147,7 +151,6 @@ export const defaultState = {
   navbarSize: undefined, // instance default
   panelHeaderSize: undefined, // instance default
   forcedRoundness: undefined, // instance default
-  fontsOverride: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default

src/modules/interface.js

@@ -112,7 +112,8 @@ const interfaceMod = {
       state.lastTimeline = value
     },
     setFontsList (state, value) {
-      state.localFonts = new Set(value.map(font => font.family))
+      // Set is used here so that we filter out duplicate fonts (possibly same font but with different weight)
+      state.localFonts = [...(new Set(value.map(font => font.family))).values()]
     }
   },
   actions: {
@@ -196,7 +197,6 @@ const interfaceMod = {
       window
         .queryLocalFonts()
         .then((fonts) => {
-          console.log(fonts)
           commit('setFontsList', fonts)
         })
         .catch((e) => {
@@ -275,6 +275,46 @@ const interfaceMod = {
 
           Object.entries(theme3hacks).forEach(([key, value]) => {
             switch (key) {
+              case 'fonts': {
+                Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+                  if (!font?.family) return
+                  switch (fontKey) {
+                    case 'interface':
+                      hacks.push({
+                        component: 'Root',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'input':
+                      hacks.push({
+                        component: 'Input',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'post':
+                      hacks.push({
+                        component: 'RichContent',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'monospace':
+                      hacks.push({
+                        component: 'Root',
+                        directives: {
+                          '--monoFont': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                  }
+                })
+                break
+              }
               case 'underlay': {
                 if (value !== 'none') {
                   const newRule = {
@@ -288,7 +328,6 @@ const interfaceMod = {
                   if (value === 'transparent') {
                     newRule.directives.opacity = 0
                   }
-                  console.log('NEW RULE', newRule)
                   hacks.push(newRule)
                 }
                 break

src/services/theme_data/theme_data.service.js

@@ -117,7 +117,6 @@ export const topoSort = (
       // Put it into the output list
       output.push(node)
     } else if (grays.has(node)) {
-      console.debug('Cyclic depenency in topoSort, ignoring')
       output.push(node)
     } else if (blacks.has(node)) {
       // do nothing