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,
label: PropTypes.node.isRequired,
onChange: PropTypes.func.isRequired,
htmlFor: PropTypes.string,
}
onChange = (e) => {
@ -18,13 +17,14 @@ class SettingToggle extends React.PureComponent {
}
render () {
const { settings, settingKey, label, onChange, htmlFor = '' } = this.props;
const { settings, settingKey, label, onChange } = this.props;
const id = `setting-toggle-${settingKey.join('-')}`;
return (
<label htmlFor={htmlFor} className='setting-toggle__label'>
<Toggle checked={settings.getIn(settingKey)} onChange={this.onChange} />
<span className='setting-toggle'>{label}</span>
</label>
<div className='setting-toggle'>
<Toggle id={id} checked={settings.getIn(settingKey)} onChange={this.onChange} />
<label htmlFor={id} className='setting-toggle__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;
}
.setting-toggle__label {
.setting-toggle {
display: block;
line-height: 24px;
vertical-align: middle;
}
.setting-toggle {
.setting-toggle__label {
color: $ui-primary-color;
display: inline-block;
margin-bottom: 14px;