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

17
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,
@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({
},
toggleUploadProcess() {
if(this.props.file.status === 'uploading') {
if (this.props.file.status === 'uploading') {
this.props.handlePauseFile(this.props.file.id);
} else if(this.props.file.status === 'paused') {
} else if (this.props.file.status === 'paused') {
this.props.handleResumeFile(this.props.file.id);
}
},
@ -54,13 +55,13 @@ const FileDragAndDropPreview = React.createClass({
(file.status === 'upload successful' || file.status === 'online') &&
file.s3UrlSafe) {
handleDeleteFile(file.id);
} else if(handleCancelFile) {
} else if (handleCancelFile) {
handleCancelFile(file.id);
}
},
handleDownloadFile() {
if(this.props.file.s3Url) {
if (this.props.file.s3Url) {
// This simply opens a new browser tab with the url provided
open(this.props.file.s3Url);
}
@ -69,7 +70,7 @@ const FileDragAndDropPreview = React.createClass({
getFileName() {
const { numberOfDisplayedFiles, file } = this.props;
if(numberOfDisplayedFiles === 1) {
if (numberOfDisplayedFiles === 1) {
return (
<span className="file-name">
{truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
@ -81,7 +82,7 @@ const FileDragAndDropPreview = React.createClass({
},
getRemoveButton() {
if(this.props.areAssetsEditable) {
if (this.props.areAssetsEditable) {
return (
<div className="delete-file">
<span
@ -107,7 +108,7 @@ const FileDragAndDropPreview = React.createClass({
// Decide whether an image or a placeholder picture should be displayed
// If a file has its `thumbnailUrl` defined, then we display it also as an image
if(file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
if (file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
previewElement = (
<FileDragAndDropPreviewImage
onClick={this.handleDeleteFile}
@ -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}

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

@ -56,9 +56,9 @@ const FileDragAndDropPreviewOther = React.createClass({
target="_blank"
className="glyphicon glyphicon-download action-file"
aria-hidden="true"
title={getLangText('Download file')}/>
title={getLangText('Download file')} />
);
} else if(progress >= 0 && progress < 100) {
} else if (progress >= 0 && progress < 100) {
actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
@ -66,22 +66,19 @@ const FileDragAndDropPreviewOther = React.createClass({
);
} else {
actionSymbol = (
<span className='ascribe-icon icon-ascribe-ok action-file'/>
<span className='ascribe-icon icon-ascribe-ok action-file' />
);
}
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>
className="ascribe-progress-bar ascribe-progress-bar-xs" />
<div className="file-drag-and-drop-preview-other">
{actionSymbol}
<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;
}
}