Merge pull request #188 from nukeop/feature/ui-enhancements

Feature/ui enhancements
nukeop · Jan 24, 2019 · 4e9e481 · 4e9e481 · trekiteasy · Jan 24, 2019
2 parents 0ae9758 + 9ab1027
commit 4e9e481
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 64 deletions.
diff --git a/app/App.js b/app/App.js
@@ -81,32 +81,6 @@ class App extends React.Component {
     }
   }
 
-  componentWillMount () {
-    this.props.actions.readSettings();
-    this.props.actions.lastFmReadSettings();
-    this.props.actions.createSearchPlugins(PluginConfig.plugins);
-  }
-
-  render () {
-    let { settings } = this.props;
-    let { toggleOption } = this.props.actions;
-    return (
-      <div className={styles.app_container}>
-        {this.renderNavBar()}
-        <div className={styles.panel_container}>
-          {this.renderSidebarMenu(settings, toggleOption)}
-          <VerticalPanel className={styles.center_panel}>
-            <MainContentContainer />
-          </VerticalPanel>
-          {this.renderRightPanel(settings)}
-        </div>
-        {this.renderFooter(settings)}
-        <SoundContainer />
-        <IpcContainer />
-      </div>
-    );
-  }
-
   renderNavBar () {
     return (
       <Navbar className={styles.navbar}>
@@ -270,6 +244,32 @@ class App extends React.Component {
       </Navbar>
     );
   }
+
+  componentWillMount () {
+    this.props.actions.readSettings();
+    this.props.actions.lastFmReadSettings();
+    this.props.actions.createSearchPlugins(PluginConfig.plugins);
+  }
+
+  render () {
+    let { settings } = this.props;
+    let { toggleOption } = this.props.actions;
+    return (
+      <div className={styles.app_container}>
+        {this.renderNavBar()}
+        <div className={styles.panel_container}>
+          {this.renderSidebarMenu(settings, toggleOption)}
+          <VerticalPanel className={styles.center_panel}>
+            <MainContentContainer />
+          </VerticalPanel>
+          {this.renderRightPanel(settings)}
+        </div>
+        {this.renderFooter(settings)}
+        <SoundContainer />
+        <IpcContainer />
+      </div>
+    );
+  }
 }
 
 function mapStateToProps (state) {

diff --git a/app/components/PlayOptionsControls/index.js b/app/components/PlayOptionsControls/index.js
@@ -3,12 +3,13 @@ import classnames from 'classnames';
 import FontAwesome from 'react-fontawesome';
 import _ from 'lodash';
 
+import styles from './styles.scss';
 import settingsConst from '../../constants/settings';
 
 function renderOptionControl(props, settingName, fontAwesomeName) {
   return (
     <div
-      className={classnames('icon', {
+      className={classnames(styles.icon, {
         active: props.settings[settingName]
       })}
       onClick={() =>
@@ -25,7 +26,7 @@ function renderOptionControl(props, settingName, fontAwesomeName) {
 
 const PlayOptionsControls = props => {
   return (
-    <div className='play_options_controls'>
+    <div className={styles.play_options_controls}>
       {renderOptionControl(props, 'loopAfterQueueEnd', 'repeat')}
       {renderOptionControl(props, 'shuffleQueue', 'random')}
       {renderOptionControl(props, 'autoradio', 'magic')}

diff --git a/app/components/PlayOptionsControls/styles.scss b/app/components/PlayOptionsControls/styles.scss
@@ -3,7 +3,7 @@
 
 .play_options_controls {
   display: flex;
-  flex-flow: column;
+  flex-flow: row;
   justify-content: space-between;
   align-items: center;
   height: 100%;

diff --git a/app/components/Seekbar/styles.scss b/app/components/Seekbar/styles.scss
@@ -1,17 +1,15 @@
 @import "../../vars";
 
 .seekbar_container {
-  height: 4px;
+  height: 1em;
 
   cursor: pointer;
 
-  background-color: rgba(248, 248, 242, 0.25);
+  background-color: $background2;
 
   flex: 0 0 auto;
 }
 
 .seekbar_fill {
-  height: 4px;
-
   background-color: $pink;
 }
diff --git a/app/containers/MainContentContainer/index.js b/app/containers/MainContentContainer/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Route, Switch, Link, withRouter } from 'react-router-dom';
-import { RouteTransition } from 'react-router-transition';
+import { Route, Switch, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Actions from '../../actions';
@@ -19,35 +18,32 @@ import TagViewContainer from '../TagViewContainer';
 
 import Downloads from '../../components/Downloads';
 
-import styles from './styles.scss';
-
 class MainContentContainer extends React.Component {
+  componentDidMount() {
+    if (this.props.history
+    && this.props.location
+    && this.props.location.pathname === '/') {
+      this.props.history.push('/dashboard');
+    }
+  }
 
   render() {
     return (
       <Route render={({location, history, match}) => {
         return (
           <MainLayout>
-            <RouteTransition
-              pathname={location.pathname}
-              atEnter={{ opacity: 0 }}
-              atLeave={{ opacity: 0 }}
-              atActive={{ opacity: 1 }}
-              className={styles.transition}
-            >
-              <Switch key={location.key} location={location}>
-                <Route path='/album/:albumId' component={AlbumViewContainer} />
-                <Route path='/artist/:artistId' component={ArtistViewContainer} />
-                <Route path='/dashboard' component={DashboardContainer} />
-                <Route path='/downloads' component={Downloads} />
-                <Route path='/playlists' component={PlaylistsContainer} />
-                <Route path='/playlist/:playlistId' component={PlaylistViewContainer} />
-                <Route path='/plugins' component={PluginsContainer} />
-                <Route path='/settings' component={SettingsContainer} />
-                <Route path='/tag/:tagName' component={TagViewContainer}/>
-                <Route path='/search' component={SearchResultsContainer} />
-              </Switch>
-            </RouteTransition>
+            <Switch key={location.key} location={location}>
+              <Route path='/album/:albumId' component={AlbumViewContainer} />
+              <Route path='/artist/:artistId' component={ArtistViewContainer} />
+              <Route path='/dashboard' component={DashboardContainer} />
+              <Route path='/downloads' component={Downloads} />
+              <Route path='/playlists' component={PlaylistsContainer} />
+              <Route path='/playlist/:playlistId' component={PlaylistViewContainer} />
+              <Route path='/plugins' component={PluginsContainer} />
+              <Route path='/settings' component={SettingsContainer} />
+              <Route path='/tag/:tagName' component={TagViewContainer}/>
+              <Route path='/search' component={SearchResultsContainer} />
+            </Switch>
           </MainLayout>
         );
       }

diff --git a/app/containers/MainContentContainer/styles.scss b/app/containers/MainContentContainer/styles.scss
diff --git a/app/styles.scss b/app/styles.scss
@@ -89,7 +89,6 @@
   flex: 0 0 auto;
   flex-flow: column;
 
-  height: 80px;
   width: 100%;
   max-width: 100%;