5 files changed, 61 insertions(+), 8 deletions(-)

M app/javascript/flavours/glitch/features/local_settings/page/index.jsx
M app/javascript/flavours/glitch/features/ui/index.jsx
M app/javascript/flavours/glitch/is_mobile.ts
M app/javascript/flavours/glitch/locales/en.json
M app/javascript/flavours/glitch/reducers/local_settings.js

@@ 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' },


@@ 162,6 168,19 @@ class LocalSettingsPage extends PureComponent {
           <h2><FormattedMessage id='settings.layout_opts' defaultMessage='Layout options' /></h2>
           <LocalSettingsPageItem
             settings={settings}
+            item={['layout']}
+            id='mastodon-settings--layout'
+            options={[
+              { value: 'auto', message: intl.formatMessage(messages.layout_auto), hint: intl.formatMessage(messages.layout_auto_hint) },
+              { value: 'multiple', message: intl.formatMessage(messages.layout_desktop), hint: intl.formatMessage(messages.layout_desktop_hint) },
+              { value: 'single', message: intl.formatMessage(messages.layout_mobile), hint: intl.formatMessage(messages.layout_mobile_hint) },
+            ]}
+            onChange={onChange}
+          >
+            <FormattedMessage id='settings.layout' defaultMessage='Layout:' />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
             item={['stretch']}
             id='mastodon-settings--stretch'
             onChange={onChange}

@@ 79,6 79,7 @@ const mapStateToProps = state => ({
   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) {

@@ 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';
+      }
   }
 };
 

@@ 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",

@@ 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',