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

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, 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>
); );

28
sass/ascribe_uploader.scss
View File

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