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

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