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

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

Browse Source 
Conflicts:
	js/components/register_piece.js
This commit is contained in:
Tim Daubenschütz 2015-06-30 10:45:07 +02:00
commit e31b6f0108
12 changed files with 170 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
js/actions/license_actions.js Normal file
View File

@ -0,0 +1,25 @@
'use strict';
import alt from '../alt';
import LicenseFetcher from '../fetchers/license_fetcher';
class LicenseActions {
constructor() {
this.generateActions(
'updateLicenses'
);
}
fetchLicense() {
LicenseFetcher.fetch()
.then((res) => {
this.actions.updateLicenses(res.licenses);
})
.catch((err) => {
console.log(err);
});
}
}
export default alt.createActions(LicenseActions);

2
js/components/ascribe_forms/form.js
View File

@ -130,10 +130,12 @@ let Form = React.createClass({
},
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
if (child) {
return ReactAddons.addons.cloneWithProps(child, {
handleChange: this.handleChangeChild,
ref: child.props.name
});
}
});
},
render() {

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

@ -16,13 +16,14 @@ let Property = React.createClass({
React.PropTypes.string,
React.PropTypes.element
]),
footer: React.PropTypes.element,
handleChange: React.PropTypes.func
},
getDefaultProps() {
return {
editable: true,
hidden: false
hidden: false,
};
},
@ -55,6 +56,9 @@ let Property = React.createClass({
handleChange(event) {
this.props.handleChange(event);
if ('onChange' in this.props) {
this.props.onChange(event);
}
this.setState({value: event.target.value});
},
handleFocus() {
@ -120,6 +124,13 @@ let Property = React.createClass({
{this.props.tooltip}
</Tooltip>);
}
let footer = null;
if (this.props.footer){
footer = (
<div className="ascribe-property-footer">
{this.props.footer}
</div>);
}
return (
<div
className={'ascribe-settings-wrapper ' + this.getClassName()}
@ -132,6 +143,7 @@ let Property = React.createClass({
{this.state.errors}
<span>{ this.props.label}</span>
{this.renderChildren()}
{footer}
</div>
</OverlayTrigger>
</div>

3
js/components/header.js
View File

@ -61,6 +61,7 @@ let Header = React.createClass({
},
getPoweredBy(){
if (this.state.whitelabel.logo) {
return (
<div className="row no-margin ascribe-subheader">
<a className="pull-right" href="https://www.ascribe.io/" target="_blank">
@ -69,6 +70,8 @@ let Header = React.createClass({
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</a>
</div>);
}
return null;
},
onChange(state) {
this.setState(state);

60
js/components/register_piece.js
View File

@ -7,6 +7,9 @@ import AppConstants from '../constants/application_constants';
import Router from 'react-router';
import LicenseActions from '../actions/license_actions';
import LicenseStore from '../stores/license_store';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
@ -19,15 +22,32 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
import DatePicker from 'react-datepicker/dist/react-datepicker';
import { mergeOptions } from '../utils/general_utils';
let RegisterPiece = React.createClass( {
mixins: [Router.Navigation],
getInitialState(){
return {
return mergeOptions(
LicenseStore.getState(),
{
digitalWorkKey: null,
isUploadReady: false
};
uploadStatus: false,
selectedLicense: 0
});
},
componentDidMount() {
LicenseActions.fetchLicense();
LicenseStore.listen(this.onChange);
},
componentWillUnmount() {
LicenseStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
handleSuccess(){
@ -59,12 +79,43 @@ let RegisterPiece = React.createClass( {
isReadyForFormSubmission(files) {
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if(files.length > 0 && files[0].status === 'upload successful') {
if (files.length > 0 && files[0].status === 'upload successful') {
return true;
} else {
return false;
}
},
onLicenseChange(event){
console.log(this.state.licenses[event.target.selectedIndex].url);
this.setState({selectedLicense: event.target.selectedIndex});
},
getLicenses() {
if (this.state.licenses && this.state.licenses.length > 0) {
return (
<Property
name='license'
label="Copyright license..."
onChange={this.onLicenseChange}
footer={
<a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">
Learn more about this license
</a>}>
<select name="license">
{this.state.licenses.map((license, i) => {
return (
<option
name={i}
key={i}
value={ license.code }>
{ license.code.toUpperCase() }: { license.name }
</option>
);
})}
</select>
</Property>);
}
return null;
},
render() {
return (
@ -128,6 +179,7 @@ let RegisterPiece = React.createClass( {
min={1}
required/>
</Property>
{this.getLicenses()}
<hr />
</Form>
</div>

1
js/constants/api_urls.js
View File

@ -14,6 +14,7 @@ let apiUrls = {
'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
'licenses': AppConstants.apiEndpoint + 'ownership/licenses/',
'note_notes': AppConstants.apiEndpoint + 'note/notes/',
'note_edition': AppConstants.apiEndpoint + 'note/edition_notes/',
'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/',

14
js/fetchers/license_fetcher.js Normal file
View File

@ -0,0 +1,14 @@
'use strict';
import requests from '../utils/requests';
let LicenseFetcher = {
/**
* Fetch the available licenses from the API (might be bound to the subdomain e.g. cc.ascribe.io).
*/
fetch() {
return requests.get('licenses', {'subdomain': window.location.host.split('.')[0]});
}
};
export default LicenseFetcher;

18
js/stores/license_store.js Normal file
View File

@ -0,0 +1,18 @@
'use strict';
import alt from '../alt';
import LicenseActions from '../actions/license_actions';
class LicenseStore {
constructor() {
this.licenses = {};
this.bindActions(LicenseActions);
}
onUpdateLicenses(licenses) {
this.licenses = licenses;
}
}
export default alt.createStore(LicenseStore, 'LicenseStore');

6
sass/ascribe_settings.scss
View File

@ -127,3 +127,9 @@
padding: 0;
}
}
.ascribe-property-footer{
font-size: 0.8em;
margin-top: 10px;
width: 100%;
}

3
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-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;