ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 09:35:10 +01:00
Code Issues Releases Wiki Activity

remove deprecated collapsible mixin

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-08-10 14:42:38 +02:00
parent f6be11d530
commit d12dc4dab2
4 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
js/components/ascribe_collapsible/collapsible_paragraph.js
View File

@ -2,13 +2,10 @@
import React from 'react'; import React from 'react';
import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin'; import Panel from 'react-bootstrap/lib/Panel';
import classNames from 'classnames';
const CollapsibleParagraph = React.createClass({ const CollapsibleParagraph = React.createClass({
propTypes: { propTypes: {
title: React.PropTypes.string, title: React.PropTypes.string,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
@ -20,18 +17,14 @@ const CollapsibleParagraph = React.createClass({
getDefaultProps() { getDefaultProps() {
return { return {
show: true show: false
}; };
}, },
mixins: [CollapsibleMixin], getInitialState() {
return {
getCollapsibleDOMNode(){ expanded: false
return React.findDOMNode(this.refs.panel); };
},
getCollapsibleDimensionValue(){
return React.findDOMNode(this.refs.panel).scrollHeight;
}, },
handleToggle(e){ handleToggle(e){
@ -40,8 +33,7 @@ const CollapsibleParagraph = React.createClass({
}, },
render() { render() {
let styles = this.getCollapsibleClassSet(); let text = this.state.expanded ? '-' : '+';
let text = this.isExpanded() ? '-' : '+';
if(this.props.show) { if(this.props.show) {
return ( return (
@ -50,9 +42,12 @@ const CollapsibleParagraph = React.createClass({
<div onClick={this.handleToggle}> <div onClick={this.handleToggle}>
<span>{text} {this.props.title}</span> <span>{text} {this.props.title}</span>
</div> </div>
<div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}> <Panel
collapsible
expanded={this.state.expanded}
className="ascribe-edition-collapsible-content">
{this.props.children} {this.props.children}
</div> </Panel>
</div> </div>
</div> </div>
); );

23
js/components/ascribe_forms/property_collapsible.js
View File

@ -3,11 +3,9 @@
import React from 'react'; import React from 'react';
import ReactAddons from 'react/addons'; import ReactAddons from 'react/addons';
import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip'; import Tooltip from 'react-bootstrap/lib/Tooltip';
import Panel from 'react-bootstrap/lib/Panel';
import classNames from 'classnames';
let PropertyCollapsile = React.createClass({ let PropertyCollapsile = React.createClass({
@ -17,22 +15,12 @@ let PropertyCollapsile = React.createClass({
tooltip: React.PropTypes.string tooltip: React.PropTypes.string
}, },
mixins: [CollapsibleMixin],
getInitialState() { getInitialState() {
return { return {
show: false show: false
}; };
}, },
getCollapsibleDOMNode(){
return React.findDOMNode(this.refs.panel);
},
getCollapsibleDimensionValue(){
return React.findDOMNode(this.refs.panel).scrollHeight;
},
handleFocus() { handleFocus() {
this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked; this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
this.setState({ this.setState({
@ -85,11 +73,14 @@ let PropertyCollapsile = React.createClass({
<span className="checkbox"> {this.props.checkboxLabel}</span> <span className="checkbox"> {this.props.checkboxLabel}</span>
</div> </div>
</OverlayTrigger> </OverlayTrigger>
<div <Panel
className={classNames(this.getCollapsibleClassSet()) + ' ascribe-settings-property'} collapsible
ref="panel"> expanded={this.state.show}
className="bs-custom-panel">
<div className="ascribe-settings-property">
{this.renderChildren()} {this.renderChildren()}
</div> </div>
</Panel>
</div> </div>
); );
} }

6
sass/ascribe_edition.scss
View File

@ -23,11 +23,13 @@
font-size: 0.9em; font-size: 0.9em;
} }
.ascribe-edition-collapible-content { .ascribe-edition-collapsible-content {
width:100%; width:100%;
background: none;
border: none;
} }
.coa-file-wrapper{ .coa-file-wrapper {
display: table; display: table;
height: 200px; height: 200px;
overflow: hidden; overflow: hidden;

9
sass/ascribe_theme.scss
View File

@ -3,3 +3,12 @@
.pager li a { .pager li a {
color: white; color: white;
} }
.panel-default {
border: none;
box-shadow: none;
}
.panel-body {
padding:0;
}