ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

Add thin cross icon to FileDragAndDropError

Browse Source
This commit is contained in:
Brett Sun 2015-12-08 20:48:39 +01:00
parent 511abc6a33
commit 17a3ecbd44
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
View File

@ -57,7 +57,7 @@ let FileDragAndDropErrorDialog = React.createClass({
{this.getRetryButton('Retry')} {this.getRetryButton('Retry')}
</div> </div>
<span className={classNames('file-drag-and-drop-error-icon-container', { 'file-drag-and-drop-error-icon-container-multiple-files': multipleFiles })}> <span className={classNames('file-drag-and-drop-error-icon-container', { 'file-drag-and-drop-error-icon-container-multiple-files': multipleFiles })}>
<span className='file-drag-and-drop-error-icon'></span> <span className='ascribe-icon icon-ascribe-thin-cross'></span>
</span> </span>
<div className='file-drag-and-drop-error-file-names'> <div className='file-drag-and-drop-error-file-names'>
<ul> <ul>

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

@ -61,7 +61,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
}, },
getUploadedFile() { getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0]; return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCCESSFUL)[0];
}, },
clearSelection() { clearSelection() {

15
sass/ascribe_uploader.scss
View File

@ -170,6 +170,7 @@
} }
.file-drag-and-drop-error { .file-drag-and-drop-error {
color: #333333;
margin-bottom: 25px; margin-bottom: 25px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@ -270,20 +271,23 @@
.file-drag-and-drop-error-icon-container { .file-drag-and-drop-error-icon-container {
background-color: #eeeeee; background-color: #eeeeee;
display: inline-block; display: table;
float: left; float: left;
height: 104px; height: 104px;
position: relative; position: relative;
width: 104px; width: 104px;
vertical-align: top; vertical-align: top;
.file-drag-and-drop-error-icon { .icon-ascribe-thin-cross {
position: absolute; display: table-cell;
font-size: 5.5em;
vertical-align: middle;
} }
&.file-drag-and-drop-error-icon-container-multiple-files { &.file-drag-and-drop-error-icon-container-multiple-files {
background-color: #d7d7d7; background-color: #d7d7d7;
left: -15px; left: -15px;
margin-bottom: 24px;
z-index: 1; z-index: 1;
&::before { &::before {
@ -310,7 +314,10 @@
z-index: 3; z-index: 3;
} }
.file-drag-and-drop-error-icon { .icon-ascribe-thin-cross {
left: 44px;
position: absolute;
top: 38px;
z-index: 4; z-index: 4;
} }
} }