ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2015-11-03 10:39:01 +01:00
parent 784098f225
commit d2529bf015
49 changed files with 553 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -14,7 +14,7 @@ Install some nice extension for Chrom(e|ium):
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
```bash
git clone git@bitbucket.org:ascribe/onion.git
git clone git@github.com:ascribe/onion.git
cd onion
npm install
sudo npm install -g gulp

2
docs/refactor-todo.md
View File

@ -8,6 +8,8 @@
queryParams of the piece_list_store should all be reflected in the url and not a single component each should manipulate the URL bar (refactor pagination, use actions and state)
- Refactor string-templating for api_urls
- Use classNames plugin instead of if-conditional-classes
- Instead of using `currentUser && currentUser.email` in an validation that checks whether we user is logged in or now, in the `UserStore` on login we set a boolean property called `isLoggedIn` that can then be used instead of `email`
- Refactor AclProxy to be a generic hide/show element component. Have it take data input and a validation function to assess whether it should show or hide child elements. Move current Acl checks to another place, eg. acl_utils.js.
# Refactor DONE
- Refactor forms to generic-declarative form component ✓

6
index.html
View File

@ -2,6 +2,12 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#D3DEE4">
<title>ascribe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/main.css">

1
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -125,7 +125,6 @@ let AccordionListItemEditionWidget = React.createClass({
);
} else {
let editionMapping = piece && piece.first_edition ? piece.first_edition.num_editions_available + '/' + piece.num_editions : '';
return (
<button
onClick={this.toggleTable}

4
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -14,10 +14,12 @@ import { ColumnModel, TransitionModel } from '../ascribe_table/models/table_mode
import TableItemText from '../ascribe_table/table_item_text';
import TableItemCheckbox from '../ascribe_table/table_item_checkbox';
import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
let AccordionListItemTableEditions = React.createClass({
propTypes: {
@ -88,7 +90,7 @@ let AccordionListItemTableEditions = React.createClass({
let showExpandOption = false;
let editionsForPiece = this.state.editionList[this.props.parentId];
let loadingSpinner = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
// here we need to check if all editions of a specific
// piece are already defined. Otherwise .length will throw an error and we'll not

2
js/components/ascribe_accordion_list/accordion_list_item_wallet.js
View File

@ -129,7 +129,7 @@ let AccordionListItemWallet = React.createClass({
piece={this.props.content}
subsubheading={
<div className="pull-left">
<span>{this.props.content.date_created.split('-')[0]}</span>
<span>{new Date(this.props.content.date_created).getFullYear()}</span>
{this.getLicences()}
</div>}
buttons={

3
js/components/ascribe_buttons/acl_button.js
View File

@ -156,7 +156,8 @@ let AclButton = React.createClass({
return (
<ModalWrapper
trigger={
<button className={shouldDisplay ? 'btn btn-default btn-sm ' + buttonClassName : 'hidden'}>
<button
className={shouldDisplay ? 'btn btn-default btn-sm ' + buttonClassName : 'hidden'}>
{this.sanitizeAction()}
</button>
}

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

@ -1,12 +1,15 @@
'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: {
className: React.PropTypes.string,
@ -15,6 +18,7 @@ let AclButtonList = React.createClass({
React.PropTypes.array
]),
availableAcls: React.PropTypes.object,
buttonsStyle: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
@ -23,56 +27,97 @@ 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'));
},
componentDidUpdate(prevProps) {
if(prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) {
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 ref="buttonList" style={buttonsStyle}>
<AclButton
availableAcls={this.props.availableAcls}
action="acl_transfer"
pieceOrEditions={this.props.editions}
currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess}/>
<AclButton
availableAcls={this.props.availableAcls}
action="acl_consign"
pieceOrEditions={this.props.editions}
currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess} />
<AclButton
availableAcls={this.props.availableAcls}
action="acl_unconsign"
pieceOrEditions={this.props.editions}
currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess} />
<AclButton
availableAcls={this.props.availableAcls}
action="acl_loan"
pieceOrEditions={this.props.editions}
currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess} />
<AclButton
availableAcls={this.props.availableAcls}
availableAcls={availableAcls}
action="acl_share"
pieceOrEditions={this.props.editions}
currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess} />
{this.props.children}
pieceOrEditions={editions}
currentUser={currentUser}
handleSuccess={handleSuccess} />
<AclButton
availableAcls={availableAcls}
action="acl_transfer"
pieceOrEditions={editions}
currentUser={currentUser}
handleSuccess={handleSuccess}/>
<AclButton
availableAcls={availableAcls}
action="acl_consign"
pieceOrEditions={editions}
currentUser={currentUser}
handleSuccess={handleSuccess} />
<AclButton
availableAcls={availableAcls}
action="acl_unconsign"
pieceOrEditions={editions}
currentUser={currentUser}
handleSuccess={handleSuccess} />
<AclButton
availableAcls={availableAcls}
action="acl_loan"
pieceOrEditions={editions}
currentUser={currentUser}
handleSuccess={handleSuccess} />
{this.renderChildren()}
</span>
</div>
);
}

133
js/components/ascribe_buttons/acl_information.js Normal file
View File

@ -0,0 +1,133 @@
'use strict';
import React from 'react';
import classnames from 'classnames';
import { InformationTexts } from '../../constants/information_text';
import { replaceSubstringAtIndex, sanitize, intersectLists } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils';
let AclInformation = React.createClass({
propTypes: {
verbs: React.PropTypes.arrayOf(React.PropTypes.string),
aim: React.PropTypes.string.isRequired,
aclObject: React.PropTypes.object,
// Must be inserted from the outside
buttonListSize: React.PropTypes.number.isRequired
},
getDefaultProps() {
return {
buttonListSize: 400
};
},
getInitialState() {
return { isVisible: false };
},
onOff() {
if(!this.state.isVisible) {
this.setState({ isVisible: true });
}
else {
this.setState({ isVisible: false });
}
},
getInfoText(title, info, example){
let aim = this.props.aim;
if(aim) {
if(aim === 'form') {
return (
<p>
<span className="info">
{replaceSubstringAtIndex(info.slice(2), 's ', ' ')}
</span>
<span className="example">
{' ' + example}
</span>
</p>
);
}
else if(aim === 'button') {
return (
<p>
<span className="title">
{title}
</span>
<span className="info">
{info + ' '}
</span>
<span className="example">
{example}
</span>
</p>
);
}
}
else {
console.log('Aim is required when you want to place information text');
}
},
produceInformationBlock() {
const { titles, informationSentences, exampleSentences } = InformationTexts;
const { verbs, aim } = this.props;
const availableInformations = intersectLists(verbs, Object.keys(titles));
// sorting is not needed, as `this.props.verbs` takes care of sorting already
// So we assume a user of `AclInformationButton` puts an ordered version of
// `verbs` into `propTypes`
let verbsToDisplay = [];
if(aim === 'form' && availableInformations.length > 0) {
verbsToDisplay = verbsToDisplay.concat(verbs);
} else if(aim === 'button' && this.props.aclObject) {
const { aclObject } = this.props;
const sanitizedAclObject = sanitize(aclObject, (val) => !val);
verbsToDisplay = verbsToDisplay.concat(intersectLists(verbs, Object.keys(sanitizedAclObject)));
}
return verbsToDisplay.map((verb) => {
return this.getInfoText(getLangText(titles[verb]), getLangText(informationSentences[verb]), getLangText(exampleSentences[verb]));
});
},
getButton() {
return this.props.aim === 'button' ?
<button
style={{ marginTop: 0 }}
className="btn btn-transparent glyphicon glyphicon-question-sign" onClick={this.onOff} /> :
null;
},
render() {
const { aim, buttonListSize, verbs } = this.props;
const { isVisible } = this.state;
/* Lets just fucking get this widget out... */
const aclInformationSize = buttonListSize - 30;
return (
<span >
{this.getButton()}
<div
style={{
width: verbs.length > 1 && aclInformationSize > 300 ? aclInformationSize : verbs.length === 1 ? null : '100%',
marginLeft: verbs.length === 1 ? '.25em' : null
}}
className={classnames({'acl-information-dropdown-list': true, 'hidden': aim === 'button' && !isVisible})}>
<span>{this.produceInformationBlock()}</span>
</div>
</span>
);
}
});
export default AclInformation;

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

@ -39,13 +39,13 @@ let DeleteButton = React.createClass({
if(this.props.piece && !this.props.editions) {
content = <PieceDeleteForm pieceId={this.props.piece.id}/>;
title = getLangText('Remove Piece');
title = getLangText('Delete Piece');
} else {
content = <EditionDeleteForm editions={this.props.editions}/>;
title = getLangText('Remove Edition');
title = getLangText('Delete Edition');
}
btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('DELETE')}</Button>;
btnDelete = <button className="btn btn-sm btn-tertiary">{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;

32
js/components/ascribe_detail/detail_property.js
View File

@ -2,6 +2,7 @@
import React from 'react';
let DetailProperty = React.createClass({
propTypes: {
label: React.PropTypes.string,
@ -23,14 +24,19 @@ let DetailProperty = React.createClass({
getDefaultProps() {
return {
separator: '',
labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height col-bottom ascribe-detail-property-label',
labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height ascribe-detail-property-label',
valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10 col-xs-height col-bottom ascribe-detail-property-value'
};
},
render() {
let value = this.props.value;
let styles = {};
const { labelClassName,
label,
separator,
valueClassName,
children,
value } = this.props;
if(this.props.ellipsis) {
styles = {
@ -40,30 +46,16 @@ let DetailProperty = React.createClass({
};
}
if (this.props.children){
value = (
<div className="row-same-height">
<div className="col-xs-6 col-xs-height col-bottom no-padding">
{ this.props.value }
</div>
<div
className="col-xs-6 col-xs-height"
style={styles}>
{ this.props.children }
</div>
</div>);
}
return (
<div className="row ascribe-detail-property">
<div className="row-same-height">
<div className={this.props.labelClassName}>
{ this.props.label } { this.props.separator}
<div className={labelClassName}>
{label} {separator}
</div>
<div
className={this.props.valueClassName}
className={valueClassName}
style={styles}>
{value}
{children || value}
</div>
</div>
</div>

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

@ -25,11 +25,11 @@ import LicenseDetail from './license_detail';
import FurtherDetails from './further_details';
import EditionActionPanel from './edition_action_panel';
import AclProxy from '../acl_proxy';
import Note from './note';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
@ -95,7 +95,7 @@ let Edition = React.createClass({
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
<EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
<EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />
<EditionDetailProperty label="DATE" value={ new Date(this.props.edition.date_created).getFullYear() } />
<hr/>
</div>
<EditionSummary
@ -156,7 +156,6 @@ let Edition = React.createClass({
url={ApiUrls.note_public_edition}
currentUser={this.state.currentUser}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Further Details')}
show={this.props.edition.acl.acl_edit
@ -170,7 +169,6 @@ let Edition = React.createClass({
handleSuccess={this.props.loadEdition}
location={this.props.location} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('SPOOL Details')}>
<SpoolDetails
@ -225,11 +223,16 @@ let EditionSummary = React.createClass({
value={ edition.owner } />
<LicenseDetail license={edition.license_type}/>
{this.getStatus()}
<AclProxy show={currentUser && currentUser.email}>
<EditionDetailProperty
label={getLangText('ACTIONS')}>
<EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType}
edition={edition}
currentUser={currentUser}
handleSuccess={this.handleSuccess} />
</EditionDetailProperty>
</AclProxy>
<hr/>
</div>
);

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

@ -22,6 +22,8 @@ import DeleteButton from '../ascribe_buttons/delete_button';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import AclInformation from '../ascribe_buttons/acl_information';
import AclProxy from '../acl_proxy';
import ApiUrls from '../../constants/api_urls';
@ -73,7 +75,7 @@ let EditionActionPanel = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState('/collection');
this.history.pushState(null, '/collection');
},
refreshCollection() {
@ -111,7 +113,7 @@ let EditionActionPanel = React.createClass({
<Row>
<Col md={12}>
<ActionPanelButtonListType
className="text-center ascribe-button-list"
className="ascribe-button-list"
availableAcls={edition.acl}
editions={[edition]}
handleSuccess={this.handleSuccess}>
@ -131,7 +133,7 @@ let EditionActionPanel = React.createClass({
value={edition.bitcoin_id}
readOnly />
</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>
@ -168,6 +170,10 @@ let EditionActionPanel = React.createClass({
<DeleteButton
handleSuccess={this.handleDeleteSuccess}
editions={[edition]}/>
<AclInformation
aim="button"
verbs={['acl_share', 'acl_consign', 'acl_loan', 'acl_delete']}
aclObject={edition.acl}/>
</ActionPanelButtonListType>
</Col>
</Row>

39
js/components/ascribe_detail/piece_container.js
View File

@ -27,6 +27,9 @@ import CreateEditionsForm from '../ascribe_forms/create_editions_form';
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
import DeleteButton from '../ascribe_buttons/delete_button';
import AclInformation from '../ascribe_buttons/acl_information';
import AclProxy from '../acl_proxy';
import ListRequestActions from '../ascribe_forms/list_form_request_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
@ -187,33 +190,41 @@ let PieceContainer = React.createClass({
},
getActions() {
if (this.state.piece &&
this.state.piece.notifications &&
this.state.piece.notifications.length > 0) {
const { piece, currentUser } = this.state;
if (piece && piece.notifications && piece.notifications.length > 0) {
return (
<ListRequestActions
pieceOrEditions={this.state.piece}
currentUser={this.state.currentUser}
pieceOrEditions={piece}
currentUser={currentUser}
handleSuccess={this.loadPiece}
notifications={this.state.piece.notifications}/>);
}
else {
notifications={piece.notifications}/>);
} else {
return (
<AclProxy
show={currentUser && currentUser.email}>
<DetailProperty label={getLangText('ACTIONS')}>
<AclButtonList
className="text-center ascribe-button-list"
availableAcls={this.state.piece.acl}
editions={this.state.piece}
className="ascribe-button-list"
availableAcls={piece.acl}
editions={piece}
handleSuccess={this.loadPiece}>
<CreateEditionsButton
label={getLangText('CREATE EDITIONS')}
className="btn-sm"
piece={this.state.piece}
piece={piece}
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
onPollingSuccess={this.handlePollingSuccess}/>
<DeleteButton
handleSuccess={this.handleDeleteSuccess}
piece={this.state.piece}/>
piece={piece}/>
<AclInformation
aim="button"
verbs={['acl_share', 'acl_create_editions', 'acl_loan', 'acl_delete', 'acl_consign']}
aclObject={piece.acl}/>
</AclButtonList>
</DetailProperty>
</AclProxy>
);
}
},
@ -232,7 +243,7 @@ let PieceContainer = React.createClass({
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} />
<DetailProperty label="DATE" value={ this.state.piece.date_created.slice(0, 4) } />
<DetailProperty label="DATE" value={ new Date(this.state.piece.date_created).getFullYear() } />
{this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null}
<hr/>
</div>

2
js/components/ascribe_forms/form.js
View File

@ -288,10 +288,8 @@ let Form = React.createClass({
{this.renderChildren()}
{this.getButtons()}
</form>
);
}
});
export default Form;

4
js/components/ascribe_forms/form_consign.js
View File

@ -9,6 +9,9 @@ import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
import AscribeSpinner from '../ascribe_spinner';
import AclInformation from '../ascribe_buttons/acl_information';
import { getLangText } from '../../utils/lang_utils.js';
let ConsignForm = React.createClass({
@ -47,6 +50,7 @@ let ConsignForm = React.createClass({
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}>
<AclInformation aim={'form'} verbs={['acl_consign']}/>
<Property
name='consignee'
label={getLangText('Email')}

3
js/components/ascribe_forms/form_delete_edition.js
View File

@ -8,7 +8,7 @@ import ApiUrls from '../../constants/api_urls';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import AclInformation from '../ascribe_buttons/acl_information';
let EditionDeleteForm = React.createClass({
@ -60,6 +60,7 @@ let EditionDeleteForm = React.createClass({
</p>
</div>
}>
<AclInformation aim={'form'} verbs={['acl_delete']}/>
<p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
</Form>

3
js/components/ascribe_forms/form_delete_piece.js
View File

@ -4,6 +4,8 @@ import React from 'react';
import Form from '../ascribe_forms/form';
import AclInformation from '../ascribe_buttons/acl_information';
import ApiUrls from '../../constants/api_urls';
import AscribeSpinner from '../ascribe_spinner';
@ -51,6 +53,7 @@ let PieceDeleteForm = React.createClass({
</p>
</div>
}>
<AclInformation aim={'form'} verbs={['acl_delete']}/>
<p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
</Form>

3
js/components/ascribe_forms/form_loan.js
View File

@ -19,7 +19,7 @@ import AscribeSpinner from '../ascribe_spinner';
import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils';
import AclInformation from '../ascribe_buttons/acl_information';
let LoanForm = React.createClass({
propTypes: {
@ -232,6 +232,7 @@ let LoanForm = React.createClass({
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
<h3>{this.props.loanHeading}</h3>
</div>
<AclInformation aim={'form'} verbs={['acl_loan']}/>
<Property
name='loanee'
label={getLangText('Loanee Email')}

3
js/components/ascribe_forms/form_share_email.js
View File

@ -8,6 +8,8 @@ import InputTextAreaToggable from './input_textarea_toggable';
import Button from 'react-bootstrap/lib/Button';
import AclInformation from '../ascribe_buttons/acl_information';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils.js';
@ -51,6 +53,7 @@ let ShareForm = React.createClass({
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}>
<AclInformation aim={'form'} verbs={['acl_share']}/>
<Property
name='share_emails'
label={getLangText('Emails')}>

3
js/components/ascribe_forms/form_transfer.js
View File

@ -9,6 +9,8 @@ import Form from './form';
import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
import AclInformation from '../ascribe_buttons/acl_information';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils.js';
@ -52,6 +54,7 @@ let TransferForm = React.createClass({
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}>
<AclInformation aim={'form'} verbs={['acl_transfer']}/>
<Property
name='transferee'
label={getLangText('Email')}>

2
js/components/ascribe_modal/modal_wrapper.js
View File

@ -65,7 +65,7 @@ let ModalWrapper = React.createClass({
{this.props.title}
</Modal.Title>
</Modal.Header>
<div className="modal-body">
<div className="modal-body" >
{this.renderChildren()}
</div>
</Modal>

5
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -7,7 +7,7 @@ import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import { getLangText } from '../../utils/lang_utils.js';
let PieceListToolbarFilterWidgetFilter = React.createClass({
let PieceListToolbarFilterWidget = React.createClass({
propTypes: {
filterParams: React.PropTypes.arrayOf(
React.PropTypes.shape({
@ -83,6 +83,7 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
{/* We iterate over filterParams, to receive the label and then for each
@ -139,4 +140,4 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
}
});
export default PieceListToolbarFilterWidgetFilter;
export default PieceListToolbarFilterWidget;

3
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -54,6 +54,7 @@ let PieceListToolbarOrderWidget = React.createClass({
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
<li style={{'textAlign': 'center'}}>
@ -72,7 +73,7 @@ let PieceListToolbarOrderWidget = React.createClass({
</span>
<input
readOnly
type="checkbox"
type="radio"
checked={param.indexOf(this.props.orderBy) > -1} />
</div>
</li>

3
js/components/ascribe_spinner.js
View File

@ -20,7 +20,8 @@ let AscribeSpinner = React.createClass({
render() {
return (
<div className={
<div
className={
classNames('spinner-wrapper-' + this.props.size,
'spinner-wrapper-' + this.props.color,
this.props.classNames)}>

14
js/components/header.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import { Link } from 'react-router';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@ -29,7 +31,7 @@ import NavRoutesLinks from './nav_routes_links';
import { mergeOptions } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils';
import {constructHead} from '../utils/head_setter';
import { constructHead } from '../utils/dom_utils';
let Header = React.createClass({
@ -71,12 +73,16 @@ let Header = React.createClass({
}
if (whitelabel.subdomain && whitelabel.subdomain !== 'www' && whitelabel.logo){
return (<img className="img-brand" src={whitelabel.logo}/>);
return (
<Link to="/collection">
<img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
</Link>
);
}
return (
<span>
<span className="icon-ascribe-logo"></span>
<Link className="icon-ascribe-logo" to="/collection"/>
</span>
);
},
@ -201,7 +207,7 @@ let Header = React.createClass({
{this.getPoweredBy()}
</Nav>
<Nav navbar right>
<HeaderNotificationDebug show={false}/>
<HeaderNotificationDebug show = {false}/>
{account}
{signup}
</Nav>

2
js/components/piece_list.js
View File

@ -25,8 +25,6 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
import AscribeSpinner from './ascribe_spinner';
import AppConstants from '../constants/application_constants';
import { getAvailableAcls } from '../utils/acl_utils';
import { mergeOptions } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils';

2
js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
View File

@ -182,7 +182,7 @@ let AccordionListItemPrize = React.createClass({
artistName={artistName}
subsubheading={
<div>
<span>{this.props.content.date_created.split('-')[0]}</span>
<span>{new Date(this.props.content.date_created).getFullYear()}</span>
</div>}
buttons={this.getPrizeButtons()}
badge={this.getPrizeBadge()}>

2
js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
View File

@ -141,7 +141,7 @@ let PieceContainer = React.createClass({
<hr/>
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<DetailProperty label={getLangText('BY')} value={artistName} />
<DetailProperty label={getLangText('DATE')} value={ this.state.piece.date_created.slice(0, 4) } />
<DetailProperty label={getLangText('DATE')} value={new Date(this.state.piece.date_created).getFullYear()} />
{artistEmail}
{this.getActions()}
<hr/>

2
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -39,7 +39,7 @@ let WalletPieceContainer = React.createClass({
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.piece.title}</h1>
<DetailProperty label="BY" value={this.props.piece.artist_name} />
<DetailProperty label="DATE" value={ this.props.piece.date_created.slice(0, 4) } />
<DetailProperty label="DATE" value={new Date(this.props.piece.date_created).getFullYear()} />
<hr/>
</div>
}

2
js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
View File

@ -100,7 +100,7 @@ let CylandAccordionListItem = React.createClass({
piece={this.props.content}
subsubheading={
<div className="pull-left">
<span>{this.props.content.date_created.split('-')[0]}</span>
<span>{new Date(this.props.content.date_created).getFullYear()}</span>
</div>}
buttons={this.getSubmitButtons()}>
{this.props.children}

9
js/components/whitelabel/wallet/components/cyland/cyland_landing.js
View File

@ -3,7 +3,6 @@
import React from 'react';
import { History } from 'react-router';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
@ -14,10 +13,13 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions';
import AscribeSpinner from '../../../../ascribe_spinner';
import { mergeOptions } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils';
let CylandLanding = React.createClass({
mixins: [History],
@ -61,10 +63,9 @@ let CylandLanding = React.createClass({
<div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
<img src={this.state.whitelabel.logo} width="400px"/>
<div style={{marginTop: '1em'}}>
{getLangText('Submissions to Cyland Archive are powered by')}
{getLangText('Submissions to Cyland Archive are powered by') + ' '}
<span>
<span> ascribe </span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
<span className="icon-ascribe-logo"></span>
</span>
</div>
</div>

2
js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
View File

@ -106,7 +106,7 @@ let IkonotvAccordionListItem = React.createClass({
piece={this.props.content}
subsubheading={
<div className="pull-left">
<span>{this.props.content.date_created.split('-')[0]}</span>
<span>{new Date(this.props.content.date_created).getFullYear()}</span>
</div>}
buttons={this.getSubmitButtons()}>
{this.props.children}

33
js/constants/information_text.js Normal file
View File

@ -0,0 +1,33 @@
'use strict';
export const InformationTexts = {
'titles': {
'acl_consign': 'CONSIGN',
'acl_loan': 'LOAN',
'acl_share': 'SHARE',
'acl_delete': 'DELETE',
'acl_create_editions': 'CREATE EDITIONS',
'acl_unconsign': 'UNCONSIGN',
'acl_request_unconsign': 'REQUEST UNCONSIGN'
},
'informationSentences': {
'acl_consign': ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
'acl_loan': ' - Lets someone use or put the Work on display for a limited amount of time.',
'acl_share': ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
'acl_delete': ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
'history will still exist on the blockchain and cannot be deleted.',
'acl_create_editions': ' Lets the artist set a fixed number of editions of a work which can then be transferred, guaranteeing each edition is authentic and from the artist.',
'acl_unconsign': 'Ends the consignment agreement between the owner and a consignee.',
'acl_request_unconsign': 'Lets the owner ask the consignee to confirm that they will no longer manage the work.'
},
'exampleSentences': {
'acl_consign': '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
'so the gallery can sell them on her behalf, under the terms the artist and the gallery have agreed to)',
'acl_loan': '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
'acl_share': '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
'acl_delete': '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)',
'acl_create_editions': '(e.g. A company commissions a visual artists to create three limited edition prints for a giveaway)',
'acl_unconsign': '(e.g. An artist regains full control over their work and releases the consignee of any rights or responsibilities)',
'acl_request_unconsign': '(e.g. An artist submits an unconsign request to a gallery after his exhibition ends, as per their agreement)'
}
};

17
js/utils/acl_utils.js
View File

@ -1,10 +1,6 @@
'use strict';
import { sanitize } from './general_utils';
function intersectAcls(a, b) {
return a.filter((val) => b.indexOf(val) > -1);
}
import { sanitize, intersectLists } from './general_utils';
export function getAvailableAcls(editions, filterFn) {
let availableAcls = [];
@ -37,13 +33,15 @@ export function getAvailableAcls(editions, filterFn) {
});
// If no edition has been selected, availableActions is empty
// If only one edition has been selected, their actions are available
// If more than one editions have been selected, their acl properties are intersected
// If only one edition has been selected, its actions are available
// If more than one editions have been selected, intersect all their acl properties
if (editionsCopy.length >= 1) {
availableAcls = editionsCopy[0].acl;
} else if (editionsCopy.length >= 2) {
if (editionsCopy.length >= 2) {
for (let i = 1; i < editionsCopy.length; i++) {
availableAcls = intersectAcls(availableAcls, editionsCopy[i].acl);
availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
}
}
}
@ -53,6 +51,5 @@ export function getAvailableAcls(editions, filterFn) {
availableAclsObj[availableAcls[i]] = true;
}
return availableAclsObj;
}

38
js/utils/dom_utils.js
View File

@ -1,9 +1,45 @@
'use strict';
/**
* Set the title in the browser window.
*/
export function setDocumentTitle(title) {
document.title = title;
}
/**
* @param {string} elementType: string, is the type of the element, such as link, meta, etc.
* @param {string} elementId id of the element
* @param {object} elementAttributes: hash table containing the attributes of the relevant element
*/
function constructHeadElement(elementType, elementId, elementAttributes) {
let head = (document.head || document.getElementsByTagName('head')[0]);
let element = document.createElement(elementType);
let oldElement = document.getElementById(elementId);
element.setAttribute('id', elementId);
for (let k in elementAttributes){
try {
element.setAttribute(k, elementAttributes[k]);
}
catch(e){
console.warn(e.message);
}
}
if (oldElement) {
head.removeChild(oldElement);
}
head.appendChild(element);
}
/**
* Accepts a dictionary of dictionaries which comprises a part or all of html head part
* @param {object} headObject {link : {id1: {rel: ... }}}
*/
export function constructHead(headObject){
for (let k in headObject){
let favicons = headObject[k];
for (let f in favicons){
constructHeadElement(k, f, favicons[f]);
}
}
}

20
js/utils/general_utils.js
View File

@ -222,6 +222,16 @@ export function truncateTextAtCharIndex(text, charIndex, replacement = '...') {
return truncatedText;
}
/**
* @param index, int, the starting index of the substring to be replaced
* @param character, substring to be replaced
* @returns {string}
*/
export function replaceSubstringAtIndex(baseString, substrToReplace, stringToBePut) {
let index = baseString.indexOf(substrToReplace);
return baseString.substr(0, index) + stringToBePut + baseString.substr(index + substrToReplace.length);
}
/**
* Extracts the user's subdomain from the browser's window.
* If no subdomain is found (for example on a naked domain), the default "www" is just assumed.
@ -232,3 +242,13 @@ export function getSubdomain() {
let tokens = host.split('.');
return tokens.length > 2 ? tokens[0] : 'www';
}
/**
* Takes two lists and returns their intersection as a list
* @param {Array} a
* @param {Array} b
* @return {[Array]} Intersected list of a and b
*/
export function intersectLists(a, b) {
return a.filter((val) => b.indexOf(val) > -1);
}

37
js/utils/head_setter.js
View File

@ -1,37 +0,0 @@
'use strict';
// elementType: string, is the type of the element, such as link, meta, etc.
// elementId id of the element
// elementAttributes: hash table containing the attributes of the relevant element
function constructHeadElement(elementType, elementId, elementAttributes) {
let head = (document.head || document.getElementsByTagName('head')[0]);
let element = document.createElement(elementType);
let oldElement = document.getElementById(elementId);
element.setAttribute('id', elementId);
for (let k in elementAttributes){
try {
element.setAttribute(k, elementAttributes[k]);
}
catch(e){
console.warn(e.message);
continue;
}
}
if (oldElement) {
head.removeChild(oldElement);
}
head.appendChild(element);
}
// Accepts a dictionary of dictionaries which comprises a part or all of html head part
// {link : {id1: {rel: ... }}}
// traverses a tree of depth 3 (no backtracking)
export function constructHead(headObject){
for (let k in headObject){
let favicons = headObject[k];
for (let f in favicons){
constructHeadElement(k, f, favicons[f]);
}
}
}

25
sass/ascribe_acl_information.scss Normal file
View File

@ -0,0 +1,25 @@
.acl-information-dropdown-list {
text-align: justify;
padding: .5em .5em .5em 0;
p {
margin: 0 .5em 1em 0;
line-height: 1.2;
}
span {
font-size: 13px;
}
.title {
color: $ascribe-dark-blue;
}
.info {
color: #212121;
}
.example {
color: #616161;
}
}

42
sass/ascribe_custom_style.scss
View File

@ -91,12 +91,27 @@ hr {
}
}
.navbar-brand,
.navbar-brand:hover {
.navbar-brand {
font-size: 23px;
padding: 12px 15px;
.icon-ascribe-logo {
color: $ascribe--nav-fg-prim-color;
&:hover {
color: $ascribe--nav-fg-sec-color;
text-decoration: none;
}
&:focus {
text-decoration: none;
}
}
.img-brand {
height: 100%;
}
}
.img-brand .navbar-brand {
width: 0;
height: 0;
@ -327,6 +342,29 @@ fieldset[disabled] .btn-secondary.active {
}
}
.btn-tertiary {
background-color: transparent;
border-color: transparent;
color: $ascribe-dark-blue;
&:focus,
&:active:focus,
&:active.focus {
background-color: transparent;
border-color: transparent;
color: $ascribe-dark-blue;
}
&:hover,
&:active,
&:active:hover,
&.active:hover{
background-color: $ascribe-pink;
border-color: $ascribe-pink;
color: $ascribe-white;
}
}
.ascribe-piece-list-toolbar-filter-widget button {
background-color: transparent;
border: 1px solid transparent;

4
sass/ascribe_edition.scss
View File

@ -18,7 +18,3 @@
display: table-cell;
vertical-align: middle;
}
.ascribe-button-list {
margin-top: 1em;
}

9
sass/lib/buttons.scss
View File

@ -0,0 +1,9 @@
.btn-transparent {
color: black;
background-color: transparent;
&:hover, &:active, &:focus {
color:#424242;
outline: none;
}
}

8
sass/lib/modals.scss Normal file
View File

@ -0,0 +1,8 @@
.modal-body {
padding-top:0;
}
.modal-header {
padding: 15px 15px 0 15px;
border-bottom: none;
}

4
sass/main.scss
View File

@ -35,6 +35,9 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_form';
@import 'ascribe_panel';
@import 'ascribe_collapsible';
@import 'ascribe_acl_information';
@import 'lib/buttons';
@import 'lib/modals';
@import 'ascribe_custom_style';
@import 'ascribe_spinner';
@ -155,6 +158,7 @@ hr {
}
.ascribe-detail-property-label {
vertical-align: top;
font-size: .8em;
}

2
sass/variables.scss
View File

@ -613,7 +613,7 @@ $modal-header-border-color: #e5e5e5 !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;

4
sass/whitelabel/prize/sluice/sluice_custom_style.scss
View File

@ -251,3 +251,7 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
.client--sluice .ascribe-progress-bar > .progress-bar {
background-color: $sluice--button-color;
}
.client--sluice .acl-information-dropdown-list .title {
color: $sluice--button-color;
}

4
sass/whitelabel/wallet/cc/cc_custom_style.scss
View File

@ -204,3 +204,7 @@ $cc--button-color: $cc--nav-fg-prim-color;
.client--cc .ascribe-progress-bar > .progress-bar {
background-color: $cc--button-color;
}
.client--cc .acl-information-dropdown-list .title {
color: $cc--button-color;
}

4
sass/whitelabel/wallet/cyland/cyland_custom_style.scss
View File

@ -179,3 +179,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
.client--cyland .ascribe-progress-bar > .progress-bar {
background-color: $cyland--button-color;
}
.client--cyland .acl-information-dropdown-list .title {
color: $cyland--button-color;
}

4
sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
View File

@ -521,3 +521,7 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
.client--ikonotv .ascribe-progress-bar > .progress-bar {
background-color: $ikono--button-color;
}
.client--ikonotv .acl-information-dropdown-list .title {
color: $ikono--button-color;
}