Move layout override into app settings modal

Squashed commit of the following:

commit 3842f879865818a3299f8283f8ed1b43c5566500
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Mon Jul 3 19:57:39 2017 -0500

    Fix some style issues

commit 08628a0234392ecac90e869a1272f429de0b6db2
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Mon Jul 3 19:35:22 2017 -0500

    Improved styling and layout of select app settings

commit 1787a7c20f2bf7101c6d6830450564178314a737
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Mon Jul 3 17:13:53 2017 -0500

    remove the layout selector ui from the drawer

commit 7d93b180b1e615e2c36210ad6f119fe80a2778d8
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Mon Jul 3 17:01:51 2017 -0500

    Add layout setting to app settings modal

app/javascript/mastodon/features/compose/index.js

@@ -7,7 +7,7 @@ import { mountCompose, unmountCompose } from '../../actions/compose';
 import { openModal } from '../../actions/modal';
 import { changeLocalSetting } from '../../actions/local_settings';
 import Link from 'react-router-dom/Link';
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 import SearchContainer from './containers/search_container';
 import Motion from 'react-motion/lib/Motion';
 import spring from 'react-motion/lib/spring';
@@ -23,7 +23,6 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
-  layout: state.getIn(['local_settings', 'layout']),
 });
 
 @connect(mapStateToProps)
@@ -35,7 +34,6 @@ export default class Compose extends React.PureComponent {
     multiColumn: PropTypes.bool,
     showSearch: PropTypes.bool,
     intl: PropTypes.object.isRequired,
-    layout: PropTypes.string,
   };
 
   componentDidMount () {
@@ -57,7 +55,7 @@ export default class Compose extends React.PureComponent {
   }
 
   render () {
-    const { multiColumn, showSearch, intl, layout } = this.props;
+    const { multiColumn, showSearch, intl } = this.props;
 
     let header = '';
 
@@ -73,46 +71,7 @@ export default class Compose extends React.PureComponent {
       );
     }
 
-    let layoutContent = '';
-
-    switch (layout) {
-    case 'single':
-      layoutContent = (
-        <div className='layout__selector'>
-          <p>
-            <FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></b>
-          </p>
-          <p>
-            <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='auto'><FormattedMessage id='layout.auto' defaultMessage='Auto' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='multiple'><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></a>
-          </p>
-        </div>
-      );
-      break;
-    case 'multiple':
-      layoutContent = (
-        <div className='layout__selector'>
-          <p>
-            <FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></b>
-          </p>
-          <p>
-            <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='auto'><FormattedMessage id='layout.auto' defaultMessage='Auto' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='single'><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></a>
-          </p>
-        </div>
-      );
-      break;
-    default:
-      layoutContent = (
-        <div className='layout__selector'>
-          <p>
-            <FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.auto' defaultMessage='Auto' /></b>
-          </p>
-          <p>
-            <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='multiple'><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='single'><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></a>
-          </p>
-        </div>
-      );
-      break;
-    }
+
 
     return (
       <div className='drawer'>
@@ -135,8 +94,6 @@ export default class Compose extends React.PureComponent {
           </Motion>
         </div>
 
-        {layoutContent}
-
       </div>
     );
   }

app/javascript/mastodon/features/ui/components/settings_modal.js

@@ -1,18 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 
+const messages = defineMessages({
+  layout_auto: {  id: 'layout.auto', defaultMessage: 'Auto' },
+  layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' },
+  layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' },
+});
+
+@injectIntl
 class SettingsItem extends React.PureComponent {
 
   static propTypes = {
     settings: ImmutablePropTypes.map.isRequired,
     item: PropTypes.array.isRequired,
     id: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      message: PropTypes.object.isRequired,
+    })),
     dependsOn: PropTypes.array,
     dependsOnNot: PropTypes.array,
     children: PropTypes.element.isRequired,
     onChange: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
   };
 
   handleChange = (e) => {
@@ -21,7 +33,7 @@ class SettingsItem extends React.PureComponent {
   }
 
   render () {
-    const { settings, item, id, children, dependsOn, dependsOnNot } = this.props;
+    const { settings, item, id, options, children, dependsOn, dependsOnNot, intl } = this.props;
     let enabled = true;
 
     if (dependsOn) {
@@ -35,6 +47,28 @@ class SettingsItem extends React.PureComponent {
       }
     }
 
+    if (options && options.length > 0) {
+      const currentValue = settings.getIn(item);
+      const optionElems = options && options.length > 0 && options.map((opt) => (
+        <option key={opt.value} selected={currentValue === opt.value} value={opt.value} >
+          {intl.formatMessage(opt.message)}
+        </option>
+      ));
+      return (
+        <label htmlFor={id}>
+          <p>{children}</p>
+          <p>
+            <select
+              id={id}
+              disabled={!enabled}
+              onBlur={this.handleChange}
+            >
+              {optionElems}
+            </select>
+          </p>
+        </label>
+      );
+    } else {
       return (
         <label htmlFor={id}>
           <input
@@ -48,6 +82,7 @@ class SettingsItem extends React.PureComponent {
         </label>
       );
     }
+  }
 
 }
 
@@ -56,6 +91,7 @@ export default class SettingsModal extends React.PureComponent {
   static propTypes = {
     settings: ImmutablePropTypes.map.isRequired,
     toggleSetting: PropTypes.func.isRequired,
+    changeSetting: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
   };
 
@@ -67,6 +103,20 @@ export default class SettingsModal extends React.PureComponent {
     return (
       <div>
         <h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
+        <SettingsItem
+          settings={this.props.settings}
+          item={['layout']}
+          id='mastodon-settings--layout'
+          options={[
+            { value: 'auto', message: messages.layout_auto },
+            { value: 'multiple', message: messages.layout_desktop },
+            { value: 'single', message: messages.layout_mobile },
+          ]}
+          onChange={this.props.changeSetting}
+        >
+          <FormattedMessage id='settings.layout' defaultMessage='Layout:' />
+        </SettingsItem>
+
         <SettingsItem
           settings={this.props.settings}
           item={['stretch']}
@@ -75,6 +125,7 @@ export default class SettingsModal extends React.PureComponent {
         >
           <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
         </SettingsItem>
+
       </div>
     );
   }

app/javascript/mastodon/features/ui/containers/settings_modal_container.js

@@ -11,6 +11,9 @@ const mapDispatchToProps = dispatch => ({
   toggleSetting (setting, e) {
     dispatch(changeLocalSetting(setting, e.target.checked));
   },
+  changeSetting (setting, e) {
+    dispatch(changeLocalSetting(setting, e.target.value));
+  },
   onClose () {
     dispatch(closeModal());
   },

app/javascript/styles/components.scss

@@ -1545,25 +1545,6 @@
   }
 }
 
-.layout__selector {
-  margin-top: 20px;
-
-  a {
-    text-decoration: underline;
-    cursor: pointer;
-    color: lighten($ui-base-color, 26%);
-  }
-
-  b {
-    font-weight: bold;
-  }
-
-  p {
-    font-size: 13px;
-    color: $ui-secondary-color;
-  }
-}
-
 .tabs-bar {
   display: flex;
   background: lighten($ui-base-color, 8%);
@@ -3428,6 +3409,10 @@ button.icon-button.active i.fa-retweet {
   padding: 15px 20px 15px 20px;
   width: 360px;
   overflow-y: auto;
+
+  select {
+    margin-bottom: 5px;
+  }
 }
 
 .onboard-sliders {