From b795d9647be21147cb09a58d70dd3e45529cb3bc Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sun, 18 Feb 2018 21:39:03 +1300 Subject: [PATCH] Removing test scrolling; Icon library to prevent cache lag --- src/js/App.js | 9 ++-- src/js/components/Icon.js | 59 ++++++++++++--------- src/js/services/ui/actions.js | 32 +++++++++++ src/js/services/ui/reducer.js | 5 ++ src/scss/components/_header.scss | 9 ++-- src/scss/components/_playback-controls.scss | 5 +- src/scss/components/_sidebar.scss | 12 ++++- src/scss/views/_settings.scss | 7 +++ 8 files changed, 104 insertions(+), 34 deletions(-) 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; }