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

Merge pull request #49 from ascribe/AD-1149-final-changes

AD-1149 Final Changes
This commit is contained in:
Brett Sun 2015-12-07 10:25:25 +01:00
commit c3c493dc48
18 changed files with 92 additions and 62 deletions

View File

@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
return (
<AscribeSpinner
size='sm'
color='white'
classNames='pull-right margin-left-2px'/>
);
} else {
@ -137,4 +136,4 @@ let AccordionListItemEditionWidget = React.createClass({
}
});
export default AccordionListItemEditionWidget;
export default AccordionListItemEditionWidget;

View File

@ -2,7 +2,7 @@
import React from 'react';
let accordionListItemThumbnailPlaceholder = React.createClass({
let AccordionListItemThumbnailPlaceholder = React.createClass({
render() {
return (
<span className="ascribe-logo-circle">
@ -12,4 +12,4 @@ let accordionListItemThumbnailPlaceholder = React.createClass({
}
});
export default accordionListItemThumbnailPlaceholder;
export default AccordionListItemThumbnailPlaceholder;

View File

@ -195,7 +195,7 @@ let EditionSummary = React.createClass({
getStatus(){
let status = null;
if (this.props.edition.status.length > 0){
let statusStr = this.props.edition.status.join().replace(/_/, ' ');
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = (

View File

@ -94,8 +94,10 @@ let EditionActionPanel = React.createClass({
},
render(){
let { edition, currentUser } = this.props;
let ActionPanelButtonListType = this.props.actionPanelButtonListType;
const {
actionPanelButtonListType: ActionPanelButtonListType,
edition,
currentUser } = this.props;
if (edition &&
edition.notifications &&

View File

@ -37,7 +37,7 @@ let ConsignForm = React.createClass({
getInitialState() {
return {
email: this.props.email
email: this.props.email || ''
};
},
@ -69,7 +69,7 @@ let ConsignForm = React.createClass({
ref='form'
url={url}
getFormData={this.getFormData}
handleSuccess={this.props.handleSuccess}
handleSuccess={handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">

View File

@ -210,7 +210,7 @@ let LoanForm = React.createClass({
<input
type="password"
placeholder={getLangText('Enter your password')}
required={showPassword ? 'required' : ''}/>
required={showPassword}/>
</Property>
{children}
</Form>

View File

@ -53,12 +53,10 @@ const InputContractAgreementCheckbox = React.createClass({
},
componentWillReceiveProps({ email: nextEmail }) {
const { contractAgreementList } = this.state;
if (this.props.email !== nextEmail) {
if (isEmail(nextEmail)) {
this.getContractAgreementsOrCreatePublic(nextEmail);
} else if (contractAgreementList && contractAgreementList.length > 0) {
} else if (this.getContractAgreement()) {
ContractAgreementListActions.flushContractAgreementList();
}
}
@ -69,7 +67,9 @@ const InputContractAgreementCheckbox = React.createClass({
},
onStoreChange(state) {
const contractAgreement = this.getContractAgreement(state.contractAgreementList);
const contractAgreement = this.getContractAgreement(state.contractAgreementList);
// If there is no contract available, hide this `Property` from the user
this.props.setExpanded(!!contractAgreement);
state = mergeOptions(state, {
@ -97,16 +97,21 @@ const InputContractAgreementCheckbox = React.createClass({
},
onChange(event) {
// Sync the value between our `InputCheckbox` and this component's `terms`
// so the parent `Property` is able to get the correct value of this component
// when the `Form` queries it.
this.setState({
value: React.addons.update(this.state.value, {
terms: { $set: event.target.value }
})
});
// Propagate change events from the checkbox up to the parent `Property`
this.props.onChange(event);
},
getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
if (contractAgreementList && contractAgreementList.length > 0) {
if (contractAgreementList && contractAgreementList.length) {
return contractAgreementList[0];
}
},

View File

@ -96,18 +96,21 @@ const InputFineUploader = React.createClass({
},
render() {
const { fileInputElement,
keyRoutine,
createBlobRoutine,
validation,
setIsUploadReady,
isReadyForFormSubmission,
areAssetsDownloadable,
enableLocalHashing,
uploadMethod,
fileClassToUpload,
disabled } = this.props;
let editable = this.props.isFineUploaderActive;
const {
areAssetsDownloadable,
enableLocalHashing,
createBlobRoutine,
disabled,
fileClassToUpload,
fileInputElement,
isFineUploaderActive,
isReadyForFormSubmission,
keyRoutine,
setIsUploadReady,
uploadMethod,
validation } = this.props;
let editable = isFineUploaderActive;
// if disabled is actually set by property, we want to override
// isFineUploaderActive

View File

@ -239,6 +239,10 @@ const Property = React.createClass({
this.setState({ expanded });
},
handleCheckboxToggle() {
this.setExpanded(!this.state.expanded);
},
renderChildren(style) {
// Input's props should only be cloned and propagated down the tree,
// if the component is actually being shown (!== 'expanded === false')
@ -280,10 +284,6 @@ const Property = React.createClass({
}
},
handleCheckboxToggle() {
this.setState({expanded: !this.state.expanded});
},
getCheckbox() {
const { checkboxLabel } = this.props;

View File

@ -30,7 +30,7 @@ let PieceListBulkModal = React.createClass({
},
render() {
if (Object.keys(this.props.availableAcls).length > 0) {
if (Object.keys(this.props.availableAcls).length) {
return (
<div className={this.props.className}>
<div className="row no-margin">

View File

@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
propTypes: {
classNames: React.PropTypes.string,
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
},
getDefaultProps() {
return {
inline: false,
size: 'md',
color: 'loop'
size: 'md'
};
},
render() {
const { classNames: classes, color, size } = this.props;
return (
<div
className={
classNames('spinner-wrapper-' + this.props.size,
'spinner-wrapper-' + this.props.color,
this.props.classNames)}>
<div className={classNames('spinner-circle')}></div>
<div className={classNames('spinner-inner')}>A</div>
className={classNames('spinner-wrapper-' + size,
color ? 'spinner-wrapper-' + color : null,
classes)}>
<div className='spinner-circle' />
<div className='spinner-inner'>A</div>
</div>
);
}

View File

@ -6,7 +6,7 @@ import Vivi23AccordionListItemThumbnailPlaceholder from './23vivi_accordion_list
import MarketPieceList from '../market/market_piece_list';
let vivi23PieceList = React.createClass({
let Vivi23PieceList = React.createClass({
propTypes: {
location: React.PropTypes.object
},
@ -21,4 +21,4 @@ let vivi23PieceList = React.createClass({
});
export default vivi23PieceList;
export default Vivi23PieceList;

View File

@ -199,7 +199,7 @@ let IkonotvRegisterPiece = React.createClass({
getSlideLoan() {
if (this.canSubmit()) {
const {piece, whitelabel} = this.state;
const { piece, whitelabel } = this.state;
let today = new Moment();
let endDate = new Moment();
endDate.add(2, 'years');

View File

@ -144,8 +144,7 @@ let MarketSubmitButton = React.createClass({
} else {
return (
<AclProxy
aclObject={{'acl_consign': availableAcls.acl_consign && canSubmit}}
aclName='acl_consign'>
show={availableAcls.acl_consign && canSubmit}>
<ModalWrapper
trigger={triggerButton}
handleSuccess={handleSuccess}

View File

@ -32,6 +32,7 @@ let MarketAdditionalDataForm = React.createClass({
React.PropTypes.number,
React.PropTypes.string
]),
editable: React.PropTypes.bool,
isInline: React.PropTypes.bool,
showHeading: React.PropTypes.bool,
showNotification: React.PropTypes.bool,
@ -41,6 +42,7 @@ let MarketAdditionalDataForm = React.createClass({
getDefaultProps() {
return {
editable: true,
submitLabel: getLangText('Register work')
};
},
@ -53,7 +55,7 @@ let MarketAdditionalDataForm = React.createClass({
{
// Allow the form to be submitted if there's already an additional image uploaded
isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
forceUpdateKey: 0,
forceUpdateKey: 0
});
},
@ -70,9 +72,7 @@ let MarketAdditionalDataForm = React.createClass({
},
onChange(state) {
this.setState(state);
this.setState({
Object.assign({}, state, {
// Allow the form to be submitted if the updated piece already has an additional image uploaded
isUploadReady: this.isUploadReadyOnChange(state.piece),
@ -85,6 +85,8 @@ let MarketAdditionalDataForm = React.createClass({
*/
forceUpdateKey: this.state.forceUpdateKey + 1
});
this.setState(state);
},
getFormData() {
@ -130,9 +132,11 @@ let MarketAdditionalDataForm = React.createClass({
},
render() {
const { isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
const { piece } = this.state;
let buttons, spinner, heading;
let buttons, heading;
let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
if (!isInline) {
buttons = (
@ -146,7 +150,9 @@ let MarketAdditionalDataForm = React.createClass({
spinner = (
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
<p className="pull-right">
{spinner}
</p>
</div>
);
@ -169,7 +175,8 @@ let MarketAdditionalDataForm = React.createClass({
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
getFormData={this.getFormData}
buttons={buttons}
spinner={spinner}>
spinner={spinner}
disabled={!this.props.editable || !piece.acl.acl_edit}>
{heading}
<FurtherDetailsFileuploader
label={getLangText('Marketplace Thumbnail Image')}
@ -178,10 +185,12 @@ let MarketAdditionalDataForm = React.createClass({
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
pieceId={piece.id}
otherData={piece.other_data} />
otherData={piece.other_data}
editable={editable} />
<Property
name='artist_bio'
label={getLangText('Artist Bio')}>
label={getLangText('Artist Bio')}
expanded={editable || !!piece.extra_data.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_bio}
@ -190,7 +199,8 @@ let MarketAdditionalDataForm = React.createClass({
</Property>
<Property
name='work_description'
label={getLangText('Work Description')}>
label={getLangText('Work Description')}
expanded={editable || !!piece.extra_data.work_description}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.work_description}
@ -199,7 +209,8 @@ let MarketAdditionalDataForm = React.createClass({
</Property>
<Property
name='technology_details'
label={getLangText('Technology Details')}>
label={getLangText('Technology Details')}
expanded={editable || !!piece.extra_data.technology_details}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.technology_details}
@ -208,7 +219,8 @@ let MarketAdditionalDataForm = React.createClass({
</Property>
<Property
name='display_instructions'
label={getLangText('Display Instructions')}>
label={getLangText('Display Instructions')}
expanded={editable || !!piece.extra_data.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.display_instructions}
@ -220,7 +232,7 @@ let MarketAdditionalDataForm = React.createClass({
} else {
return (
<div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='lg' />
{spinner}
</div>
);
}

View File

@ -82,7 +82,7 @@ let MarketRegisterPiece = React.createClass({
handleAdditionalDataSuccess() {
this.refreshPieceList();
this.history.pushState(null, `/collection`);
this.history.pushState(null, '/collection');
},
// We need to increase the step to lock the forms that are already filled out

View File

@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
}
}
.spinner-wrapper-white {
color: $ascribe-white;
.spinner-circle {
border-color: $ascribe-white;
}
}
.spinner-wrapper-lg {
width: $ascribe--spinner-size-lg;
height: $ascribe--spinner-size-lg;
@ -146,4 +153,4 @@ $ascribe--spinner-size-sm: 15px;
40% { color: $ascribe-blue; }
60% { color: $ascribe-light-blue; }
80% { color: $ascribe-pink; }
}
}

View File

@ -331,6 +331,9 @@ $vivi23--highlight-color: #de2600;
.spinner-inner {
display: none;
}
.btn-secondary .spinner-circle {
border-color: $vivi23--bg-color;
}
// video player
.ascribe-media-player .vjs-default-skin {