Merge branch 'change-toggle-design' into 'develop'

Change design of toggle button

See merge request soapbox-pub/soapbox-fe!105

app/soapbox/components/sidebar_menu.js

@@ -15,6 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
 import { isStaff } from '../utils/accounts';
 import { makeGetAccount } from '../selectors';
 import { logOut } from 'soapbox/actions/auth';
+import ThemeToggle from '../features/ui/components/theme_toggle';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -119,6 +120,12 @@ class SidebarMenu extends ImmutablePureComponent {
             </div>
 
             <div className='sidebar-menu__section sidebar-menu__section--borderless'>
+              <div className='sidebar-menu-item theme-toggle'>
+                <ThemeToggle showLabel />
+              </div>
+            </div>
+
+            <div className='sidebar-menu__section sidebar-menu__section'>
               <NavLink className='sidebar-menu-item' to={`/@${acct}`} onClick={onClose}>
                 <Icon id='user' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>

app/soapbox/features/notifications/components/setting_toggle.js

@@ -9,8 +9,14 @@ export default class SettingToggle extends React.PureComponent {
     prefix: PropTypes.string,
     settings: ImmutablePropTypes.map.isRequired,
     settingPath: PropTypes.array.isRequired,
-    label: PropTypes.node.isRequired,
+    label: PropTypes.node,
     onChange: PropTypes.func.isRequired,
+    icons: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
+    condition: PropTypes.string,
+    ariaLabel: PropTypes.string,
   }
 
   onChange = ({ target }) => {
@@ -18,13 +24,13 @@ export default class SettingToggle extends React.PureComponent {
   }
 
   render() {
-    const { prefix, settings, settingPath, label } = this.props;
+    const { prefix, settings, settingPath, label, icons, condition, ariaLabel } = this.props;
     const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
 
     return (
-      <div className='setting-toggle'>
-        <Toggle id={id} checked={settings.getIn(settingPath)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
-        <label htmlFor={id} className='setting-toggle__label'>{label}</label>
+      <div className='setting-toggle' aria-label={ariaLabel}>
+        <Toggle id={id} checked={condition ? settings.getIn(settingPath) === condition : settings.getIn(settingPath)} onChange={this.onChange} icons={icons} onKeyDown={this.onKeyDown} />
+        {label && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
       </div>
     );
   }

app/soapbox/features/ui/components/tabs_bar.js

@@ -12,12 +12,10 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
 import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
 import Icon from '../../../components/icon';
-import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import ThemeToggle from '../../ui/components/theme_toggle';
 
 const messages = defineMessages({
   post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
-  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
-  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
 });
 
 @withRouter
@@ -28,10 +26,8 @@ class TabsBar extends React.PureComponent {
     history: PropTypes.object.isRequired,
     onOpenCompose: PropTypes.func,
     onOpenSidebar: PropTypes.func.isRequired,
-    toggleTheme: PropTypes.func,
     logo: PropTypes.string,
     account: ImmutablePropTypes.map,
-    themeMode: PropTypes.string,
   }
 
   state = {
@@ -83,18 +79,8 @@ class TabsBar extends React.PureComponent {
       }));
   }
 
-  getNewThemeValue() {
-    if (this.props.themeMode === 'light') return 'dark';
-
-    return 'light';
-  }
-
-  handleToggleTheme = () => {
-    this.props.toggleTheme(this.getNewThemeValue());
-  }
-
   render() {
-    const { account, onOpenCompose, onOpenSidebar, intl, themeMode } = this.props;
+    const { account, onOpenCompose, onOpenSidebar, intl } = this.props;
     const { collapsed } = this.state;
 
     const classes = classNames('tabs-bar', {
@@ -113,9 +99,7 @@ class TabsBar extends React.PureComponent {
             </div>
             { account &&
               <div className='flex'>
-                <button className='tabs-bar__button-theme-toggle button' onClick={this.handleToggleTheme} aria-label={themeMode === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)}>
-                  <Icon id={themeMode === 'light' ? 'sun' : 'moon'} />
-                </button>
+                <ThemeToggle />
                 <div className='tabs-bar__profile'>
                   <Avatar account={account} />
                   <button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
@@ -147,11 +131,9 @@ class TabsBar extends React.PureComponent {
 
 const mapStateToProps = state => {
   const me = state.get('me');
-  const settings = getSettings(state);
   return {
     account: state.getIn(['accounts', me]),
     logo: state.getIn(['soapbox', 'logo']),
-    themeMode: settings.get('themeMode'),
   };
 };
 
@@ -162,9 +144,6 @@ const mapDispatchToProps = (dispatch) => ({
   onOpenSidebar() {
     dispatch(openSidebar());
   },
-  toggleTheme(setting) {
-    dispatch(changeSetting(['themeMode'], setting));
-  },
 });
 
 export default injectIntl(

app/soapbox/features/ui/components/theme_toggle.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, defineMessages } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Icon from '../../../components/icon';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import SettingToggle from '../../notifications/components/setting_toggle';
+
+const messages = defineMessages({
+  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
+  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
+});
+
+const mapStateToProps = state => {
+  return {
+    settings: getSettings(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleTheme(setting) {
+    dispatch(changeSetting(['themeMode'], setting));
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ThemeToggle extends React.PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    toggleTheme: PropTypes.func,
+    showLabel: PropTypes.bool,
+  };
+
+  handleToggleTheme = () => {
+    this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
+  }
+
+  render() {
+    const { intl, settings, showLabel } = this.props;
+    let toggle = (
+      <SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} ariaLabel={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
+    );
+
+    if (showLabel) {
+      toggle = (
+        <SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} label={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
+      );
+    }
+
+    return (
+      <div class='theme-toggle'>
+        {toggle}
+      </div>
+    );
+  }
+
+}

app/styles/application.scss

@@ -61,6 +61,7 @@
 @import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';
+@import 'components/theme-toggle';
 @import 'components/trends';
 @import 'components/wtf-panel';
 @import 'components/profile-info-panel';

app/styles/components/sidebar-menu.scss

@@ -161,6 +161,10 @@
     margin-right: 10px;
   }
 
+  &.theme-toggle {
+    padding-top: 0;
+  }
+
   &:hover {
     &__title {
       color: var(--primary-text-color);

app/styles/components/tabs-bar.scss

@@ -111,14 +111,6 @@
     }
   }
 
-  &__button-theme-toggle {
-    margin-left: 10px;
-    padding: 0 10px;
-    font-size: 20px;
-
-    .fa { margin-right: 0; }
-  }
-
   &__button-compose {
     display: block;
     @media screen and (max-width: $nav-breakpoint-3) {display: none;}
@@ -149,6 +141,23 @@
     display: flex;
   }
 
+  .theme-toggle {
+    @media screen and (max-width: $nav-breakpoint-3) {display: none;}
+
+    .setting-toggle {
+      margin-top: 3px;
+      margin-left: 10px;
+
+      .react-toggle--checked {
+        .react-toggle-track {
+          background-color: var(--accent-color);
+        }
+        &:hover:not(.react-toggle--disabled) .react-toggle-track {
+          background-color: var(--accent-color--bright);
+        }
+      }
+    }
+  }
 }
 
 .tabs-bar__link {

app/styles/components/theme-toggle.scss

@@ -0,0 +1,19 @@
+.theme-toggle {
+  .setting-toggle {
+
+    &__label {
+      margin-bottom: 0px;
+      vertical-align: middle;
+    }
+
+    .react-toggle {
+      vertical-align: middle;
+
+      &-track-check,
+      &-track-x {
+        height: 15px;
+        color: #fff;
+      }
+    }
+  }
+}