diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js index a9817da0..4ca8c553 100755 --- a/src/js/components/Notifications.js +++ b/src/js/components/Notifications.js @@ -50,7 +50,9 @@ export default class Notifications extends React.Component{ return(
-
+
+
+
{process.message} {this.props.uiActions.cancelProcess(process.key)}} /> diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index a5e42c1f..bb503aa7 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -337,7 +337,15 @@ const MopidyMiddleware = (function(){ next(action) // start our processor - store.dispatch(uiActions.startProcess('MOPIDY_ENQUEUE_URIS_PROCESSOR', 'Adding '+action.uris.length+' URI(s)', {batches: batches})) + store.dispatch(uiActions.startProcess( + 'MOPIDY_ENQUEUE_URIS_PROCESSOR', + 'Adding '+action.uris.length+' URI(s)', + { + batches: batches, + remaining: action.uris.length, + total: action.uris.length + } + )) break case 'MOPIDY_ENQUEUE_URIS_PROCESSOR': @@ -352,7 +360,13 @@ const MopidyMiddleware = (function(){ total_uris += batches[i].uris.length } batches.shift() - store.dispatch(uiActions.updateProcess('MOPIDY_ENQUEUE_URIS_PROCESSOR', 'Adding '+total_uris+' URI(s)')) + store.dispatch(uiActions.updateProcess( + 'MOPIDY_ENQUEUE_URIS_PROCESSOR', + 'Adding '+total_uris+' URI(s)', + { + remaining: total_uris + } + )) // no batches means we're done here } else { diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index 72da664b..e24032a5 100755 --- a/src/js/views/Debug.js +++ b/src/js/views/Debug.js @@ -113,7 +113,7 @@ class Debug extends React.Component{
this.props.uiActions.createNotification('Test notification')}>Create notification - this.props.uiActions.startProcess('test_process', 'Test process', {total: 100, remaining: 76})}>Start process + this.props.uiActions.startProcess('test_process', 'Test process', {total: 100, remaining: 17})}>Start process this.props.uiActions.processFinished('test_process')}>Stop process
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss index f362fbdb..ddb24180 100755 --- a/src/scss/components/_notifications.scss +++ b/src/scss/components/_notifications.scss @@ -78,7 +78,6 @@ left: 18px; opacity: 1; z-index: 2; - border-radius: 50%; &:before { border-color: transparent; @@ -89,15 +88,22 @@ } .progress { - background: $light_blue; position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0px solid $blue; - box-sizing: border-box; + top: 4px; + left: 4px; + bottom: 4px; + right: 4px; border-radius: 50%; + overflow: hidden; + + .fill { + background: $white; + position: absolute; + top: 0; + left: 0; + bottom: 0; + opacity: 0.35; + } } } }