diff --git a/src/plugins/StatusBar/StatusBar.js b/src/plugins/StatusBar/StatusBar.js index 57e62ff11..7e6f1891a 100644 --- a/src/plugins/StatusBar/StatusBar.js +++ b/src/plugins/StatusBar/StatusBar.js @@ -106,24 +106,58 @@ module.exports = (props) => { } const width = typeof progressValue === 'number' ? progressValue : 100 + const isHidden = uploadState === STATE_WAITING && !props.newFiles > 0 return html`
- + aria-hidden="${isHidden}">
+ style="width: ${width}%" + role="progressbar" + aria-valuemin="0" + aria-valuemax="100" + aria-valuenow="${progressValue}">
${progressBarContent} +
+ ${props.newFiles ? UploadBtn(props) : ''} + ${props.error ? RetryBtn(props) : ''} +
` } +const UploadBtn = (props) => { + return html`` +} + +const RetryBtn = (props) => { + return html`` +} + const ProgressBarProcessing = (props) => { + const value = Math.round(props.value * 100) return html`
- ${props.mode === 'determinate' ? `${Math.round(props.value * 100)}%・` : ''} - ${props.message} +
+ ${props.mode === 'determinate' ? `${value}%・` : ''} + ${props.message} +
` } @@ -136,16 +170,16 @@ const ProgressBarUploading = (props) => { ? html`
${pauseResumeButtons(props)} Uploading... ${throttledProgressDetails(props)}
` : html`
${pauseResumeButtons(props)} Paused・${props.totalProgress}%
` : null - } + } ` } const ProgressBarComplete = ({ totalProgress, i18n }) => { return html` -
+