Merge branch 'small-fixes-and-improvements' into shigusegubu-themes3

src/components/font_control/font_control.vue

@@ -23,7 +23,7 @@
     </div>
     {{ ' ' }}
     <div
-      v-if="modelValue?.family"
+      v-if="modelValue"
       class="font-input setting-item"
     >
       <label
@@ -67,10 +67,10 @@
         </button>
         <input
           :id="name"
-          :model-value="modelValue.family"
+          :model-value="modelValue"
           class="input custom-font"
           type="text"
-          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+          @update:modelValue="$emit('update:modelValue', $event.target.value)"
         >
       </span>
       <span
@@ -89,9 +89,9 @@
         </button>
         <Select
           :id="name + '-local-font-switcher'"
-          :model-value="modelValue?.family"
+          :model-value="modelValue"
           class="custom-font"
-          @update:model-value="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
+          @update:model-value="v => $emit('update:modelValue', v)"
         >
           <optgroup
             :label="$t('settings.style.themes3.font.group-builtin')"

src/components/status_action_buttons/action_button.scss

@@ -6,19 +6,24 @@
   display: flex;
   align-items: baseline;
   align-items: center;
-  height: 1.5em;
+  border: 2px solid transparent;
+
+  .chevron-popover {
+    .popover-trigger-button {
+      display: flex;
+    }
+  }
 
   .action-counter {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    margin-left: 1em;
   }
 
   .action-button-inner,
   .extra-button {
-    margin: -0.5em;
     padding: 0.5em;
+    z-index: 1;
   }
 
   .separator {
@@ -26,27 +31,12 @@
     align-self: stretch;
     width: 1px;
     background-color: var(--icon);
-    margin-left: 0.75em;
-    margin-right: 0.125em;
-  }
-
-  &.-pin {
-    margin: calc(-2px - 0.25em);
-    padding: 0.25em;
-    border: 2px dashed var(--icon);
-    border-radius: var(--roundness);
-    grid-template-columns: minmax(max-content, 1fr) auto;
-
-    .chevron-icon,
-    .extra-button,
-    .separator {
-      display: none;
-    }
+    margin: 0.5em 0;
   }
 
   .action-button-inner {
     display: grid;
-    grid-gap: 1em;
+    grid-gap: 0.125em;
     grid-template-columns: max-content;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
@@ -72,6 +62,32 @@
       }
     }
   }
+
+  &.-pin {
+    border: 2px dashed var(--icon);
+    border-radius: var(--roundness);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+
+    .action-button-inner {
+      opacity: 0.8;
+      padding-right: 0;
+      pointer-events: none;
+    }
+
+    .chevron-icon,
+    .extra-button,
+    .separator {
+      display: none;
+    }
+  }
+
+  &.-with-extra {
+    .action-button-inner,
+    .extra-button {
+      padding-left: 0.2em;
+      padding-right: 0.25em;
+    }
+  }
 }
 
 .action-button {
@@ -106,7 +122,7 @@
   &.-extra {
     .action-counter {
       justify-self: end;
-      margin-right: 1em;
+      margin-left: 1em;
     }
 
     .chevron-icon {

src/components/status_action_buttons/action_button.vue

@@ -54,7 +54,6 @@
       <FAIcon
         v-if="button.dropdown?.()"
         class="chevron-icon"
-        size="lg"
         :icon="extra ? 'chevron-right' : 'chevron-up'"
         fixed-width
       />
@@ -71,6 +70,7 @@
     />
     <Popover
       v-if="button.name === 'bookmark'"
+      class="chevron-popover"
       :trigger="extra ? 'hover' : 'click'"
       :placement="extra ? 'right' : 'top'"
       :offset="extra ? { x: 10 } : { y: 10 }"
@@ -79,7 +79,6 @@
       <template #trigger>
         <FAIcon
           class="chevron-icon"
-          size="lg"
           :icon="extra ? 'chevron-right' : 'chevron-up'"
           fixed-width
         />

src/components/status_action_buttons/status_action_buttons.scss

@@ -3,16 +3,19 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, 3em));
+    margin-left: -0.5em;
+    grid-template-columns: repeat(auto-fill, minmax(3.5em, 10%));
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
-    grid-gap: 1.25em 0;
+    grid-gap: 0.5em 0.1em;
     margin-top: var(--status-margin);
   }
 
   .pin-action-button {
-    margin: -0.5em;
+    display: flex;
+    z-index: 1;
     padding: 0.5em;
+    margin: 0;
   }
 }
 // popover

