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