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 (
);
+ }
+ }
+ 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