From 1d6e3cd26cd10e34788a1d3506d0a896bf0f2a9b Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 3 Jul 2015 15:05:14 +0200 Subject: [PATCH 1/5] Add progressbar for encoding --- js/components/ascribe_media/media_player.js | 55 ++++++++++++++++----- js/components/edition.js | 5 +- js/components/edition_container.js | 7 ++- 3 files changed, 53 insertions(+), 14 deletions(-) diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js index 62bf23a9..a4c84513 100644 --- a/js/components/ascribe_media/media_player.js +++ b/js/components/ascribe_media/media_player.js @@ -3,6 +3,7 @@ import React from 'react'; import InjectInHeadMixin from '../../mixins/inject_in_head_mixin'; import Panel from 'react-bootstrap/lib/Panel'; +import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import AppConstants from '../../constants/application_constants.js'; /** @@ -72,7 +73,7 @@ let Audio = React.createClass({ ready() { window.audiojs.events.ready(function() { - var as = audiojs.createAll(); + window.audiojs.createAll(); }); }, @@ -87,7 +88,8 @@ let Video = React.createClass({ propTypes: { preview: React.PropTypes.string.isRequired, url: React.PropTypes.string.isRequired, - extraData: React.PropTypes.array.isRequired + extraData: React.PropTypes.array.isRequired, + encodingStatus: React.PropTypes.number }, mixins: [InjectInHeadMixin], @@ -132,6 +134,24 @@ let Video = React.createClass({ }); +let EncodingStatus = React.createClass({ + propTypes: { + encodingStatus: React.PropTypes.number.isRequired + }, + + render() { + return ( + + ); + } +}); + + let resourceMap = { 'image': Image, 'video': Video, @@ -144,19 +164,30 @@ let MediaPlayer = React.createClass({ mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired, preview: React.PropTypes.string.isRequired, url: React.PropTypes.string.isRequired, - extraData: React.PropTypes.array + extraData: React.PropTypes.array, + encodingStatus: React.PropTypes.number }, render() { - let Component = resourceMap[this.props.mimetype] || Other; - - return ( -
- -
- ); + if (this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) { + return ( +
+

Please be patient, the video is been encoded

+ +
+ ); + } else { + let Component = resourceMap[this.props.mimetype] || Other; + return ( +
+ +
+ ); + } } }); diff --git a/js/components/edition.js b/js/components/edition.js index 28bc1e81..5cbc7dce 100644 --- a/js/components/edition.js +++ b/js/components/edition.js @@ -70,11 +70,13 @@ let Edition = React.createClass({ let thumbnail = this.props.edition.thumbnail; let mimetype = this.props.edition.digital_work.mime; let extraData = null; + let encodingStatus = this.props.edition.digital_work.isEncoding; if (this.props.edition.digital_work.encoding_urls) { extraData = this.props.edition.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; }); } + let bitcoinIdValue = ( {this.props.edition.bitcoin_id} ); @@ -93,7 +95,8 @@ let Edition = React.createClass({ + extraData={extraData} + encodingStatus={encodingStatus} />

+ + ); + } + } + } +}); + +export default FileDragAndDropDialog; \ No newline at end of file diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js index fd392767..33f07383 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js @@ -72,7 +72,11 @@ let FileDragAndDropPreview = React.createClass({ if(this.props.areAssetsEditable) { removeBtn = (

-
); } diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 45fe2aba..4ca74ea3 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -165,19 +165,8 @@ let RegisterPiece = React.createClass( { onClick={this.changeSlide} onFocus={this.changeSlide}> - -
- -
-
-
- - -

Lock down title

+ +

Register your work

}> - + + + diff --git a/sass/ascribe_login.scss b/sass/ascribe_login.scss index 392cde7f..9ff2857f 100644 --- a/sass/ascribe_login.scss +++ b/sass/ascribe_login.scss @@ -23,6 +23,10 @@ $break-small: 764px; background-color: rgba(2, 182, 163, 0.6); border: none; } + + &[disabled] { + opacity: .3; + } } .ascribe-btn-login-spinner{ diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 062c0b49..debdf51a 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -1,7 +1,6 @@ .file-drag-and-drop { display: block; - outline: 1px dashed #616161; - cursor: pointer; + outline: 1px dashed #9E9E9E; vertical-align: middle; text-align: center; height: auto; @@ -9,43 +8,28 @@ overflow: auto; margin-top: 1em; - padding: 3em; + cursor: default !important; + + padding: 1.5em 1.5em 1.5em 0; } .inactive-dropzone { cursor: default !important; + background-color: rgba(0,0,0,0) !important; + outline: 0; } -.inactive-dropzone:hover { - background-color: #FAFAFA !important; -} +.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child { + font-size: 1.5em !important; -.file-drag-and-drop:hover { - background-color: rgba(72, 218, 203, 0.2); -} - -.file-drag-and-drop .file-drag-and-drop-dialog { - font-size: 1.25em !important; - - margin-top: 1em; - - &::before { - content: ' '; - display: inline-block; - vertical-align: middle; /* vertical alignment of the inline element */ - height: 100%; - } -} - -.has-files { - text-align: left; - padding: 4% 0 0 0; + margin-top: 0; + margin-bottom: 0; + padding-bottom: 0; } .file-drag-and-drop-position { position: relative; display: inline-block; - margin: 0 0 4% 4%; float:left; .delete-file { @@ -64,14 +48,21 @@ span { color: white; + top: 1; + left: 0; + font-size: .8em; + + &:hover { + color: $brand-danger; + } } } } .file-drag-and-drop-preview-table-wrapper { display: table; - height:64px; - width:74px; + height:74px; + width:84px; } .file-drag-and-drop-preview { @@ -83,8 +74,8 @@ .file-drag-and-drop-preview-image { display: table; - height:74px; - width:74px; + height:84px; + width:84px; overflow:hidden; border: 1px solid #616161; text-align: center; From f066008ce988edf4027268e7eebf899141de9d1d Mon Sep 17 00:00:00 2001 From: Sylvain Bellemare Date: Fri, 3 Jul 2015 19:08:56 +0200 Subject: [PATCH 3/5] translated english text to french --- .../ascribe_accordion_list/accordion_list.js | 8 +- .../accordion_list_item.js | 2 +- .../accordion_list_item_table_editions.js | 9 +- .../accordion_list_item_table_toggle.js | 4 +- js/components/ascribe_buttons/acl_button.js | 24 +- .../ascribe_buttons/button_submit_close.js | 3 +- .../ascribe_buttons/delete_button.js | 9 +- .../collapsible_paragraph.js | 4 +- js/components/ascribe_forms/form_consign.js | 15 +- .../ascribe_forms/form_delete_edition.js | 9 +- js/components/ascribe_forms/form_loan.js | 26 +- js/components/ascribe_forms/form_login.js | 17 +- .../ascribe_forms/form_password_reset.js | 7 +- .../form_password_reset_request.js | 7 +- .../ascribe_forms/form_piece_extradata.js | 3 +- .../form_remove_editions_from_collection.js | 9 +- .../ascribe_forms/form_request_action.js | 7 +- .../ascribe_forms/form_share_email.js | 14 +- js/components/ascribe_forms/form_signup.js | 21 +- js/components/ascribe_forms/form_transfer.js | 16 +- js/components/ascribe_forms/form_unconsign.js | 13 +- .../ascribe_forms/form_unconsign_request.js | 9 +- js/components/ascribe_modal/modal_login.js | 7 +- .../modal_password_request_reset.js | 7 +- js/components/ascribe_modal/modal_signup.js | 7 +- .../piece_list_bulk_modal.js | 4 +- ...ist_bulk_modal_selected_editions_widget.js | 5 +- .../piece_list_toolbar.js | 5 +- .../piece_list_toolbar_filter_widget.js | 7 +- .../ascribe_uploader/file_drag_and_drop.js | 6 +- .../file_drag_and_drop_preview.js | 6 +- .../file_drag_and_drop_preview_image.js | 9 +- .../file_drag_and_drop_preview_other.js | 9 +- .../react_s3_fine_uploader.js | 2 +- js/components/coa_verify_container.js | 15 +- js/components/edition.js | 71 ++- js/components/edition_container.js | 1 + js/components/footer.js | 4 +- js/components/header.js | 6 +- js/components/login_modal_handler.js | 3 +- js/components/register_piece.js | 17 +- js/constants/languages.js | 439 +++++++++++++++++- js/mixins/form_mixin.js | 4 +- js/utils/lang_utils.js | 4 +- 44 files changed, 669 insertions(+), 205 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js index 597581db..a1a1c88a 100644 --- a/js/components/ascribe_accordion_list/accordion_list.js +++ b/js/components/ascribe_accordion_list/accordion_list.js @@ -1,6 +1,8 @@ 'use strict'; import React from 'react'; +import { getLangText } from '../../utils/lang_utils'; + let AccordionList = React.createClass({ propTypes: { @@ -20,8 +22,8 @@ let AccordionList = React.createClass({ } else if(this.props.count === 0) { return (
-

We could not find any works related to you...

-

To register one, click here!

+

{getLangText('We could not find any works related to you%s', '...')}

+

{getLangText('To register one, click')} {getLangText('here')}!

); } else { @@ -34,4 +36,4 @@ let AccordionList = React.createClass({ } }); -export default AccordionList; \ No newline at end of file +export default AccordionList; diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 16832779..e9ab9aeb 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -29,7 +29,7 @@ let AccordionListItem = React.createClass({ if (this.props.content.requestAction){ return ( You have actions pending in one of your editions}> + overlay={{getLangText('You have actions pending in one of your editions')}}> ); } diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 2bb3bd52..1f83d218 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -146,10 +146,10 @@ let AccordionListItemTableEditions = React.createClass({ new ColumnModel( (item) => { return { - 'content': item.edition_number + ' of ' + item.num_editions + 'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions }; }, 'edition_number', - 'Edition', + getLangText('Edition'), TableItemText, 1, false, @@ -172,6 +172,7 @@ let AccordionListItemTableEditions = React.createClass({ (item) => { let content = item.acl; if (item.request_action){ + // TODO should request be translated? content = [item.request_action + ' request']; } return { @@ -193,7 +194,7 @@ let AccordionListItemTableEditions = React.createClass({ Hide editions : Show editions {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}} /> + message={show && typeof editionsForPiece !== 'undefined' ? {getLangText('Hide editions')} : {getLangText('Show editions')} {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}} /> , handleSuccess: this.showNotification }; } if (this.props.action === 'unconsign'){ return { - title: 'Unconsign artwork', - tooltip: 'Have the owner manage his sales again', + title: getLangText('Unconsign artwork'), + tooltip: getLangText('Have the owner manage his sales again'), form: , handleSuccess: this.showNotification }; }else if (this.props.action === 'transfer') { return { - title: 'Transfer artwork', - tooltip: 'Transfer the ownership of the artwork', + title: getLangText('Transfer artwork'), + tooltip: getLangText('Transfer the ownership of the artwork'), form: , handleSuccess: this.showNotification }; } else if (this.props.action === 'loan'){ return { - title: 'Loan artwork', - tooltip: 'Loan your artwork for a limited period of time', + title: getLangText('Loan artwork'), + tooltip: getLangText('Loan your artwork for a limited period of time'), form: , handleSuccess: this.showNotification }; } else if (this.props.action === 'share'){ return { - title: 'Share artwork', - tooltip: 'Share the artwork', + title: getLangText('Share artwork'), + tooltip: getLangText('Share the artwork'), form: , handleSuccess: this.showNotification }; @@ -75,6 +78,7 @@ let AclButton = React.createClass({ return ( {this.props.action.toUpperCase()} diff --git a/js/components/ascribe_buttons/button_submit_close.js b/js/components/ascribe_buttons/button_submit_close.js index 8b054116..11d3c0a4 100644 --- a/js/components/ascribe_buttons/button_submit_close.js +++ b/js/components/ascribe_buttons/button_submit_close.js @@ -3,6 +3,7 @@ import React from 'react'; import AppConstants from '../../constants/application_constants'; +import { getLangText } from '../../utils/lang_utils.js' let ButtonSubmitOrClose = React.createClass({ propTypes: { @@ -22,7 +23,7 @@ let ButtonSubmitOrClose = React.createClass({ return (
- +
); } diff --git a/js/components/ascribe_buttons/delete_button.js b/js/components/ascribe_buttons/delete_button.js index 37f3d862..0c9ef154 100644 --- a/js/components/ascribe_buttons/delete_button.js +++ b/js/components/ascribe_buttons/delete_button.js @@ -13,6 +13,7 @@ import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; import { getAvailableAcls } from '../../utils/acl_utils'; +import { getLangText } from '../../utils/lang_utils.js' import EditionListActions from '../../actions/edition_list_actions'; @@ -42,11 +43,11 @@ let DeleteButton = React.createClass({ if (availableAcls.indexOf('delete') > -1) { content = ; - btnDelete = ; + btnDelete = ; } else if (availableAcls.indexOf('del_from_collection') > -1){ content = ; - btnDelete = ; + btnDelete = ; } else{ return null; @@ -55,8 +56,8 @@ let DeleteButton = React.createClass({ + title={getLangText('Remove Edition')} + tooltip={getLangText('Click to remove edition')}> { content } ); diff --git a/js/components/ascribe_collapsible/collapsible_paragraph.js b/js/components/ascribe_collapsible/collapsible_paragraph.js index 4c3a779f..d133b2f1 100644 --- a/js/components/ascribe_collapsible/collapsible_paragraph.js +++ b/js/components/ascribe_collapsible/collapsible_paragraph.js @@ -6,6 +6,8 @@ import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin'; import classNames from 'classnames'; +import { getLangText } from '../../utils/lang_utils.js' + const CollapsibleParagraph = React.createClass({ @@ -41,7 +43,7 @@ const CollapsibleParagraph = React.createClass({ render() { let styles = this.getCollapsibleClassSet(); - let text = this.isExpanded() ? '[hide]' : '[show]'; + let text = this.isExpanded() ? '[' + getLangText('hide') + ']' : '[' + getLangText('show') + ']'; if(this.props.show) { return (
diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js index 42f909a8..d2db267d 100644 --- a/js/components/ascribe_forms/form_consign.js +++ b/js/components/ascribe_forms/form_consign.js @@ -7,6 +7,7 @@ import FormMixin from '../../mixins/form_mixin'; import InputText from './input_text'; import InputTextArea from './input_textarea'; import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close'; +import { getLangText } from '../../utils/lang_utils.js' let ConsignForm = React.createClass({ mixins: [FormMixin], @@ -29,12 +30,12 @@ let ConsignForm = React.createClass({ let title = this.getTitlesString().join(''); let username = this.props.currentUser.username; let message = -`Hi, +`${getLangText('Hi')}, -I consign : -${title}to you. +${getLangText('I consign')} : +${title}${getLangText('to you')}. -Truly yours, +${getLangText('Truly yours')}, ${username}`; return ( @@ -43,7 +44,7 @@ ${username}`; @@ -54,12 +55,12 @@ ${username}`; /> diff --git a/js/components/ascribe_forms/form_delete_edition.js b/js/components/ascribe_forms/form_delete_edition.js index 40d21a7f..d0aa5970 100644 --- a/js/components/ascribe_forms/form_delete_edition.js +++ b/js/components/ascribe_forms/form_delete_edition.js @@ -5,6 +5,7 @@ import React from 'react'; import requests from '../../utils/requests'; import ApiUrls from '../../constants/api_urls'; import FormMixin from '../../mixins/form_mixin'; +import { getLangText } from '../../utils/lang_utils'; let EditionDeleteForm = React.createClass({ @@ -20,11 +21,11 @@ let EditionDeleteForm = React.createClass({ renderForm () { return (
-

Are you sure you would like to permanently delete this edition?

-

This is an irrevocable action.

+

{getLangText('Are you sure you would like to permanently delete this edition')}?

+

{getLangText('This is an irrevocable action%s', '.')}

- - + +
); diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js index ae4ca49e..b003650a 100644 --- a/js/components/ascribe_forms/form_loan.js +++ b/js/components/ascribe_forms/form_loan.js @@ -13,6 +13,8 @@ import InputTextArea from './input_textarea'; import OwnershipFetcher from '../../fetchers/ownership_fetcher'; import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close'; +import { getLangText } from '../../utils/lang_utils.js' + let LoanForm = React.createClass({ getInitialState() { @@ -74,20 +76,20 @@ let LoanForm = React.createClass({ let title = this.getTitlesString().join(''); let username = this.props.currentUser.username; let message = -`Hi, +`${getLangText('Hi')}, -I loan : -${title}to you. +${getLangText('I loan')} : +${title}${getLangText('to you')}. -Truly yours, +${getLangText('Truly yours')}, ${username}`; let contract = ; if (this.state.loaneeHasContract){ let label = (); contract = ( @@ -118,12 +120,12 @@ ${username}`;
+ placeholderText={getLangText('Loan start date')} />
+ placeholderText={getLangText('Loan end date')} />
{contract} diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js index 1a4f2672..3402ba4c 100644 --- a/js/components/ascribe_forms/form_login.js +++ b/js/components/ascribe_forms/form_login.js @@ -9,6 +9,7 @@ import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close'; import SignupModal from '../ascribe_modal/modal_signup'; import PasswordResetRequestModal from '../ascribe_modal/modal_password_request_reset'; +import { getLangText } from '../../utils/lang_utils.js' let LoginForm = React.createClass({ mixins: [FormMixin], @@ -31,28 +32,28 @@ let LoginForm = React.createClass({
- Forgot your password? + {getLangText('Forgot your password')}? Reset password}/> + button={ {getLangText('Reset password')}}/>
- Not a member yet? + {getLangText('Not a member yet')}? Sign up}/> + button={ {getLangText('Sign up')}}/>
@@ -60,4 +61,4 @@ let LoginForm = React.createClass({ } }); -export default LoginForm; \ No newline at end of file +export default LoginForm; diff --git a/js/components/ascribe_forms/form_password_reset.js b/js/components/ascribe_forms/form_password_reset.js index 60e9b077..e42689a4 100644 --- a/js/components/ascribe_forms/form_password_reset.js +++ b/js/components/ascribe_forms/form_password_reset.js @@ -6,6 +6,7 @@ import apiUrls from '../../constants/api_urls'; import FormMixin from '../../mixins/form_mixin'; import InputText from './input_text'; import ButtonSubmit from '../ascribe_buttons/button_submit'; +import { getLangText } from '../../utils/lang_utils.js' let PasswordResetForm = React.createClass({ mixins: [FormMixin], @@ -29,18 +30,18 @@ let PasswordResetForm = React.createClass({
Reset the password for {this.props.email}:
); diff --git a/js/components/ascribe_forms/form_password_reset_request.js b/js/components/ascribe_forms/form_password_reset_request.js index f61e8b05..7e5ac62b 100644 --- a/js/components/ascribe_forms/form_password_reset_request.js +++ b/js/components/ascribe_forms/form_password_reset_request.js @@ -6,6 +6,7 @@ import apiUrls from '../../constants/api_urls'; import FormMixin from '../../mixins/form_mixin'; import InputText from './input_text'; import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close'; +import { getLangText } from '../../utils/lang_utils.js' let PasswordResetRequestForm = React.createClass({ mixins: [FormMixin], @@ -25,12 +26,12 @@ let PasswordResetRequestForm = React.createClass({
@@ -38,4 +39,4 @@ let PasswordResetRequestForm = React.createClass({ } }); -export default PasswordResetRequestForm; \ No newline at end of file +export default PasswordResetRequestForm; diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js index c2cebeb5..6d6ffc56 100644 --- a/js/components/ascribe_forms/form_piece_extradata.js +++ b/js/components/ascribe_forms/form_piece_extradata.js @@ -3,6 +3,7 @@ import React from 'react'; import requests from '../../utils/requests'; +import { getLangText } from '../../utils/lang_utils.js' import apiUrls from '../../constants/api_urls'; @@ -46,7 +47,7 @@ let PieceExtraDataForm = React.createClass({ rows={3} editable={this.props.editable} defaultValue={defaultValue} - placeholder={'Fill in ' + this.props.title} + placeholder={getLangText('Fill in%s', ' ') + this.props.title} required/>