ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-25 18:56:28 +02:00
Code Issues Releases Wiki Activity

Add resizing functionality to AclButtonList and AclInformation

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-23 09:29:17 +02:00
parent d4de2434ee
commit e8a9cd89a4
6 changed files with 107 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
js/components/ascribe_buttons/acl_button_list.js
View File

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

19
js/components/ascribe_buttons/acl_information.js
View File

@ -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>

4
js/components/ascribe_buttons/delete_button.js
View File

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

28
js/components/ascribe_detail/edition.js
View File

@ -211,10 +211,30 @@ let EditionSummary = React.createClass({
value={ edition.owner } />
<LicenseDetail license={edition.license_type}/>
{this.getStatus()}
<EditionActionPanel
edition={edition}
currentUser={currentUser}
handleSuccess={this.handleSuccess} />
<div className="row ascribe-detail-property">
<div className="row-same-height">
<div className={this.props.labelClassName}>
{ 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>
);

2
js/components/ascribe_detail/edition_action_panel.js
View File

@ -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>

7
sass/ascribe_acl_information.scss
View File

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