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

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

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

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

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

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