secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Loader progress style; Progress for enqueue

Browse Source
This commit is contained in:
James Barnsley
2017-09-08 07:57:48 +12:00
parent a397a9ffba
commit f24399c897
4 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/components/Notifications.js
View File

@ -50,7 +50,9 @@ export default class Notifications extends React.Component{
return(
<div className="process notification" key={process.key}>
<div className="loader">
<div className="progress" style={{borderWidth: (10-progress*0.1)+'px'}}></div>
<div className="progress">
<div className="fill" style={{width: progress+'%'}}></div>
</div>
</div>
{process.message}
<FontAwesome name="close" className="close-button" onClick={e => {this.props.uiActions.cancelProcess(process.key)}} />

18
src/js/services/mopidy/middleware.js
View File

@ -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 {

2
src/js/views/Debug.js
View File

@ -113,7 +113,7 @@ class Debug extends React.Component{
<div className="name"></div>
<div className="input">
<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Test notification')}>Create notification</a>
<a className="button secondary" onClick={e => this.props.uiActions.startProcess('test_process', 'Test process', {total: 100, remaining: 76})}>Start process</a>
<a className="button secondary" onClick={e => this.props.uiActions.startProcess('test_process', 'Test process', {total: 100, remaining: 17})}>Start process</a>
<a className="button secondary" onClick={e => this.props.uiActions.processFinished('test_process')}>Stop process</a>
</div>
</div>

22
src/scss/components/_notifications.scss
View File

@ -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;
}
}
}
}