Merge pull request #49 from ascribe/AD-1149-final-changes

AD-1149 Final Changes

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
                 return (
                     <AscribeSpinner
                         size='sm'
-                        color='white'
                         classNames='pull-right margin-left-2px'/>
                 );
             } else {

js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-let accordionListItemThumbnailPlaceholder = React.createClass({
+let AccordionListItemThumbnailPlaceholder = React.createClass({
     render() {
         return (
             <span className="ascribe-logo-circle">
@@ -12,4 +12,4 @@ let accordionListItemThumbnailPlaceholder = React.createClass({
     }
 });
 
-export default accordionListItemThumbnailPlaceholder;
+export default AccordionListItemThumbnailPlaceholder;

js/components/ascribe_detail/edition.js

@@ -195,7 +195,7 @@ let EditionSummary = React.createClass({
     getStatus(){
         let status = null;
         if (this.props.edition.status.length > 0){
-            let statusStr = this.props.edition.status.join().replace(/_/, ' ');
+            let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
             status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
             if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
                 status = (

js/components/ascribe_detail/edition_action_panel.js

@@ -94,8 +94,10 @@ let EditionActionPanel = React.createClass({
     },
 
     render(){
-        let { edition, currentUser } = this.props;
+        const {
-        let ActionPanelButtonListType = this.props.actionPanelButtonListType;
+            actionPanelButtonListType: ActionPanelButtonListType,
+            edition,
+            currentUser } = this.props;
 
         if (edition &&
             edition.notifications &&

js/components/ascribe_forms/form_consign.js

@@ -37,7 +37,7 @@ let ConsignForm = React.createClass({
 
     getInitialState() {
         return {
-            email: this.props.email
+            email: this.props.email || ''
         };
     },
 
@@ -69,7 +69,7 @@ let ConsignForm = React.createClass({
                 ref='form'
                 url={url}
                 getFormData={this.getFormData}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 buttons={
                     <div className="modal-footer">
                         <p className="pull-right">

js/components/ascribe_forms/form_loan.js

@@ -210,7 +210,7 @@ let LoanForm = React.createClass({
                     <input
                         type="password"
                         placeholder={getLangText('Enter your password')}
-                        required={showPassword ? 'required' : ''}/>
+                        required={showPassword}/>
                 </Property>
                 {children}
             </Form>

js/components/ascribe_forms/input_contract_agreement_checkbox.js

@@ -53,12 +53,10 @@ const InputContractAgreementCheckbox = React.createClass({
     },
 
     componentWillReceiveProps({ email: nextEmail }) {
-        const { contractAgreementList } = this.state;
-
         if (this.props.email !== nextEmail) {
             if (isEmail(nextEmail)) {
                 this.getContractAgreementsOrCreatePublic(nextEmail);
-            } else if (contractAgreementList && contractAgreementList.length > 0) {
+            } else if (this.getContractAgreement()) {
                 ContractAgreementListActions.flushContractAgreementList();
             }
         }
@@ -70,6 +68,8 @@ const InputContractAgreementCheckbox = React.createClass({
 
     onStoreChange(state) {
         const contractAgreement = this.getContractAgreement(state.contractAgreementList);
+
+        // If there is no contract available, hide this `Property` from the user
         this.props.setExpanded(!!contractAgreement);
 
         state = mergeOptions(state, {
@@ -97,16 +97,21 @@ const InputContractAgreementCheckbox = React.createClass({
     },
 
     onChange(event) {
+        // Sync the value between our `InputCheckbox` and this component's `terms`
+        // so the parent `Property` is able to get the correct value of this component
+        // when the `Form` queries it.
         this.setState({
             value: React.addons.update(this.state.value, {
                 terms: { $set: event.target.value }
             })
         });
+
+        // Propagate change events from the checkbox up to the parent `Property`
         this.props.onChange(event);
     },
 
     getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
-        if (contractAgreementList && contractAgreementList.length > 0) {
+        if (contractAgreementList && contractAgreementList.length) {
             return contractAgreementList[0];
         }
     },

js/components/ascribe_forms/input_fineuploader.js

@@ -96,18 +96,21 @@ const InputFineUploader = React.createClass({
     },
 
     render() {
-        const { fileInputElement,
+        const {
-                keyRoutine,
-                createBlobRoutine,
-                validation,
-                setIsUploadReady,
-                isReadyForFormSubmission,
             areAssetsDownloadable,
             enableLocalHashing,
-                uploadMethod,
+            createBlobRoutine,
+            disabled,
             fileClassToUpload,
-                disabled } = this.props;
+            fileInputElement,
-        let editable = this.props.isFineUploaderActive;
+            isFineUploaderActive,
+            isReadyForFormSubmission,
+            keyRoutine,
+            setIsUploadReady,
+            uploadMethod,
+            validation } = this.props;
+
+        let editable = isFineUploaderActive;
 
         // if disabled is actually set by property, we want to override
         // isFineUploaderActive

js/components/ascribe_forms/property.js

@@ -239,6 +239,10 @@ const Property = React.createClass({
         this.setState({ expanded });
     },
 
+    handleCheckboxToggle() {
+        this.setExpanded(!this.state.expanded);
+    },
+
     renderChildren(style) {
         // Input's props should only be cloned and propagated down the tree,
         // if the component is actually being shown (!== 'expanded === false')
@@ -280,10 +284,6 @@ const Property = React.createClass({
         }
     },
 
-    handleCheckboxToggle() {
-        this.setState({expanded: !this.state.expanded});
-    },
-
     getCheckbox() {
         const { checkboxLabel } = this.props;
 

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -30,7 +30,7 @@ let PieceListBulkModal = React.createClass({
     },
 
     render() {
-        if (Object.keys(this.props.availableAcls).length > 0) {
+        if (Object.keys(this.props.availableAcls).length) {
             return (
                 <div className={this.props.className}>
                     <div className="row no-margin">

js/components/ascribe_spinner.js

@@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
     propTypes: {
         classNames: React.PropTypes.string,
         size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
-        color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
+        color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
     },
 
     getDefaultProps() {
         return {
             inline: false,
-            size: 'md',
+            size: 'md'
-            color: 'loop'
         };
     },
 
     render() {
+        const { classNames: classes, color, size } = this.props;
+
         return (
             <div
-                className={
+                className={classNames('spinner-wrapper-' + size,
-                    classNames('spinner-wrapper-' + this.props.size,
+                                      color ? 'spinner-wrapper-' + color : null,
-                    'spinner-wrapper-' + this.props.color,
+                                      classes)}>
-                    this.props.classNames)}>
+                <div className='spinner-circle' />
-                    <div className={classNames('spinner-circle')}></div>
+                <div className='spinner-inner'>A</div>
-                    <div className={classNames('spinner-inner')}>A</div>
             </div>
         );
     }

js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js

@@ -6,7 +6,7 @@ import Vivi23AccordionListItemThumbnailPlaceholder from './23vivi_accordion_list
 
 import MarketPieceList from '../market/market_piece_list';
 
-let vivi23PieceList = React.createClass({
+let Vivi23PieceList = React.createClass({
     propTypes: {
         location: React.PropTypes.object
     },
@@ -21,4 +21,4 @@ let vivi23PieceList = React.createClass({
 
 });
 
-export default vivi23PieceList;
+export default Vivi23PieceList;

js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js

@@ -144,8 +144,7 @@ let MarketSubmitButton = React.createClass({
         } else {
             return (
                 <AclProxy
-                    aclObject={{'acl_consign': availableAcls.acl_consign && canSubmit}}
+                    show={availableAcls.acl_consign && canSubmit}>
-                    aclName='acl_consign'>
                     <ModalWrapper
                         trigger={triggerButton}
                         handleSuccess={handleSuccess}

js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js

@@ -32,6 +32,7 @@ let MarketAdditionalDataForm = React.createClass({
             React.PropTypes.number,
             React.PropTypes.string
         ]),
+        editable: React.PropTypes.bool,
         isInline: React.PropTypes.bool,
         showHeading: React.PropTypes.bool,
         showNotification: React.PropTypes.bool,
@@ -41,6 +42,7 @@ let MarketAdditionalDataForm = React.createClass({
 
     getDefaultProps() {
         return {
+            editable: true,
             submitLabel: getLangText('Register work')
         };
     },
@@ -53,7 +55,7 @@ let MarketAdditionalDataForm = React.createClass({
             {
                 // Allow the form to be submitted if there's already an additional image uploaded
                 isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
-                forceUpdateKey: 0,
+                forceUpdateKey: 0
             });
     },
 
@@ -70,9 +72,7 @@ let MarketAdditionalDataForm = React.createClass({
     },
 
     onChange(state) {
-        this.setState(state);
+        Object.assign({}, state, {
-
-        this.setState({
             // Allow the form to be submitted if the updated piece already has an additional image uploaded
             isUploadReady: this.isUploadReadyOnChange(state.piece),
 
@@ -85,6 +85,8 @@ let MarketAdditionalDataForm = React.createClass({
              */
             forceUpdateKey: this.state.forceUpdateKey + 1
         });
+
+        this.setState(state);
     },
 
     getFormData() {
@@ -130,9 +132,11 @@ let MarketAdditionalDataForm = React.createClass({
     },
 
     render() {
-        const { isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
+        const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
         const { piece } = this.state;
-        let buttons, spinner, heading;
+        let buttons, heading;
+
+        let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
 
         if (!isInline) {
             buttons = (
@@ -146,7 +150,9 @@ let MarketAdditionalDataForm = React.createClass({
 
             spinner = (
                 <div className="modal-footer">
-                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    <p className="pull-right">
+                        {spinner}
+                    </p>
                 </div>
             );
 
@@ -169,7 +175,8 @@ let MarketAdditionalDataForm = React.createClass({
                     handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
-                    spinner={spinner}>
+                    spinner={spinner}
+                    disabled={!this.props.editable || !piece.acl.acl_edit}>
                     {heading}
                     <FurtherDetailsFileuploader
                         label={getLangText('Marketplace Thumbnail Image')}
@@ -178,10 +185,12 @@ let MarketAdditionalDataForm = React.createClass({
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         pieceId={piece.id}
-                        otherData={piece.other_data} />
+                        otherData={piece.other_data}
+                        editable={editable} />
                     <Property
                         name='artist_bio'
-                        label={getLangText('Artist Bio')}>
+                        label={getLangText('Artist Bio')}
+                        expanded={editable || !!piece.extra_data.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
@@ -190,7 +199,8 @@ let MarketAdditionalDataForm = React.createClass({
                     </Property>
                     <Property
                         name='work_description'
-                        label={getLangText('Work Description')}>
+                        label={getLangText('Work Description')}
+                        expanded={editable || !!piece.extra_data.work_description}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.work_description}
@@ -199,7 +209,8 @@ let MarketAdditionalDataForm = React.createClass({
                     </Property>
                     <Property
                         name='technology_details'
-                        label={getLangText('Technology Details')}>
+                        label={getLangText('Technology Details')}
+                        expanded={editable || !!piece.extra_data.technology_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.technology_details}
@@ -208,7 +219,8 @@ let MarketAdditionalDataForm = React.createClass({
                     </Property>
                     <Property
                         name='display_instructions'
-                        label={getLangText('Display Instructions')}>
+                        label={getLangText('Display Instructions')}
+                        expanded={editable || !!piece.extra_data.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
@@ -220,7 +232,7 @@ let MarketAdditionalDataForm = React.createClass({
         } else {
             return (
                 <div className="ascribe-loading-position">
-                    <AscribeSpinner color='dark-blue' size='lg' />
+                    {spinner}
                 </div>
             );
         }

js/components/whitelabel/wallet/components/market/market_register_piece.js

@@ -82,7 +82,7 @@ let MarketRegisterPiece = React.createClass({
     handleAdditionalDataSuccess() {
         this.refreshPieceList();
 
-        this.history.pushState(null, `/collection`);
+        this.history.pushState(null, '/collection');
     },
 
     // We need to increase the step to lock the forms that are already filled out

sass/ascribe_spinner.scss

@@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
     }
 }
 
+.spinner-wrapper-white {
+    color: $ascribe-white;
+    .spinner-circle {
+        border-color: $ascribe-white;
+    }
+}
+
 .spinner-wrapper-lg {
     width: $ascribe--spinner-size-lg;
     height: $ascribe--spinner-size-lg;

sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

@@ -331,6 +331,9 @@ $vivi23--highlight-color: #de2600;
     .spinner-inner {
         display: none;
     }
+    .btn-secondary .spinner-circle {
+        border-color: $vivi23--bg-color;
+    }
 
     // video player
     .ascribe-media-player .vjs-default-skin {