mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-24 18:13:42 +01: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
4 changed files with 74 additions and 78 deletions
|
@ -7,7 +7,7 @@ import { mountCompose, unmountCompose } from '../../actions/compose';
|
||||||
import { openModal } from '../../actions/modal';
|
import { openModal } from '../../actions/modal';
|
||||||
import { changeLocalSetting } from '../../actions/local_settings';
|
import { changeLocalSetting } from '../../actions/local_settings';
|
||||||
import Link from 'react-router-dom/Link';
|
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 SearchContainer from './containers/search_container';
|
||||||
import Motion from 'react-motion/lib/Motion';
|
import Motion from 'react-motion/lib/Motion';
|
||||||
import spring from 'react-motion/lib/spring';
|
import spring from 'react-motion/lib/spring';
|
||||||
|
@ -23,7 +23,6 @@ const messages = defineMessages({
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
||||||
layout: state.getIn(['local_settings', 'layout']),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
@connect(mapStateToProps)
|
@connect(mapStateToProps)
|
||||||
|
@ -35,7 +34,6 @@ export default class Compose extends React.PureComponent {
|
||||||
multiColumn: PropTypes.bool,
|
multiColumn: PropTypes.bool,
|
||||||
showSearch: PropTypes.bool,
|
showSearch: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
layout: PropTypes.string,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
|
@ -57,7 +55,7 @@ export default class Compose extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { multiColumn, showSearch, intl, layout } = this.props;
|
const { multiColumn, showSearch, intl } = this.props;
|
||||||
|
|
||||||
let header = '';
|
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 (
|
return (
|
||||||
<div className='drawer'>
|
<div className='drawer'>
|
||||||
|
@ -135,8 +94,6 @@ export default class Compose extends React.PureComponent {
|
||||||
</Motion>
|
</Motion>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{layoutContent}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,30 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
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 {
|
class SettingsItem extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
settings: ImmutablePropTypes.map.isRequired,
|
settings: ImmutablePropTypes.map.isRequired,
|
||||||
item: PropTypes.array.isRequired,
|
item: PropTypes.array.isRequired,
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
|
options: PropTypes.arrayOf(PropTypes.shape({
|
||||||
|
value: PropTypes.string.isRequired,
|
||||||
|
message: PropTypes.object.isRequired,
|
||||||
|
})),
|
||||||
dependsOn: PropTypes.array,
|
dependsOn: PropTypes.array,
|
||||||
dependsOnNot: PropTypes.array,
|
dependsOnNot: PropTypes.array,
|
||||||
children: PropTypes.element.isRequired,
|
children: PropTypes.element.isRequired,
|
||||||
onChange: PropTypes.func.isRequired,
|
onChange: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = (e) => {
|
handleChange = (e) => {
|
||||||
|
@ -21,7 +33,7 @@ class SettingsItem extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { settings, item, id, children, dependsOn, dependsOnNot } = this.props;
|
const { settings, item, id, options, children, dependsOn, dependsOnNot, intl } = this.props;
|
||||||
let enabled = true;
|
let enabled = true;
|
||||||
|
|
||||||
if (dependsOn) {
|
if (dependsOn) {
|
||||||
|
@ -35,18 +47,41 @@ class SettingsItem extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
if (options && options.length > 0) {
|
||||||
<label htmlFor={id}>
|
const currentValue = settings.getIn(item);
|
||||||
<input
|
const optionElems = options && options.length > 0 && options.map((opt) => (
|
||||||
id={id}
|
<option key={opt.value} selected={currentValue === opt.value} value={opt.value} >
|
||||||
type='checkbox'
|
{intl.formatMessage(opt.message)}
|
||||||
checked={settings.getIn(item)}
|
</option>
|
||||||
onChange={this.handleChange}
|
));
|
||||||
disabled={!enabled}
|
return (
|
||||||
/>
|
<label htmlFor={id}>
|
||||||
{children}
|
<p>{children}</p>
|
||||||
</label>
|
<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 = {
|
static propTypes = {
|
||||||
settings: ImmutablePropTypes.map.isRequired,
|
settings: ImmutablePropTypes.map.isRequired,
|
||||||
toggleSetting: PropTypes.func.isRequired,
|
toggleSetting: PropTypes.func.isRequired,
|
||||||
|
changeSetting: PropTypes.func.isRequired,
|
||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -67,6 +103,20 @@ export default class SettingsModal extends React.PureComponent {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
|
<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
|
<SettingsItem
|
||||||
settings={this.props.settings}
|
settings={this.props.settings}
|
||||||
item={['stretch']}
|
item={['stretch']}
|
||||||
|
@ -75,6 +125,7 @@ export default class SettingsModal extends React.PureComponent {
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
|
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
|
||||||
</SettingsItem>
|
</SettingsItem>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,9 @@ const mapDispatchToProps = dispatch => ({
|
||||||
toggleSetting (setting, e) {
|
toggleSetting (setting, e) {
|
||||||
dispatch(changeLocalSetting(setting, e.target.checked));
|
dispatch(changeLocalSetting(setting, e.target.checked));
|
||||||
},
|
},
|
||||||
|
changeSetting (setting, e) {
|
||||||
|
dispatch(changeLocalSetting(setting, e.target.value));
|
||||||
|
},
|
||||||
onClose () {
|
onClose () {
|
||||||
dispatch(closeModal());
|
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 {
|
.tabs-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: lighten($ui-base-color, 8%);
|
background: lighten($ui-base-color, 8%);
|
||||||
|
@ -3428,6 +3409,10 @@ button.icon-button.active i.fa-retweet {
|
||||||
padding: 15px 20px 15px 20px;
|
padding: 15px 20px 15px 20px;
|
||||||
width: 360px;
|
width: 360px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
|
select {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.onboard-sliders {
|
.onboard-sliders {
|
||||||
|
|
Loading…
Reference in a new issue