diff --git a/src/assets/icons/connection.svg b/src/assets/icons/connection.svg new file mode 100755 index 00000000..5b253cdd --- /dev/null +++ b/src/assets/icons/connection.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/src/assets/icons/server.svg b/src/assets/icons/server.svg new file mode 100755 index 00000000..4bb5597b --- /dev/null +++ b/src/assets/icons/server.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/src/assets/icons/websocket.svg b/src/assets/icons/websocket.svg new file mode 100755 index 00000000..1c0f1871 --- /dev/null +++ b/src/assets/icons/websocket.svg @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/js/services/pusher/reducer.js b/src/js/services/pusher/reducer.js index 8650691f..b4c6a160 100755 --- a/src/js/services/pusher/reducer.js +++ b/src/js/services/pusher/reducer.js @@ -9,6 +9,7 @@ export default function reducer(pusher = {}, action){ case 'PUSHER_CONNECTED': return Object.assign({}, pusher, { connected: true, + connecting: false, connection_id: action.connection_id, username: action.username }); diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index bdac2956..2f1df936 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -11,6 +11,7 @@ import PusherConnectionList from '../components/PusherConnectionList' import URISchemesList from '../components/URISchemesList' import VersionManager from '../components/VersionManager' import Header from '../components/Header' +import Icon from '../components/Icon' import Thumbnail from '../components/Thumbnail' import * as uiActions from '../services/ui/actions' @@ -56,7 +57,15 @@ class Settings extends React.Component{ } renderConnectionStatus(service){ - if( this.props[service.toLowerCase()].connected ){ + if (service == 'Spotify' && !this.props[service.toLowerCase()].authorized){ + return ( + + +   + Not connected + + ) + } else if (this.props[service.toLowerCase()].connected){ return ( @@ -64,20 +73,20 @@ class Settings extends React.Component{ {service} ) - }else if( this.props[service.toLowerCase()].connecting ){ + } else if (this.props[service.toLowerCase()].connecting){ return (   - {service} + Connecting ) - }else{ + } else { return (   - {service} + Not connected ) } @@ -140,6 +149,18 @@ class Settings extends React.Component{ ) } + serviceStatus(service){ + if (this.props[service].connecting){ + return Connecting + } else if (service == 'spotify' && !this.props[service].authorized){ + return Not authorized + } else if (this.props[service].connected){ + return Connected + } else { + return Disconnected + } + } + render(){ var actions = ( @@ -155,18 +176,30 @@ class Settings extends React.Component{
+
+ +
+ +

Mopidy

+ {this.serviceStatus('mopidy')} +
+ +
+ +

Pusher

+ {this.serviceStatus('pusher')} +
+ +
+ +

Spotify

+ {this.serviceStatus('spotify')} +
+ +
+

System

this.setMopidyConfig(e)}> -
-
Status
-
-
- { this.renderConnectionStatus('Mopidy') } -    - { this.renderConnectionStatus('Pusher') } -
-
-
Username
@@ -199,14 +232,6 @@ class Settings extends React.Component{

Spotify

-
-
Status
-
-
- { this.renderConnectionStatus('Spotify') } -
-
-
Country
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 742dceae..99565f16 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -167,6 +167,7 @@ h4 { .grey-text { color: $mid_grey !important; } .red-text { color: $red !important; } .green-text { color: $green !important; } +.orange-text { color: $orange !important; } .dark-text { color: $dark_grey !important; } .centred-text { text-align: center; } diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 2cbb55d4..1ebbc277 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -11,6 +11,7 @@ $red: #cf2d2d; $green: #47af2a; $blue: #32b5f2; $yellow: #FFF39C; +$orange: #f16f19; $bp_wide: 1000px; $bp_medium: 800px; diff --git a/src/scss/views/_settings.scss b/src/scss/views/_settings.scss index 3d2751b0..0aa8ff9b 100755 --- a/src/scss/views/_settings.scss +++ b/src/scss/views/_settings.scss @@ -3,6 +3,29 @@ section { padding: 40px; } + + .status { + .item { + position: relative; + display: inline-block; + padding: 0 0 0 45px; + margin-right: 20px; + min-width: 80px; + + .icon { + width: 35px; + height: 35px; + position: absolute; + top: 0; + left: 0; + } + + h4 { + padding: 0; + margin: 0; + } + } + } .field.current-user { .text {