mastofe

commit: 3ea3f24a021254675ffc8472ee0cd7fdb54798ba
parent: d567a382e30b6d6f2b32dc249380e24b8d5f2be7
Author: Yamagishi Kazutoshi <ykzts@desire.sh>
Date:   Sat,  3 Jun 2017 21:40:24 +0900

Change toggle state when click label (#3530)


Diffstat:
M
app/javascript/mastodon/features/notifications/components/setting_toggle.js
12
++++++------
M
app/javascript/styles/components.scss
5
++---

2 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/app/javascript/mastodon/features/notifications/components/setting_toggle.js b/app/javascript/mastodon/features/notifications/components/setting_toggle.js
@@ -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>
     );
   }
 
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
@@ -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;