Refactored toggles

siweiwei2015 · Mar 1, 2018 · 5cc5a18 · 5cc5a18
1 parent e1088e4
commit 5cc5a18
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 18 deletions.
diff --git a/app/App.js b/app/App.js
@@ -21,6 +21,7 @@ import logoIcon from '../resources/media/icon.png';
 import artPlaceholder from '../resources/media/art_placeholder.png';
 
 import { config as PluginConfig } from './plugins/config';
+import settingsConst from './constants/settings';
 
 import Footer from './components/Footer';
 import Navbar from './components/Navbar';
@@ -78,6 +79,10 @@ class App extends React.Component {
       settings
     } = this.props;
 
+    let {
+      toggleOption
+    } = this.props.actions;
+
     return (
       <div className={styles.app_container}>
         <Navbar className={styles.navbar}>
@@ -133,6 +138,12 @@ class App extends React.Component {
                   <FontAwesome name="search" /> { !settings.compactMenuBar && 'Search results' }
                 </SidebarMenuItem>
               </NavLink>
+              <Spacer />
+              <div className='sidebar_footer'>
+                <a onClick={() => toggleOption(_.find(settingsConst, ['name', 'compactMenuBar']), settings)} href="#">
+                  <FontAwesome name={settings.compactMenuBar ? 'angle-right' : 'angle-left'} />
+                </a>
+              </div>
             </SidebarMenu>
           </VerticalPanel>
           <VerticalPanel className={styles.center_panel}>

diff --git a/app/actions/settings.js b/app/actions/settings.js
@@ -19,3 +19,10 @@ export function setBooleanOption(option, state) {
     payload: {option, state}
   };
 }
+
+export function toggleOption(option, state) {
+  let optionState = state[option.name];
+  return optionState !==undefined
+  ? setBooleanOption(option.name, !optionState)
+  : setBooleanOption(option.name, !option.default);
+}
diff --git a/app/components/PlayQueue/QueueMenu/index.js b/app/components/PlayQueue/QueueMenu/index.js
@@ -1,24 +1,19 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
+import _ from 'lodash';
 
 import InputDialog from '../../InputDialog';
 import Spacer from '../../Spacer';
 
 import styles from './styles.scss';
 import globalStyles from '../../../app.global.scss';
+import settingsConst from '../../../constants/settings';
 
 class QueueMenu extends React.Component {
   constructor(props){
     super(props);
   }
 
-  toggleOption(option) {
-    let state = this.props.settings[option];
-    state !== undefined
-    ? this.props.setBooleanOption(option, !state)
-    : this.props.setBooleanOption(option, true);
-  }
-
   handleAddPlaylist(fun, items) {
     return name => {
       fun(items, name);
@@ -30,14 +25,15 @@ class QueueMenu extends React.Component {
       addPlaylist,
       clearQueue,
       items,
+      toggleOption,
       settings
     } = this.props;
 
     return (
       <div className={styles.queue_menu_container}>
         <div className={styles.queue_menu_buttons}>
-          <a href='#' className='compactButton' onClick={() => this.toggleOption('compactQueueBar')}>
-            <FontAwesome name={settings['compactQueueBar'] ? 'angle-left' : 'angle-right'} />
+          <a href='#' className='compactButton' onClick={() => toggleOption(_.find(settingsConst, ['name', 'compactQueueBar']), settings)}>
+            <FontAwesome name={settings.compactQueueBar ? 'angle-left' : 'angle-right'} />
           </a>
           <a href='#' onClick={clearQueue}><FontAwesome name="trash-o" /></a>
 

diff --git a/app/components/PlayQueue/index.js b/app/components/PlayQueue/index.js
@@ -49,15 +49,15 @@ class PlayQueue extends React.Component {
     let {
       clearQueue,
       addPlaylist,
-      setBooleanOption
+      toggleOption
     } = this.props.actions;
 
     return (
       <div className={classnames(styles.play_queue_container, {'compact': compact})}>
         <QueueMenu
           clearQueue={clearQueue}
           addPlaylist={addPlaylist}
-          setBooleanOption={setBooleanOption}
+          toggleOption={toggleOption}
           settings={settings}
           items={items}
         />

diff --git a/app/components/Settings/index.js b/app/components/Settings/index.js
@@ -13,12 +13,6 @@ class Settings extends React.Component {
     lastFmScrobblingEnabled ? disableScrobbling(): enableScrobbling();
   }
 
-  toggleOption(option, state) {
-    state !== undefined
-    ? this.props.actions.setBooleanOption(option.name, !state)
-    : this.props.actions.setBooleanOption(option.name, !option.default);
-  }
-
   isChecked(option) {
     return this.props.settings[option.name] !== undefined
     ? this.props.settings[option.name]
@@ -113,7 +107,7 @@ class Settings extends React.Component {
                         <Spacer />
                         <Radio
                           toggle
-                          onChange={() => this.toggleOption(option, settings[option.name])}
+                          onChange={() => this.props.actions.toggleOption(option, settings)}
                           checked={this.isChecked(option)}
                         />
                       </div>

diff --git a/app/styles.scss b/app/styles.scss
@@ -112,3 +112,28 @@
   text-align: center;
   padding: 1rem;
 }
+
+.sidebar_footer {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  margin: 0.5rem;
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $background2;
+    color: $white !important;
+    width: 2rem;
+    height: 2rem;
+
+    &:hover {
+      background: lighten($background2, 10%);
+    }
+
+    &:active {
+      background: lighten($background2, 20%);
+    }
+  }
+}