information added to forms and delete form title changed, acl information component created, information text is added to the constants

js/components/ascribe_buttons/acl_button.js

@@ -173,8 +173,8 @@ let AclButton = React.createClass({
                             {this.sanitizeAction()}
                         </button>
                     }
-                    handleSuccess={aclProps.handleSuccess}
-                    title={aclProps.title}>
+                    handleSuccess = {aclProps.handleSuccess}
+                    title = {aclProps.title}>
                     {aclProps.form}
                 </ModalWrapper>
             );

js/components/ascribe_buttons/acl_information_button.js

@@ -4,8 +4,7 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import { getLangText } from '../../utils/lang_utils';
-
+import AclInformation from '../ascribe_information/acl_information';
 import Button from 'react-bootstrap/lib/Button';
 
 let AclInformationButton = React.createClass({
@@ -13,78 +12,14 @@ let AclInformationButton = React.createClass({
         return {isVisible: false};
     },
     componentDidMount() {
-        //let rows = [];
-        let titleStyle = {
-            color: '#02B6A3',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let infoStyle = {
-            color: '#333333',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let exampleStyle = {
-            color: '#B2B2B2',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let paragraphStyle = {
-            margin: '0.1em',
-            lineHeight: '15px'
-
-        };
-
-        let enabledIndices = this.props.verbs;
-        let titleList = ['TRANSFER', 'CONSIGN', 'LOAN', 'SHARE', 'DELETE'];
-
-        let infoSentenceList = [
-            ' - Changes ownership of an Edition. As with a physical piece of work, ' +
-            'transferring ownership of an Edition does not transfer copyright in the Work.',
-
-            ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
-
-            ' - Lets someone use or put the Work on display for a limited amount of time.',
-
-            ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
-
-            ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
-            'history will still exist on the blockchain and cannot be deleted.'];
-
-        let exampleSentenceList = [
-            '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
-
-            '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
-            'so the gallery can sell them on her behalf, under the terms the artist and the gallery have agreed to)',
-
-            '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
-
-            '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
-
-            '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)'];
-
-
-        let createJSXTextSnippet = function(title, info, example){
-            return (<p style={paragraphStyle}> <span style={titleStyle}> {title} </span>
-                <span style={infoStyle}> {info} <br/> </span>
-                <span style={exampleStyle}> {example} </span> </p>);
-        };
-
-        this.rows = enabledIndices.map((i)=>{
-            return (createJSXTextSnippet(getLangText(titleList[i]), getLangText(infoSentenceList[i]),
-                getLangText(exampleSentenceList[i]),
-                        titleStyle, infoStyle, exampleStyle));
-        });
-
+        console.log('Information button being launched');
         this.dropdownButtonStyle = {
                 background: 'none',
                 color: 'black',
                 padding: 0,
                 border: 'none'
             };
+
         this.dropdownListStyle = {
                 textAlign: 'justify',
                 width: '80.8%',
@@ -103,7 +38,7 @@ let AclInformationButton = React.createClass({
     },
     showInformation() {
         if (this.state.isVisible) {
-            return this.rows;
+            return (<AclInformation aim={'button'} verbs={this.props.verbs}/>);
         }
     },
     render() {

js/components/ascribe_buttons/delete_button.js

@@ -42,10 +42,10 @@ let DeleteButton = React.createClass({
 
             if(this.props.piece && !this.props.editions) {
                 content = <PieceDeleteForm pieceId={this.props.piece.id}/>;
-                title = getLangText('Remove Piece');
+                title = getLangText('Delete Piece');
             } else {
                 content = <EditionDeleteForm editions={this.props.editions}/>;
-                title = getLangText('Remove Edition');
+                title = getLangText('Delete Edition');
             }
 
             btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('DELETE')}</Button>;

js/components/ascribe_detail/edition.js

@@ -251,7 +251,7 @@ let EditionSummary = React.createClass({
         Object.keys(acl).forEach((key) => {
             let index = verbsToCheck.indexOf(key);
             if (acl[key] === true && index !== -1) {
-                verbListIndices.push(index);
+                verbListIndices.push(verbsToCheck[index].slice(4));
             }
         });
         return verbListIndices;

js/components/ascribe_forms/form.js

@@ -288,10 +288,8 @@ let Form = React.createClass({
                 {this.renderChildren()}
                 {this.getButtons()}
             </form>
-
         );
     }
 });
 
-
 export default Form;

js/components/ascribe_forms/form_consign.js

@@ -10,7 +10,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
 
 import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
-
+import AclInformation from '../ascribe_information/acl_information';
 
 let ConsignForm = React.createClass({
     propTypes: {
@@ -45,6 +45,7 @@ let ConsignForm = React.createClass({
                     <div className="modal-footer">
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>}>
+                <AclInformation aim={'form'} verbs={'consign'}/>
                 <Property
                     name='consignee'
                     label={getLangText('Email')}>

js/components/ascribe_forms/form_delete_edition.js

@@ -8,7 +8,7 @@ import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getLangText } from '../../utils/lang_utils';
-
+import AclInformation from '../ascribe_information/acl_information';
 
 let EditionDeleteForm = React.createClass({
 
@@ -58,6 +58,7 @@ let EditionDeleteForm = React.createClass({
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>
                 }>
+                <AclInformation aim={'form'} verbs={'delete'}/>
                 <p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
             </Form>

js/components/ascribe_forms/form_loan.js

@@ -19,7 +19,7 @@ import AppConstants from '../../constants/application_constants';
 
 import { mergeOptions } from '../../utils/general_utils';
 import { getLangText } from '../../utils/lang_utils';
-
+import AclInformation from '../ascribe_information/acl_information';
 
 let LoanForm = React.createClass({
     propTypes: {
@@ -227,6 +227,8 @@ let LoanForm = React.createClass({
                 <div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
                     <h3>{this.props.loanHeading}</h3>
                 </div>
+                <AclInformation aim={'form'} verbs={'loan'}/>
+                <br></br>
                 <Property
                     name='loanee'
                     label={getLangText('Loanee Email')}

js/components/ascribe_forms/form_share_email.js

@@ -9,7 +9,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
 import Button from 'react-bootstrap/lib/Button';
 
 import AppConstants from '../../constants/application_constants';
-
+import AclInformation from '../ascribe_information/acl_information';
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -49,6 +49,8 @@ let ShareForm = React.createClass({
                     <div className="modal-footer">
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>}>
+                {console.log('hoho')}
+                <AclInformation aim={'form'} verbs={'share'}/>
                 <Property
                     name='share_emails'
                     label={getLangText('Emails')}>

js/components/ascribe_forms/form_transfer.js

@@ -9,7 +9,7 @@ import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-
+import AclInformation from '../ascribe_information/acl_information';
 import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
 
@@ -50,6 +50,7 @@ let TransferForm = React.createClass({
                     <div className="modal-footer">
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>}>
+                <AclInformation aim={'form'} verbs={'transfer'}/>
                 <Property
                     name='transferee'
                     label={getLangText('Email')}>

js/components/ascribe_information/acl_information.js

@@ -0,0 +1,89 @@
+'use strict';
+
+import React from 'react';
+import informationTexts from '../../constants/information_text';
+import { getLangText } from '../../utils/lang_utils';
+import { replaceSubstringAtIndex } from '../../utils/general_utils';
+
+let AclInformation = React.createClass({
+    render() {
+        let titleStyle = {
+            color: '#02B6A3',
+            fontSize: '11px',
+            lineHeight: '3px'
+        };
+
+        let infoStyle = {
+            color: '#333333',
+            fontSize: '11px',
+            lineHeight: '3px'
+        };
+
+        let exampleStyle = {
+            color: '#B2B2B2',
+            fontSize: '11px',
+            lineHeight: '3px'
+        };
+
+        let paragraphStyle = {
+            margin: '0.1em',
+            lineHeight: '15px',
+            align: 'justify'
+        };
+        let enabledIndices = this.props.verbs;
+        let aim = this.props.aim;
+        let titleList = informationTexts.title;
+        let infoSentenceList = informationTexts.informationSentence;
+        let exampleSentenceList = informationTexts.exampleSentence;
+        let createJSXTextSnippet = function(title, info, example){
+            if (aim) {
+                if (aim === 'form') {
+                    return (<p style={paragraphStyle}>
+                        <span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
+                        <span style={exampleStyle}> {example} </span></p>);
+                }
+                else if (aim === 'button') {
+                    return (<p style={paragraphStyle}><span style={titleStyle}> {title} </span>
+                        <span style={infoStyle}> {info} <br/> </span>
+                        <span style={exampleStyle}> {example} </span></p>);
+                }
+            }
+            else {
+                console.log('Aim is required when you want to place information text');
+            }
+        };
+        let rows = null;
+        let sortedIndices = ['share', 'transfer', 'consign', 'loan', 'delete'];
+        let tempIndices = [];
+        for (let i = 0; i < sortedIndices.length; i++){
+            if (enabledIndices.indexOf(sortedIndices[i]) === -1){
+                continue;
+            }
+            else{
+                tempIndices.push(sortedIndices[i]);
+            }
+        }
+        enabledIndices = tempIndices;
+        if(Array.isArray(enabledIndices)) {
+            rows = enabledIndices.map((i)=> {
+                return (createJSXTextSnippet(getLangText(titleList[i]), getLangText(infoSentenceList[i]),
+                    getLangText(exampleSentenceList[i]),
+                    titleStyle, infoStyle, exampleStyle));
+            });
+        }
+        else if (typeof enabledIndices === 'string'){
+            rows = (createJSXTextSnippet(getLangText(titleList[enabledIndices]), getLangText(infoSentenceList[enabledIndices]),
+                    getLangText(exampleSentenceList[enabledIndices]),
+                    titleStyle, infoStyle, exampleStyle));
+        }
+        else if (typeof enabledIndices === 'undefined'){
+            console.log('Verbs come undefined maybe you wrote verb instead of verbs?');
+        }
+        else {
+            console.log('You need to supply an array of strings or string as verbs to AclInformation');
+        }
+        return (<span>{rows}</span>);
+    }
+});
+
+export default AclInformation;

js/components/ascribe_modal/modal_wrapper.js

@@ -17,7 +17,7 @@ let ModalWrapper = React.createClass({
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
     },
 
     getInitialState() {
@@ -55,17 +55,29 @@ let ModalWrapper = React.createClass({
         // this adds the onClick method show of modal_wrapper to the trigger component
         // which is in most cases a button.
         let trigger = React.cloneElement(this.props.trigger, {onClick: this.show});
-
+        let modalHeaderAscribe = {
+            paddingTop: '15px',
+            paddingBottom: '0px',
+            borderBottom: 'none',
+            minHeight: '16.42857px'
+        };
+        let modalBodyAscribe = {
+            paddingTop: '5px',
+            paddingBottom: '10px',
+            paddingRight: '15px',
+            paddingLeft: '15px',
+            position: 'relative'
+        };
         return (
             <span>
                 {trigger}
                 <Modal show={this.state.showModal} onHide={this.hide}>
-                    <Modal.Header closeButton>
+                    <Modal.Header style={modalHeaderAscribe} closeButton>
                         <Modal.Title>
                             {this.props.title}
                         </Modal.Title>
                     </Modal.Header>
-                    <div className="modal-body">
+                    <div className="modal-body" style={modalBodyAscribe}>
                         {this.renderChildren()}
                     </div>
                 </Modal>

js/constants/information_text.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const informationTexts = {
+
+    'title': {
+        'transfer': 'TRANSFER',
+        'consign': 'CONSIGN',
+        'loan': 'LOAN',
+        'share': 'SHARE',
+        'delete': 'DELETE'},
+
+    'informationSentence': {
+
+        'transfer': ' - Changes ownership of an Edition. As with a physical piece of work, ' +
+        'transferring ownership of an Edition does not transfer copyright in the Work.',
+
+        'consign': ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
+
+        'loan': ' - Lets someone use or put the Work on display for a limited amount of time.',
+
+        'share': ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
+
+        'delete': ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
+            'history will still exist on the blockchain and cannot be deleted.'
+    }
+
+    ,
+    'exampleSentence': {
+        'transfer': '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
+
+        'consign': '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
+            'so the gallery can sell them on her behalf, under the terms the artist and the gallery have agreed to)',
+
+        'loan': '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
+
+        'share': '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
+
+        'delete': '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)'
+    }
+   };
+
+export default informationTexts;

js/utils/general_utils.js

@@ -221,4 +221,14 @@ export function truncateTextAtCharIndex(text, charIndex, replacement = '...') {
     truncatedText += text.length > charIndex ? replacement : '';
 
     return truncatedText;
+}
+
+/**
+ * @param index, int, the starting index of the substring to be replaced
+ * @param character, substring to be replaced
+ * @returns {string}
+ */
+export function replaceSubstringAtIndex(baseString, substrToReplace, stringToBePut) {
+    let index = baseString.indexOf(substrToReplace);
+    return baseString.substr(0, index) + stringToBePut + baseString.substr(index + substrToReplace.length);
 }

sass/main.scss

@@ -465,7 +465,6 @@ hr {
     height: 12px;
 }
 
-
 .ascribe-piece-list-filter-display {
     padding-left: 10px;
     padding-right: 10px;
@@ -484,3 +483,8 @@ hr {
         border-color: #ccc;
     }
 }
+
+.modal-header-ascribe {
+  padding: 15px;
+  border-bottom: none;
+  min-height: 16.42857px; }