ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 21:52:08 +02:00
Code Issues Releases Wiki Activity

pullrequest changes

Browse Source
This commit is contained in:
Cevo 2015-10-08 13:19:59 +02:00
parent 087884ef3c
commit f2d02179a1
1 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,38 +1,38 @@
/**
* Created by cevo on 23.09.15.
*/
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import DropdownButton from 'react-bootstrap/lib/Button'; import { getLangText } from '../../utils/lang_utils';
import Button from 'react-bootstrap/lib/Button';
let AclInformationButton = React.createClass({ let AclInformationButton = React.createClass({
getDefaultProps: function() { getDefaultProps() {
let rows = []; let rows = [];
let titleStyle = { let titleStyle = {
color: '#02B6A3', color: '#02B6A3',
fontSize: '11px', fontSize: '11px',
lineHeight: '5px' lineHeight: '3px'
}; };
let infoStyle = { let infoStyle = {
color: '#333333', color: '#333333',
fontSize: '11px', fontSize: '11px',
lineHeight: '5px' lineHeight: '3px'
}; };
let exampleStyle = { let exampleStyle = {
color: '#B2B2B2', color: '#B2B2B2',
fontSize: '11px', fontSize: '11px',
lineHeight: '5px' lineHeight: '3px'
}; };
let paragraphStyle = { let paragraphStyle = {
margin: '0.1em' margin: '0.1em',
lineHeight: '15px'
}; };
@ -66,14 +66,14 @@ let AclInformationButton = React.createClass({
console.log('Now will initialize the rows prop inside default props'); console.log('Now will initialize the rows prop inside default props');
let createJSXTextSnippet = function(title, info, example){ let createJSXTextSnippet = function(title, info, example){
console.log('creating text snippets');
return (<p style={paragraphStyle}> <span style={titleStyle}> {title} </span> return (<p style={paragraphStyle}> <span style={titleStyle}> {title} </span>
<span style={infoStyle}> {info} <br/> </span> <span style={infoStyle}> {info} <br/> </span>
<span style={exampleStyle}> {example} </span> </p>); <span style={exampleStyle}> {example} </span> </p>);
}; };
for (let i = 0; i < titleList.length; i++){ for (let i = 0; i < titleList.length; i++){
rows.push(createJSXTextSnippet(titleList[i], infoSentenceList[i], exampleSentenceList[i], rows.push(createJSXTextSnippet(getLangText(titleList[i]), getLangText(infoSentenceList[i]),
getLangText(exampleSentenceList[i]),
titleStyle, infoStyle, exampleStyle)); titleStyle, infoStyle, exampleStyle));
} }
return { return {
@ -93,29 +93,28 @@ let AclInformationButton = React.createClass({
} }
}; };
}, },
getInitialState: function(){ getInitialState() {
return {isVisible: false}; return {isVisible: false};
}, },
show: function(){ onOff() {
console.log('now inside the show function'); if (!this.state.isVisible) {
this.setState({isVisible: true}); this.setState({isVisible: true});
document.addEventListener('click', this.hide); }
else {
this.setState({isVisible: false});
}
}, },
hide: function(){ showInformation() {
this.setState({isVisible: false});
document.removeEventListener('click', this.hide);
},
showInformation: function(){
if (this.state.isVisible) { if (this.state.isVisible) {
return this.props.rows; return this.props.rows;
} }
}, },
render: function () { render() {
return ( return (
<span> <span>
<DropdownButton <Button
style={this.props.dropdownButtonStyle} style={this.props.dropdownButtonStyle}
className="glyphicon glyphicon-question-sign" onClick={this.show} /> className="glyphicon glyphicon-question-sign" onClick={this.onOff} />
<div <div
style={this.props.dropdownListStyle} style={this.props.dropdownListStyle}
className={classnames({'hidden': !this.state.isVisible})}> className={classnames({'hidden': !this.state.isVisible})}>