From b4b05b3161c2148536f44af5efb741758dd41497 Mon Sep 17 00:00:00 2001 From: Cevo Date: Tue, 13 Oct 2015 18:33:08 +0200 Subject: [PATCH] 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 | 4 +- .../ascribe_buttons/acl_information_button.js | 73 +-------------- .../ascribe_buttons/delete_button.js | 4 +- js/components/ascribe_detail/edition.js | 2 +- js/components/ascribe_forms/form.js | 2 - js/components/ascribe_forms/form_consign.js | 3 +- .../ascribe_forms/form_delete_edition.js | 3 +- js/components/ascribe_forms/form_loan.js | 4 +- .../ascribe_forms/form_share_email.js | 4 +- js/components/ascribe_forms/form_transfer.js | 3 +- .../ascribe_information/acl_information.js | 89 +++++++++++++++++++ js/components/ascribe_modal/modal_wrapper.js | 20 ++++- js/constants/information_text.js | 42 +++++++++ js/utils/general_utils.js | 10 +++ sass/main.scss | 6 +- 15 files changed, 183 insertions(+), 86 deletions(-) create mode 100644 js/components/ascribe_information/acl_information.js create mode 100644 js/constants/information_text.js diff --git a/js/components/ascribe_buttons/acl_button.js b/js/components/ascribe_buttons/acl_button.js index e3c7fa1c..21db4bc7 100644 --- a/js/components/ascribe_buttons/acl_button.js +++ b/js/components/ascribe_buttons/acl_button.js @@ -173,8 +173,8 @@ let AclButton = React.createClass({ {this.sanitizeAction()} } - handleSuccess={aclProps.handleSuccess} - title={aclProps.title}> + handleSuccess = {aclProps.handleSuccess} + title = {aclProps.title}> {aclProps.form} ); diff --git a/js/components/ascribe_buttons/acl_information_button.js b/js/components/ascribe_buttons/acl_information_button.js index 048e1179..efca1664 100644 --- a/js/components/ascribe_buttons/acl_information_button.js +++ b/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 (

{title} - {info}
- {example}

); - }; - - 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 (); } }, render() { diff --git a/js/components/ascribe_buttons/delete_button.js b/js/components/ascribe_buttons/delete_button.js index b0b64427..5778fb1b 100644 --- a/js/components/ascribe_buttons/delete_button.js +++ b/js/components/ascribe_buttons/delete_button.js @@ -42,10 +42,10 @@ let DeleteButton = React.createClass({ if(this.props.piece && !this.props.editions) { content = ; - title = getLangText('Remove Piece'); + title = getLangText('Delete Piece'); } else { content = ; - title = getLangText('Remove Edition'); + title = getLangText('Delete Edition'); } btnDelete = ; diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 9d96d527..3086479b 100644 --- a/js/components/ascribe_detail/edition.js +++ b/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; diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index c5f60b76..fe15f537 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -288,10 +288,8 @@ let Form = React.createClass({ {this.renderChildren()} {this.getButtons()} - ); } }); - export default Form; diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js index de4a4788..f904fd52 100644 --- a/js/components/ascribe_forms/form_consign.js +++ b/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({
}> + diff --git a/js/components/ascribe_forms/form_delete_edition.js b/js/components/ascribe_forms/form_delete_edition.js index 9eb721f6..847db096 100644 --- a/js/components/ascribe_forms/form_delete_edition.js +++ b/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({ }> +

{getLangText('Are you sure you would like to permanently delete this edition')}?

{getLangText('This is an irrevocable action%s', '.')}

diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js index ef2fbd13..838c09c1 100644 --- a/js/components/ascribe_forms/form_loan.js +++ b/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({

{this.props.loanHeading}

+ +

}> + {console.log('hoho')} + diff --git a/js/components/ascribe_forms/form_transfer.js b/js/components/ascribe_forms/form_transfer.js index 8bbcf110..f299406e 100644 --- a/js/components/ascribe_forms/form_transfer.js +++ b/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({
}> + diff --git a/js/components/ascribe_information/acl_information.js b/js/components/ascribe_information/acl_information.js new file mode 100644 index 00000000..80dc5f22 --- /dev/null +++ b/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 (

+ {replaceSubstringAtIndex(info.slice(2), 's ', ' ')}
+ {example}

); + } + else if (aim === 'button') { + return (

{title} + {info}
+ {example}

); + } + } + 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 ({rows}); + } +}); + +export default AclInformation; diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js index f00eee9e..877bb343 100644 --- a/js/components/ascribe_modal/modal_wrapper.js +++ b/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 ( {trigger} - + {this.props.title} -
+
{this.renderChildren()}
diff --git a/js/constants/information_text.js b/js/constants/information_text.js new file mode 100644 index 00000000..91c61183 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index ba2b7752..1dd8895f 100644 --- a/js/utils/general_utils.js +++ b/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); } \ No newline at end of file diff --git a/sass/main.scss b/sass/main.scss index 28789f57..9ddb0c36 100644 --- a/sass/main.scss +++ b/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; } \ No newline at end of file