Add resizing functionality to AclButtonList and AclInformation

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 (
-            <div className={this.props.className}>
+            <div className={className}>
-                <span style={this.props.buttonsStyle}>
+                <span ref="buttonList" style={buttonsStyle}>
                     <AclButton
-                        availableAcls={this.props.availableAcls}
+                        availableAcls={availableAcls}
                         action="acl_share"
-                        pieceOrEditions={this.props.editions}
+                        pieceOrEditions={editions}
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
-                        handleSuccess={this.props.handleSuccess} />
+                        handleSuccess={handleSuccess} />
                     <AclButton
-                        availableAcls={this.props.availableAcls}
+                        availableAcls={availableAcls}
                         action="acl_transfer"
-                        pieceOrEditions={this.props.editions}
+                        pieceOrEditions={editions}
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
-                        handleSuccess={this.props.handleSuccess}/>
+                        handleSuccess={handleSuccess}/>
                     <AclButton
-                        availableAcls={this.props.availableAcls}
+                        availableAcls={availableAcls}
                         action="acl_consign"
-                        pieceOrEditions={this.props.editions}
+                        pieceOrEditions={editions}
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
-                        handleSuccess={this.props.handleSuccess} />
+                        handleSuccess={handleSuccess} />
                     <AclButton
-                        availableAcls={this.props.availableAcls}
+                        availableAcls={availableAcls}
                         action="acl_unconsign"
-                        pieceOrEditions={this.props.editions}
+                        pieceOrEditions={editions}
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
-                        handleSuccess={this.props.handleSuccess} />
+                        handleSuccess={handleSuccess} />
                     <AclButton
-                        availableAcls={this.props.availableAcls}
+                        availableAcls={availableAcls}
                         action="acl_loan"
-                        pieceOrEditions={this.props.editions}
+                        pieceOrEditions={editions}
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
-                        handleSuccess={this.props.handleSuccess} />
+                        handleSuccess={handleSuccess} />
-                    {this.props.children}
+                    {this.renderChildren()}
                 </span>
             </div>
         );

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 (
             <span >
                 {this.getButton()}
                 <div
+                    style={{
+                        width: aclInformationSize > 300 ? aclInformationSize : 400
+                    }}
                     className={classnames({'acl-information-dropdown-list': true, 'hidden': aim === 'button' && !isVisible})}>
                     <span>{this.produceInformationBlock()}</span>
                 </div>

js/components/ascribe_buttons/delete_button.js

@@ -45,7 +45,7 @@ let DeleteButton = React.createClass({
                 title = getLangText('Delete Edition');
             }
 
-            btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('DELETE')}</Button>;
+            btnDelete = <Button bsStyle="default" bsSize="small">{getLangText('DELETE')}</Button>;
         
         } else if(availableAcls.acl_unshare){
             
@@ -57,7 +57,7 @@ let DeleteButton = React.createClass({
                 title = getLangText('Remove Piece from Collection');
             }
 
-            btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('REMOVE FROM COLLECTION')}</Button>;
+            btnDelete = <Button bsStyle="default" bsSize="small">{getLangText('REMOVE FROM COLLECTION')}</Button>;
         
         } else {
             return null;

js/components/ascribe_detail/edition.js

@@ -211,10 +211,30 @@ let EditionSummary = React.createClass({
                     value={ edition.owner } />
                 <LicenseDetail license={edition.license_type}/>
                 {this.getStatus()}
-                <EditionActionPanel
+                <div className="row ascribe-detail-property">
-                    edition={edition}
+                    <div className="row-same-height">
-                    currentUser={currentUser}
+                        <div className={this.props.labelClassName}>
-                    handleSuccess={this.handleSuccess} />
+                            { this.props.label } { this.props.separator}
+                        </div>
+                        <div
+                            className={this.props.valueClassName}
+                            style={styles}>
+                            {value}
+                        </div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-xs-4  no-padding">
+                        Actions
+                    </div>
+                    <div
+                        className="col-xs-8">
+                        <EditionActionPanel
+                            edition={edition}
+                            currentUser={currentUser}
+                            handleSuccess={this.handleSuccess} />
+                    </div>
+                </div>);
                 <hr/>
             </div>
         );

js/components/ascribe_detail/edition_action_panel.js

@@ -124,7 +124,7 @@ let EditionActionPanel = React.createClass({
                                              type="text"
                                              value={edition.bitcoin_id} />
                                     </Property>
-                                    <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
+                                    <Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW TRANSFER')}
                                     </Button>
                                 </Form>

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;
     }
 }