ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

the real dropdown version second iteration

Browse Source
This commit is contained in:
Cevo 2015-09-25 14:36:27 +02:00
parent 4ae73871d3
commit 48f43ac01c
2 changed files with 51 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
js/components/ascribe_buttons/acl_information_button.js
View File

@ -4,12 +4,11 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import CollapsibleButton from '../ascribe_collapsible/collapsible_button'; import DropdownButton from 'react-bootstrap/lib/Button';
import Button from 'react-bootstrap/lib/Button';
let aclInformationButton = React.createClass({ let aclInformationButton = React.createClass({
getDefaultProps: function() {
render: function () { let rows = [];
let titleStyle = { let titleStyle = {
color: '#02B6A3', color: '#02B6A3',
fontSize: '14px' fontSize: '14px'
@ -22,12 +21,8 @@ let aclInformationButton = React.createClass({
let infoStyle = { let infoStyle = {
color: '#333333', color: '#333333',
fontSize: '14px'
};
let divStyle = { fontSize: '14px'
color: 'white',
width: 10
}; };
let titleList = ['TRANSFER', 'CONSIGN', 'LOAN', 'SHARE', 'DELETE']; let titleList = ['TRANSFER', 'CONSIGN', 'LOAN', 'SHARE', 'DELETE'];
@ -43,8 +38,7 @@ let aclInformationButton = React.createClass({
'- Lets someone view the Work or Edition, but does not give rights to publish or display it.', '- 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 ' + '- Removes the Work from your Wallet. Note that the previous registration and transfer ' +
'history will still exist on the blockchain and cannot be deleted.' 'history will still exist on the blockchain and cannot be deleted.'];
];
let exampleSentenceList = [ let exampleSentenceList = [
'(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)', '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
@ -56,31 +50,55 @@ let aclInformationButton = React.createClass({
'(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)', '(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)' '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)'];
]; console.log('Now will initialize the rows prop inside default props');
let createJSXTextSnippet = function (title, info, example) { let createJSXTextSnippet = function(title, info, example){
return [<p>, <Text style={titleStyle}> {title} </Text>, console.log('creating text snippets');
<Text style={infoStyle}> {info} </Text>, return (<p> <span style={titleStyle}> {title} </span>
<Text style={exampleStyle}> {example} </Text>, </p> ]; <span style={infoStyle}> {info} </span><br></br>
}; <span style={exampleStyle}> {example} </span> </p>);
};
let rows = [];
for (let i = 0; i < titleList.length; i++){ for (let i = 0; i < titleList.length; i++){
rows.push(rows, createJSXTextSnippet(titleList[i], infoSentenceList[i], exampleSentenceList[i])); rows.push(createJSXTextSnippet(titleList[i], infoSentenceList[i], exampleSentenceList[i],
titleStyle, infoStyle, exampleStyle));
} }
return {
rows: rows
};
},
getInitialState: function(){
return {isVisible: false};
},
show: function(){
console.log('now inside the show function');
this.setState({isVisible: true});
document.addEventListener('click', this.hide);
},
hide: function(){
this.setState({isVisible: false});
document.removeEventListener('click', this.hide);
},
showInformation: function(){
if (this.state.isVisible) {
return this.props.rows;
}
},
render: function () {
console.log('will start rendering');
return ( return (
<CollapsibleButton <div className={'dropdown-container' + (this.state.isVisible ? ' show' : '')}>
button = { <div className={'dropdown-display' +
<Button bsSize="xsmall" className="ascribe-margin-1px" > (this.state.isVisible ? ' clicked' : '')} onClick={this.show}>
? {console.log(this.state.isVisible)}
</Button> ?
} </div>
panel={ <div className='dropdown-list'>
<div style = {divStyle}> <div>
{rows} {this.showInformation()}
</div>
</div>
</div> </div>
}
/>
); );
} }
}); });

80
js/components/ascribe_detail/edition.js
View File

@ -32,7 +32,7 @@ import ListRequestActions from './../ascribe_forms/list_form_request_actions';
import AclButtonList from './../ascribe_buttons/acl_button_list'; import AclButtonList from './../ascribe_buttons/acl_button_list';
import UnConsignRequestButton from './../ascribe_buttons/unconsign_request_button'; import UnConsignRequestButton from './../ascribe_buttons/unconsign_request_button';
import DeleteButton from './../ascribe_buttons/delete_button'; import DeleteButton from './../ascribe_buttons/delete_button';
import CollapsibleButton from './../ascribe_collapsible/collapsible_button'; import AclInformationButton from './../ascribe_buttons/acl_information_button';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
@ -280,83 +280,7 @@ let EditionSummary = React.createClass({
<DeleteButton <DeleteButton
handleSuccess={this.props.handleDeleteSuccess} handleSuccess={this.props.handleDeleteSuccess}
editions={[this.props.edition]}/> editions={[this.props.edition]}/>
<CollapsibleButton <AclInformationButton/>
button={
<Button bsSize="xsmall" className="ascribe-margin-1px" >
?
</Button>
}
panel = {
<div>
<p>
<span style={{color: '#02B6A3'}}>
TRANSFER
</span>
<span style={{color: '#333333'}}>
- Changes ownership of an Edition. As with a physical piece of work,
transferring ownership of an Edition does not transfer copyright in the Work.
</span>
<br></br>
<span style={{color: '#B2B2B2'}}>
(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)
</span>
</p>
<p>
<span style={{color: '#02B6A3'}}>
CONSIGN
</span>
<span style={{color: '#333333'}}>
- Lets someone represent you in dealing with the work, under the terms
you agree to.
</span>
<br></br>
<span style={{color: '#B2B2B2'}}>
(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)
</span>
</p>
<p>
<span style={{color: '#02B6A3'}}>
LOAN
</span>
<span style={{color: '#333333'}}>
- Lets someone use or put the Work on display for a limited amount of time.
</span>
<br></br>
<span style={{color: '#B2B2B2'}}>
(e.g. a collector Loans a Work to a gallery for one month
for display in the gallery's show)
</span>
</p>
<p>
<span style={{color: '#02B6A3'}}>
SHARE
</span>
<span style={{color: '#333333'}}>
- Lets someone view the Work or Edition,
but does not give rights to publish or display it.
</span>
<br></br>
<span style={{color: '#B2B2B2'}}>
(e.g. a photographer Shares proofs of a graduation photo with the graduate's grandparents)
</span>
</p>
<p>
<span style={{color: '#02B6A3'}}>
DELETE
</span>
<span style={{color: '#333333'}}>
-Removes the Work from your Wallet. Note that the previous registration and
transfer history will still exist on the blockchain and cannot be deleted.
</span>
<br></br>
<span style={{color: '#B2B2B2'}}>
(e.g. an artist uploaded the wrong file and doesn't want it cluttering his Wallet, so he Deletes it)
</span>
</p>
</div>
}
/>
{unconsignRequestButton} {unconsignRequestButton}
</AclButtonList> </AclButtonList>
</Col> </Col>