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

adjust register piece form

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-07 18:07:12 +02:00
parent 27c1b390ea
commit 22629ac09d
7 changed files with 92 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/components/ascribe_forms/property.js
View File

@ -17,13 +17,14 @@ let Property = React.createClass({
React.PropTypes.element
]),
footer: React.PropTypes.element,
handleChange: React.PropTypes.func
handleChange: React.PropTypes.func,
ignoreFocus: React.PropTypes.bool
},
getDefaultProps() {
return {
editable: true,
hidden: false,
hidden: false
};
},
@ -62,6 +63,9 @@ let Property = React.createClass({
this.setState({value: event.target.value});
},
handleFocus() {
if(this.props.ignoreFocus) {
return;
}
this.refs.input.getDOMNode().focus();
this.setState({
isFocused: true
@ -134,7 +138,8 @@ let Property = React.createClass({
return (
<div
className={'ascribe-settings-wrapper ' + this.getClassName()}
onClick={this.handleFocus} onfocus={this.handleFocus}>
onClick={this.handleFocus}
onfocus={this.handleFocus}>
<OverlayTrigger
delay={500}
placement="top"

9
js/components/ascribe_uploader/file_drag_and_drop.js
View File

@ -1,6 +1,8 @@
'use strict';
import React from 'react';
import FileDragAndDropDialog from './file_drag_and_drop_dialog';
import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
@ -140,7 +142,6 @@ let FileDragAndDrop = React.createClass({
return (
<div
className={className}
onClick={this.handleOnClick}
onDragStart={this.handleDragStart}
onDrag={this.handleDrop}
onDragEnter={this.handleDragEnter}
@ -148,7 +149,11 @@ let FileDragAndDrop = React.createClass({
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
onDragEnd={this.handleDragEnd}>
{hasFiles ? null : this.props.multiple ? <span className="file-drag-and-drop-dialog">Click or drag to add files</span> : <span className="file-drag-and-drop-dialog">Click or drag to add a file</span>}
<FileDragAndDropDialog
multipleFiles={this.props.multiple}
hasFiles={hasFiles}
onClick={this.handleOnClick}
/>
<FileDragAndDropPreviewIterator
files={this.props.filesToUpload}
handleDeleteFile={this.handleDeleteFile}

37
js/components/ascribe_uploader/file_drag_and_drop_dialog.js Normal file
View File

@ -0,0 +1,37 @@
'use strict';
import React from 'react';
let FileDragAndDropDialog = React.createClass({
propTypes: {
hasFiles: React.PropTypes.bool,
multipleFiles: React.PropTypes.bool,
onClick: React.PropTypes.func
},
render() {
if(this.props.hasFiles) {
return null;
} else {
if(this.props.multipleFiles) {
return (
<span className="file-drag-and-drop-dialog">Click or drag to add files</span>
);
} else {
return (
<span className="file-drag-and-drop-dialog">
<p>Drag a file here</p>
<p>or</p>
<button
className="btn btn-default"
onClick={this.props.onClick}>
choose a file to upload
</button>
</span>
);
}
}
}
});
export default FileDragAndDropDialog;

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

@ -72,7 +72,11 @@ let FileDragAndDropPreview = React.createClass({
if(this.props.areAssetsEditable) {
removeBtn = (<div className="delete-file">
<span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
<span
className="glyphicon glyphicon-remove text-center"
aria-hidden="true"
title="Remove file"
onClick={this.handleDeleteFile}/>
</div>);
}

23
js/components/register_piece.js
View File

@ -165,19 +165,8 @@ let RegisterPiece = React.createClass( {
onClick={this.changeSlide}
onFocus={this.changeSlide}>
<Row className="no-margin">
<Col sm={4}>
<div style={{'marginTop': 0, 'marginLeft': '1em'}}>
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
editable={this.state.isFineUploaderEditable}/>
</div>
<br />
<br />
</Col>
<Col sm={8}>
<h3 style={{'marginTop': 0, 'marginLeft': '1em'}} onClick={this.changePage}>Lock down title</h3>
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<h3 style={{'marginTop': 0, 'marginLeft': '1em'}}>Register your work</h3>
<Form
ref='form'
url={apiUrls.pieces_list}
@ -194,7 +183,13 @@ let RegisterPiece = React.createClass( {
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</button>
}>
<Property>
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
editable={this.state.isFineUploaderEditable}/>
</Property>
<Property
name='artist_name'
label="Artist Name">

4
sass/ascribe_login.scss
View File

@ -23,6 +23,10 @@ $break-small: 764px;
background-color: rgba(2, 182, 163, 0.6);
border: none;
}
&[disabled] {
opacity: .3;
}
}
.ascribe-btn-login-spinner{

53
sass/ascribe_uploader.scss
View File

@ -1,7 +1,6 @@
.file-drag-and-drop {
display: block;
outline: 1px dashed #616161;
cursor: pointer;
outline: 1px dashed #9E9E9E;
vertical-align: middle;
text-align: center;
height: auto;
@ -9,43 +8,28 @@
overflow: auto;
margin-top: 1em;
padding: 3em;
cursor: default !important;
padding: 1.5em 1.5em 1.5em 0;
}
.inactive-dropzone {
cursor: default !important;
background-color: rgba(0,0,0,0) !important;
outline: 0;
}
.inactive-dropzone:hover {
background-color: #FAFAFA !important;
}
.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
font-size: 1.5em !important;
.file-drag-and-drop:hover {
background-color: rgba(72, 218, 203, 0.2);
}
.file-drag-and-drop .file-drag-and-drop-dialog {
font-size: 1.25em !important;
margin-top: 1em;
&::before {
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
}
.has-files {
text-align: left;
padding: 4% 0 0 0;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.file-drag-and-drop-position {
position: relative;
display: inline-block;
margin: 0 0 4% 4%;
float:left;
.delete-file {
@ -64,14 +48,21 @@
span {
color: white;
top: 1;
left: 0;
font-size: .8em;
&:hover {
color: $brand-danger;
}
}
}
}
.file-drag-and-drop-preview-table-wrapper {
display: table;
height:64px;
width:74px;
height:74px;
width:84px;
}
.file-drag-and-drop-preview {
@ -83,8 +74,8 @@
.file-drag-and-drop-preview-image {
display: table;
height:74px;
width:74px;
height:84px;
width:84px;
overflow:hidden;
border: 1px solid #616161;
text-align: center;