From d035f1e41c73a90d44a0f93825e4cd897acc529d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 8 Dec 2015 16:49:06 +0100 Subject: [PATCH 01/26] Hide PieceListToolbarFilterWidget when no filters are applicable --- .../piece_list_toolbar_filter_widget.js | 112 +++++++++--------- 1 file changed, 58 insertions(+), 54 deletions(-) diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js index c463330c..b798857a 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js @@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({ ); - return ( - - {/* We iterate over filterParams, to receive the label and then for each - label also iterate over its items, to get all filterable options */} - {this.props.filterParams.map(({ label, items }, i) => { - return ( -
-
  • - {label}: -
    • - {items.map((param, j) => { + if(this.props.filterParams.length) { + return ( + + {/* We iterate over filterParams, to receive the label and then for each + label also iterate over its items, to get all filterable options */} + {this.props.filterParams.map(({ label, items }, i) => { + return ( +
    +
  • + {label}: +
    • + {items.map((param, j) => { - // As can be seen in the PropTypes, a param can either - // be a string or an object of the shape: - // - // { - // key: , - // label: - // } - // - // This is why we need to distinguish between both here. - if(typeof param !== 'string') { - label = param.label; - param = param.key; - } else { - param = param; - label = param.split('acl_')[1].replace(/_/g, ' '); - } + // As can be seen in the PropTypes, a param can either + // be a string or an object of the shape: + // + // { + // key: , + // label: + // } + // + // This is why we need to distinguish between both here. + if(typeof param !== 'string') { + label = param.label; + param = param.key; + } else { + param = param; + label = param.split('acl_')[1].replace(/_/g, ' '); + } - return ( -
  • -
    - - {getLangText(label)} - - -
    -
    • - ); - })} -
    - ); - })} -     - ); + return ( +
  • +
    + + {getLangText(label)} + + +
    +
    • + ); + })} +
    + ); + })} +     + ); + } else { + return null; + } } }); From 8278f5404f2975f3d95e018453efeb7c20e510c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 9 Dec 2015 16:17:08 +0100 Subject: [PATCH 02/26] Increase robustness of: - PieceListToolbarOrderWidget - PieceListToolbarFilterWidget --- .../piece_list_toolbar.js | 34 +++------- .../piece_list_toolbar_filter_widget.js | 12 ++-- .../piece_list_toolbar_order_widget.js | 66 ++++++++++--------- 3 files changed, 49 insertions(+), 63 deletions(-) diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index 60370431..bcc15603 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({ ]) }, - getFilterWidget(){ - if (this.props.filterParams){ - return ( - - ); - } - return null; - }, - - getOrderWidget(){ - if (this.props.orderParams){ - return ( - - ); - } - return null; - }, - render() { const { className, children, searchFor, searchQuery } = this.props; @@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({ {children} - {this.getOrderWidget()} - {this.getFilterWidget()} + + 0) { + if (trueValuesOnly.length) { return { visibility: 'visible'}; } else { return { visibility: 'hidden' }; @@ -81,7 +81,7 @@ let PieceListToolbarFilterWidget = React.createClass({ ); - if(this.props.filterParams.length) { + if (this.props.filterParams && this.props.filterParams.length) { return ( 0) { + if (this.props.orderBy && this.props.orderBy.length) { return { visibility: 'visible'}; } else { return { visibility: 'hidden' }; @@ -51,37 +51,41 @@ let PieceListToolbarOrderWidget = React.createClass({ · ); - return ( - -
  • - {getLangText('Sort by')}: -
    • - {this.props.orderParams.map((param) => { - return ( -
    -
  • -
    - - {getLangText(param.replace('_', ' '))} - - -1} /> -
    -
    • -
    - ); - })} -     - ); + if (this.props.orderParams && this.props.orderParams.length) { + return ( + +
  • + {getLangText('Sort by')}: +
    • + {this.props.orderParams.map((param) => { + return ( +
    +
  • +
    + + {getLangText(param.replace('_', ' '))} + + -1} /> +
    +
    • +
    + ); + })} +     + ); + } else { + return null; + } } }); From 6cc9ce8094912e0739419422720419b1463ac7f0 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Mon, 14 Dec 2015 18:34:27 +0100 Subject: [PATCH 03/26] Don't redirect to register piece and then to contract notifications Avoids new user getting asked if they want to cancel registration of a piece before they even agree to the Ikono contract. --- js/actions/notification_actions.js | 5 ++++- js/components/piece_list.js | 7 ++++++- .../ikonotv/ikonotv_contract_notifications.js | 17 +++++++++------ .../components/ikonotv/ikonotv_piece_list.js | 21 +++++++++++++++++-- js/stores/notification_store.js | 13 ++++++++++++ 5 files changed, 53 insertions(+), 10 deletions(-) diff --git a/js/actions/notification_actions.js b/js/actions/notification_actions.js index c3a6db93..5d80e1e7 100644 --- a/js/actions/notification_actions.js +++ b/js/actions/notification_actions.js @@ -9,10 +9,13 @@ class NotificationActions { constructor() { this.generateActions( 'updatePieceListNotifications', + 'flushPieceListNotifications', 'updateEditionListNotifications', + 'flushEditionListNotifications', 'updateEditionNotifications', 'updatePieceNotifications', - 'updateContractAgreementListNotifications' + 'updateContractAgreementListNotifications', + 'flushContractAgreementListNotifications' ); } diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 9424117c..de979e65 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -37,6 +37,7 @@ let PieceList = React.createClass({ bulkModalButtonListType: React.PropTypes.func, canLoadPieceList: React.PropTypes.bool, redirectTo: React.PropTypes.string, + shouldRedirect: React.PropTypes.func, customSubmitButton: React.PropTypes.element, customThumbnailPlaceholder: React.PropTypes.func, filterParams: React.PropTypes.array, @@ -114,7 +115,11 @@ let PieceList = React.createClass({ }, componentDidUpdate() { - if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) { + const { redirectTo, shouldRedirect } = this.props; + const { unfilteredPieceListCount } = this.state; + + if (redirectTo && unfilteredPieceListCount === 0 && + (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) { // FIXME: hack to redirect out of the dispatch cycle window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0); } diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js index d3479562..7975c1f3 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js @@ -106,22 +106,27 @@ let IkonotvContractNotifications = React.createClass({ handleConfirm() { let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement; - OwnershipFetcher.confirmContractAgreement(contractAgreement).then( - () => this.handleConfirmSuccess() - ); + OwnershipFetcher + .confirmContractAgreement(contractAgreement) + .then(this.handleConfirmSuccess); }, handleConfirmSuccess() { let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); + + // Flush contract notifications and refetch + NotificationActions.flushContractAgreementListNotifications(); + NotificationActions.fetchContractAgreementListNotifications(); + this.history.pushState(null, '/collection'); }, handleDeny() { let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement; - OwnershipFetcher.denyContractAgreement(contractAgreement).then( - () => this.handleDenySuccess() - ); + OwnershipFetcher + .denyContractAgreement(contractAgreement) + .then(this.handleDenySuccess); }, handleDenySuccess() { diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js index 0b51bdbd..5b489d09 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js @@ -1,15 +1,18 @@ 'use strict'; import React from 'react'; + import PieceList from '../../../../piece_list'; import UserActions from '../../../../../actions/user_actions'; import UserStore from '../../../../../stores/user_store'; +import NotificationStore from '../../../../../stores/notification_store'; import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item'; -import { getLangText } from '../../../../../utils/lang_utils'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; +import { mergeOptions } from '../../../../../utils/general_utils'; +import { getLangText } from '../../../../../utils/lang_utils'; let IkonotvPieceList = React.createClass({ @@ -18,20 +21,33 @@ let IkonotvPieceList = React.createClass({ }, getInitialState() { - return UserStore.getState(); + return mergeOptions( + NotificationStore.getState(), + UserStore.getState() + ); }, componentDidMount() { + NotificationStore.listen(this.onChange); UserStore.listen(this.onChange); + UserActions.fetchCurrentUser(); }, componentWillUnmount() { + NotificationStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); }, onChange(state) { this.setState(state); + + }, + + redirectIfNoContractNotifications() { + const { contractAgreementListNotifications } = this.state; + + return contractAgreementListNotifications && !contractAgreementListNotifications.length; }, render() { @@ -41,6 +57,7 @@ let IkonotvPieceList = React.createClass({
    Date: Mon, 14 Dec 2015 18:58:05 +0100 Subject: [PATCH 04/26] Remove unused `showAddWork` property from Header --- js/components/whitelabel/prize/simple_prize/prize_app.js | 2 +- js/components/whitelabel/wallet/wallet_app.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js index d95d7772..d5b55d5f 100644 --- a/js/components/whitelabel/prize/simple_prize/prize_app.js +++ b/js/components/whitelabel/prize/simple_prize/prize_app.js @@ -32,7 +32,7 @@ let PrizeApp = React.createClass({ if (!path || history.isActive('/login') || history.isActive('/signup')) { header = ; } else { - header =
    ; + header =
    ; } return ( diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index c2810fd0..bce7106b 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -35,7 +35,7 @@ let WalletApp = React.createClass({ && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) { header = (
    ); } else { - header =
    ; + header =
    ; } // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however, From b3b94b6f6095eba1682d5314b35a5fefdf053b3d Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Mon, 14 Dec 2015 18:58:33 +0100 Subject: [PATCH 05/26] Fix spacing of WalletRoutes --- .../whitelabel/wallet/wallet_routes.js | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 92c6d77b..96ec755d 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -54,7 +54,7 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} /> @@ -63,18 +63,18 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} /> + headerTitle='+ NEW WORK' /> + headerTitle='COLLECTION' /> @@ -88,7 +88,7 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} /> @@ -97,18 +97,18 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} /> + headerTitle='+ NEW WORK' /> + headerTitle='COLLECTION' /> @@ -123,7 +123,7 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} /> @@ -132,15 +132,15 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} /> + aclName='acl_create_contractagreement' /> + headerTitle='COLLECTION' /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} /> @@ -167,7 +167,7 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} /> @@ -176,10 +176,10 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} /> + headerTitle='COLLECTION' /> @@ -202,7 +202,7 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} /> @@ -211,19 +211,19 @@ let ROUTES = { component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} /> + aclName='acl_wallet_submit' /> + headerTitle='COLLECTION' /> From 1de06b0ac553c257f14102dd9b2305a5fa02449a Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Mon, 14 Dec 2015 18:59:10 +0100 Subject: [PATCH 06/26] Only show register work route if user can submit to wallet for IkonoTV, Lumenus --- js/components/whitelabel/wallet/wallet_routes.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 96ec755d..4e5751fb 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -145,7 +145,7 @@ let ROUTES = { path='register_piece' component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)} headerTitle='+ NEW WORK' - aclName='acl_create_piece'/> + aclName='acl_wallet_submit' /> + headerTitle='+ NEW WORK' + aclName='acl_wallet_submit' /> Date: Wed, 16 Dec 2015 13:59:31 +0100 Subject: [PATCH 07/26] Cyland Admin should also not be able to register work As per (AD-1504)[https://ascribe.atlassian.net/browse/AD-1504], Cyland admin should not be able to register work, but instead use another account to get loaned work. --- js/components/whitelabel/wallet/wallet_routes.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 4e5751fb..a5a0e075 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -70,7 +70,8 @@ let ROUTES = { + headerTitle='+ NEW WORK' + aclName='acl_wallet_submit' /> Date: Wed, 16 Dec 2015 18:14:06 +0100 Subject: [PATCH 08/26] Show server error in notification if one is given for failed piece registrations --- .../pr_forms/pr_register_piece_form.js | 27 ++++++++++++------ js/utils/error_utils.js | 28 +++++++++++++++++++ js/utils/general_utils.js | 6 ++-- 3 files changed, 48 insertions(+), 13 deletions(-) diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js index a8d946b5..645d13a2 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js @@ -19,8 +19,9 @@ import ApiUrls from '../../../../../../constants/api_urls'; import requests from '../../../../../../utils/requests'; -import { getLangText } from '../../../../../../utils/lang_utils'; +import { getErrorNotificationMessage } from '../../../../../../utils/error_utils'; import { setCookie } from '../../../../../../utils/fetch_api_utils'; +import { getLangText } from '../../../../../../utils/lang_utils'; import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils'; @@ -35,7 +36,7 @@ const PRRegisterPieceForm = React.createClass({ mixins: [History], - getInitialState(){ + getInitialState() { return { digitalWorkKeyReady: true, thumbnailKeyReady: true, @@ -56,14 +57,14 @@ const PRRegisterPieceForm = React.createClass({ submit() { if(!this.validateForms()) { return; - } else { - // disable the submission button right after the user - // clicks on it to avoid double submission - this.setState({ - submitted: true - }); } + // disable the submission button right after the user + // clicks on it to avoid double submission + this.setState({ + submitted: true + }); + const { currentUser } = this.props; const { registerPieceForm, additionalDataForm, @@ -106,10 +107,18 @@ const PRRegisterPieceForm = React.createClass({ }) .then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) .catch((err) => { - const notificationMessage = new GlobalNotificationModel(getLangText("Oops! We weren't able to send your submission. Contact: support@ascribe.io"), 'danger', 5000); + const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) + + getLangText(' Please contact support@ascribe.io'); + + const notificationMessage = new GlobalNotificationModel(errMessage, 'danger', 10000); GlobalNotificationActions.appendGlobalNotification(notificationMessage); console.logGlobal(new Error('Portfolio Review piece registration failed'), err); + + // Reset the submit button + this.setState({ + submitted: false + }); }); }, diff --git a/js/utils/error_utils.js b/js/utils/error_utils.js index 44ebedbe..eefe40d8 100644 --- a/js/utils/error_utils.js +++ b/js/utils/error_utils.js @@ -35,3 +35,31 @@ export function initLogging() { console.logGlobal = logGlobal; } + +/* + * Gets the json errors from the error as an array + * @param {Error} error A Javascript error + * @return {Array} List of json errors + */ +export function getJsonErrorsAsArray(error) { + const { json: { errors = {} } = {} } = error; + + const errorArrays = Object + .keys(errors) + .map((errorKey) => { + return errors[errorKey]; + }); + + // Collapse each errorKey's errors into a flat array + return [].concat(...errorArrays); +} + +/* + * Tries to get an error message from the error, either by using its notification + * property or first json error (if any) + * @param {Error} error A Javascript error + * @return {string} Error message string + */ +export function getErrorNotificationMessage(error) { + return (error && error.notification) || getJsonErrorsAsArray(error)[0] || ''; +} diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index e81a806d..c245cef6 100644 --- a/js/utils/general_utils.js +++ b/js/utils/general_utils.js @@ -84,8 +84,6 @@ export function formatText() { * Checks a list of objects for key duplicates and returns a boolean */ function _doesObjectListHaveDuplicates(l) { - let mergedList = []; - l = l.map((obj) => { if(!obj) { throw new Error('The object you are trying to merge is null instead of an empty object'); @@ -94,11 +92,11 @@ function _doesObjectListHaveDuplicates(l) { return Object.keys(obj); }); - // Taken from: http://stackoverflow.com/a/10865042 + // Taken from: http://stackoverflow.com/a/10865042 (but even better with rest) // How to flatten an array of arrays in javascript. // If two objects contain the same key, then these two keys // will actually be represented in the merged array - mergedList = mergedList.concat.apply(mergedList, l); + let mergedList = [].concat(...l); // Taken from: http://stackoverflow.com/a/7376645/1263876 // By casting the array to a set, and then checking if the size of the array From 41df6fe837aacb96769b3ef4e4a24f39c1513b1a Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Thu, 17 Dec 2015 13:05:39 +0100 Subject: [PATCH 09/26] Add global notification to form validation --- js/components/ascribe_forms/form.js | 6 ++--- .../pr_forms/pr_register_piece_form.js | 9 +++---- js/utils/form_utils.js | 26 +++++++++++++++++++ 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index d4002e85..91d00f65 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -178,20 +178,20 @@ let Form = React.createClass({ let formData = this.getFormData(); // sentry shouldn't post the user's password - if(formData.password) { + if (formData.password) { delete formData.password; } console.logGlobal(err, formData); - if(this.props.isInline) { + 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}); }, diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js index 645d13a2..73c0d500 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js @@ -21,6 +21,7 @@ import requests from '../../../../../../utils/requests'; import { getErrorNotificationMessage } from '../../../../../../utils/error_utils'; import { setCookie } from '../../../../../../utils/fetch_api_utils'; +import { validateForms } from '../../../../../../utils/form_utils'; import { getLangText } from '../../../../../../utils/lang_utils'; import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils'; @@ -55,7 +56,7 @@ const PRRegisterPieceForm = React.createClass({ * second adding all the additional details */ submit() { - if(!this.validateForms()) { + if (!this.validateForms()) { return; } @@ -127,11 +128,7 @@ const PRRegisterPieceForm = React.createClass({ additionalDataForm, uploadersForm } = this.refs; - const registerPieceFormValidation = registerPieceForm.validate(); - const additionalDataFormValidation = additionalDataForm.validate(); - const uploaderFormValidation = uploadersForm.validate(); - - return registerPieceFormValidation && additionalDataFormValidation && uploaderFormValidation; + return validateForms([registerPieceForm, additionalDataForm, uploadersForm], true); }, getCreateBlobRoutine() { diff --git a/js/utils/form_utils.js b/js/utils/form_utils.js index 8d12a8c1..0581b28b 100644 --- a/js/utils/form_utils.js +++ b/js/utils/form_utils.js @@ -2,8 +2,34 @@ import { getLangText } from './lang_utils'; +import GlobalNotificationActions from '../actions/global_notification_actions'; +import GlobalNotificationModel from '../models/global_notification_model'; + import AppConstants from '../constants/application_constants'; +/** + * Validates a given list of forms + * @param {Form} forms List of forms, each of which should have a `validate` method available + * @param {boolean} showFailureNotification Show global notification if there are validation failures + * @return {boolean} True if validation did *NOT* catch any errors + */ +export function validateForms(forms, showFailureNotification) { + const validationSuccessful = forms.reduce((result, form) => { + if (form && typeof form.validate === 'function') { + return form.validate() && result; + } else { + throw new Error('Form given for validation does not have a `validate` method'); + } + }, true); + + if (!validationSuccessful && showFailureNotification) { + const notification = new GlobalNotificationModel(getLangText('Oops, there may be missing or invalid fields. Please check your inputs again.'), 'danger'); + GlobalNotificationActions.appendGlobalNotification(notification); + } + + return validationSuccessful; +} + /** * Get the data ids of the given piece or editions. * @param {boolean} isPiece Is the given entities parameter a piece? (False: array of editions) From 1580dd8f52c6863d75014f551eacf21b76cb38c4 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Thu, 17 Dec 2015 16:40:38 +0100 Subject: [PATCH 10/26] Small additional info for logging COA errors --- js/components/ascribe_detail/edition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 068b526c..40fd6625 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -226,7 +226,7 @@ let CoaDetails = React.createClass({ contactOnIntercom() { window.Intercom('showNewMessage', `Hi, I'm having problems generating a Certificate of Authenticity for Edition: ${this.props.editionId}`); - console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`)); + console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`), this.props.coaError); }, render() { From e3c9ebe5f338f516e80a59cc747d48d048ebcf37 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Mon, 21 Dec 2015 11:53:27 +0100 Subject: [PATCH 11/26] Limit thumbnail size to 5mb --- .../further_details_fileuploader.js | 2 ++ .../ascribe_forms/form_register_piece.js | 10 ++++++++-- .../ascribe_forms/input_fineuploader.js | 3 +++ .../ascribe_uploader/react_s3_fine_uploader.js | 12 ++++++++---- .../pr_forms/pr_register_piece_form.js | 17 +++++++++++++---- js/constants/application_constants.js | 4 ++++ 6 files changed, 38 insertions(+), 10 deletions(-) diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js index b044bbbc..acdbe9e0 100644 --- a/js/components/ascribe_detail/further_details_fileuploader.js +++ b/js/components/ascribe_detail/further_details_fileuploader.js @@ -20,6 +20,7 @@ let FurtherDetailsFileuploader = React.createClass({ otherData: React.PropTypes.arrayOf(React.PropTypes.object), setIsUploadReady: React.PropTypes.func, submitFile: React.PropTypes.func, + onValidationFailed: React.PropTypes.func, isReadyForFormSubmission: React.PropTypes.func, editable: React.PropTypes.bool, multiple: React.PropTypes.bool @@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({ }} validation={AppConstants.fineUploader.validation.additionalData} submitFile={this.props.submitFile} + onValidationFailed={this.props.onValidationFailed} setIsUploadReady={this.props.setIsUploadReady} isReadyForFormSubmission={this.props.isReadyForFormSubmission} session={{ diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js index 83d38b50..596f8a56 100644 --- a/js/components/ascribe_forms/form_register_piece.js +++ b/js/components/ascribe_forms/form_register_piece.js @@ -109,6 +109,11 @@ let RegisterPieceForm = React.createClass({ ); }, + handleThumbnailValidationFailed(thumbnailFile) { + // If the validation fails, set the thumbnail as submittable since its optional + this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true); + }, + isThumbnailDialogExpanded() { const { enableSeparateThumbnail } = this.props; const { digitalWorkFile } = this.state; @@ -194,14 +199,15 @@ let RegisterPieceForm = React.createClass({ url: ApiUrls.blob_thumbnails }} handleChangedFile={this.handleChangedThumbnail} + onValidationFailed={this.handleThumbnailValidationFailed} isReadyForFormSubmission={formSubmissionValidation.fileOptional} keyRoutine={{ url: AppConstants.serverUrl + 's3/key/', fileClass: 'thumbnail' }} validation={{ - itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, - sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, + itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit, + sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit, allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'] }} setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')} diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js index db5bae05..fa9c72b6 100644 --- a/js/components/ascribe_forms/input_fineuploader.js +++ b/js/components/ascribe_forms/input_fineuploader.js @@ -52,6 +52,7 @@ const InputFineUploader = React.createClass({ plural: string }), handleChangedFile: func, + onValidationFailed: func, // Provided by `Property` onChange: React.PropTypes.func @@ -107,6 +108,7 @@ const InputFineUploader = React.createClass({ isFineUploaderActive, isReadyForFormSubmission, keyRoutine, + onValidationFailed, setIsUploadReady, uploadMethod, validation, @@ -127,6 +129,7 @@ const InputFineUploader = React.createClass({ createBlobRoutine={createBlobRoutine} validation={validation} submitFile={this.submitFile} + onValidationFailed={onValidationFailed} setIsUploadReady={setIsUploadReady} isReadyForFormSubmission={isReadyForFormSubmission} areAssetsDownloadable={areAssetsDownloadable} diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index eb211504..877146a5 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -50,6 +50,7 @@ const ReactS3FineUploader = React.createClass({ }), handleChangedFile: func, // is for when a file is dropped or selected submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile + onValidationFailed: func, autoUpload: bool, debug: bool, objectProperties: shape({ @@ -523,13 +524,16 @@ const ReactS3FineUploader = React.createClass({ }, isFileValid(file) { - if(file.size > this.props.validation.sizeLimit) { + if (file.size > this.props.validation.sizeLimit) { + const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000; - let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000; - - let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000); + const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000); GlobalNotificationActions.appendGlobalNotification(notification); + if (typeof this.props.onValidationFailed === 'function') { + this.props.onValidationFailed(file); + } + return false; } else { return true; diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js index a8d946b5..6b67467e 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js @@ -139,7 +139,7 @@ const PRRegisterPieceForm = React.createClass({ }, /** - * This method is overloaded so that we can track the ready-state + * These two methods are overloaded so that we can track the ready-state * of each uploader in the component * @param {string} uploaderKey Name of the uploader's key to track */ @@ -151,6 +151,14 @@ const PRRegisterPieceForm = React.createClass({ }; }, + handleOptionalFileValidationFailed(uploaderKey) { + return () => { + this.setState({ + [uploaderKey]: true + }); + }; + }, + getSubmitButton() { const { digitalWorkKeyReady, thumbnailKeyReady, @@ -303,7 +311,7 @@ const PRRegisterPieceForm = React.createClass({ + label={getLangText('Featured Cover photo (max 2MB)')}> Date: Mon, 21 Dec 2015 14:46:10 +0100 Subject: [PATCH 12/26] Use the 300x300 thumbnail if available --- .../accordion_list_item_piece.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js index 006479c5..086ce667 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js @@ -13,7 +13,7 @@ let AccordionListItemPiece = React.createClass({ propTypes: { className: React.PropTypes.string, artistName: React.PropTypes.string, - piece: React.PropTypes.object, + piece: React.PropTypes.object.isRequired, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -51,17 +51,21 @@ let AccordionListItemPiece = React.createClass({ piece, subsubheading, thumbnailPlaceholder: ThumbnailPlaceholder } = this.props; - const { url, url_safe } = piece.thumbnail; + const { url: thumbnailUrl, url_safe: thumbnailSafeUrl } = piece.thumbnail; + + // Display the 300x300 thumbnail if we have it, otherwise just use the safe url + const thumbnailDisplayUrl = (piece.thumbnail.thumbnail_sizes && piece.thumbnail.thumbnail_sizes['300x300']) || thumbnailSafeUrl; + let thumbnail; // Since we're going to refactor the thumbnail generation anyway at one point, // for not use the annoying ascribe_spiral.png, we're matching the url against // this name and replace it with a CSS version of the new logo. - if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) { + if (thumbnailUrl.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) { thumbnail = (); } else { thumbnail = ( -
    +
    ); } @@ -79,8 +83,7 @@ let AccordionListItemPiece = React.createClass({ subsubheading={subsubheading} buttons={buttons} badge={badge} - linkData={this.getLinkData()} - > + linkData={this.getLinkData()}> {children} ); From 58cd68f1c44facd31d0da30995a8edc9e85f2f07 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 22 Dec 2015 10:36:05 +0100 Subject: [PATCH 13/26] Change Portfolio Review closing date to be Dec. 27th --- .../prize/portfolioreview/components/pr_register_piece.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js index 0fbca419..d7aa1aa8 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js @@ -62,7 +62,7 @@ const PRRegisterPiece = React.createClass({

    Portfolio Review

    -

    {getLangText('Submission closing on %s', ' 22 Dec 2015')}

    +

    {getLangText('Submission closing on %s', ' 27 Dec 2015')}

    For more information, visit:  portfolio-review.de @@ -84,4 +84,4 @@ const PRRegisterPiece = React.createClass({ } }); -export default PRRegisterPiece; \ No newline at end of file +export default PRRegisterPiece; From 8a70f0acc55623566728d51e2c87dcbf7279d3da Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 22 Dec 2015 19:37:44 +0100 Subject: [PATCH 14/26] Hotfix portfolio review cover image text to show correct 5mb limit --- .../components/pr_forms/pr_register_piece_form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js index 2c48fd9a..e3d5ab93 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js @@ -317,7 +317,7 @@ const PRRegisterPieceForm = React.createClass({ + label={getLangText('Featured Cover photo (max 5MB)')}> Date: Wed, 23 Dec 2015 09:32:15 +0100 Subject: [PATCH 15/26] Add initial print stylesheet overrides --- sass/ascribe_footer.scss | 1 - sass/ascribe_print.scss | 9 +++++++++ sass/main.scss | 2 ++ sass/whitelabel/prize/index.scss | 6 ++++++ sass/whitelabel/wallet/index.scss | 6 ++++++ 5 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 sass/ascribe_print.scss diff --git a/sass/ascribe_footer.scss b/sass/ascribe_footer.scss index 85f3439d..4824d1ef 100644 --- a/sass/ascribe_footer.scss +++ b/sass/ascribe_footer.scss @@ -1,4 +1,3 @@ - .ascribe-footer { text-align: center; margin-top: 5em; diff --git a/sass/ascribe_print.scss b/sass/ascribe_print.scss new file mode 100644 index 00000000..3e48b4b1 --- /dev/null +++ b/sass/ascribe_print.scss @@ -0,0 +1,9 @@ +@media print { + @page { + margin: 1.2cm; + } + + .ascribe-default-app { + padding: 0 !important; + } +} diff --git a/sass/main.scss b/sass/main.scss index 900df4a0..4d536b80 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -44,6 +44,8 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'whitelabel/index'; +@import 'ascribe_print'; + html, body { diff --git a/sass/whitelabel/prize/index.scss b/sass/whitelabel/prize/index.scss index 67acaf11..dfdcaebd 100644 --- a/sass/whitelabel/prize/index.scss +++ b/sass/whitelabel/prize/index.scss @@ -7,3 +7,9 @@ padding-top: 70px; padding-bottom: 10px; } + +@media print { + .ascribe-prize-app { + padding: 0 !important; + } +} diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss index 78d075dc..647bb16c 100644 --- a/sass/whitelabel/wallet/index.scss +++ b/sass/whitelabel/wallet/index.scss @@ -9,3 +9,9 @@ padding-top: 70px; padding-bottom: 10px; } + +@media print { + .ascribe-wallet-app { + padding: 0 !important; + } +} From cf6d653c684f398a60ed80c5967bdf7272ac2197 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 23 Dec 2015 09:33:25 +0100 Subject: [PATCH 16/26] Small code style fixes --- .../ascribe_detail/wallet_piece_container.js | 26 ++++++++++--------- .../ikonotv_artist_details_form.js | 7 +++-- .../ikonotv_artwork_details_form.js | 6 ++--- 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js index 26a186ca..4be15b04 100644 --- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js +++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js @@ -25,12 +25,16 @@ let WalletPieceContainer = React.createClass({ currentUser: React.PropTypes.object.isRequired, loadPiece: React.PropTypes.func.isRequired, handleDeleteSuccess: React.PropTypes.func.isRequired, - submitButtonType: React.PropTypes.func.isRequired + submitButtonType: React.PropTypes.func.isRequired, + children: React.PropTypes.oneOfType([ + React.PropTypes.object, + React.PropTypes.array + ]) }, - + render() { - if(this.props.piece && this.props.piece.id) { + if (this.props.piece && this.props.piece.id) { return ( } subheader={ -

    - }> +
    + + +
    +
    + }> - {this.props.children} ); - } - else { + } else { return (
    diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js index 7aec7ff4..0b97c8dd 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js @@ -60,9 +60,8 @@ let IkonotvArtistDetailsForm = React.createClass({ render() { let buttons, spinner, heading; let { isInline, handleSuccess } = this.props; - - if(!isInline) { + if (!isInline) { buttons = ( - - - - + const { coa = {}, coaError } = this.props; -
    + let coaDetailElement; + if (coaError) { + coaDetailElement = [ +

    {getLangText('There was an error generating your Certificate of Authenticity.')}

    , +

    + {getLangText('Try to refresh the page. If this happens repeatedly, please ')} + {getLangText('contact us')}. +

    + ]; + } else if (coa.url_safe) { + coaDetailElement = [ +
    + +
    , +
    + + + + + +
    - ); - } else if(typeof this.props.coa === 'string'){ - return ( -
    - {this.props.coa} -
    - ); - } - return ( -
    - -

    {getLangText("Just a sec, we\'re generating your COA")}

    + ]; + } else if (typeof coa === 'string') { + coaDetailElement = coa; + } else { + coaDetailElement = [ + , +

    {getLangText("Just a sec, we're generating your COA")}

    ,

    {getLangText('(you may leave the page)')}

    + ]; + } + + return ( +
    +
    + {coaDetailElement} +
    + {/* Hide the COA and just show that it's a seperate document when printing */} +
    + {getLangText('The COA is available as a seperate document')} +
    ); } diff --git a/sass/ascribe_print.scss b/sass/ascribe_print.scss index f2abeb80..6baa40af 100644 --- a/sass/ascribe_print.scss +++ b/sass/ascribe_print.scss @@ -24,4 +24,10 @@ width: 50% !important; float: right !important; } + + // Restyle COA + .ascribe-coa-print-placeholder { + padding: 0 1.5em 1em 1.5em; + margin: 0; + } } From 2dc036047f73842bbb4a1ec98282fd876daf8d62 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 23 Dec 2015 09:47:30 +0100 Subject: [PATCH 22/26] Substitute upload button for placeholder text in print --- .../file_drag_and_drop_dialog.js | 54 +++++++++++-------- .../file_drag_and_drop_preview_image.js | 4 +- sass/ascribe_print.scss | 11 ++++ 3 files changed, 45 insertions(+), 24 deletions(-) diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js index 25552819..db28846b 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js @@ -26,7 +26,7 @@ let FileDragAndDropDialog = React.createClass({ getDragDialog(fileClass) { if (dragAndDropAvailable) { return [ -

    {getLangText('Drag %s here', fileClass)}

    , +

    {getLangText('Drag %s here', fileClass)}

    ,

    {getLangText('or')}

    ]; } else { @@ -46,6 +46,8 @@ let FileDragAndDropDialog = React.createClass({ if (hasFiles) { return null; } else { + let dialogElement; + if (enableLocalHashing && !uploadMethod) { const currentQueryParams = getCurrentQueryParams(); @@ -55,9 +57,9 @@ let FileDragAndDropDialog = React.createClass({ const queryParamsUpload = Object.assign({}, currentQueryParams); queryParamsUpload.method = 'upload'; - return ( -
    -

    {getLangText('Would you rather')}

    + dialogElement = ( +
    +

    {getLangText('Would you rather')}

    {/* The frontend in live is hosted under /app, Since `Link` is appending that base url, if its defined @@ -85,32 +87,40 @@ let FileDragAndDropDialog = React.createClass({ ); } else { if (multipleFiles) { - return ( - - {this.getDragDialog(fileClassToUpload.plural)} - - {getLangText('choose %s to upload', fileClassToUpload.plural)} - + dialogElement = [ + this.getDragDialog(fileClassToUpload.plural), + + {getLangText('choose %s to upload', fileClassToUpload.plural)} - ); + ]; } else { const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular) : getLangText('choose a %s to upload', fileClassToUpload.singular); - return ( - - {this.getDragDialog(fileClassToUpload.singular)} - - {dialog} - + dialogElement = [ + this.getDragDialog(fileClassToUpload.singular), + + {dialog} - ); + ]; } } + + return ( +
    +
    + {dialogElement} +
    + {/* Hide the uploader and just show that there's been on files uploaded yet when printing */} +

    + {getLangText('No files uploaded')} +

    +
    + ); } } }); diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js index 927a5b22..5c757121 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js @@ -49,7 +49,7 @@ const FileDragAndDropPreviewImage = React.createClass({ }; let actionSymbol; - + // only if assets are actually downloadable, there should be a download icon if the process is already at // 100%. If not, no actionSymbol should be displayed if(progress === 100 && areAssetsDownloadable) { @@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({ return (
    diff --git a/sass/ascribe_print.scss b/sass/ascribe_print.scss index 6baa40af..c33074a4 100644 --- a/sass/ascribe_print.scss +++ b/sass/ascribe_print.scss @@ -25,6 +25,17 @@ float: right !important; } + // Restyle file uploader dialogs + .file-drag-and-drop { + padding-top: 0; + outline-width: 0; + text-align: left; + } + + .file-drag-and-drop-position { + margin: 0; + } + // Restyle COA .ascribe-coa-print-placeholder { padding: 0 1.5em 1em 1.5em; From 5b34d569f6152a6db5263c3d5cd92ac25bdd2a4c Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 23 Dec 2015 09:48:45 +0100 Subject: [PATCH 23/26] Don't expand some anchor links in print --- js/components/ascribe_detail/edition.js | 30 +++++++++++++++---- .../ascribe_detail/history_iterator.js | 6 +++- sass/ascribe_print.scss | 5 ++++ 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 81746096..c86a6480 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -296,16 +296,34 @@ let SpoolDetails = React.createClass({ }, render() { - let bitcoinIdValue = ( - {this.props.edition.bitcoin_id} + const { edition: { + bitcoin_id: bitcoinId, + hash_as_address: hashAsAddress, + btc_owner_address_noprefix: bitcoinOwnerAddress + } } = this.props; + + const bitcoinIdValue = ( + + {bitcoinId} + ); - let hashOfArtwork = ( - {this.props.edition.hash_as_address} + const hashOfArtwork = ( + + {hashAsAddress} + ); - let ownerAddress = ( - {this.props.edition.btc_owner_address_noprefix} + const ownerAddress = ( + + {bitcoinOwnerAddress} + ); return ( diff --git a/js/components/ascribe_detail/history_iterator.js b/js/components/ascribe_detail/history_iterator.js index 413aeb21..03904863 100644 --- a/js/components/ascribe_detail/history_iterator.js +++ b/js/components/ascribe_detail/history_iterator.js @@ -22,7 +22,11 @@ let HistoryIterator = React.createClass({ return ( {historicalEventDescription} - {contractName} + + {contractName} + ); } else if(historicalEvent.length === 2) { diff --git a/sass/ascribe_print.scss b/sass/ascribe_print.scss index c33074a4..99724872 100644 --- a/sass/ascribe_print.scss +++ b/sass/ascribe_print.scss @@ -7,6 +7,11 @@ padding: 0 !important; } + // Utility class to not automatically expand an anchor href after the text + .anchor-no-expand-print:after { + content: '' !important; + } + // Replace navbar header with ascribe logo .ascribe-print-header { border-bottom: 1px solid rgba(0, 60, 105, 0.1); From 6419a4e8e0204cf880cf72e208caade15b3daf11 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 23 Dec 2015 09:49:20 +0100 Subject: [PATCH 24/26] Form and property restyling in print --- sass/ascribe_print.scss | 69 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/sass/ascribe_print.scss b/sass/ascribe_print.scss index 99724872..973e36ed 100644 --- a/sass/ascribe_print.scss +++ b/sass/ascribe_print.scss @@ -46,4 +46,73 @@ padding: 0 1.5em 1em 1.5em; margin: 0; } + + // Force collapsible properties to be expanded + .ascribe-collapsible-content .collapse { + display: block; + } + + // Decrease property spacing + .ascribe-property-wrapper { + padding-bottom: 0.5em; + } + + .ascribe-property { + padding-top: 0.5em; + + > div, + > input, + > p, + > pre, + > select, + > span:not(.glyphicon), + > textarea { + margin: 0; + } + } + + .ascribe-collapsible-wrapper { + margin-bottom: 5px; + + > div:first-child { + margin-top: 0; + padding-bottom: 5px; + } + } + + .ascribe-form hr { + margin-bottom: 3px; + } + + // Hide placeholder text + input::-webkit-input-placeholder { + opacity: 0; + } + textarea::-webkit-input-placeholder { + opacity: 0; + } + + /* firefox 18- */ + input:-moz-placeholder { + opacity: 0; + } + textarea:-moz-placeholder { + opacity: 0; + } + + /* firefox 19+ */ + input::-moz-placeholder { + opacity: 0; + } + textarea::-moz-placeholder { + opacity: 0; + } + + /* ie */ + input:-ms-input-placeholder { + opacity: 0; + } + textarea:-ms-input-placeholder { + opacity: 0; + } } From 0f8499dfeeb143c2a2855125661173a621c28c4a Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 23 Dec 2015 09:50:38 +0100 Subject: [PATCH 25/26] Use getLangText for COA Intercom message --- js/components/ascribe_detail/edition.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 40fd6625..141cd718 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -225,8 +225,10 @@ let CoaDetails = React.createClass({ }, contactOnIntercom() { - window.Intercom('showNewMessage', `Hi, I'm having problems generating a Certificate of Authenticity for Edition: ${this.props.editionId}`); - console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`), this.props.coaError); + const { coaError, editionId } = this.props; + + window.Intercom('showNewMessage', getLangText("Hi, I'm having problems generating a Certificate of Authenticity for Edition: %s", editionId)); + console.logGlobal(new Error(`Coa couldn't be created for edition: ${editionId}`), coaError); }, render() { From d817b920b4af7d8577fe0961772cd461f1b55395 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 23 Dec 2015 10:20:56 +0100 Subject: [PATCH 26/26] Use class to add overflow ellipsis instead of directly styling component --- js/components/ascribe_detail/detail_property.js | 11 ++--------- sass/main.scss | 6 ++++++ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js index 44eec06a..0191ffa9 100644 --- a/js/components/ascribe_detail/detail_property.js +++ b/js/components/ascribe_detail/detail_property.js @@ -35,27 +35,20 @@ const DetailProperty = React.createClass({ const { children, className, + ellipsis, label, labelClassName, separator, valueClassName, value } = this.props; - const styles = this.props.ellipsis ? { - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis' - } : null; - return (
    {label} {separator}
    -
    +
    {children || value}
    diff --git a/sass/main.scss b/sass/main.scss index 4d536b80..9ca2a07a 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -108,6 +108,12 @@ hr { color: $ascribe-dark-blue; } +.add-overflow-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .ascribe-subheader { padding-bottom: 10px; margin-top: -10px;