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

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

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

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;
}
} }
} }