diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js index 72ee5a2b..28b49fa8 100644 --- a/js/components/ascribe_buttons/acl_button_list.js +++ b/js/components/ascribe_buttons/acl_button_list.js @@ -1,12 +1,14 @@ 'use strict'; -import React from 'react'; +import React from 'react/addons'; import UserActions from '../../actions/user_actions'; import UserStore from '../../stores/user_store'; import AclButton from '../ascribe_buttons/acl_button'; +import { mergeOptions } from '../../utils/general_utils'; + let AclButtonList = React.createClass({ propTypes: { @@ -25,57 +27,90 @@ let AclButtonList = React.createClass({ }, getInitialState() { - return UserStore.getState(); + return mergeOptions( + UserStore.getState(), + { + buttonListSize: 0 + } + ); }, componentDidMount() { UserStore.listen(this.onChange); UserActions.fetchCurrentUser(); + + window.addEventListener('resize', this.handleResize); + window.dispatchEvent(new Event('resize')); }, componentWillUnmount() { UserStore.unlisten(this.onChange); + + window.removeEventListener('resize', this.handleResize); + }, + + handleResize() { + this.setState({ + buttonListSize: this.refs.buttonList.getDOMNode().offsetWidth + }); }, onChange(state) { this.setState(state); }, + renderChildren() { + const { children } = this.props; + const { buttonListSize } = this.state; + + return React.Children.map(children, (child) => { + return React.addons.cloneWithProps(child, { buttonListSize }); + }); + }, + render() { + const { className, + buttonsStyle, + availableAcls, + editions, + handleSuccess } = this.props; + + const { currentUser } = this.state; + return ( -
- +
+ + pieceOrEditions={editions} + currentUser={currentUser} + handleSuccess={handleSuccess} /> + pieceOrEditions={editions} + currentUser={currentUser} + handleSuccess={handleSuccess}/> + pieceOrEditions={editions} + currentUser={currentUser} + handleSuccess={handleSuccess} /> + pieceOrEditions={editions} + currentUser={currentUser} + handleSuccess={handleSuccess} /> - {this.props.children} + pieceOrEditions={editions} + currentUser={currentUser} + handleSuccess={handleSuccess} /> + {this.renderChildren()}
); diff --git a/js/components/ascribe_buttons/acl_information.js b/js/components/ascribe_buttons/acl_information.js index 2d7533ec..59ffd561 100644 --- a/js/components/ascribe_buttons/acl_information.js +++ b/js/components/ascribe_buttons/acl_information.js @@ -12,7 +12,16 @@ let AclInformation = React.createClass({ propTypes: { verbs: React.PropTypes.arrayOf(React.PropTypes.string), aim: React.PropTypes.string.isRequired, - aclObject: React.PropTypes.object + aclObject: React.PropTypes.object, + + // Must be inserted from the outside + buttonListSize: React.PropTypes.number.isRequired + }, + + getDefaultProps() { + return { + buttonListSize: 400 + }; }, getInitialState() { @@ -99,13 +108,19 @@ let AclInformation = React.createClass({ }, render() { - const { aim } = this.props; + const { aim, buttonListSize } = this.props; const { isVisible } = this.state; + /* Lets just fucking get this widget out... */ + const aclInformationSize = buttonListSize - 33; + return ( {this.getButton()}
300 ? aclInformationSize : 400 + }} className={classnames({'acl-information-dropdown-list': true, 'hidden': aim === 'button' && !isVisible})}> {this.produceInformationBlock()}
diff --git a/js/components/ascribe_buttons/delete_button.js b/js/components/ascribe_buttons/delete_button.js index 4f85c595..d974a8fa 100644 --- a/js/components/ascribe_buttons/delete_button.js +++ b/js/components/ascribe_buttons/delete_button.js @@ -45,7 +45,7 @@ let DeleteButton = React.createClass({ title = getLangText('Delete Edition'); } - btnDelete = ; + btnDelete = ; } else if(availableAcls.acl_unshare){ @@ -57,7 +57,7 @@ let DeleteButton = React.createClass({ title = getLangText('Remove Piece from Collection'); } - btnDelete = ; + btnDelete = ; } else { return null; diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 9ee858a7..fda3eee8 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -211,10 +211,30 @@ let EditionSummary = React.createClass({ value={ edition.owner } /> {this.getStatus()} - +
+
+
+ { this.props.label } { this.props.separator} +
+
+ {value} +
+
+
+
+
+ Actions +
+
+ +
+
);
); diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js index c4732729..6beda543 100644 --- a/js/components/ascribe_detail/edition_action_panel.js +++ b/js/components/ascribe_detail/edition_action_panel.js @@ -124,7 +124,7 @@ let EditionActionPanel = React.createClass({ type="text" value={edition.bitcoin_id} /> - diff --git a/sass/ascribe_acl_information.scss b/sass/ascribe_acl_information.scss index 28c7846c..50bbb4ec 100644 --- a/sass/ascribe_acl_information.scss +++ b/sass/ascribe_acl_information.scss @@ -1,6 +1,5 @@ .acl-information-dropdown-list { text-align: justify; - background-color: white; padding: .5em .5em .5em 0; p { @@ -15,14 +14,14 @@ } .title { - color: #02B6A3; + color: $ascribe-dark-blue; } .info { - color: #333333; + color: #212121; } .example { - color: #B2B2B2; + color: #616161; } } \ No newline at end of file