cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Change toggle state when click label (#3530)

This commit is contained in:
Yamagishi Kazutoshi 2017-06-03 21:40:24 +09:00 committed by Eugen Rochko
parent d567a382e3
commit 3ea3f24a02
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/features/notifications/components/setting_toggle.js
View File

@ -10,7 +10,6 @@ class SettingToggle extends React.PureComponent {
settingKey: PropTypes.array.isRequired, settingKey: PropTypes.array.isRequired,
label: PropTypes.node.isRequired, label: PropTypes.node.isRequired,
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
htmlFor: PropTypes.string,
} }
onChange = (e) => { onChange = (e) => {
@ -18,13 +17,14 @@ class SettingToggle extends React.PureComponent {
} }
render () { render () {
const { settings, settingKey, label, onChange, htmlFor = '' } = this.props; const { settings, settingKey, label, onChange } = this.props;
const id = `setting-toggle-${settingKey.join('-')}`;
return ( return (
<label htmlFor={htmlFor} className='setting-toggle__label'> <div className='setting-toggle'>
<Toggle checked={settings.getIn(settingKey)} onChange={this.onChange} /> <Toggle id={id} checked={settings.getIn(settingKey)} onChange={this.onChange} />
<span className='setting-toggle'>{label}</span> <label htmlFor={id} className='setting-toggle__label'>{label}</label>
</label> </div>
); );
} }

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

@ -2172,13 +2172,12 @@ button.icon-button.active i.fa-retweet {
left: 20px; left: 20px;
} }
.setting-toggle__label { .setting-toggle {
display: block; display: block;
line-height: 24px; line-height: 24px;
vertical-align: middle;
} }
.setting-toggle { .setting-toggle__label {
color: $ui-primary-color; color: $ui-primary-color;
display: inline-block; display: inline-block;
margin-bottom: 14px; margin-bottom: 14px;