src/components/status_action_buttons/status_action_buttons.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="StatusActionButtons">
-    <span class="quick-action-buttons">
+    <span
+      class="quick-action-buttons"
+      :class="{ '-pin': showPin }"
+      >
       <span
         v-for="button in quickButtons"
         :key="button.name"
         class="quick-action"
-        :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
+        :class="{ '-pin': showPin, '-toggle': button.dropdown?.(), '-with-extra': button.name === 'bookmark' }"
       >
         <ActionButtonContainer
           :class="{ '-pin': showPin }"
@@ -30,7 +33,6 @@
           <FAIcon
             v-if="showPin && currentUser"
             fixed-width
-            class="fa-scale-110"
             icon="thumbtack"
           />
         </button>
@@ -38,6 +40,7 @@
       <Popover
         trigger="click"
         :trigger-attrs="triggerAttrs"
+        class="quick-action"
         :tabindex="0"
         placement="top"
         :offset="{ y: 5 }"
@@ -46,7 +49,7 @@
       >
         <template #trigger>
           <FAIcon
-            class="fa-scale-110 "
+            class="action-button-inner"
             icon="ellipsis-h"
           />
         </template>

src/modules/default_config_state.js

@@ -635,22 +635,22 @@ export const LOCAL_DEFAULT_CONFIG_DEFINITIONS = {
   },
   fontInterface: {
     description: 'Interface font override',
-    type: 'object',
+    type: 'string',
     default: null,
   },
   fontInput: {
     description: 'Input font override',
-    type: 'object',
+    type: 'string',
     default: null,
   },
   fontPosts: {
     description: 'Post font override',
-    type: 'object',
+    type: 'string',
     default: null,
   },
   fontMonospace: {
     description: 'Monospace font override',
-    type: 'object',
+    type: 'string',
     default: null,
   },
   themeDebug: {

src/services/theme_data/theme2_to_theme3.js

@@ -262,7 +262,7 @@ export const convertTheme2To3 = (data) => {
     Object.keys(data.fonts || {}).forEach((key) => {
       if (!fontsKeys.has(key)) return
       if (!data.fonts[key]) return
-      const originalFont = data.fonts[key].family
+      const originalFont = data.fonts[key]
       const rule = { source: '2to3' }
 
       switch (key) {

src/services/theme_data/theme_data.service.js

@@ -619,7 +619,7 @@ export const generateFonts = (input) => {
     rules: {
       fonts: Object.entries(fonts)
         .filter(([, v]) => v)
-        .map(([k, v]) => `--${k}Font: ${v.family}`)
+        .map(([k, v]) => `--${k}Font: ${v}`)
         .join(';'),
     },
     theme: {

src/stores/interface.js

@@ -196,7 +196,7 @@ export const useInterfaceStore = defineStore('interface', {
       }
     },
     setFontsList(value) {
-      this.localFonts = [...new Set(value.map((font) => font.family)).values()]
+      this.localFonts = [...new Set(value.map((font) => font)).values()]
     },
     queryLocalFonts() {
       if (this.localFonts !== null) return
@@ -654,7 +654,7 @@ export const useInterfaceStore = defineStore('interface', {
         }
 
         Object.entries(fontMap).forEach(([font, component]) => {
-          const family = mergedConfig[`font${font}`]?.family
+          const family = mergedConfig[`font${font}`]
           const variable = font === 'Monospace' ? '--monoFont' : '--font'
           if (family) {
             hacks.push({

test/unit/specs/stores/sync_config.spec.js

@@ -238,8 +238,8 @@ describe('The SyncConfig store', () => {
         store.pushSyncConfig = () => {
           /* no-op */
         }
-        store.setPreference({ path: 'simple.fontInput.family', value: 'test' })
-        store.unsetPreference({ path: 'simple.fontInput.family' })
+        store.setPreference({ path: 'simple.fontInput', value: 'test' })
+        store.unsetPreference({ path: 'simple.fontInput' })
         store.updateCache(store, { username: 'test' })
         expect(store.prefsStorage.simple.fontInput).to.not.have.property(
           'family',