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

Merge remote-tracking branch 'remotes/origin/AD-716-aclbutton-doesnt-respect-modals-r'

Browse Source 
Conflicts:
	js/components/settings_container.js
This commit is contained in:
diminator 2015-08-10 17:07:15 +02:00
commit bdeef598eb
52 changed files with 786 additions and 850 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/refactor-todo.md
View File

@ -2,16 +2,18 @@
*This should be a living document. So if you have any ideas for refactoring stuff, then feel free to add them to this document*
- Get rid of all Mixins. (making good progress there :))
- Make all standalone components independent from things like global utilities (GeneralUtils is maybe used in table for example)
- Check if all polyfills are appropriately initialized and available: Compare to this
- Extract all standalone components to their own folder structure and write application independent tests (+ figure out how to do that in a productive way) (fetch lib especially)
- Refactor forms to generic-declarative form component
- Check for mobile compatibility: Is site responsive anywhere?
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
# Refactor DONE
- Refactor forms to generic-declarative form component ✓
- Get rid of all Mixins (inject head is fine) ✓
- Check if all polyfills are appropriately initialized and available: Compare to this ✓
## React-S3-Fineuploader
- implementation should enable to define all important methods outside
- and: maybe create a utility class for all methods to avoid code duplication

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

@ -13,8 +13,10 @@ import AppConstants from '../../constants/application_constants';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import { getLangText } from '../../utils/lang_utils.js';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import { getAclFormMessage } from '../../utils/form_utils';
import { getLangText } from '../../utils/lang_utils';
let AclButton = React.createClass({
propTypes: {
@ -34,15 +36,18 @@ let AclButton = React.createClass({
},
actionProperties(){
let message = getAclFormMessage(this.props.action, this.getTitlesString(), this.props.currentUser.username);
if (this.props.action === 'acl_consign'){
return {
title: getLangText('Consign artwork'),
tooltip: getLangText('Have someone else sell the artwork'),
form: (
<ConsignForm
message={this.getConsignMessage()}
message={message}
id={this.getFormDataId()}
url={apiUrls.ownership_consigns}/>
url={ApiUrls.ownership_consigns}/>
),
handleSuccess: this.showNotification
};
@ -53,9 +58,9 @@ let AclButton = React.createClass({
tooltip: getLangText('Have the owner manage his sales again'),
form: (
<UnConsignForm
message={this.getUnConsignMessage()}
message={message}
id={this.getFormDataId()}
url={apiUrls.ownership_unconsigns}/>
url={ApiUrls.ownership_unconsigns}/>
),
handleSuccess: this.showNotification
};
@ -65,9 +70,9 @@ let AclButton = React.createClass({
tooltip: getLangText('Transfer the ownership of the artwork'),
form: (
<TransferForm
message={this.getTransferMessage()}
message={message}
id={this.getFormDataId()}
url={apiUrls.ownership_transfers}/>
url={ApiUrls.ownership_transfers}/>
),
handleSuccess: this.showNotification
};
@ -77,9 +82,9 @@ let AclButton = React.createClass({
title: getLangText('Loan artwork'),
tooltip: getLangText('Loan your artwork for a limited period of time'),
form: (<LoanForm
message={this.getLoanMessage()}
message={message}
id={this.getFormDataId()}
url={this.isPiece() ? apiUrls.ownership_loans_pieces : apiUrls.ownership_loans_editions}/>
url={this.isPiece() ? ApiUrls.ownership_loans_pieces : ApiUrls.ownership_loans_editions}/>
),
handleSuccess: this.showNotification
};
@ -90,9 +95,9 @@ let AclButton = React.createClass({
tooltip: getLangText('Share the artwork'),
form: (
<ShareForm
message={this.getShareMessage()}
message={message}
id={this.getFormDataId()}
url={this.isPiece() ? apiUrls.ownership_shares_pieces : apiUrls.ownership_shares_editions }/>
url={this.isPiece() ? ApiUrls.ownership_shares_pieces : ApiUrls.ownership_shares_editions }/>
),
handleSuccess: this.showNotification
};
@ -133,76 +138,6 @@ let AclButton = React.createClass({
}
},
// plz move to transfer form
getTransferMessage(){
return (
`${getLangText('Hi')},
${getLangText('I transfer ownership of')}:
${this.getTitlesString()} ${getLangText('to you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
);
},
// plz move to transfer form
getLoanMessage(){
return (
`${getLangText('Hi')},
${getLangText('I loan')}:
${this.getTitlesString()} ${getLangText('to you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
);
},
// plz move to consign form
getConsignMessage(){
return (
`${getLangText('Hi')},
${getLangText('I consign')}:
${this.getTitlesString()} ${getLangText('to you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
);
},
// plz move to consign form
getUnConsignMessage(){
return (
`${getLangText('Hi')},
${getLangText('I un-consign')}:
${this.getTitlesString()} ${getLangText('from you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
);
},
// plz move to share form
getShareMessage(){
return (
`${getLangText('Hi')},
${getLangText('I am sharing')}:
${this.getTitlesString()} ${getLangText('with you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
);
},
// Removes the acl_ prefix and converts to upper case
sanitizeAction() {
return this.props.action.split('acl_')[1].toUpperCase();
@ -214,14 +149,13 @@ ${this.props.currentUser.username}
return (
<ModalWrapper
button={
trigger={
<button className={shouldDisplay ? 'btn btn-default btn-sm ' : 'hidden'}>
{this.sanitizeAction()}
</button>
}
handleSuccess={aclProps.handleSuccess}
title={aclProps.title}
tooltip={aclProps.tooltip}>
title={aclProps.title}>
{aclProps.form}
</ModalWrapper>
);

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

@ -26,7 +26,7 @@ let DeleteButton = React.createClass({
mixins: [Router.Navigation],
render: function () {
render() {
let availableAcls;
let btnDelete;
let content;
@ -61,13 +61,14 @@ let DeleteButton = React.createClass({
}
btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('REMOVE FROM COLLECTION')}</Button>;
}
else {
} else {
return null;
}
return (
<ModalWrapper
button={btnDelete}
trigger={btnDelete}
handleSuccess={this.props.handleSuccess}
title={title}>
{content}
@ -77,4 +78,3 @@ let DeleteButton = React.createClass({
});
export default DeleteButton;

9
js/components/ascribe_buttons/unconsign_request_button.js
View File

@ -8,7 +8,7 @@ import ModalWrapper from '../ascribe_modal/modal_wrapper';
import UnConsignRequestForm from './../ascribe_forms/form_unconsign_request';
import { getLangText } from '../../utils/lang_utils.js';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
let UnConsignRequestButton = React.createClass({
@ -21,16 +21,15 @@ let UnConsignRequestButton = React.createClass({
render: function () {
return (
<ModalWrapper
button={
trigger={
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
REQUEST UNCONSIGN
</Button>
}
handleSuccess={this.props.handleSuccess}
title='Request to Un-Consign'
tooltip='Ask the consignee to return the ownership of the work back to you'>
title='Request to Un-Consign'>
<UnConsignRequestForm
url={apiUrls.ownership_unconsigns_request}
url={ApiUrls.ownership_unconsigns_request}
id={{'bitcoin_id': this.props.edition.bitcoin_id}}
message={`${getLangText('Hi')},

29
js/components/ascribe_collapsible/collapsible_paragraph.js
View File

@ -2,13 +2,10 @@
import React from 'react';
import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
import classNames from 'classnames';
import Panel from 'react-bootstrap/lib/Panel';
const CollapsibleParagraph = React.createClass({
propTypes: {
title: React.PropTypes.string,
children: React.PropTypes.oneOfType([
@ -20,18 +17,14 @@ const CollapsibleParagraph = React.createClass({
getDefaultProps() {
return {
show: true
show: false
};
},
mixins: [CollapsibleMixin],
getCollapsibleDOMNode(){
return React.findDOMNode(this.refs.panel);
},
getCollapsibleDimensionValue(){
return React.findDOMNode(this.refs.panel).scrollHeight;
getInitialState() {
return {
expanded: false
};
},
handleToggle(e){
@ -40,8 +33,7 @@ const CollapsibleParagraph = React.createClass({
},
render() {
let styles = this.getCollapsibleClassSet();
let text = this.isExpanded() ? '-' : '+';
let text = this.state.expanded ? '-' : '+';
if(this.props.show) {
return (
@ -50,9 +42,12 @@ const CollapsibleParagraph = React.createClass({
<div onClick={this.handleToggle}>
<span>{text} {this.props.title}</span>
</div>
<div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
<Panel
collapsible
expanded={this.state.expanded}
className="ascribe-edition-collapsible-content">
{this.props.children}
</div>
</Panel>
</div>
</div>
);

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

@ -36,7 +36,7 @@ import DeleteButton from '../ascribe_buttons/delete_button';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
@ -233,10 +233,11 @@ let EditionSummary = React.createClass({
if (this.props.edition.status.length > 0 && this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer) {
withdrawButton = (
<Form
url={apiUrls.ownership_transfers_withdraw}
url={ApiUrls.ownership_transfers_withdraw}
getFormData={this.getTransferWithdrawData}
handleSuccess={this.showNotification}
className='inline'>
className='inline'
isInline={true}>
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
WITHDRAW TRANSFER
</Button>
@ -335,7 +336,7 @@ let EditionPersonalNote = React.createClass({
if (this.props.currentUser.username && true || false) {
return (
<Form
url={apiUrls.note_notes}
url={ApiUrls.note_notes}
handleSuccess={this.showNotification}>
<Property
name='note'
@ -373,7 +374,7 @@ let EditionPublicEditionNote = React.createClass({
if (isEditable || this.props.edition.public_note){
return (
<Form
url={apiUrls.note_edition}
url={ApiUrls.note_edition}
handleSuccess={this.showNotification}>
<Property
name='note'

4
js/components/ascribe_detail/further_details.js
View File

@ -16,7 +16,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getCookie } from '../../utils/fetch_api_utils';
@ -133,7 +133,7 @@ let FileUploader = React.createClass({
pieceId: this.props.pieceId
}}
createBlobRoutine={{
url: apiUrls.blob_otherdatas,
url: ApiUrls.blob_otherdatas,
pieceId: this.props.pieceId
}}
validation={{

5
js/components/ascribe_forms/create_editions_form.js
View File

@ -8,12 +8,11 @@ import Property from '../ascribe_forms/property';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import { getLangText } from '../../utils/lang_utils';
let CreateEditionsForm = React.createClass({
propTypes: {
handleSuccess: React.PropTypes.func,
pieceId: React.PropTypes.number
@ -38,7 +37,7 @@ let CreateEditionsForm = React.createClass({
return (
<Form
ref='form'
url={apiUrls.editions}
url={ApiUrls.editions}
getFormData={this.getFormData}
handleSuccess={this.handleSuccess}
spinner={

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

@ -6,6 +6,9 @@ import ReactAddons from 'react/addons';
import Button from 'react-bootstrap/lib/Button';
import AlertDismissable from './alert';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import requests from '../../utils/requests';
import { getLangText } from '../../utils/lang_utils';
@ -15,20 +18,30 @@ import { mergeOptionsWithDuplicates } from '../../utils/general_utils';
let Form = React.createClass({
propTypes: {
url: React.PropTypes.string,
buttons: React.PropTypes.object,
method: React.PropTypes.string,
buttonSubmitText: React.PropTypes.string,
spinner: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
getFormData: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
]),
className: React.PropTypes.string
className: React.PropTypes.string,
spinner: React.PropTypes.element,
buttons: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
]),
// You can use the form for inline requests, like the submit click on a button.
// For the form to then not display the error on top, you need to enable this option.
// It will make use of the GlobalNotification
isInline: React.PropTypes.bool
},
getDefaultProps() {
return {
method: 'post',
buttonSubmitText: 'SAVE'
};
},
@ -40,6 +53,7 @@ let Form = React.createClass({
errors: []
};
},
reset(){
for (let ref in this.refs){
if (typeof this.refs[ref].reset === 'function'){
@ -48,22 +62,38 @@ let Form = React.createClass({
}
this.setState(this.getInitialState());
},
submit(event){
if (event) {
if(event) {
event.preventDefault();
}
this.setState({submitted: true});
this.clearErrors();
let action = (this.httpVerb && this.httpVerb()) || 'post';
window.setTimeout(() => this[action](), 100);
// selecting http method based on props
if(this[this.props.method]) {
window.setTimeout(() => this[this.props.method](), 100);
} else {
throw new Error('This HTTP method is not supported by form.js (' + this.props.method + ')');
}
},
post(){
post() {
requests
.post(this.props.url, { body: this.getFormData() })
.then(this.handleSuccess)
.catch(this.handleError);
},
delete() {
requests
.delete(this.props.url, this.getFormData())
.then(this.handleSuccess)
.catch(this.handleError);
},
getFormData(){
let data = {};
for (let ref in this.refs){
@ -79,6 +109,7 @@ let Form = React.createClass({
handleChangeChild(){
this.setState({edited: true});
},
handleSuccess(response){
if ('handleSuccess' in this.props){
this.props.handleSuccess(response);
@ -88,8 +119,12 @@ let Form = React.createClass({
this.refs[ref].handleSuccess();
}
}
this.setState({edited: false, submitted: false});
this.setState({
edited: false,
submitted: false
});
},
handleError(err){
if (err.json) {
for (var input in err.json.errors){
@ -109,10 +144,18 @@ let Form = React.createClass({
}
console.logGlobal(err, false, formData);
this.setState({errors: [getLangText('Something went wrong, please try again later')]});
if(this.props.isInline) {
let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
GlobalNotificationActions.appendGlobalNotification(notification);
} else {
this.setState({errors: [getLangText('Something went wrong, please try again later')]});
}
}
this.setState({submitted: false});
},
clearErrors(){
for (var ref in this.refs){
if ('clearErrors' in this.refs[ref]){
@ -121,6 +164,7 @@ let Form = React.createClass({
}
this.setState({errors: []});
},
getButtons() {
if (this.state.submitted){
return this.props.spinner;
@ -143,6 +187,7 @@ let Form = React.createClass({
}
return buttons;
},
getErrors() {
let errors = null;
if (this.state.errors.length > 0){
@ -152,6 +197,7 @@ let Form = React.createClass({
}
return errors;
},
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
if (child) {
@ -162,6 +208,7 @@ let Form = React.createClass({
}
});
},
render() {
let className = 'ascribe-form';

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

@ -8,7 +8,6 @@ import Form from './form';
import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js';
@ -18,7 +17,6 @@ let ConsignForm = React.createClass({
url: React.PropTypes.string,
id: React.PropTypes.object,
message: React.PropTypes.string,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
@ -27,7 +25,6 @@ let ConsignForm = React.createClass({
},
render() {
return (
<Form
ref='form'
@ -39,11 +36,9 @@ let ConsignForm = React.createClass({
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('CONSIGN')}</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
type="submit">
{getLangText('CONSIGN')}
</Button>
</p>
</div>}
spinner={

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

@ -2,33 +2,65 @@
import React from 'react';
import requests from '../../utils/requests';
import Form from './form';
import ApiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
let EditionDeleteForm = React.createClass({
mixins: [FormMixin],
propTypes: {
editions: React.PropTypes.arrayOf(React.PropTypes.object),
url() {
return requests.prepareUrl(ApiUrls.edition_delete, {edition_id: this.getBitcoinIds().join()});
},
httpVerb(){
return 'delete';
// Propagated by ModalWrapper in most cases
handleSuccess: React.PropTypes.func
},
renderForm () {
getBitcoinIds() {
return this.props.editions.map(function(edition){
return edition.bitcoin_id;
});
},
// Since this form can be used for either deleting a single edition or multiple
// we need to call getBitcoinIds to get the value of edition_id
getFormData() {
return {
edition_id: this.getBitcoinIds().join(',')
};
},
render () {
return (
<div className="modal-body">
<Form
ref='form'
url={ApiUrls.edition_delete}
getFormData={this.getFormData}
method="delete"
handleSuccess={this.props.handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">
<button
type="submit"
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
onClick={this.submit}>
{getLangText('YES, DELETE')}
</button>
</p>
</div>
}
spinner={
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>
}>
<p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
<div className="modal-footer">
<button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, DELETE')}</button>
<button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
</div>
</div>
</Form>
);
}
});

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

@ -2,37 +2,56 @@
import React from 'react';
import requests from '../../utils/requests';
import Form from '../ascribe_forms/form';
import ApiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
let PieceDeleteForm = React.createClass({
propTypes: {
pieceId: React.PropTypes.number
pieceId: React.PropTypes.number,
// Propagated by ModalWrapper in most cases
handleSuccess: React.PropTypes.func
},
mixins: [FormMixin],
url() {
return requests.prepareUrl(ApiUrls.piece, {piece_id: this.props.pieceId});
getFormData() {
return {
piece_id: this.props.pieceId
};
},
httpVerb() {
return 'delete';
},
renderForm () {
render() {
return (
<div className="modal-body">
<Form
ref='form'
url={ApiUrls.piece}
getFormData={this.getFormData}
method="delete"
handleSuccess={this.props.handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">
<button
type="submit"
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
onClick={this.submit}>
{getLangText('YES, DELETE')}
</button>
</p>
</div>
}
spinner={
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>
}>
<p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
<div className="modal-footer">
<button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, DELETE')}</button>
<button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
</div>
</div>
</Form>
);
}
});

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

@ -23,7 +23,6 @@ let LoanForm = React.createClass({
url: React.PropTypes.string,
id: React.PropTypes.object,
message: React.PropTypes.string,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
@ -101,11 +100,9 @@ let LoanForm = React.createClass({
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('LOAN')}</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
type="submit">
{getLangText('LOAN')}
</Button>
</p>
</div>}
spinner={

10
js/components/ascribe_forms/form_login.js
View File

@ -11,16 +11,14 @@ import UserActions from '../../actions/user_actions';
import Form from './form';
import Property from './property';
import FormPropertyHeader from './form_property_header';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
let LoginForm = React.createClass({
propTypes: {
headerMessage: React.PropTypes.string,
submitMessage: React.PropTypes.string,
@ -101,7 +99,7 @@ let LoginForm = React.createClass({
<Form
className="ascribe-form-bordered"
ref="loginForm"
url={apiUrls.users_login}
url={ApiUrls.users_login}
handleSuccess={this.handleSuccess}
buttons={
<button
@ -114,9 +112,9 @@ let LoginForm = React.createClass({
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</span>
}>
<FormPropertyHeader>
<div className="ascribe-form-header">
<h3>{this.props.headerMessage}</h3>
</FormPropertyHeader>
</div>
<Property
name='email'
label={getLangText('Email')}>

10
js/components/ascribe_forms/form_piece_extradata.js
View File

@ -3,9 +3,9 @@
import React from 'react';
import requests from '../../utils/requests';
import { getLangText } from '../../utils/lang_utils.js'
import { getLangText } from '../../utils/lang_utils.js';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import Form from './form';
import Property from './property';
@ -20,7 +20,8 @@ let PieceExtraDataForm = React.createClass({
title: React.PropTypes.string,
editable: React.PropTypes.bool
},
getFormData(){
getFormData() {
let extradata = {};
extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
return {
@ -28,12 +29,13 @@ let PieceExtraDataForm = React.createClass({
piece_id: this.props.pieceId
};
},
render() {
let defaultValue = this.props.extraData[this.props.name] || '';
if (defaultValue.length === 0 && !this.props.editable){
return null;
}
let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.pieceId});
let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId});
return (
<Form
ref='form'

22
js/components/ascribe_forms/form_property_header.js
View File

@ -1,22 +0,0 @@
'use strict';
import React from 'react';
let FormPropertyHeader = React.createClass({
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
])
},
render() {
return (
<div className="ascribe-form-header">
{this.props.children}
</div>
);
}
});
export default FormPropertyHeader;

11
js/components/ascribe_forms/form_register_piece.js
View File

@ -7,12 +7,11 @@ import UserActions from '../../actions/user_actions';
import Form from './form';
import Property from './property';
import FormPropertyHeader from './form_property_header';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import AppConstants from '../../constants/application_constants';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
@ -96,7 +95,7 @@ let RegisterPieceForm = React.createClass({
<Form
className="ascribe-form-bordered"
ref='form'
url={apiUrls.pieces_list}
url={ApiUrls.pieces_list}
getFormData={this.getFormData}
handleSuccess={this.props.handleSuccess}
buttons={<button
@ -110,9 +109,9 @@ let RegisterPieceForm = React.createClass({
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</span>
}>
<FormPropertyHeader>
<div className="ascribe-form-header">
<h3>{this.props.headerMessage}</h3>
</FormPropertyHeader>
</div>
<Property
ignoreFocus={true}>
<FileUploader
@ -180,7 +179,7 @@ let FileUploader = React.createClass({
fileClass: 'digitalwork'
}}
createBlobRoutine={{
url: apiUrls.blob_digitalworks
url: ApiUrls.blob_digitalworks
}}
submitKey={this.props.submitKey}
validation={{

69
js/components/ascribe_forms/form_remove_editions_from_collection.js
View File

@ -2,34 +2,63 @@
import React from 'react';
import { getLangText } from '../../utils/lang_utils.js';
import requests from '../../utils/requests';
import apiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin';
import Form from './form';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
let EditionRemoveFromCollectionForm = React.createClass({
propTypes: {
editions: React.PropTypes.arrayOf(React.PropTypes.object),
mixins: [FormMixin],
url() {
return requests.prepareUrl(apiUrls.edition_remove_from_collection, {edition_id: this.getBitcoinIds().join()});
},
httpVerb(){
return 'delete';
// Propagated by ModalWrapper in most cases
handleSuccess: React.PropTypes.func
},
renderForm () {
getBitcoinIds() {
return this.props.editions.map(function(edition){
return edition.bitcoin_id;
});
},
// Since this form can be used for either removing a single edition or multiple
// we need to call getBitcoinIds to get the value of edition_id
getFormData() {
return {
edition_id: this.getBitcoinIds().join(',')
};
},
render() {
return (
<div className="modal-body">
<Form
ref='form'
url={ApiUrls.edition_remove_from_collection}
getFormData={this.getFormData}
method="delete"
handleSuccess={this.props.handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">
<button
type="submit"
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
onClick={this.submit}>
{getLangText('YES, REMOVE')}
</button>
</p>
</div>
}
spinner={
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>
}>
<p>{getLangText('Are you sure you would like to remove these editions from your collection')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
<div className="modal-footer">
<button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, REMOVE')}</button>
<button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
</div>
</div>
</Form>
);
}
});

62
js/components/ascribe_forms/form_remove_piece_from_collection.js
View File

@ -2,38 +2,56 @@
import React from 'react';
import { getLangText } from '../../utils/lang_utils.js';
import requests from '../../utils/requests';
import apiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin';
import Form from './form';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
let PieceRemoveFromCollectionForm = React.createClass({
propTypes: {
pieceId: React.PropTypes.number
pieceId: React.PropTypes.number,
// Propagated by ModalWrapper in most cases
handleSuccess: React.PropTypes.func
},
mixins: [FormMixin],
url() {
return requests.prepareUrl(apiUrls.piece_remove_from_collection, {piece_id: this.props.pieceId});
},
httpVerb(){
return 'delete';
getFormData() {
return {
piece_id: this.props.pieceId
};
},
renderForm () {
render () {
return (
<div className="modal-body">
<Form
ref='form'
url={ApiUrls.piece_remove_from_collection}
getFormData={this.getFormData}
method="delete"
handleSuccess={this.props.handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">
<button
type="submit"
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
onClick={this.submit}>
{getLangText('YES, REMOVE')}
</button>
</p>
</div>
}
spinner={
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>
}>
<p>{getLangText('Are you sure you would like to remove this piece from your collection')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
<div className="modal-footer">
<button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, REMOVE')}</button>
<button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
</div>
</div>
</Form>
);
}
});

174
js/components/ascribe_forms/form_request_action.js
View File

@ -2,48 +2,48 @@
import React from 'react';
import Alert from 'react-bootstrap/lib/Alert';
import apiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin';
import AclButton from './../ascribe_buttons/acl_button';
import ActionPanel from '../ascribe_panel/action_panel';
import Form from './form';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js';
let RequestActionForm = React.createClass({
mixins: [FormMixin],
url(e){
let edition = this.props.editions[0];
if (e.target.id === 'request_accept'){
if (edition.request_action === 'consign'){
return apiUrls.ownership_consigns_confirm;
}
else if (edition.request_action === 'unconsign'){
return apiUrls.ownership_unconsigns;
}
else if (edition.request_action === 'loan'){
return apiUrls.ownership_loans_confirm;
}
}
else if(e.target.id === 'request_deny'){
if (edition.request_action === 'consign') {
return apiUrls.ownership_consigns_deny;
}
else if (edition.request_action === 'unconsign') {
return apiUrls.ownership_unconsigns_deny;
}
else if (edition.request_action === 'loan') {
return apiUrls.ownership_loans_deny;
}
}
let RequestActionForm = React.createClass({
propTypes: {
editions: React.PropTypes.arrayOf(React.PropTypes.object),
currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func
},
handleRequest: function(e){
e.preventDefault();
this.submit(e);
getUrls() {
let edition = this.props.editions[0];
let urls = {};
if (edition.request_action === 'consign'){
urls.accept = ApiUrls.ownership_consigns_confirm;
urls.deny = ApiUrls.ownership_consigns_deny;
} else if (edition.request_action === 'unconsign'){
urls.accept = ApiUrls.ownership_unconsigns;
urls.deny = ApiUrls.ownership_unconsigns_deny;
} else if (edition.request_action === 'loan'){
urls.accept = ApiUrls.ownership_loans_confirm;
urls.deny = ApiUrls.ownership_loans_deny;
}
return urls;
},
getBitcoinIds(){
return this.props.editions.map(function(edition){
return edition.bitcoin_id;
});
},
getFormData() {
@ -52,16 +52,35 @@ let RequestActionForm = React.createClass({
};
},
renderForm() {
showNotification(option, action, owner) {
return () => {
let message = getLangText('You have successfully') + ' ' + option + ' the ' + action + ' request ' + getLangText('from') + ' ' + owner;
let notification = new GlobalNotificationModel(message, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
if(this.props.handleSuccess) {
this.props.handleSuccess();
}
};
},
getContent() {
let edition = this.props.editions[0];
let buttonAccept = (
<div id="request_accept"
onClick={this.handleRequest}
className='btn btn-default btn-sm ascribe-margin-1px'>{getLangText('ACCEPT')}
</div>);
if (edition.request_action === 'unconsign'){
console.log(this.props)
buttonAccept = (
let message = edition.owner + ' ' + getLangText('requests you') + ' ' + edition.request_action + ' ' + getLangText('this edition%s', '.');
return (
<span>
{message}
</span>
);
},
getAcceptButtonForm(urls) {
let edition = this.props.editions[0];
if(edition.request_action === 'unconsign') {
return (
<AclButton
availableAcls={{'acl_unconsign': true}}
action="acl_unconsign"
@ -69,31 +88,54 @@ let RequestActionForm = React.createClass({
currentUser={this.props.currentUser}
handleSuccess={this.props.handleSuccess} />
);
}
let buttons = (
<span>
<span>
{buttonAccept}
</span>
<span>
<div id="request_deny" onClick={this.handleRequest} className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>{getLangText('REJECT')}</div>
</span>
</span>
);
if (this.state.submitted){
buttons = (
<span>
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
</span>
} else {
return (
<Form
url={urls.accept}
getFormData={this.getFormData}
handleSuccess={this.showNotification(getLangText('accepted'), edition.request_action, edition.owner)}
isInline={true}
className='inline pull-right'>
<button
type="submit"
className='btn btn-default btn-sm ascribe-margin-1px'>
{getLangText('ACCEPT')}
</button>
</Form>
);
}
},
getButtonForm() {
let edition = this.props.editions[0];
let urls = this.getUrls();
let acceptButtonForm = this.getAcceptButtonForm(urls);
return (
<Alert bsStyle='warning'>
<div style={{textAlign: 'center'}}>
<div>{ edition.owner } {getLangText('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div>
{buttons}
</div>
</Alert>
<div>
<Form
url={urls.deny}
isInline={true}
getFormData={this.getFormData}
handleSuccess={this.showNotification(getLangText('denied'), edition.request_action, edition.owner)}
className='inline pull-right'>
<button
type="submit"
className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>
{getLangText('REJECT')}
</button>
</Form>
{acceptButtonForm}
</div>
);
},
render() {
return (
<ActionPanel
content={this.getContent()}
buttons={this.getButtonForm()}/>
);
}
});

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

@ -2,14 +2,14 @@
import React from 'react';
import Form from './form';
import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
import Button from 'react-bootstrap/lib/Button';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js';
@ -20,7 +20,6 @@ let ShareForm = React.createClass({
message: React.PropTypes.string,
editions: React.PropTypes.array,
currentUser: React.PropTypes.object,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
@ -41,11 +40,9 @@ let ShareForm = React.createClass({
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">SHARE</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>CLOSE</Button>
type="submit">
SHARE
</Button>
</p>
</div>}
spinner={

15
js/components/ascribe_forms/form_signup.js
View File

@ -12,10 +12,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
import Form from './form';
import Property from './property';
import FormPropertyHeader from './form_property_header';
import InputCheckbox from './input_checkbox';
import apiUrls from '../../constants/api_urls';
import ApiUrls from '../../constants/api_urls';
let SignupForm = React.createClass({
@ -56,10 +55,6 @@ let SignupForm = React.createClass({
}
},
getFormData() {
return this.getQuery();
},
handleSuccess(response){
if (response.user) {
let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
@ -80,8 +75,8 @@ let SignupForm = React.createClass({
<Form
className="ascribe-form-bordered"
ref='form'
url={apiUrls.users_signup}
getFormData={this.getFormData}
url={ApiUrls.users_signup}
getFormData={this.getQuery}
handleSuccess={this.handleSuccess}
buttons={
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
@ -92,9 +87,9 @@ let SignupForm = React.createClass({
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</span>
}>
<FormPropertyHeader>
<div className="ascribe-form-header">
<h3>{this.props.headerMessage}</h3>
</FormPropertyHeader>
</div>
<Property
name='email'
label={getLangText('Email')}>

10
js/components/ascribe_forms/form_submit_to_prize.js
View File

@ -19,10 +19,7 @@ import requests from '../../utils/requests';
let PieceSubmitToPrizeForm = React.createClass({
propTypes: {
piece: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
// this is set by ModalWrapper automatically
onRequestHide: React.PropTypes.func
handleSuccess: React.PropTypes.func
},
render() {
@ -36,7 +33,9 @@ let PieceSubmitToPrizeForm = React.createClass({
<p className="pull-right">
<button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('SUBMIT TO PRIZE')}</button>
type="submit">
{getLangText('SUBMIT TO PRIZE')}
</button>
</p>
</div>}
spinner={
@ -80,7 +79,6 @@ let PieceSubmitToPrizeForm = React.createClass({
<p>{getLangText('Are you sure you want to submit to the prize?')}</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
</Alert>
</Form>
);
}

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

@ -21,7 +21,6 @@ let TransferForm = React.createClass({
message: React.PropTypes.string,
editions: React.PropTypes.array,
currentUser: React.PropTypes.object,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
@ -42,11 +41,9 @@ let TransferForm = React.createClass({
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('TRANSFER')}</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
type="submit">
{getLangText('TRANSFER')}
</Button>
</p>
</div>}
spinner={

9
js/components/ascribe_forms/form_unconsign.js
View File

@ -18,7 +18,6 @@ let UnConsignForm = React.createClass({
id: React.PropTypes.object,
message: React.PropTypes.string,
editions: React.PropTypes.array,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
@ -39,11 +38,9 @@ let UnConsignForm = React.createClass({
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('UNCONSIGN')}</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
type="submit">
{getLangText('UNCONSIGN')}
</Button>
</p>
</div>}
spinner={

10
js/components/ascribe_forms/form_unconsign_request.js
View File

@ -3,7 +3,6 @@
import React from 'react';
import Button from 'react-bootstrap/lib/Button';
import Alert from 'react-bootstrap/lib/Alert';
import Form from './form';
import Property from './property';
@ -19,7 +18,6 @@ let UnConsignRequestForm = React.createClass({
url: React.PropTypes.string,
id: React.PropTypes.object,
message: React.PropTypes.string,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
@ -40,11 +38,9 @@ let UnConsignRequestForm = React.createClass({
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('REQUEST UNCONSIGN')}</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
type="submit">
{getLangText('REQUEST UNCONSIGN')}
</Button>
</p>
</div>}
spinner={

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

@ -7,7 +7,8 @@ import DatePicker from 'react-datepicker/dist/react-datepicker';
let InputDate = React.createClass({
propTypes: {
submitted: React.PropTypes.bool,
placeholderText: React.PropTypes.string
placeholderText: React.PropTypes.string,
onChange: React.PropTypes.func
},
getInitialState() {

1
js/components/ascribe_forms/input_textarea_toggable.js
View File

@ -5,7 +5,6 @@ import React from 'react';
import TextareaAutosize from 'react-textarea-autosize';
let InputTextAreaToggable = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
rows: React.PropTypes.number.isRequired,

25
js/components/ascribe_forms/property_collapsible.js
View File

@ -3,11 +3,9 @@
import React from 'react';
import ReactAddons from 'react/addons';
import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import classNames from 'classnames';
import Panel from 'react-bootstrap/lib/Panel';
let PropertyCollapsile = React.createClass({
@ -17,22 +15,12 @@ let PropertyCollapsile = React.createClass({
tooltip: React.PropTypes.string
},
mixins: [CollapsibleMixin],
getInitialState() {
return {
show: false
};
},
getCollapsibleDOMNode(){
return React.findDOMNode(this.refs.panel);
},
getCollapsibleDimensionValue(){
return React.findDOMNode(this.refs.panel).scrollHeight;
},
handleFocus() {
this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
this.setState({
@ -85,11 +73,14 @@ let PropertyCollapsile = React.createClass({
<span className="checkbox"> {this.props.checkboxLabel}</span>
</div>
</OverlayTrigger>
<div
className={classNames(this.getCollapsibleClassSet()) + ' ascribe-settings-property'}
ref="panel">
<Panel
collapsible
expanded={this.state.show}
className="bs-custom-panel">
<div className="ascribe-settings-property">
{this.renderChildren()}
</div>
</div>
</Panel>
</div>
);
}

11
js/components/ascribe_modal/modal_password_request_reset.js
View File

@ -7,9 +7,13 @@ import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_reque
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import { getLangText } from '../../utils/lang_utils.js'
import { getLangText } from '../../utils/lang_utils.js';
let PasswordResetRequestModal = React.createClass({
propTypes: {
button: React.PropTypes.element
},
handleResetSuccess(){
let notificationText = getLangText('Request successfully sent, check your email');
let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
@ -18,10 +22,9 @@ let PasswordResetRequestModal = React.createClass({
render() {
return (
<ModalWrapper
button={this.props.button}
trigger={this.props.button}
title={getLangText('Reset your password')}
handleSuccess={this.handleResetSuccess}
tooltip={getLangText('Reset your password')}>
handleSuccess={this.handleResetSuccess}>
<PasswordResetRequestForm />
</ModalWrapper>
);

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

@ -4,92 +4,74 @@ import React from 'react';
import ReactAddons from 'react/addons';
import Modal from 'react-bootstrap/lib/Modal';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import ModalMixin from '../../mixins/modal_mixin';
let ModalWrapper = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
onRequestHide: React.PropTypes.func,
trigger: React.PropTypes.element.isRequired,
title: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element,
React.PropTypes.string
]).isRequired,
handleSuccess: React.PropTypes.func.isRequired,
button: React.PropTypes.object.isRequired,
children: React.PropTypes.object,
tooltip: React.PropTypes.string
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
])
},
getModalTrigger() {
return (
<ModalTrigger modal={
<ModalBody
title={this.props.title}
handleSuccess={this.props.handleSuccess}>
{this.props.children}
</ModalBody>
}>
{this.props.button}
</ModalTrigger>
);
getInitialState() {
return {
showModal: false
};
},
render() {
if(this.props.tooltip) {
return (
<OverlayTrigger
delay={500}
placement="left"
overlay={<Tooltip>{this.props.tooltip}</Tooltip>}>
{this.getModalTrigger()}
</OverlayTrigger>
);
} else {
return (
<span>
{/* This needs to be some kind of inline-block */}
{this.getModalTrigger()}
</span>
);
}
}
});
let ModalBody = React.createClass({
propTypes: {
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func,
children: React.PropTypes.object,
title: React.PropTypes.string.isRequired
show() {
this.setState({
showModal: true
});
},
mixins: [ModalMixin],
hide() {
this.setState({
showModal: false
});
},
handleSuccess(response){
this.props.handleSuccess(response);
this.props.onRequestHide();
this.hide();
},
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
onRequestHide: this.props.onRequestHide,
handleSuccess: this.handleSuccess
});
});
},
render() {
// this adds the onClick method show of modal_wrapper to the trigger component
// which is in most cases a button.
let trigger = React.cloneElement(this.props.trigger, {onClick: this.show});
return (
<Modal {...this.props} title={this.props.title}>
<div className="modal-body">
{this.renderChildren()}
</div>
</Modal>
<span>
{trigger}
<Modal show={this.state.showModal} onHide={this.hide}>
<Modal.Header closeButton>
<Modal.Title>
{this.props.title}
</Modal.Title>
</Modal.Header>
<div className="modal-body">
{this.renderChildren()}
</div>
</Modal>
</span>
);
}
});
export default ModalWrapper;

39
js/components/ascribe_panel/action_panel.js
View File

@ -1,12 +1,15 @@
'use strict';
import React from 'react';
import classnames from 'classnames';
let ActionPanel = React.createClass({
propTypes: {
title: React.PropTypes.string,
content: React.PropTypes.string,
content: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
buttons: React.PropTypes.element,
onClick: React.PropTypes.func,
ignoreFocus: React.PropTypes.bool
@ -37,33 +40,17 @@ let ActionPanel = React.createClass({
});
},
getClassName() {
if(this.state.isFocused) {
return 'is-focused';
} else {
return '';
}
},
render() {
return (
<div className={'ascribe-panel-wrapper ' + this.getClassName()}>
<div className='row'>
<div className='col-xs-7 col-md-8'>
<div className='ascribe-panel-content-wrapper'>
<div className='ascribe-panel-title'>
{this.props.title}
</div>
<div className="ascribe-panel-content">
{this.props.content}
</div>
</div>
<div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
<div className="ascribe-panel-table">
<div className="ascribe-panel-content">
{this.props.content}
</div>
<div className='col-xs-5 col-md-4'>
<div className='ascribe-panel-buttons'>
{this.props.buttons}
</div>
</div>
<div className="ascribe-panel-table">
<div className="ascribe-panel-content">
{this.props.buttons}
</div>
</div>
</div>

4
js/components/coa_verify_container.js
View File

@ -10,7 +10,7 @@ import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property';
import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
import apiUrls from '../constants/api_urls';
import ApiUrls from '../constants/api_urls';
import { getLangText } from '../utils/lang_utils';
@ -59,7 +59,7 @@ let CoaVerifyForm = React.createClass({
return (
<div>
<Form
url={apiUrls.coa_verify}
url={ApiUrls.coa_verify}
handleSuccess={this.handleSuccess}
buttons={
<button

43
js/components/login_modal_handler.js
View File

@ -1,43 +0,0 @@
'use strict';
import React from 'react';
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
import { getLangText } from '../utils/lang_utils.js';
let LoginModalHandler = React.createClass({
mixins: [OverlayMixin],
getInitialState() {
return {
isModalOpen: true
};
},
handleToggle() {
this.setState({
isModalOpen: !this.state.isModalOpen
});
},
render() {
if(!this.state.isModalOpen || !(this.props.query.login === '')) {
return <span/>;
}
return (
<Modal title='Modal heading' onRequestHide={this.handleToggle}>
<div className='modal-body'>
This modal is controlled by our custom trigger component.
</div>
<div className='modal-footer'>
<Button onClick={this.handleToggle}>{getLangText('Close')}</Button>
</div>
</Modal>
);
}
});
export default LoginModalHandler;

36
js/components/password_reset_container.js
View File

@ -5,8 +5,7 @@ import Router from 'react-router';
import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property';
import FormPropertyHeader from './ascribe_forms/form_property_header';
import apiUrls from '../constants/api_urls';
import ApiUrls from '../constants/api_urls';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
@ -15,12 +14,15 @@ import { getLangText } from '../utils/lang_utils';
let PasswordResetContainer = React.createClass({
mixins: [Router.Navigation],
getInitialState() {
return {isRequested: false};
},
handleRequestSuccess(email){
handleRequestSuccess(email) {
this.setState({isRequested: email});
},
render() {
if (this.props.query.email && this.props.query.token) {
return (
@ -57,17 +59,22 @@ let PasswordResetContainer = React.createClass({
});
let PasswordRequestResetForm = React.createClass({
propTypes: {
handleRequestSuccess: React.PropTypes.func
},
handleSuccess() {
let notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.props.handleRequestSuccess(this.refs.form.refs.email.state.value);
},
render() {
return (
<Form
ref="form"
url={apiUrls.users_password_reset_request}
url={ApiUrls.users_password_reset_request}
handleSuccess={this.handleSuccess}
buttons={
<button
@ -80,15 +87,15 @@ let PasswordRequestResetForm = React.createClass({
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</span>
}>
<FormPropertyHeader>
<div className="ascribe-form-header">
<h3>{getLangText('Reset your password')}</h3>
</FormPropertyHeader>
</div>
<Property
name='email'
label={getLangText('Email')}>
<input
type="email"
placeholder={getLangText("Enter your email and we'll send a link")}
placeholder={getLangText('Enter your email and we\'ll send a link')}
name="email"
required/>
</Property>
@ -99,24 +106,31 @@ let PasswordRequestResetForm = React.createClass({
});
let PasswordResetForm = React.createClass({
propTypes: {
email: React.PropTypes.string,
token: React.PropTypes.string
},
mixins: [Router.Navigation],
getFormData(){
getFormData() {
return {
email: this.props.email,
token: this.props.token
};
},
handleSuccess() {
this.transitionTo('pieces');
let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
return (
<Form
ref="form"
url={apiUrls.users_password_reset}
url={ApiUrls.users_password_reset}
handleSuccess={this.handleSuccess}
getFormData={this.getFormData}
buttons={
@ -130,9 +144,9 @@ let PasswordResetForm = React.createClass({
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</span>
}>
<FormPropertyHeader>
<div className="ascribe-form-header">
<h3>{getLangText('Reset the password for')} {this.props.email}</h3>
</FormPropertyHeader>
</div>
<Property
name='password'
label={getLangText('Password')}>

92
js/components/react_flow_type/react_flow_type.js
View File

@ -1,92 +0,0 @@
'use strict';
/**
* This component is essentially a port of https://github.com/simplefocus/FlowType.JS
* to Reactjs in order to not being forced to use jQuery
*
* Author: Tim Daubenschütz
*
* Thanks to the guys at Simple Focus http://simplefocus.com/
*/
import React from 'react';
import ReactAddons from 'react/addons';
let FlowType = React.createClass({
propTypes: {
// standard FlowTypes.JS options
maximum: React.PropTypes.number,
minimum: React.PropTypes.number,
maxFont: React.PropTypes.number,
minFont: React.PropTypes.number,
fontRatio: React.PropTypes.number,
// react specific options
children: React.PropTypes.element.isRequired // only supporting one child element at once right now
},
getDefaultProps() {
return {
maximum: 9999,
minimum: 1,
maxFont: 9999,
minFont: 1,
fontRatio: 35
};
},
getInitialState() {
return {
// 32 because that's the default font display size
// doesn't really matter though
fontSize: 0
};
},
componentDidMount() {
// Make changes upon resize, calculate changes and rerender
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount() {
// stop listening to window once the component was unmounted
window.removeEventListener('resize', this.handleResize);
},
handleResize() {
let elemWidth = this.refs.flowTypeElement.getDOMNode().offsetWidth;
let width = elemWidth > this.props.maximum ? this.props.maximum : elemWidth < this.props.minimum ? this.props.minimum : elemWidth;
let fontBase = width / this.props.fontRatio;
let fontSize = fontBase > this.props.maxFont ? this.props.maxFont : fontBase < this.props.minFont ? this.props.minFont : fontBase;
this.setState({ fontSize });
},
// The child the user passes to this component needs to have it's
// style.fontSize property to be updated
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
ref: 'flowTypeFontElement',
});
});
},
render() {
return (
<div
ref="flowTypeElement"
style={{
width: '100%',
height: '100%',
fontSize: this.state.fontSize
}}>
{this.props.children}
</div>
);
}
});
export default FlowType;

5
js/components/register_piece.js
View File

@ -23,7 +23,6 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
import Property from './ascribe_forms/property';
import PropertyCollapsible from './ascribe_forms/property_collapsible';
import RegisterPieceForm from './ascribe_forms/form_register_piece';
//import FormPropertyHeader from './ascribe_forms/form_property_header';
import LoginContainer from './login_container';
import SlidesContainer from './ascribe_slides_container/slides_container';
@ -40,7 +39,9 @@ let RegisterPiece = React.createClass( {
submitMessage: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element])
React.PropTypes.element,
React.PropTypes.string
])
},
mixins: [Router.Navigation],

42
js/components/settings_container.js
View File

@ -24,10 +24,10 @@ import InputCheckbox from './ascribe_forms/input_checkbox';
import ActionPanel from './ascribe_panel/action_panel';
import apiUrls from '../constants/api_urls';
import ApiUrls from '../constants/api_urls';
import AppConstants from '../constants/application_constants';
import { getLangText } from '../utils/lang_utils';
import { getLangText } from '../utils/lang_utils';
import { getCookie } from '../utils/fetch_api_utils';
let SettingsContainer = React.createClass({
@ -90,7 +90,7 @@ let AccountSettings = React.createClass({
if (this.state.currentUser.username) {
content = (
<Form
url={apiUrls.users_username}
url={ApiUrls.users_username}
handleSuccess={this.handleSuccess}>
<Property
name='username'
@ -116,7 +116,7 @@ let AccountSettings = React.createClass({
);
profile = (
<Form
url={apiUrls.users_profile}
url={ApiUrls.users_profile}
handleSuccess={this.handleSuccess}
getFormData={this.getFormDataProfile}>
<Property
@ -266,14 +266,14 @@ let FileUploader = React.createClass({
fileClass: 'contract'
}}
createBlobRoutine={{
url: apiUrls.ownership_loans_contract
url: ApiUrls.ownership_loans_contract
}}
validation={{
itemLimit: 100000,
sizeLimit: '10000000'
}}
session={{
endpoint: apiUrls.ownership_loans_contract,
endpoint: ApiUrls.ownership_loans_contract,
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
},
@ -349,16 +349,26 @@ let APISettings = React.createClass({
<ActionPanel
name={app.name}
key={i}
title={app.name}
content={'Bearer ' + app.bearer_token.token}
content={
<div>
<div className='ascribe-panel-title'>
{app.name}
</div>
<div className="ascribe-panel-subtitle">
{'Bearer ' + app.bearer_token.token}
</div>
</div>
}
buttons={
<div className="pull-right">
<button
className="pull-right btn btn-default btn-sm"
onClick={this.handleTokenRefresh}
data-id={app.name}>
{getLangText('REFRESH')}
</button>
<div className="pull-right">
<button
className="pull-right btn btn-default btn-sm"
onClick={this.handleTokenRefresh}
data-id={app.name}>
{getLangText('REFRESH')}
</button>
</div>
</div>
}/>
);
@ -366,15 +376,15 @@ let APISettings = React.createClass({
}
return content;
},
render() {
return (
<CollapsibleParagraph
title={getLangText('API Integration')}
show={true}
defaultExpanded={this.props.defaultExpanded}>
<Form
url={apiUrls.applications}
url={ApiUrls.applications}
handleSuccess={this.handleCreateSuccess}>
<Property
name='name'

2
js/components/whitelabel/prize/components/ascribe_buttons/submit_to_prize_button.js
View File

@ -39,7 +39,7 @@ let SubmitToPrizeButton = React.createClass({
render() {
return (
<ModalWrapper
button={this.getSubmitButton()}
trigger={this.getSubmitButton()}
handleSuccess={this.props.handleSuccess}
title={getLangText('Submit to prize')}>
<PieceSubmitToPrizeForm

2
js/components/whitelabel/prize/components/landing.js
View File

@ -46,7 +46,7 @@ let Landing = React.createClass({
<p>
This is the submission page for Sluice_screens ↄc Prize 2015.
</p>
<ButtonGroup className="enter" bsSize="large" vertical block>
<ButtonGroup className="enter" bsSize="large" vertical>
<ButtonLink to="signup">
Sign up to submit
</ButtonLink>

73
js/components/whitelabel/prize/components/settings_container.js
View File

@ -14,7 +14,6 @@ import CollapsibleParagraph from '../../../ascribe_collapsible/collapsible_parag
import Form from '../../../ascribe_forms/form';
import Property from '../../../ascribe_forms/property';
import FormPropertyHeader from '../../../ascribe_forms/form_property_header';
import ActionPanel from '../../../ascribe_panel/action_panel';
@ -22,7 +21,7 @@ import GlobalNotificationModel from '../../../../models/global_notification_mode
import GlobalNotificationActions from '../../../../actions/global_notification_actions';
import AppConstants from '../../../../constants/application_constants';
import apiUrls from '../../../../constants/api_urls';
import ApiUrls from '../../../../constants/api_urls';
import { getLangText } from '../../../../utils/lang_utils';
@ -170,8 +169,16 @@ let PrizeJurySettings = React.createClass({
<ActionPanel
name={member.email}
key={i}
title={member.email}
content={member.status}
content={
<div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</div>
</div>
}
buttons={
<div className="pull-right">
<button
@ -197,17 +204,23 @@ let PrizeJurySettings = React.createClass({
<ActionPanel
name={member.email}
key={i}
title={member.email}
content={member.status}
buttons={
<div className="pull-right">
<button
className="btn btn-default btn-sm ascribe-btn-gray"
onClick={this.handleRevoke}
data-id={member.email}>
{getLangText('REVOKE')}
</button>
content={
<div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</div>
</div>
}
buttons={
<button
className="btn btn-default btn-sm ascribe-btn-gray"
onClick={this.handleRevoke}
data-id={member.email}>
{getLangText('REVOKE')}
</button>
}/>
);
@ -219,17 +232,23 @@ let PrizeJurySettings = React.createClass({
<ActionPanel
name={member.email}
key={i}
title={member.email}
content={member.status}
buttons={
<div className="pull-right">
<button
className="btn btn-default btn-sm"
onClick={this.handleActivate}
data-id={member.email}>
{getLangText('ACTIVATE')}
</button>
content={
<div>
<div className='ascribe-panel-title'>
{member.email}
</div>
<div className="ascribe-panel-subtitle">
{member.status}
</div>
</div>
}
buttons={
<button
className="btn btn-default btn-sm"
onClick={this.handleActivate}
data-id={member.email}>
{getLangText('ACTIVATE')}
</button>
}/>
);
@ -270,13 +289,13 @@ let PrizeJurySettings = React.createClass({
return (
<div>
<Form
url={apiUrls.jurys}
url={ApiUrls.jurys}
handleSuccess={this.handleCreateSuccess}
ref='form'
buttonSubmitText='INVITE'>
<FormPropertyHeader>
<div className="ascribe-form-header">
<h4 style={{margin: '30px 0px 10px 10px'}}>Jury Members</h4>
</FormPropertyHeader>
</div>
<Property
name='email'
label={getLangText('New jury member')}>

6
js/constants/api_urls.js
View File

@ -5,7 +5,7 @@ import getPrizeApiUrls from '../components/whitelabel/prize/constants/api_urls';
import { update } from '../utils/general_utils';
let apiUrls = {
let ApiUrls = {
'applications': AppConstants.apiEndpoint + 'applications/',
'application_token_refresh': AppConstants.apiEndpoint + 'applications/refresh_token/',
'blob_digitalworks': AppConstants.apiEndpoint + 'blob/digitalworks/',
@ -63,7 +63,7 @@ export function updateApiUrls(type, subdomain) {
if (type === 'prize') {
newUrls = getPrizeApiUrls(subdomain);
}
update(apiUrls, newUrls);
update(ApiUrls, newUrls);
}
export default apiUrls;
export default ApiUrls;

4
js/fetchers/user_fetcher.js
View File

@ -1,7 +1,7 @@
'use strict';
import requests from '../utils/requests';
import apiUrls from '../constants/api_urls';
import ApiUrls from '../constants/api_urls';
let UserFetcher = {
/**
@ -13,7 +13,7 @@ let UserFetcher = {
},
logout() {
return requests.get(apiUrls.users_logout);
return requests.get(ApiUrls.users_logout);
}
};

21
js/mixins/alert_mixin.js
View File

@ -1,21 +0,0 @@
'use strict';
import React from 'react';
import AlertDismissable from '../components/ascribe_forms/alert';
let AlertMixin = {
setAlerts(errors){
let alerts = errors.map((error) => {
return <AlertDismissable error={error} key={error}/>;
});
this.setState({alerts: alerts});
},
clearAlerts(){
this.setState({alerts: null});
}
};
export default AlertMixin;

108
js/mixins/form_mixin.js
View File

@ -1,108 +0,0 @@
'use strict';
import requests from '../utils/requests';
import React from 'react';
import AlertDismissable from '../components/ascribe_forms/alert';
import { getLangText } from '../utils/lang_utils.js';
export const FormMixin = {
propTypes: {
editions: React.PropTypes.array,
currentUser: React.PropTypes.object
},
getInitialState() {
return {
submitted: false,
errors: []
};
},
submit(e) {
if (e) {
e.preventDefault();
}
this.setState({submitted: true});
this.clearErrors();
let action = (this.httpVerb && this.httpVerb()) || 'post';
this[action](e);
},
post(e){
requests
.post(this.url(e), { body: this.getFormData() })
.then(this.handleSuccess)
.catch(this.handleError);
},
delete(e){
requests
.delete(this.url(e))
.then(this.handleSuccess)
.catch(this.handleError);
},
clearErrors(){
for (var ref in this.refs){
if ('clearAlerts' in this.refs[ref]){
this.refs[ref].clearAlerts();
}
}
this.setState({errors: []});
},
handleSuccess(response){
if ('handleSuccess' in this.props){
this.props.handleSuccess(response);
}
},
handleError(err){
if (err.json) {
for (var input in err.json.errors){
if (this.refs && this.refs[input] && this.refs[input].state) {
this.refs[input].setAlerts( err.json.errors[input]);
} else {
this.setState({errors: this.state.errors.concat(err.json.errors[input])});
}
}
}
else {
// TODO translate?
this.setState({errors: ['Something went wrong, please try again later']});
}
this.setState({submitted: false});
},
getBitcoinIds(){
return this.props.editions.map(function(edition){
return edition.bitcoin_id;
});
},
getTitlesString(){
return this.props.editions.map(function(edition){
return '- \"' + edition.title + ', ' + getLangText('edition') + ' ' + edition.edition_number + '\"\n';
});
},
render(){
let alert = null;
if (this.state.errors.length > 0){
alert = this.state.errors.map((error) => {
return <AlertDismissable error={error} key={error}/>;
});
}
return (
<div>
{alert}
{this.renderForm()}
</div>
);
}
};
export default FormMixin;

12
js/mixins/modal_mixin.js
View File

@ -1,12 +0,0 @@
'use strict';
let ModalMixin = {
onRequestHide(e){
if (e) {
e.preventDefault();
}
this.props.onRequestHide();
}
};
export default ModalMixin;

51
js/utils/form_utils.js Normal file
View File

@ -0,0 +1,51 @@
'use strict';
import { getLangText } from './lang_utils';
/**
* Generates a message for submitting a form
* @param {string} aclName Enum name of a acl
* @param {string} entities Already computed name of entities
* @param {string} senderName Name of the sender
* @return {string} Completed message
*/
export function getAclFormMessage(aclName, entities, senderName) {
let message = '';
message += getLangText('Hi');
message += ',\n\n';
if(aclName === 'acl_transfer') {
message += getLangText('I transfer ownership of');
} else if(aclName === 'acl_consign') {
message += getLangText('I consign');
} else if(aclName === 'acl_unconsign') {
message += getLangText('I un-consign');
} else if(aclName === 'acl_loan') {
message += getLangText('I loan');
} else if(aclName === 'acl_share') {
message += getLangText('I share');
} else {
throw new Error('Your specified aclName did not match a an acl class.');
}
message += ':\n';
message += entities;
if(aclName === 'acl_transfer' || aclName === 'acl_loan' || aclName === 'acl_consign') {
message += getLangText('to you');
} else if(aclName === 'acl_unconsign') {
message += getLangText('from you');
} else if(aclName === 'acl_share') {
message += getLangText('with you');
} else {
throw new Error('Your specified aclName did not match a an acl class.');
}
message += '\n\n';
message += getLangText('Truly yours,');
message += '\n';
message += senderName;
return message;
}

2
js/utils/requests.js
View File

@ -91,7 +91,7 @@ class Requests {
} catch(err) {
throw err;
}
newUrl = newUrl.replace(re, (match, key) => {
let val = params[key];
if (!val) {

2
package.json
View File

@ -71,7 +71,7 @@
"q": "^1.4.1",
"raven-js": "^1.1.19",
"react": "^0.13.2",
"react-bootstrap": "~0.22.6",
"react-bootstrap": "^0.24.3",
"react-datepicker": "~0.8.0",
"react-progressbar": "^1.1.0",
"react-router": "^0.13.3",

36
sass/ascribe_edition.scss
View File

@ -16,33 +16,35 @@
margin-top: 20px;
}
.ascribe-edition-collapsible-wrapper > div > span {
font-size: 1.2em;
margin-right: .5em;
font-size: 1.2em;
margin-right: .5em;
}
.ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
font-size: 0.9em;
font-size: 0.9em;
}
.ascribe-edition-collapible-content {
width:100%;
.ascribe-edition-collapsible-content {
width:100%;
background: none;
border: none;
}
.coa-file-wrapper{
display: table;
height: 200px;
overflow: hidden;
margin: 0 auto;
width: 100%;
padding: 1em;
.coa-file-wrapper {
display: table;
height: 200px;
overflow: hidden;
margin: 0 auto;
width: 100%;
padding: 1em;
}
.coa-file {
display: table-cell;
vertical-align: middle;
border: 1px solid #CCC;
background-color: #F8F8F8;
display: table-cell;
vertical-align: middle;
border: 1px solid #CCC;
background-color: #F8F8F8;
}
.ascribe-button-list {
margin-top: 1em;
margin-top: 1em;
}

96
sass/ascribe_panel.scss
View File

@ -1,18 +1,94 @@
.ascribe-panel-wrapper {
border: 1px solid #DDD;
padding: 1.4em;
margin: 1em 0 1em 0;
min-height: 5em;
height: 5em;
margin-top: 1em;
> div {
height: 100%;
float: left;
&:first-child {
width: 60%;
}
&:nth-child(2) {
width: 40%;
}
}
}
.ascribe-panel-title {
margin-bottom: 0.5em;
.ascribe-panel-table {
display:table;
> .ascribe-panel-content {
display: table-cell;
vertical-align: middle;
}
@media(max-width:767px) {
&:first-child {
> div {
padding-left: 1em;
}
}
&:nth-child(2) {
> div {
padding-right: 1em;
> button {
float:right;
}
}
}
}
@media(min-width:768px) {
&:first-child {
> div {
padding-left: 2em;
}
}
&:nth-child(2) {
> div {
padding-right: 2em;
> button {
float:right;
}
}
}
}
}
.ascribe-panel-content {
font-size: 0.9em;
color: rgba(0,0,0,0.5);
@media(max-width:767px) {
.ascribe-panel-title {
font-size: .9em;
}
.ascribe-panel-subtitle {
font-size: .7em;
color: rgba(0,0,0,0.5);
}
}
.ascribe-panel-buttons {
margin-top: 0.5em;
}
@media(min-width:768px) {
.ascribe-panel-title {
font-size: 1.1em;
}
.ascribe-panel-subtitle {
font-size: .9em;
color: rgba(0,0,0,0.5);
}
}

10
sass/ascribe_theme.scss
View File

@ -2,4 +2,14 @@
.pager li a {
color: white;
}
.panel-default {
border: none;
box-shadow: none;
margin-bottom: 0;
}
.panel-body {
padding:0;
}