diff --git a/changelog.d/mobile-theme-editing.fix b/changelog.d/mobile-theme-editing.fix new file mode 100644 index 000000000..43ee05ec8 --- /dev/null +++ b/changelog.d/mobile-theme-editing.fix @@ -0,0 +1 @@ +Enable mobile theme editing diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue index fea9a20fe..f9a1e99bc 100644 --- a/src/components/settings_modal/settings_modal_user_content.vue +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -22,7 +22,7 @@
+
  • + + {{ $t('settings.theme_editor_min_width') }} + +
  • diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss index a9c35c085..6a86a3e08 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.scss +++ b/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; diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index c2e33e75e..d83beffa0 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/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; diff --git a/src/i18n/en.json b/src/i18n/en.json index 9d3400d10..545cdb1e1 100644 --- a/src/i18n/en.json +++ b/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", diff --git a/src/modules/config.js b/src/modules/config.js index 1d81f67f6..e515b9fe4 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -13,6 +13,7 @@ const APPEARANCE_SETTINGS_KEYS = new Set([ 'sidebarColumnWidth', 'contentColumnWidth', 'notifsColumnWidth', + 'themeEditorMinWidth', 'textSize', 'navbarSize', 'panelHeaderSize', diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js index 2baa752a6..eb12d2df1 100644 --- a/src/modules/default_config_state.js +++ b/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 diff --git a/src/modules/instance.js b/src/modules/instance.js index 7987f7e63..83671a881 100644 --- a/src/modules/instance.js +++ b/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, diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 50be54443..13606cdd9 100644 --- a/src/services/style_setter/style_setter.js +++ b/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,