redesign

gridsane · Mar 27, 2017 · b042bed · b042bed
1 parent 4f1aa23
commit b042bed
Show file tree

Hide file tree

Showing 61 changed files with 814 additions and 1,606 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   <link href="/assets/style.css" rel="stylesheet">
 </head>
 <body>
-  <div id="root"></div>
+  <div id="app"></div>
   <script>
     window.INITIAL_STATE = %INITIAL_STATE%;
     window.YOUTUBE_KEY = '%YOUTUBE_KEY%';

diff --git a/src/actions/actionsTypes.js → src/actions/actions-types.js b/src/actions/actionsTypes.js → src/actions/actions-types.js
@@ -7,6 +7,7 @@ export const FEED_SET_SORT_TRACKS = 'FEED_SET_SORT_TRACKS';
 export const FEED_SET_ERROR_TRACK = 'FEED_SET_ERROR_TRACK';
 export const FEED_SET_CURRENT_TRACK = 'FEED_SET_CURRENT_TRACK';
 export const FEED_SELECT_NEXT_TRACK = 'FEED_SELECT_NEXT_TRACK';
+export const DISCOVER_SET_VISIBLE = 'DISCOVER_SET_VISIBLE';
 export const DISCOVER_SET_CHANNELS = 'DISCOVER_SET_CHANNELS';
 export const DISCOVER_SET_LOADING = 'DISCOVER_SET_LOADING';
 export const DISCOVER_SET_TAGS = 'DISCOVER_SET_TAGS';

diff --git a/src/actions/discover.js b/src/actions/discover.js
@@ -1,4 +1,4 @@
-import * as types from './actionsTypes';
+import * as types from './actions-types';
 import * as api from '../api/browser';
 import {addFeedChannel} from './feed';
 import {debounce} from '../utils';
@@ -19,6 +19,10 @@ export function setTags(tags) {
   return {type: types.DISCOVER_SET_TAGS, tags};
 }
 
+export function setDiscoverVisible(visible) {
+  return {type: types.DISCOVER_SET_VISIBLE, visible};
+}
+
 export function loadTags() {
   return async (dispatch) => {
     const tags = await api.getChannelsTags();

diff --git a/src/actions/feed.js b/src/actions/feed.js
@@ -1,4 +1,4 @@
-import * as types from './actionsTypes';
+import * as types from './actions-types';
 import * as api from '../api/browser';
 
 export function addFeedChannels(channels) {

diff --git a/src/client.js b/src/client.js
@@ -1,25 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Provider} from 'react-redux';
-import {Router, IndexRoute, Route, hashHistory} from 'react-router';
-import Landing from './components/landing/landing-container';
-import Application from './components/application/application-container';
-import Feed from './components/feed/feed-container';
-import Discover from './components/discover/discover-container';
-import {syncHistoryWithStore} from 'react-router-redux';
-import store from './store';
+import App from 'components/app';
 
-ReactDOM.render(
-  <div>
-    <Provider store={store}>
-      <Router history={syncHistoryWithStore(hashHistory, store)}>
-        <Route path="/" component={Landing} />
-        <Route path="/app" component={Application}>
-          <IndexRoute component={Feed} />
-          <Route path="/app/discover" component={Discover} />
-        </Route>
-      </Router>
-    </Provider>
-  </div>,
-  document.getElementById('root')
-);
+ReactDOM.render(<App/>, document.getElementById('app'));
diff --git a/src/components/application/_theme.scss → src/components/app/_theme.scss b/src/components/application/_theme.scss → src/components/app/_theme.scss
@@ -1,13 +1,17 @@
+$backgroundColor: #e5e5e5;
+$primaryColor: #2F80ED;
+$secondaryTextColor: #727272;
+
 $darkPrimaryColor: #303f9f;
-$primaryColor: #3f51b5;
 $lightPrimaryColor: #c5cae9;
 $textColor: #fff;
 $accentColor: #ff4081;
 $primaryTextColor: #212121;
-$secondaryTextColor: #727272;
 $dividerColor: #b6b6b6;
 $errorColor: #f44336;
 
 @mixin shadow($elevation) {
   box-shadow: 0px 2px $elevation rgba(0, 0, 0, .26);
 }
+
+$transformCurve: cubic-bezier(0.4, 0.0, 0.2, 1);
diff --git a/src/components/application/application.scss → src/components/app/app.scss b/src/components/application/application.scss → src/components/app/app.scss
@@ -1,16 +1,17 @@
+@import './_theme.scss';
+
 :global {
   body {
     padding: 0;
     margin: 0;
     font-family: 'Roboto';
     font-size: 16px;
-    background-color: rgba(0, 0, 0, .1);
+    background-color: $backgroundColor;
     -webkit-font-smoothing: antialiased;
   }
 }
 
 .root {
   display: flex;
-  justify-content: space-between;
-  height: calc(100vh - 60px);
+  height: 100vh;
 }
diff --git a/src/components/app/index.js b/src/components/app/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import Sidebar from 'components/sidebar';
+import Player from 'components/player';
+import store from '../../store';
+import styles from './app.scss';
+
+export default class Application extends React.PureComponent {
+  render() {
+    return <Provider store={store}>
+      <main className={styles.root}>
+        <Sidebar/>
+        <Player/>
+      </main>
+    </Provider>;
+  }
+}
diff --git a/src/components/application/application-container.js b/src/components/application/application-container.js
diff --git a/src/components/channel-list/channel-item.js b/src/components/channel-list/channel-item.js
diff --git a/src/components/channel-list/channel-list.js b/src/components/channel-list/channel-list.js
diff --git a/src/components/channel-list/channel-list.scss b/src/components/channel-list/channel-list.scss
diff --git a/src/components/channels/channel.js b/src/components/channels/channel.js
@@ -0,0 +1,31 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import Avatar from 'components/ui/avatar';
+import styles from './channels.scss';
+
+export default class Channel extends React.PureComponent {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    image: PropTypes.string,
+    isEnabled: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    hasUpdates: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {name, image, isEnabled} = this.props;
+
+    return (
+      <li className={cn(styles.channel, {[styles.channelEnabled]: isEnabled})} onClick={this._toggle}>
+        <Avatar url={image} className={styles.avatar} />
+        {name}
+      </li>
+    );
+  }
+
+  _toggle = () => {
+    this.props.onToggle(this.props);
+  }
+}
diff --git a/src/components/channels/channels.scss b/src/components/channels/channels.scss
@@ -0,0 +1,37 @@
+@import '../app/_theme.scss';
+
+.root {
+  padding: 0;
+  margin: 8px 0;
+  list-style-type: none;
+}
+
+.channel {
+  height: 36px;
+  padding: 6px 8px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 13px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(#efefef, .5);
+  }
+
+  &Enabled {
+    color: $primaryColor;
+
+    .avatar {
+      box-shadow: 0 0 0 2px $primaryColor;
+    }
+  }
+}
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  float: left;
+  background-color: #efefef;
+}