diff --git a/src/js/App.js b/src/js/App.js
index 5b7e69c6..4ad9940a 100755
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -84,12 +84,15 @@ class App extends React.Component{
componentDidUpdate(prevProps){
// We've navigated to a new location
- if (this.props.location !== prevProps.location) {
+ if (this.props.location !== prevProps.location){
// Close context menu
this.props.uiActions.hideContextMenu();
-
- console.log(prevProps.location);
+
+ // Restore scroll to top
+ // TODO: Detect if we've gone BACK, and then restore to previous
+ // scroll position. We'll need to keep a running history of locations
+ // and scroll positions, which may be performance-hindering
$(window).scrollTop(0)
}
}
diff --git a/src/js/components/Icon.js b/src/js/components/Icon.js
index 80e86f90..2b689122 100755
--- a/src/js/components/Icon.js
+++ b/src/js/components/Icon.js
@@ -1,46 +1,55 @@
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { createStore, bindActionCreators } from 'redux';
-export default class Icon extends React.Component{
+import * as helpers from '../helpers';
+import * as uiActions from '../services/ui/actions';
+
+class Icon extends React.Component{
constructor(props){
super(props);
-
- this.state = {
- data: ''
- }
}
componentDidMount(){
- this.load();
+ if (!this.props.icons[this.props.name]){
+ this.props.uiActions.getIcon(this.props.name);
+ }
}
componentWillReceiveProps(newProps){
- if (this.props.name !== newProps.name){
- this.load(newProps.name);
+ if (this.props.name !== newProps.name && !newProps.icons[newProps.name]){
+ this.props.uiActions.getIcon(newProps.name);
}
}
- load(name = this.props.name){
- var self = this;
- var url = 'assets/icons/'+name+'.svg';
- var xmlHttp = new XMLHttpRequest();
-
- xmlHttp.onreadystatechange = function(){
- if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
- self.setState({data: xmlHttp.responseText});
- }
- }
- xmlHttp.open("GET", url, true);
- xmlHttp.send(null);
- }
-
render(){
var className = 'icon';
if (this.props.className){
className += ' '+this.props.className;
}
- return ;
+ var svg = '';
+
+ if (this.props.icons[this.props.name]){
+ svg = this.props.icons[this.props.name];
+ }
+
+ return ;
}
-}
\ No newline at end of file
+}
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ icons: (state.ui.icons ? state.ui.icons : {})
+ }
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ uiActions: bindActionCreators(uiActions, dispatch)
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Icon)
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 674548bd..fd780f49 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -105,6 +105,38 @@ export function set(data){
}
}
+export function getIcon(name){
+ return (dispatch, getState) => {
+ var config = {
+ method: 'GET',
+ timeout: 15000,
+ url: 'assets/icons/'+name+'.svg'
+ }
+ $.ajax(config).then(
+ response => {
+ dispatch({
+ type: 'ICON_LOADED',
+ key: name,
+ icon: new XMLSerializer().serializeToString(response)
+ })
+ },
+ (xhr, status, error) => {
+ dispatch(
+ handleException(
+ 'Could not load '+name+' icon',
+ {
+ config: config,
+ xhr: xhr,
+ status: status,
+ error: error
+ }
+ )
+ );
+ }
+ )
+ }
+}
+
/**
diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js
index 23c6c430..ab9296d7 100755
--- a/src/js/services/ui/reducer.js
+++ b/src/js/services/ui/reducer.js
@@ -24,6 +24,11 @@ export default function reducer(ui = {}, action){
case 'SET_SELECTED_TRACKS':
return Object.assign({}, ui, { selected_tracks : Object.assign([],action.keys) })
+ case 'ICON_LOADED':
+ var icons = Object.assign({}, ui.icons);
+ icons[action.key] = action.icon;
+ return Object.assign({}, ui, {icons : icons});
+
/**
* Context menu
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 2cb8626f..14f7c80b 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -67,10 +67,13 @@ main {
margin-bottom: -10px;
.icon {
- height: 1.2rem;
- margin-bottom: 5px;
- padding-right: 10px;
+ margin-bottom: 6px;
+ padding-right: 6px;
margin-left: 10px;
+
+ svg {
+ height: 1.2rem;
+ }
}
h1 {
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index c8195af8..054a98c2 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -235,8 +235,9 @@
margin-bottom: 0;
.icon {
- width: 12px;
- height: 12px;
+ svg {
+ height: 12px;
+ }
}
}
&.previous {
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index a9fbb455..e1da8cc6 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -57,7 +57,7 @@ aside{
line-height: 18px;
.icon {
- padding-right: 10px;
+ padding-right: 6px;
vertical-align: top;
margin-top: 0;
@@ -139,5 +139,15 @@ aside{
.close {
display: block;
}
+
+ nav {
+ section {
+ padding-bottom: 10px;
+
+ title {
+ padding-bottom: 2px;
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/scss/views/_settings.scss b/src/scss/views/_settings.scss
index e095eb50..407aabfa 100755
--- a/src/scss/views/_settings.scss
+++ b/src/scss/views/_settings.scss
@@ -144,6 +144,13 @@
}
}
+ .field.current-user {
+ .text {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+ }
+
section {
padding: 20px;
}