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

Merge pull request #141 from ascribe/AG-139-specific-file-formats-leads-to-wrong-preview-sizing

Browse Source 
AG-139 Extract extension using file name rather that mime type for uploader preview
This commit is contained in:
Tim Daubenschütz 2016-01-28 10:03:18 +01:00
commit f2542f99bd
3 changed files with 30 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>
);

28
sass/ascribe_uploader.scss
View File

@ -9,6 +9,12 @@
text-align: center;
vertical-align: middle;
padding-top: 1.5em;
@media screen and (max-width: 625px) {
.file-name {
display: block;
}
}
}
.inactive-dropzone {
@ -78,12 +84,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 +131,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 +142,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;
}
}