Skip to content

Commit

Permalink
Collapse queue panel button
Browse files Browse the repository at this point in the history
  • Loading branch information
nukeop committed Mar 1, 2018
1 parent ec9b0d3 commit e1088e4
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 30 deletions.
31 changes: 21 additions & 10 deletions app/components/PlayQueue/QueueMenu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 />
Expand Down
10 changes: 7 additions & 3 deletions app/components/PlayQueue/QueueMenu/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
17 changes: 12 additions & 5 deletions app/components/PlayQueue/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
});
Expand All @@ -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}
/>

Expand Down
6 changes: 4 additions & 2 deletions app/components/PlayQueue/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@
}

&.compact {
.queue_menu_container {
display: none;
.queue_menu_buttons {
a:not(.compactButton) {
display: none;
}
}

.queue_item_container {
Expand Down
16 changes: 6 additions & 10 deletions app/containers/PlayQueueContainer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}
/>
);
Expand All @@ -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)
};
}

Expand Down

0 comments on commit e1088e4

Please sign in to comment.