tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

local-only/compose advanced options tweaks.

Browse Source 
Squashed commit of the following:

commit b9877e37f72fdd8134936e1014033b07cb6c3671
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Wed Jul 12 00:50:10 2017 -0500

    account for the eye in the chars left count for local-only toots

commit 56ebfa96542e16daa1986cc45e07974801ee12dc
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Wed Jul 12 00:21:02 2017 -0500

    factor out an AdvancedOptionsToggle to avoid unnecessary re-renders

commit 04cec44ab8744e4e0f52da488c9ec24b1b1422ef
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Wed Jul 12 00:20:24 2017 -0500

    s/changeComposeAdvancedOption/toggleComposeAdvancedOption/g

commit af5815dee750d1aa8b797a9305e5ab3ce6774e3f
Author: Surinna Curtis <ekiru.0@gmail.com>
Date:   Tue Jul 11 23:55:19 2017 -0500

    clicking anywhere on the whole advanced option toggles
This commit is contained in:
Surinna Curtis
2017-07-12 00:50:50 -05:00
committed by kibigo!
parent 79d898ae0a
commit e53fbb4a09
5 changed files with 160 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/javascript/glitch/components/compose/advanced_options.js
View File

@@ -19,6 +19,35 @@ const iconStyle = {
lineHeight: '27px',
};
class AdvancedOptionToggle extends React.PureComponent {
static PropTypes = {
onChange: PropTypes.func.isRequired,
active: PropTypes.bool.isRequired,
key: PropTypes.string.isRequired,
shortText: PropTypes.string.isRequired,
longText: PropTypes.string.isRequired,
}
onToggle = () => {
this.props.onChange(this.props.name);
}
render() {
const { active, shortText, longText } = this.props;
return (
<div role='button' className='advanced-options-dropdown__option' onClick={this.onToggle}>
<div className='advanced-options-dropdown__option__toggle'>
<Toggle checked={active} onChange={this.onToggle} />
</div>
<div className='advanced-options-dropdown__option__content'>
<strong>{shortText}</strong>
{longText}
</div>
</div>
);
}
}
@injectIntl
export default class ComposeAdvancedOptions extends React.PureComponent {
@@ -60,10 +89,6 @@ export default class ComposeAdvancedOptions extends React.PureComponent {
this.props.onChange(option);
}
toggleHandler(option) {
return () => this.props.onChange(option);
}
setRef = (c) => {
this.node = c;
}
@@ -78,17 +103,15 @@ export default class ComposeAdvancedOptions extends React.PureComponent {
const anyEnabled = values.some((enabled) => enabled);
const optionElems = options.map((option) => {
const active = values.get(option.key);
return (
<div role='button' className='advanced-options-dropdown__option' key={option.key} >
<div className='advanced-options-dropdown__option__toggle'>
<Toggle checked={active} onChange={this.toggleHandler(option.key)} />
</div>
<div className='advanced-options-dropdown__option__content'>
<strong>{intl.formatMessage(option.shortText)}</strong>
{intl.formatMessage(option.longText)}
</div>
</div>
<AdvancedOptionToggle
onChange={this.props.onChange}
active={values.get(option.key)}
key={option.key}
name={option.key}
shortText={intl.formatMessage(option.shortText)}
longText={intl.formatMessage(option.longText)}
/>
);
});