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

Add prop to hide label of UploadButton

Browse Source
This commit is contained in:
Brett Sun 2015-12-21 11:46:46 +01:00
parent 3467e9f526
commit ebd575caa3
2 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -1,6 +1,7 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
import { getLangText } from '../../../utils/lang_utils';
@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
const { func, array, bool, shape, string } = React.PropTypes;
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
return React.createClass({
displayName: 'UploadButton',
@ -119,28 +120,28 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
},
getUploadedFileLabel() {
const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles();
if (showLabel) {
const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles();
if(uploadingFiles.length) {
return (
<span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span>
);
} else if(uploadedFile) {
return (
<span>
<span className='ascribe-icon icon-ascribe-ok'/>
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
</span>
);
} else {
return (
<span>{getLangText('No file chosen')}</span>
);
if (uploadingFiles.length) {
return (
<span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span>
);
} else if (uploadedFile) {
return (
<span>
<span className='ascribe-icon icon-ascribe-ok'/>
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
</span>
);
} else {
return <span>{getLangText('No file chosen')}</span>;
}
}
},
@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/
return (
<div className="upload-button-wrapper">
<div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
{/*
The button needs to be of `type="button"` as it would
otherwise submit the form its in.

23
sass/ascribe_uploader.scss
View File

@ -29,7 +29,7 @@
.file-drag-and-drop-dialog {
margin: 1.5em 0 1.5em 0;
> p:first-child {
font-size: 1.5em !important;
margin-bottom: 0;
@ -189,15 +189,20 @@
height: 12px;
}
.upload-button-wrapper {
.ascribe-upload-button {
display: inline-block;
text-align: left;
.btn {
font-size: 1em;
margin-right: 1em;
}
&.ascribe-upload-button-has-label {
display: block;
span + .btn {
margin-left: 1em;
.btn {
font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
}
}
}