hamptonmoore
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toggles for advanced options

signup-info-prompt
Surinna Curtis 2017-07-01 21:50:13 -05:00 committed by Gô Shoemake
parent aee64b996c
commit f6ce1a9592
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js
View File

@ -2,6 +2,7 @@ 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 IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import Toggle from 'react-toggle';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -55,6 +56,10 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
this.props.onChange(option); this.props.onChange(option);
} }
toggleHandler(option) {
return () => this.props.onChange(option);
}
setRef = (c) => { setRef = (c) => {
this.node = c; this.node = c;
} }
@ -69,10 +74,9 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
const optionElems = options.map((option) => { const optionElems = options.map((option) => {
const active = values.get(option.key) ? 'active' : ''; const active = values.get(option.key) ? 'active' : '';
return ( return (
<div role='button' className={`advanced-options-dropdown__option ${active}`} <div role='button' className={`advanced-options-dropdown__option`} key={option.key} >
onClick={this.handleClick} data-index={option.key} key={option.key} > <div className='advanced-options-dropdown__option__toggle'>
<div className='advanced-options-dropdown__option__icon'> <Toggle checked={active} onChange={this.toggleHandler(option.key)} />
<IconButton icon={option.icon} title={intl.formatMessage(option.shortText)} />
</div> </div>
<div className='advanced-options-dropdown__option__content'> <div className='advanced-options-dropdown__option__content'>
<strong>{intl.formatMessage(option.shortText)}</strong> <strong>{intl.formatMessage(option.shortText)}</strong>

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

@ -2924,7 +2924,7 @@ button.icon-button.active i.fa-retweet {
} }
} }
.advanced-options-dropdown__option__icon { .advanced-options-dropdown__option__toggle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;