From 915034f6a6f7aeea845b6d7aa257f17eb0f86abf Mon Sep 17 00:00:00 2001 From: jwbjnwolf <59905825+jwbjnwolf@users.noreply.github.com> Date: Fri, 19 Jan 2024 10:19:42 +0000 Subject: [PATCH] Revert "Remove layout glitch-soc settings" Reverts 0d61985713f124407f6ce1fbf0796abaf56dc280. Re-enables the ability to toggle between single/multi column ui. --- .../features/local_settings/page/index.jsx | 19 ++++++++++++++ .../flavours/glitch/features/ui/index.jsx | 17 ++++++++++++- app/javascript/flavours/glitch/is_mobile.ts | 25 +++++++++++++------ .../flavours/glitch/locales/en.json | 7 ++++++ .../glitch/reducers/local_settings.js | 1 + 5 files changed, 61 insertions(+), 8 deletions(-) diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx index 0a7f2f22d..ca2a4673c 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx @@ -17,6 +17,12 @@ import LocalSettingsPageItem from './item'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * const messages = defineMessages({ + layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, + layout_auto_hint: { id: 'layout.hint.auto', defaultMessage: 'Automatically chose layout based on “Enable advanced web interface” setting and screen size.' }, + layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, + layout_desktop_hint: { id: 'layout.hint.desktop', defaultMessage: 'Use multiple-column layout regardless of the “Enable advanced web interface” setting or screen size.' }, + layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, + layout_mobile_hint: { id: 'layout.hint.single', defaultMessage: 'Use single-column layout regardless of the “Enable advanced web interface” setting or screen size.' }, side_arm_none: { id: 'settings.side_arm.none', defaultMessage: 'None' }, side_arm_keep: { id: 'settings.side_arm_reply_mode.keep', defaultMessage: 'Keep its set privacy' }, side_arm_copy: { id: 'settings.side_arm_reply_mode.copy', defaultMessage: 'Copy privacy setting of the toot being replied to' }, @@ -160,6 +166,19 @@ class LocalSettingsPage extends PureComponent {

+ + + ({ hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0, hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0, canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4, + layout_local_setting: state.getIn(['local_settings', 'layout']), isWide: state.getIn(['local_settings', 'stretch']), dropdownMenuIsOpen: state.dropdownMenu.openId !== null, unreadNotifications: state.getIn(['notifications', 'unread']), @@ -259,6 +260,7 @@ class UI extends Component { static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, + layout_local_setting: PropTypes.string, isWide: PropTypes.bool, systemFontUi: PropTypes.bool, isComposing: PropTypes.bool, @@ -383,7 +385,7 @@ class UI extends Component { }); handleResize = () => { - const layout = layoutFromWindow(); + const layout = layoutFromWindow(this.props.layout_local_setting); if (layout !== this.props.layout) { this.handleLayoutChange.cancel(); @@ -447,6 +449,19 @@ class UI extends Component { } } + UNSAFE_componentWillReceiveProps (nextProps) { + if (nextProps.layout_local_setting !== this.props.layout_local_setting) { + const layout = layoutFromWindow(nextProps.layout_local_setting); + + if (layout !== this.props.layout) { + this.handleLayoutChange.cancel(); + this.props.dispatch(changeLayout(layout)); + } else { + this.handleLayoutChange(); + } + } + } + componentDidUpdate (prevProps) { if (this.props.unreadNotifications !== prevProps.unreadNotifications || this.props.showFaviconBadge !== prevProps.showFaviconBadge) { diff --git a/app/javascript/flavours/glitch/is_mobile.ts b/app/javascript/flavours/glitch/is_mobile.ts index 7f339e287..0995a63c1 100644 --- a/app/javascript/flavours/glitch/is_mobile.ts +++ b/app/javascript/flavours/glitch/is_mobile.ts @@ -9,13 +9,24 @@ export const isMobile = (width: number) => width <= LAYOUT_BREAKPOINT; export const transientSingleColumn = !forceSingleColumn && !hasMultiColumnPath; export type LayoutType = 'mobile' | 'single-column' | 'multi-column'; -export const layoutFromWindow = (): LayoutType => { - if (isMobile(window.innerWidth)) { - return 'mobile'; - } else if (!forceSingleColumn && !transientSingleColumn) { - return 'multi-column'; - } else { - return 'single-column'; +export const layoutFromWindow = (layout_local_setting: string): LayoutType => { + switch (layout_local_setting) { + case 'multiple': + return 'multi-column'; + case 'single': + if (isMobile(window.innerWidth)) { + return 'mobile'; + } else { + return 'single-column'; + } + default: + if (isMobile(window.innerWidth)) { + return 'mobile'; + } else if (forceSingleColumn) { + return 'single-column'; + } else { + return 'multi-column'; + } } }; diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 42e873011..3c2ee218b 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -64,6 +64,12 @@ "keyboard_shortcuts.bookmark": "to bookmark", "keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting", "keyboard_shortcuts.toggle_collapse": "to collapse/uncollapse toots", + "layout.auto": "Auto", + "layout.desktop": "Desktop", + "layout.hint.auto": "Automatically chose layout based on “Enable advanced web interface” setting and screen size.", + "layout.hint.desktop": "Use multiple-column layout regardless of the “Enable advanced web interface” setting or screen size.", + "layout.hint.single": "Use single-column layout regardless of the “Enable advanced web interface” setting or screen size.", + "layout.single": "Mobile", "media_gallery.sensitive": "Sensitive", "moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.", "navigation_bar.app_settings": "App settings", @@ -133,6 +139,7 @@ "settings.image_backgrounds_media_hint": "If the post has any media attachment, use the first one as a background", "settings.image_backgrounds_users": "Give collapsed toots an image background", "settings.inline_preview_cards": "Inline preview cards for external links", + "settings.layout": "Layout:", "settings.layout_opts": "Layout options", "settings.media": "Media", "settings.media_fullwidth": "Full-width media previews", diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index eefb06ce7..139a3c37e 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -6,6 +6,7 @@ import { LOCAL_SETTING_CHANGE, LOCAL_SETTING_DELETE } from 'flavours/glitch/acti import { STORE_HYDRATE } from 'flavours/glitch/actions/store'; const initialState = ImmutableMap({ + layout : 'auto', stretch : true, side_arm : 'none', side_arm_reply_mode : 'keep',