ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Extract extension using file name rather that mime type for uploader preview 

Also adds ellipsis overflow to the extension name to prevent long
extensions from resizing the preview element and removes redundant
`.file-drag-and-drop-preview-table-wrapper` class
This commit is contained in:
Brett Sun 2016-01-26 13:41:15 +01:00
parent d8f2423344
commit 627b2f75fe
3 changed files with 24 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
View File

@ -23,6 +23,7 @@ const FileDragAndDropPreview = React.createClass({
s3Url: string,
s3UrlSafe: string
}).isRequired,
handleDeleteFile: func,
handleCancelFile: func,
handlePauseFile: func,
@ -123,7 +124,7 @@ const FileDragAndDropPreview = React.createClass({
<FileDragAndDropPreviewOther
onClick={this.handleDeleteFile}
progress={file.progress}
type={file.type.split('/')[1]}
type={extractFileExtensionFromString(file.name)}
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={areAssetsDownloadable}
downloadUrl={file.s3UrlSafe}

7
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
View File

@ -71,17 +71,14 @@ const FileDragAndDropPreviewOther = React.createClass({
}
return (
<div
className="file-drag-and-drop-preview">
<div className="file-drag-and-drop-preview">
<ProgressBar
now={Math.ceil(progress)}
style={style}
className="ascribe-progress-bar ascribe-progress-bar-xs" />
<div className="file-drag-and-drop-preview-table-wrapper">
<div className="file-drag-and-drop-preview-other">
{actionSymbol}
<p style={style}>{'.' + type}</p>
</div>
<p style={style}>{'.' + (type ? type : 'file')}</p>
</div>
</div>
);

22
sass/ascribe_uploader.scss
View File

@ -78,12 +78,6 @@
}
}
.file-drag-and-drop-preview-table-wrapper {
display: table;
height: 94px;
width: 104px;
}
.file-drag-and-drop-preview {
background-color: #eeeeee;
border: 1px solid #616161;
@ -131,7 +125,7 @@
width: 104px;
// REFACTOR TO USE TABLE CELL
.action-file, .spinner-file, .icon-ascribe-ok {
.action-file, .spinner-file {
margin-top: 1em;
line-height: 1.3;
}
@ -142,23 +136,21 @@
}
.file-drag-and-drop-preview-other {
display: table-cell;
height: 94px;
text-align: center;
vertical-align: middle;
width: 104px;
p {
margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.action-file:not(.icon-ascribe-ok), .spinner-file {
margin-top: 0;
position: relative;
top: .3em;
span:not(:first-child) {
display: block;
margin-top: .5em;
}
top: 0.8em;
}
}