ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-14 17:15:08 +01:00
Code Issues Releases Wiki Activity

add delete buttons

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-25 13:28:49 +02:00
parent c478bbce9a
commit b7e933c943
7 changed files with 50 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
js/components/ascribe_uploader/file_drag_and_drop_preview.js
View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react';
import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
@ -6,7 +8,7 @@ import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
let FileDragAndDropPreview = React.createClass({
propsTypes: {
propTypes: {
file: React.PropTypes.shape({
url: React.PropTypes.string,
type: React.PropTypes.string
@ -28,20 +30,20 @@ let FileDragAndDropPreview = React.createClass({
render() {
let previewElement;
// Decide wether an image or a placeholder picture should be displayed
// Decide whether an image or a placeholder picture should be displayed
if(this.props.file.type.split('/')[0] === 'image') {
previewElement = (<FileDragAndDropPreviewImage
progress={this.props.file.progress}
previewElement = (<FileDragAndDropPreviewImage
progress={this.props.file.progress}
url={this.props.file.url}/>);
} else {
previewElement = (<FileDragAndDropPreviewOther
progress={this.props.file.progress}
previewElement = (<FileDragAndDropPreviewOther
progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]}/>);
}
return (
<div
className="file-drag-and-drop-position"
<div
className="file-drag-and-drop-position"
onClick={this.handleDeleteFile}>
{previewElement}
</div>

3
js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react';
import ProgressBar from 'react-progressbar';
@ -18,6 +20,7 @@ let FileDragAndDropPreviewImage = React.createClass({
className="file-drag-and-drop-preview-image"
style={imageStyle}>
<ProgressBar completed={this.props.progress} color="black"/>
<span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span>
</div>
);
}

7
js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react';
import ProgressBar from 'react-progressbar';
@ -8,12 +10,13 @@ let FileDragAndDropPreviewOther = React.createClass({
},
render() {
return(
<div
return (
<div
className="file-drag-and-drop-preview">
<ProgressBar completed={this.props.progress} color="black"/>
<div className="file-drag-and-drop-preview-table-wrapper">
<div className="file-drag-and-drop-preview-other">
<span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span>
<span>{'.' + this.props.type}</span>
</div>
</div>

2
js/components/register_piece.js
View File

@ -179,7 +179,7 @@ let FileUploader = React.createClass( {
}
return name;
}}
multiple={false}/>
multiple={true}/>
);
}
});

64
sass/ascribe_react_s3_fineuploader.scss
View File

@ -1,64 +0,0 @@
.file-drag-and-drop {
display: table-cell;
outline: 1px dashed #616161;
cursor: pointer;
vertical-align: middle;
text-align: center;
height:208px;
width: 672px;
background-color: #FAFAFA;
transition: .1s linear background-color;
}
.file-drag-and-drop:hover {
background-color: rgba(72, 218, 203, 0.2);
}
.file-drag-and-drop > span {
font-size: 1.5em;
}
.has-files {
text-align: left;
padding: 3em 0 0 0;
}
.file-drag-and-drop-position {
display: inline-block;
margin: 0 0 3em 3em;
float:left;
}
.file-drag-and-drop-preview-table-wrapper {
display: table;
height:94px;
width:104px;
}
.file-drag-and-drop-preview {
overflow:hidden;
cursor: default;
background-color: #EEEEEE;
border: 1px solid #616161;
}
.file-drag-and-drop-preview-image {
display: table;
height:104px;
width:104px;
overflow:hidden;
border: 1px solid #616161;
}
.file-drag-and-drop-preview-other {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.file-drag-and-drop-preview-other span {
font-size: 1.1em;
display: block;
margin-top: -10px;
}

34
sass/ascribe_uploader.scss
View File

@ -56,6 +56,33 @@
width:104px;
overflow:hidden;
border: 1px solid #616161;
text-align: center;
}
.file-drag-and-drop-preview-image .delete-file {
font-size: 3em;
margin-top: .5em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;
&:hover {
color: #d9534f;
}
}
.file-drag-and-drop-preview-other .delete-file {
position: relative;
top: .45em;
margin-top: 0;
font-size: 3em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;
&:hover {
color: #d9534f;
}
}
.file-drag-and-drop-preview-other {
@ -65,8 +92,9 @@
}
.file-drag-and-drop-preview-other span {
font-size: 1.1em;
.file-drag-and-drop-preview-other span:not(:first-child) {
font-size: 1.2em;
font-family: mercury_light;
display: block;
margin-top: -10px;
margin-top: 1.5em;
}

1
sass/main.scss
View File

@ -22,7 +22,6 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_piece_register';
@import 'offset_right';
@import 'ascribe_settings';
@import 'ascribe_react_s3_fineuploader';
body {
background-color: #FDFDFD;