diff options
Diffstat (limited to 'app/javascript')
4 files changed, 75 insertions, 79 deletions
diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index 843dcc96c..537e425d9 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/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> ); } diff --git a/app/javascript/mastodon/features/ui/components/settings_modal.js b/app/javascript/mastodon/features/ui/components/settings_modal.js index 70c004a63..2049b05fe 100644 --- a/app/javascript/mastodon/features/ui/components/settings_modal.js +++ b/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,18 +47,41 @@ class SettingsItem extends React.PureComponent { } } - return ( - <label htmlFor={id}> - <input - id={id} - type='checkbox' - checked={settings.getIn(item)} - onChange={this.handleChange} - disabled={!enabled} - /> - {children} - </label> - ); + 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 + id={id} + type='checkbox' + checked={settings.getIn(item)} + onChange={this.handleChange} + disabled={!enabled} + /> + {children} + </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, }; @@ -69,12 +105,27 @@ export default class SettingsModal extends React.PureComponent { <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']} id='mastodon-settings--stretch' onChange={this.props.toggleSetting} > <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' /> </SettingsItem> + </div> ); } diff --git a/app/javascript/mastodon/features/ui/containers/settings_modal_container.js b/app/javascript/mastodon/features/ui/containers/settings_modal_container.js index 83565c4b9..571f028ed 100644 --- a/app/javascript/mastodon/features/ui/containers/settings_modal_container.js +++ b/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()); }, diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 10e857865..ac72f37c5 100644 --- a/app/javascript/styles/components.scss +++ b/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 { |