Merge branch 'tusooa/enable-mobile-theme-edit' into 'develop'

Enable mobile theme editing

See merge request pleroma/pleroma-fe!2075

changelog.d/mobile-theme-editing.fix

@@ -0,0 +1 @@
+Enable mobile theme editing

src/components/settings_modal/settings_modal_user_content.vue

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

src/components/settings_modal/tabs/appearance_tab.vue

@@ -336,6 +336,15 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
+        <li>
+          <UnitSetting
+            path="themeEditorMinWidth"
+            :units="['px', 'rem']"
+            expert="1"
+          >
+            {{ $t('settings.theme_editor_min_width') }}
+          </UnitSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -1,4 +1,6 @@
 .StyleTab {
+  min-width: var(--themeEditorMinWidth, fit-content);
+
   .style-control {
     display: flex;
     flex-wrap: wrap;

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,4 +1,6 @@
 .theme-tab {
+  min-width: var(--themeEditorMinWidth, fit-content);
+
   .deprecation-warning {
     padding: 0.5em;
     margin: 2em;

src/i18n/en.json

@@ -709,6 +709,7 @@
     "column_sizes_sidebar": "Sidebar",
     "column_sizes_content": "Content",
     "column_sizes_notifs": "Notifications",
+    "theme_editor_min_width": "Minimum width of theme editor (0 for \"fit-content\")",
     "tree_advanced": "Allow more flexible navigation in tree view",
     "tree_fade_ancestors": "Display ancestors of the current status in faint text",
     "conversation_display_linear": "Linear-style",

src/modules/config.js

@@ -13,6 +13,7 @@ const APPEARANCE_SETTINGS_KEYS = new Set([
   'sidebarColumnWidth',
   'contentColumnWidth',
   'notifsColumnWidth',
+  'themeEditorMinWidth',
   'textSize',
   'navbarSize',
   'panelHeaderSize',

src/modules/default_config_state.js

@@ -121,6 +121,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  themeEditorMinWidth: undefined, // instance default
   emojiReactionsScale: undefined,
   textSize: undefined, // instance default
   emojiSize: undefined, // instance default

src/modules/instance.js

@@ -112,6 +112,7 @@ const defaultState = {
   emojiSize: '2.2rem',
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
+  themeEditorMinWidth: '0rem',
   forcedRoundness: -1,
   fontsOverride: {},
   virtualScrolling: true,

src/services/style_setter/style_setter.js

@@ -187,6 +187,7 @@ const extractStyleConfig = ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
+  themeEditorMinWidth,
   emojiReactionsScale,
   emojiSize,
   navbarSize,
@@ -198,6 +199,7 @@ const extractStyleConfig = ({
     sidebarColumnWidth,
     contentColumnWidth,
     notifsColumnWidth,
+    themeEditorMinWidth: parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
     emojiReactionsScale,
     emojiSize,
     navbarSize,