Commit ed0bc102 authored by chris's avatar chris

new upload indicator

parent 7b734009
......@@ -125,6 +125,7 @@ export class Chapter extends React.Component {
<SecondRow
chapter={chapter}
isUploadInProgress={isUploadInProgress || uploading}
convertFile={ink}
outerContainer={outerContainer}
roles={roles}
......
......@@ -25,17 +25,6 @@ class ChapterTitle extends React.Component {
browserHistory.push(url)
}
renderUploadIndicator () {
const { isUploadInProgress } = this.props
// console.log('is uploading', isUploadInProgress)
if (!isUploadInProgress) return null
return (
<i className={`${styles['animate-flicker']} fa fa-upload`} />
)
}
renderTitle () {
const {
chapter,
......@@ -84,7 +73,6 @@ class ChapterTitle extends React.Component {
render () {
const title = this.renderTitle()
const uploadIndicator = this.renderUploadIndicator()
const renameEmptyError = this.renderError()
return (
......@@ -92,7 +80,6 @@ class ChapterTitle extends React.Component {
{ title }
{/* { this.props.chapter.index } */}
{ uploadIndicator }
{ renameEmptyError }
<div className={styles.separator} />
......@@ -106,7 +93,6 @@ ChapterTitle.propTypes = {
chapter: React.PropTypes.object.isRequired,
isRenaming: React.PropTypes.bool.isRequired,
isRenameEmpty: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
onSaveRename: React.PropTypes.func.isRequired,
title: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
......
......@@ -8,7 +8,7 @@ import styles from '../styles/bookBuilder.local.scss'
class ChapterSecondRow extends React.Component {
render () {
const { chapter, convertFile, outerContainer, roles, toggleUpload, update } = this.props
const { chapter, convertFile, outerContainer, roles, toggleUpload, update, isUploadInProgress } = this.props
// TODO -- surrounding divs should go inside the components
......@@ -20,6 +20,7 @@ class ChapterSecondRow extends React.Component {
accept='.doc,.docx'
chapter={chapter}
convertFile={convertFile}
isUploadInProgress={isUploadInProgress}
modalContainer={outerContainer}
title=' '
toggleUpload={toggleUpload}
......@@ -52,6 +53,7 @@ ChapterSecondRow.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
outerContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
roles: React.PropTypes.array,
toggleUpload: React.PropTypes.func.isRequired,
update: React.PropTypes.func.isRequired
......
......@@ -16,6 +16,13 @@ export class UploadButton extends React.Component {
}
}
renderUploadIndicator () {
const { isUploadInProgress } = this.props
if (isUploadInProgress) return true
return false
}
handleFileUpload (event) {
event.preventDefault()
......@@ -56,6 +63,16 @@ export class UploadButton extends React.Component {
}
renderInput () {
let uploadClass = ''
let text = 'upload word'
let disabled = ''
const uploadIndicator = this.renderUploadIndicator()
if (uploadIndicator) {
uploadClass = styles['animate-flicker']
text = 'uploading...'
disabled = styles['no-actions']
}
if (this.isLocked()) return null
const { accept, title, type, chapter } = this.props
......@@ -64,13 +81,13 @@ export class UploadButton extends React.Component {
<span>
<label
htmlFor={'single-file-uploader' + chapter.id}
className={styles.uploadIcon}
className={styles.uploadIcon + ' ' + uploadClass + ' ' + disabled}
/>
<label
htmlFor={'single-file-uploader' + chapter.id}
className={styles.uploadText}
className={styles.uploadText + ' ' + disabled}
>
UPLOAD WORD
{text}
</label>
<input
id={'single-file-uploader' + chapter.id}
......@@ -132,6 +149,7 @@ UploadButton.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
modalContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
title: React.PropTypes.string.isRequired,
toggleUpload: React.PropTypes.func.isRequired,
type: React.PropTypes.string.isRequired,
......
......@@ -28,3 +28,8 @@
-o-animation: flickerAnimation 2s infinite;
animation: flickerAnimation 2s infinite;
}
.no-actions {
opacity: 0.3;
pointer-events: none;
}
......@@ -404,6 +404,7 @@ $blue: #0d78f2;
font-style: normal;
left: 10px;
position: relative;
text-transform: uppercase;
}
.uploadIcon {
-webkit-mask: url('./images/upload_word.svg') no-repeat 100% 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment