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

Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-368-harmonize-functionality-of-ascrib

Browse Source
This commit is contained in:
diminator 2015-06-30 15:43:48 +02:00
commit fe4d4c6a72
17 changed files with 330 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/actions/coa_actions.js
View File

@ -15,7 +15,6 @@ class CoaActions {
CoaFetcher.fetchOne(id)
.then((res) => {
this.actions.updateCoa(res.coa);
console.log(res.coa);
})
.catch((err) => {
console.log(err);
@ -25,7 +24,6 @@ class CoaActions {
CoaFetcher.create(edition.bitcoin_id)
.then((res) => {
this.actions.updateCoa(res.coa);
console.log(res.coa);
})
.catch((err) => {
console.log(err);

4
js/components/ascribe_accordion_list/accordion_list.js
View File

@ -16,6 +16,10 @@ let AccordionList = React.createClass({
{this.props.children}
</div>
);
} else if(this.props.itemList.length === 0) {
return (
<p className="text-center">You don't have any works yet...</p>
);
} else {
return (
<div className={this.props.className + ' ascribe-accordion-list-loading'}>

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

@ -4,8 +4,10 @@ import React from 'react';
import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
let ReactTestUtils = React.addons.TestUtils;
// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
var FileDragAndDrop = React.createClass({
let FileDragAndDrop = React.createClass({
propTypes: {
className: React.PropTypes.string,
onDragStart: React.PropTypes.func,
@ -19,8 +21,11 @@ var FileDragAndDrop = React.createClass({
filesToUpload: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func,
multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool
dropzoneInactive: React.PropTypes.bool,
areAssetsDownloadable: React.PropTypes.bool
},
handleDragStart(event) {
@ -93,6 +98,20 @@ var FileDragAndDrop = React.createClass({
this.props.handleCancelFile(fileId);
},
handlePauseFile(fileId) {
// input's value is not change the second time someone
// inputs the same file again, therefore we need to reset its value
this.refs.fileinput.getDOMNode().value = '';
this.props.handlePauseFile(fileId);
},
handleResumeFile(fileId) {
// input's value is not change the second time someone
// inputs the same file again, therefore we need to reset its value
this.refs.fileinput.getDOMNode().value = '';
this.props.handleResumeFile(fileId);
},
handleOnClick() {
// when multiple is set to false and the user already uploaded a piece,
// do not propagate event
@ -100,10 +119,16 @@ var FileDragAndDrop = React.createClass({
return;
}
// Simulate click on hidden file input
var event = document.createEvent('HTMLEvents');
event.initEvent('click', false, true);
this.refs.fileinput.getDOMNode().dispatchEvent(event);
// Firefox only recognizes the simulated mouse click if bubbles is set to true,
// but since Google Chrome propagates the event much further than needed, we
// need to stop propagation as soon as the event is created
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
},
render: function () {
@ -128,7 +153,10 @@ var FileDragAndDrop = React.createClass({
<FileDragAndDropPreviewIterator
files={this.props.filesToUpload}
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}/>
handleCancelFile={this.handleCancelFile}
handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>
<input
multiple={this.props.multiple}
ref="fileinput"

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

@ -14,11 +14,18 @@ let FileDragAndDropPreview = React.createClass({
type: React.PropTypes.string
}).isRequired,
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func
handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
toggleUploadProcess() {
if(this.props.file.status === 'uploading') {
this.props.handlePauseFile(this.props.file.id);
} else if(this.props.file.status === 'paused') {
this.props.handleResumeFile(this.props.file.id);
}
},
handleDeleteFile() {
@ -45,18 +52,23 @@ let FileDragAndDropPreview = React.createClass({
onClick={this.handleDeleteFile}
progress={this.props.file.progress}
url={this.props.file.url}
toggleUploadProcess={this.toggleUploadProcess}/>);
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
} else {
previewElement = (<FileDragAndDropPreviewOther
onClick={this.handleDeleteFile}
progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]}
toggleUploadProcess={this.toggleUploadProcess}/>);
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
}
return (
<div
className="file-drag-and-drop-position">
<div className="delete-file">
<span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
</div>
{previewElement}
</div>
);

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

@ -3,12 +3,15 @@
import React from 'react';
import ProgressBar from 'react-progressbar';
import AppConstants from '../../constants/application_constants';
let FileDragAndDropPreviewImage = React.createClass({
propTypes: {
progress: React.PropTypes.number,
url: React.PropTypes.string,
toggleUploadProcess: React.PropTypes.func,
downloadFile: React.PropTypes.func
downloadFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
getInitialState() {
@ -17,28 +20,19 @@ let FileDragAndDropPreviewImage = React.createClass({
};
},
/*onClick(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
loading: true
});
this.props.onClick(e);
},*/
toggleUploadProcess(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
paused: true
paused: !this.state.paused
});
this.props.toggleUploadProcess();
},
downloadFile() {
console.log('implement this');
},
render() {
@ -49,12 +43,20 @@ let FileDragAndDropPreviewImage = React.createClass({
let actionSymbol;
if(this.props.progress !== 100 && this.state.paused) {
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress !== 100 && !this.state.paused) {
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress === 100) {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(this.props.areAssetsDownloadable) {
actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
}
} else {
actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
actionSymbol = <img height={35} className="action-file" src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
}
return (

10
js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
View File

@ -8,7 +8,10 @@ let FileDragAndDropPreviewIterator = React.createClass({
propTypes: {
files: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func
handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
render() {
@ -22,7 +25,10 @@ let FileDragAndDropPreviewIterator = React.createClass({
key={i}
file={file}
handleDeleteFile={this.props.handleDeleteFile}
handleCancelFile={this.props.handleCancelFile}/>
handleCancelFile={this.props.handleCancelFile}
handlePauseFile={this.props.handlePauseFile}
handleResumeFile={this.props.handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>
);
} else {
return null;

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

@ -9,35 +9,59 @@ let FileDragAndDropPreviewOther = React.createClass({
propTypes: {
type: React.PropTypes.string,
progress: React.PropTypes.number,
onClick: React.PropTypes.func
areAssetsDownloadable: React.PropTypes.bool,
toggleUploadProcess: React.PropTypes.func,
downloadFile: React.PropTypes.func,
},
getInitialState() {
return {
loading: false
paused: true
};
},
onClick(e) {
toggleUploadProcess(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
loading: true
paused: !this.state.paused
});
this.props.onClick(e);
this.props.toggleUploadProcess();
},
downloadFile() {
console.log('implement this');
},
render() {
//let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
let actionSymbol;
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress === 100) {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(this.props.areAssetsDownloadable) {
actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
}
} else {
actionSymbol = <img height={35} src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
}
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-pause delete-file" aria-hidden="true" title="Delete or cancel upload"/>
{actionSymbol}
<span>{'.' + this.props.type}</span>
</div>
</div>

118
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -9,6 +9,7 @@ import fetch from 'isomorphic-fetch';
import AppConstants from '../../constants/application_constants';
import { getCookie } from '../../utils/fetch_api_utils';
import S3Fetcher from '../../fetchers/s3_fetcher';
import fineUploader from 'fineUploader';
import FileDragAndDrop from './file_drag_and_drop';
@ -82,8 +83,9 @@ var ReactS3FineUploader = React.createClass({
retry: React.PropTypes.shape({
enableAuto: React.PropTypes.bool
}),
setUploadStatus: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
setIsUploadReady: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
getDefaultProps() {
@ -183,7 +185,8 @@ var ReactS3FineUploader = React.createClass({
onRetry: this.onRetry,
onAutoRetry: this.onAutoRetry,
onManualRetry: this.onManualRetry,
onDeleteComplete: this.onDeleteComplete
onDeleteComplete: this.onDeleteComplete,
onSessionRequestComplete: this.onSessionRequestComplete
}
};
},
@ -242,14 +245,14 @@ var ReactS3FineUploader = React.createClass({
this.setState(newState);
this.createBlob(files[id]);
this.props.submitKey(files[id].key);
// also, lets check if after the completion of this upload,
// the form is ready for submission or not
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setUploadStatus(true);
this.props.setIsUploadReady(true);
} else {
this.props.setUploadStatus(false);
this.props.setIsUploadReady(false);
}
},
@ -305,9 +308,9 @@ var ReactS3FineUploader = React.createClass({
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setUploadStatus(true);
this.props.setIsUploadReady(true);
} else {
this.props.setUploadStatus(false);
this.props.setIsUploadReady(false);
}
},
@ -324,14 +327,14 @@ var ReactS3FineUploader = React.createClass({
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setUploadStatus(true);
this.props.setIsUploadReady(true);
} else {
this.props.setUploadStatus(false);
this.props.setIsUploadReady(false);
}
},
onProgress(id, name, uploadedBytes, totalBytes) {
var newState = React.addons.update(this.state, {
let newState = React.addons.update(this.state, {
filesToUpload: { [id]: {
progress: { $set: (uploadedBytes / totalBytes) * 100} }
}
@ -339,18 +342,84 @@ var ReactS3FineUploader = React.createClass({
this.setState(newState);
},
onSessionRequestComplete(response, success) {
if(success) {
// fetch blobs for images
response = response.map((file) => {
file.url = file.s3Url;
file.status = 'online';
file.progress = 100;
return file;
});
// add file to filesToUpload
let updatedFilesToUpload = this.state.filesToUpload.concat(response);
// refresh all files ids,
updatedFilesToUpload = updatedFilesToUpload.map((file, i) => {
file.id = i;
return file;
});
let newState = React.addons.update(this.state, {filesToUpload: {$set: updatedFilesToUpload}});
this.setState(newState);
} else {
let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
throw new Error('The session request failed', response);
}
},
handleDeleteFile(fileId) {
// delete file from server
this.state.uploader.deleteFile(fileId);
// this is being continues in onDeleteFile, as
// fineuploaders deleteFile does not return a correct callback or
// promise
// In some instances (when the file was already uploaded and is just displayed to the user)
// fineuploader does not register an id on the file (we do, don't be confused by this!).
// Since you can only delete a file by its id, we have to implement this method ourselves
//
// So, if an id is not present, we delete the file manually
// To check which files are already uploaded from previous sessions we check their status.
// If they are, it is "online"
if(this.state.filesToUpload[fileId].status !== 'online') {
// delete file from server
this.state.uploader.deleteFile(fileId);
// this is being continues in onDeleteFile, as
// fineuploaders deleteFile does not return a correct callback or
// promise
} else {
let fileToDelete = this.state.filesToUpload[fileId];
S3Fetcher
.deleteFile(fileToDelete.s3Key, fileToDelete.s3Bucket)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
}
},
handleCancelFile(fileId) {
this.state.uploader.cancel(fileId);
},
handlePauseFile(fileId) {
if(this.state.uploader.pauseUpload(fileId)) {
this.setStatusOfFile(fileId, 'paused');
} else {
throw new Error('File upload could not be paused.');
}
},
handleResumeFile(fileId) {
if(this.state.uploader.continueUpload(fileId)) {
this.setStatusOfFile(fileId, 'uploading');
} else {
throw new Error('File upload could not be resumed.');
}
},
handleUploadFile(files) {
// If multiple set and user already uploaded its work,
@ -420,6 +489,20 @@ var ReactS3FineUploader = React.createClass({
this.setState(newState);
},
setStatusOfFile(fileId, status) {
// also, sync files from state with the ones from fineuploader
let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
// splice because I can
filesToUpload[fileId].status = status;
// set state
let newState = React.addons.update(this.state, {
filesToUpload: { $set: filesToUpload }
});
this.setState(newState);
},
render() {
return (
<div>
@ -429,7 +512,10 @@ var ReactS3FineUploader = React.createClass({
filesToUpload={this.state.filesToUpload}
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}
handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}
multiple={this.props.multiple}
areAssetsDownloadable={this.props.areAssetsDownloadable}
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
</div>
);

18
js/components/edition.js
View File

@ -253,7 +253,7 @@ let EditionSummary = React.createClass({
<Row>
<Col md={12}>
<AclButtonList
className="pull-left"
className="text-center"
availableAcls={this.props.edition.acl}
editions={[this.props.edition]}
handleSuccess={this.handleSuccess} />
@ -455,9 +455,9 @@ let EditionFurtherDetails = React.createClass({
});
},
setUploadStatus(isReady) {
setIsUploadReady(isReady) {
this.setState({
uploadStatus: isReady
isUploadReady: isReady
});
},
@ -495,7 +495,7 @@ let EditionFurtherDetails = React.createClass({
edition={this.props.edition} />
<FileUploader
submitKey={this.submitKey}
setUploadStatus={this.setUploadStatus}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
edition={this.props.edition}/>
</Col>
@ -506,7 +506,8 @@ let EditionFurtherDetails = React.createClass({
let FileUploader = React.createClass({
propTypes: {
setUploadStatus: React.PropTypes.func,
edition: React.PropTypes.object,
setIsUploadReady: React.PropTypes.func,
submitKey: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
},
@ -528,7 +529,7 @@ let FileUploader = React.createClass({
sizeLimit: '10000000'
}}
submitKey={this.props.submitKey}
setUploadStatus={this.props.setUploadStatus}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
session={{
endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
@ -536,9 +537,10 @@ let FileUploader = React.createClass({
'X-CSRFToken': getCookie('csrftoken')
},
params: {
'pk': this.props.edition.other_data.id
'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
}
}}/>
}}
areAssetsDownloadable={true}/>
);
}
});

29
js/components/register_piece.js
View File

@ -71,9 +71,9 @@ let RegisterPiece = React.createClass( {
});
},
setUploadStatus(isReady) {
setIsUploadReady(isReady) {
this.setState({
uploadStatus: isReady
isUploadReady: isReady
});
},
@ -118,15 +118,6 @@ let RegisterPiece = React.createClass( {
},
render() {
let buttons = <span />;
if (this.state.uploadStatus){
buttons = (
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
Register your artwork
</button>);
}
return (
<div className="row ascribe-row">
<div className="col-md-12">
@ -136,7 +127,12 @@ let RegisterPiece = React.createClass( {
url={apiUrls.pieces_list}
getFormData={this.getFormData}
handleSuccess={this.handleSuccess}
buttons={buttons}
buttons={<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
disabled={!this.state.isUploadReady}>
Register your artwork
</button>}
spinner={
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
@ -146,7 +142,7 @@ let RegisterPiece = React.createClass( {
label="Files to upload">
<FileUploader
submitKey={this.submitKey}
setUploadStatus={this.setUploadStatus}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}/>
</Property>
<Property
@ -195,7 +191,7 @@ let RegisterPiece = React.createClass( {
let FileUploader = React.createClass({
propTypes: {
setUploadStatus: React.PropTypes.func,
setIsUploadReady: React.PropTypes.func,
submitKey: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
},
@ -215,8 +211,9 @@ let FileUploader = React.createClass({
itemLimit: 100000,
sizeLimit: '25000000000'
}}
setUploadStatus={this.props.setUploadStatus}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
areAssetsDownloadable={false}/>
);
}
});

3
js/constants/api_urls.js
View File

@ -40,7 +40,8 @@ let apiUrls = {
'users_signup': AppConstants.apiEndpoint + 'users/',
'users_username': AppConstants.apiEndpoint + 'users/username/',
'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/'
'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
'delete_s3_file': AppConstants.serverUrl + 's3/delete/'
};
export default apiUrls;

17
js/fetchers/s3_fetcher.js Normal file
View File

@ -0,0 +1,17 @@
'use strict';
import requests from '../utils/requests';
let S3Fetcher = {
/**
* Fetch the registered applications of a user from the API.
*/
deleteFile(key, bucket) {
return requests.delete('delete_s3_file', {
key,
bucket
});
}
};
export default S3Fetcher;

35
js/utils/fetch_api_utils.js
View File

@ -69,4 +69,39 @@ export function getCookie(name) {
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
/*
Given a url for an image, this method fetches it and returns a promise that resolves to
a blob object.
It can be used to create a 64base encoded data url.
Taken from: http://jsfiddle.net/jan_miksovsky/yy7zs/
*/
export function fetchImageAsBlob(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
// Ask for the result as an ArrayBuffer.
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status >= 400) {
reject(xhr.statusText);
}
};
xhr.onload = function() {
// Obtain a blob: URL for the image data.
let arrayBufferView = new Uint8Array(this.response);
let blob = new Blob([arrayBufferView], {type: 'image/jpeg'});
resolve(blob);
};
xhr.send();
});
}

20
sass/ascribe_uploader.scss
View File

@ -43,9 +43,29 @@
}
.file-drag-and-drop-position {
position: relative;
display: inline-block;
margin: 0 0 4% 4%;
float:left;
.delete-file {
display: block;
background-color: black;
width: 20px;
height: 20px;
position: absolute;
right: -7px;
top: -7px;
border-radius: 1em;
text-align: center;
cursor: pointer;
span {
color: white;
}
}
}
.file-drag-and-drop-preview-table-wrapper {

5
sass/ascribe_variables.scss
View File

@ -1,3 +1,6 @@
$ascribe-color: rgba(2, 182, 163, 0.5);
$ascribe-color-dark: rgba(2, 182, 163, 0.8);
$ascribe-color-full: rgba(2, 182, 163, 1);
$ascribe-color-full: rgba(2, 182, 163, 1);
$ascribe-brand-danger: #FC535F;
$ascribe-brand-warning: #FFC354;

2
sass/main.scss
View File

@ -3,8 +3,8 @@
$BASE_URL: '<%= BASE_URL %>';
@import 'variables';
@import 'ascribe_variables';
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
@import '../node_modules/react-datepicker/dist/react-datepicker';
@import './ascribe-fonts/style';

24
sass/variables.scss
View File

@ -18,8 +18,8 @@ $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
$brand-warning: $ascribe-brand-warning !default;
$brand-danger: $ascribe-brand-danger !default;
//== Scaffolding
@ -107,9 +107,9 @@ $padding-xs-horizontal: 5px !default;
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5 !default;
$border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
$border-radius-base: 0 !default;
$border-radius-large: 0 !default;
$border-radius-small: 0 !default;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: #fff !default;
@ -149,9 +149,9 @@ $table-border-color: #ddd !default;
$btn-font-weight: normal !default;
$btn-default-color: #333 !default;
$btn-default-bg: #fff !default;
$btn-default-border: #ccc !default;
$btn-default-color: white !default;
$btn-default-bg: $ascribe-color-full !default;
$btn-default-border: $ascribe-color-full !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
@ -171,7 +171,7 @@ $btn-warning-border: darken($btn-warning-bg, 5%) !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
$btn-danger-border: $brand-danger !default;
$btn-link-disabled-color: $gray-light !default;
@ -186,7 +186,7 @@ $input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;
//** Text color for `<input>`s
$input-color: $gray !default;
$input-color: white !default;
//** `<input>` border color
$input-border: #ccc !default;
@ -219,9 +219,9 @@ $legend-color: $gray-dark !default;
$legend-border-color: #e5e5e5 !default;
//** Background color for textual input addons
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-bg: $ascribe-color-full !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border !default;
$input-group-addon-border-color: $ascribe-color-full !default;
//** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed !default;