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

Conflicts:
	js/components/register_piece.js

js/actions/license_actions.js

@@ -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);

js/components/ascribe_forms/form.js

@@ -130,15 +130,17 @@ let Form = React.createClass({
     },
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
-            return ReactAddons.addons.cloneWithProps(child, {
+            if (child) {
-                handleChange: this.handleChangeChild,
+                return ReactAddons.addons.cloneWithProps(child, {
-                ref: child.props.name
+                    handleChange: this.handleChangeChild,
-            });
+                    ref: child.props.name
+                });
+            }
         });
     },
     render() {
         return (
-            <form 
+            <form
                 role="form"
                 className="ascribe-form"
                 onSubmit={this.submit}

js/components/ascribe_forms/property.js

@@ -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>

js/components/header.js

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

js/components/register_piece.js

@@ -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(
-            digitalWorkKey: null,
+            LicenseStore.getState(),
-            isUploadReady: false
+            {
-        };
+                digitalWorkKey: null,
+                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 (
@@ -76,7 +127,7 @@ let RegisterPiece = React.createClass( {
                         url={apiUrls.pieces_list}
                         getFormData={this.getFormData}
                         handleSuccess={this.handleSuccess}
-                        buttons={<button 
+                        buttons={<button
                                     type="submit"
                                     className="btn ascribe-btn ascribe-btn-login"
                                     disabled={!this.state.isUploadReady}>
@@ -128,6 +179,7 @@ let RegisterPiece = React.createClass( {
                                 min={1}
                                 required/>
                         </Property>
+                        {this.getLicenses()}
                         <hr />
                     </Form>
                 </div>

js/constants/api_urls.js

@@ -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/',

js/fetchers/license_fetcher.js

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

js/stores/license_store.js

@@ -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');

sass/ascribe_settings.scss

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

sass/ascribe_variables.scss

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

sass/main.scss

@@ -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';

sass/variables.scss

@@ -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-warning:         $ascribe-brand-warning !default;
-$brand-danger:          #d9534f !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-base:        0 !default;
-$border-radius-large:       6px !default;
+$border-radius-large:       0 !default;
-$border-radius-small:       3px !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-color:              white !default;
-$btn-default-bg:                 #fff !default;
+$btn-default-bg:                 $ascribe-color-full !default;
-$btn-default-border:             #ccc !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;