CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

Move layout override into app settings modal

Browse Source 
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:
Surinna Curtis 2017-07-03 21:51:00 -05:00
parent 15227c713d
commit ff9f2088f7
4 changed files with 74 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/mastodon/features/compose/index.js
View File

@ -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>
); );
} }

79
app/javascript/mastodon/features/ui/components/settings_modal.js
View File

@ -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>
); );
} }

3
app/javascript/mastodon/features/ui/containers/settings_modal_container.js
View File

@ -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());
}, },

23
app/javascript/styles/components.scss
View File

@ -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 {