From e1088e40a873ed519f5ac1ccf142e1cf791fa68c Mon Sep 17 00:00:00 2001
From: nukeop <alsw@protonmail.com>
Date: Thu, 1 Mar 2018 01:03:09 +0100
Subject: [PATCH] Collapse queue panel button

---
 app/components/PlayQueue/QueueMenu/index.js   | 31 +++++++++++++------
 .../PlayQueue/QueueMenu/styles.scss           | 10 ++++--
 app/components/PlayQueue/index.js             | 17 +++++++---
 app/components/PlayQueue/styles.scss          |  6 ++--
 app/containers/PlayQueueContainer/index.js    | 16 ++++------
 5 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/app/components/PlayQueue/QueueMenu/index.js b/app/components/PlayQueue/QueueMenu/index.js
index fa5633cbb6..1400195f72 100644
--- a/app/components/PlayQueue/QueueMenu/index.js
+++ b/app/components/PlayQueue/QueueMenu/index.js
@@ -12,6 +12,13 @@ class QueueMenu extends React.Component {
     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);
@@ -22,25 +29,29 @@ class QueueMenu extends React.Component {
     let {
       addPlaylist,
       clearQueue,
-      items
+      items,
+      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>
           <a href='#' onClick={clearQueue}><FontAwesome name="trash-o" /></a>
 
-	  <InputDialog
-	     header={<h4>Input playlist name:</h4>}
-	     placeholder='Playlist name...'
-	     accept='Save'
-	     onAccept={this.handleAddPlaylist(addPlaylist, items)}
-	     trigger={
-		 <a href='#'><FontAwesome name="save" /></a>
-	     }
+          <InputDialog
+            header={<h4>Input playlist name:</h4>}
+            placeholder='Playlist name...'
+            accept='Save'
+            onAccept={this.handleAddPlaylist(addPlaylist, items)}
+            trigger={
+              <a href='#'><FontAwesome name="save" /></a>
+            }
           >
 
-	    </InputDialog>
+          </InputDialog>
           <a className={globalStyles.disabled} href='#'><FontAwesome name="random" /></a>
         </div>
         <hr />
diff --git a/app/components/PlayQueue/QueueMenu/styles.scss b/app/components/PlayQueue/QueueMenu/styles.scss
index 598d31021b..9ee83aa05b 100644
--- a/app/components/PlayQueue/QueueMenu/styles.scss
+++ b/app/components/PlayQueue/QueueMenu/styles.scss
@@ -9,12 +9,16 @@
   .queue_menu_buttons {
     display: flex;
     flex-flow: row;
-    margin: 0.5rem 0 0.5rem 0;
+    margin-top: 0.5rem;
 
     a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       background: $background2;
-      padding: 0.5rem 0.75rem;
-      margin: 0 0.5rem;
+      width: 2rem;
+      height: 2rem;
+      margin: 0;
 
       &:first-child {
         margin-left: 0;
diff --git a/app/components/PlayQueue/index.js b/app/components/PlayQueue/index.js
index ffb900d40d..aa75f4bdce 100644
--- a/app/components/PlayQueue/index.js
+++ b/app/components/PlayQueue/index.js
@@ -27,13 +27,13 @@ class PlayQueue extends React.Component {
               track={el}
               loading={el.loading}
               current={this.props.currentSong === i}
-              selectSong={this.props.selectSong}
-              removeFromQueue={this.props.removeFromQueue}
+              selectSong={this.props.actions.selectSong}
+              removeFromQueue={this.props.actions.removeFromQueue}
             />
           }
           track={el}
           musicSources={this.props.musicSources}
-          rerollTrack={this.props.rerollTrack}
+          rerollTrack={this.props.actions.rerollTrack}
         />
       );
     });
@@ -42,16 +42,23 @@ class PlayQueue extends React.Component {
   render() {
     let {
       compact,
+      items,
+      settings
+    } = this.props;
+
+    let {
       clearQueue,
       addPlaylist,
-      items
-    } = this.props;
+      setBooleanOption
+    } = this.props.actions;
 
     return (
       <div className={classnames(styles.play_queue_container, {'compact': compact})}>
         <QueueMenu
           clearQueue={clearQueue}
           addPlaylist={addPlaylist}
+          setBooleanOption={setBooleanOption}
+          settings={settings}
           items={items}
         />
 
diff --git a/app/components/PlayQueue/styles.scss b/app/components/PlayQueue/styles.scss
index 156507adaa..a657de6477 100644
--- a/app/components/PlayQueue/styles.scss
+++ b/app/components/PlayQueue/styles.scss
@@ -18,8 +18,10 @@
   }
 
   &.compact {
-    .queue_menu_container {
-      display: none;
+    .queue_menu_buttons {
+      a:not(.compactButton) {
+        display: none;
+      }
     }
 
     .queue_item_container {
diff --git a/app/containers/PlayQueueContainer/index.js b/app/containers/PlayQueueContainer/index.js
index a7f5104e24..868b390e06 100644
--- a/app/containers/PlayQueueContainer/index.js
+++ b/app/containers/PlayQueueContainer/index.js
@@ -5,11 +5,10 @@ import { bindActionCreators } from 'redux';
 import * as QueueActions from '../../actions/queue';
 import * as PluginsActions from '../../actions/plugins';
 import * as PlaylistsActions from '../../actions/playlists';
-
+import * as SettingsActions from '../../actions/settings';
 
 import PlayQueue from '../../components/PlayQueue';
 
-
 class PlayQueueContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -18,15 +17,11 @@ class PlayQueueContainer extends React.Component {
   render() {
     return(
       <PlayQueue
+        actions={this.props.actions}
         items={this.props.queue.queueItems}
         currentSong={this.props.queue.currentSong}
         musicSources={this.props.plugins.musicSources}
-        pluginListSearch={this.props.actions.pluginListSearch}
-	rerollTrack={this.props.actions.rerollTrack}
-        selectSong={this.props.actions.selectSong}
-        clearQueue={this.props.actions.clearQueue}
-	removeFromQueue={this.props.actions.removeFromQueue}
-        addPlaylist={this.props.actions.addPlaylist}
+        settings={this.props.settings}
         compact={this.props.compact}
       />
     );
@@ -37,13 +32,14 @@ function mapStateToProps(state) {
   return {
     queue: state.queue,
     plugins: state.plugin.plugins,
-    playlists: state.playlists.playlists
+    playlists: state.playlists.playlists,
+    settings: state.settings
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Object.assign({}, PluginsActions, QueueActions, PlaylistsActions), dispatch)
+    actions: bindActionCreators(Object.assign({}, PluginsActions, QueueActions, PlaylistsActions, SettingsActions), dispatch)
   };
 }