mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-16 15:16:38 +00:00
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
This commit is contained in:
parent
15227c713d
commit
ff9f2088f7
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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());
|
||||
},
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue