ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

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

Browse Source 
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, s3Url: string,
s3UrlSafe: string s3UrlSafe: string
}).isRequired, }).isRequired,
handleDeleteFile: func, handleDeleteFile: func,
handleCancelFile: func, handleCancelFile: func,
handlePauseFile: func, handlePauseFile: func,
@ -123,7 +124,7 @@ const FileDragAndDropPreview = React.createClass({
<FileDragAndDropPreviewOther <FileDragAndDropPreviewOther
onClick={this.handleDeleteFile} onClick={this.handleDeleteFile}
progress={file.progress} progress={file.progress}
type={file.type.split('/')[1]} type={extractFileExtensionFromString(file.name)}
toggleUploadProcess={this.toggleUploadProcess} toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={areAssetsDownloadable} areAssetsDownloadable={areAssetsDownloadable}
downloadUrl={file.s3UrlSafe} 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 ( return (
<div <div className="file-drag-and-drop-preview">
className="file-drag-and-drop-preview">
<ProgressBar <ProgressBar
now={Math.ceil(progress)} now={Math.ceil(progress)}
style={style} style={style}
className="ascribe-progress-bar ascribe-progress-bar-xs" /> 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"> <div className="file-drag-and-drop-preview-other">
{actionSymbol} {actionSymbol}
<p style={style}>{'.' + type}</p> <p style={style}>{'.' + (type ? type : 'file')}</p>
</div>
</div> </div>
</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 { .file-drag-and-drop-preview {
background-color: #eeeeee; background-color: #eeeeee;
border: 1px solid #616161; border: 1px solid #616161;
@ -131,7 +125,7 @@
width: 104px; width: 104px;
// REFACTOR TO USE TABLE CELL // REFACTOR TO USE TABLE CELL
.action-file, .spinner-file, .icon-ascribe-ok { .action-file, .spinner-file {
margin-top: 1em; margin-top: 1em;
line-height: 1.3; line-height: 1.3;
} }
@ -142,23 +136,21 @@
} }
.file-drag-and-drop-preview-other { .file-drag-and-drop-preview-other {
display: table-cell; height: 94px;
text-align: center; text-align: center;
vertical-align: middle; width: 104px;
p { p {
margin-top: 5px; margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.action-file:not(.icon-ascribe-ok), .spinner-file { .action-file:not(.icon-ascribe-ok), .spinner-file {
margin-top: 0; margin-top: 0;
position: relative; position: relative;
top: .3em; top: 0.8em;
span:not(:first-child) {
display: block;
margin-top: .5em;
}
} }
} }