From aad12e7a1c44f36d971d7eda10ca375f0bda59ef Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Mon, 29 Apr 2019 13:51:00 +0800 Subject: [PATCH 01/13] purchase-button : add fade in animation --- .../Components/Elements/purchase-button.jsx | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx index 264fe738dce1f..780138fd7b3f3 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx @@ -1,11 +1,27 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +import posed, { PoseGroup } from 'react-pose'; import { localize } from '_common/localize'; import Button from 'App/Components/Form/button.jsx'; import { IconTradeType } from 'Assets/Trading/Types'; import { getContractTypeDisplay } from 'Constants/contract'; +const FadeIn = posed.div({ + enter: { + opacity : 1, + transition: { + duration: 300, + }, + }, + exit: { + opacity : 0, + transition: { + duration: 300, + }, + }, +}); + const PurchaseButton = ({ info, is_contract_mode, @@ -47,7 +63,15 @@ const PurchaseButton = ({
- {is_loading || is_disabled ? '' : info.returns} + {!(is_loading || is_disabled) ? + + + {info.returns} + + + : + + }
From ec69162f499b479e86be2898f6d0cef91111cbbd Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Mon, 29 Apr 2019 14:01:42 +0800 Subject: [PATCH 02/13] purchase-button: refactor animation --- .../Components/Elements/purchase-button.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx index 780138fd7b3f3..c790881090955 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx @@ -63,15 +63,15 @@ const PurchaseButton = ({
- {!(is_loading || is_disabled) ? - - - {info.returns} - - - : - - } + + {!(is_loading || is_disabled) && + + + {info.returns} + + + } +
From ce74e9b7234d2cbdbc48867d01a27fed72975324 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Mon, 29 Apr 2019 18:45:55 +0800 Subject: [PATCH 03/13] add fade animation to purchase button --- .../Components/Elements/purchase-button.jsx | 40 +++++-------------- .../Components/Elements/purchase-fieldset.jsx | 14 +++---- src/sass/app_2/modules/trading.scss | 13 ++++-- 3 files changed, 27 insertions(+), 40 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx index c790881090955..7823ceff7978c 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx @@ -1,48 +1,38 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import posed, { PoseGroup } from 'react-pose'; import { localize } from '_common/localize'; import Button from 'App/Components/Form/button.jsx'; import { IconTradeType } from 'Assets/Trading/Types'; import { getContractTypeDisplay } from 'Constants/contract'; -const FadeIn = posed.div({ - enter: { - opacity : 1, - transition: { - duration: 300, - }, - }, - exit: { - opacity : 0, - transition: { - duration: 300, - }, - }, -}); - const PurchaseButton = ({ info, is_contract_mode, is_disabled, is_high_low, is_loading, + is_param_change, onClickPurchase, type, }) => { const getIconType = () => { - if (is_loading) return ''; + if (!is_param_change && is_loading) return ''; return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase(); }; + return (
- {!is_loading && localize('[_1]', getContractTypeDisplay(type, is_high_low))} + {(!is_param_change && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
- - {!(is_loading || is_disabled) && - - - {info.returns} - - - } - + {!(is_loading || is_disabled) ? info.returns : ''}
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx index 120934ffe2016..a33ff5bce8046 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx @@ -11,16 +11,13 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button. class PurchaseFieldset extends React.PureComponent { state = { - show_tooltip: false, + show_tooltip : false, + is_param_change: false, } - onMouseEnter = () => { - this.setState({ show_tooltip: true }); - } - - onMouseLeave = () => { - this.setState({ show_tooltip: false }); - } + componentDidUpdate = () => this.setState({ is_param_change: true }); + onMouseEnter = () => this.setState({ show_tooltip: true }); + onMouseLeave = () => this.setState({ show_tooltip: false }); render() { const { @@ -50,6 +47,7 @@ class PurchaseFieldset extends React.PureComponent { is_high_low={is_high_low} is_loading={is_loading} onClickPurchase={onClickPurchase} + is_param_change={this.state.is_param_change} type={type} /> ); diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss index d91082726b349..5e45fcca87604 100644 --- a/src/sass/app_2/modules/trading.scss +++ b/src/sass/app_2/modules/trading.scss @@ -1,4 +1,4 @@ -@keyframes data--loading { +@keyframes slide { 0% { transform: translateX(-100%); } @@ -16,7 +16,7 @@ &--loading { width: inherit; height: inherit; - animation: data--loading 1s cubic-bezier(1, 0, 0.5, 0) infinite; + animation: slide 1s cubic-bezier(1, 0, 0.5, 0) infinite; background-image: linear-gradient(to left, rgba(255, 255, 255, 0), $COLOR_WHITE 10%, rgba(255, 255, 255, 0)); opacity: 0.32; } @@ -464,7 +464,7 @@ } } } - &--animated { + &--animated--slide { .btn-purchase__icon_wrapper, .btn-purchase__text_wrapper { @extend .loader; } @@ -484,6 +484,13 @@ } } } + &--animated--fade .btn-purchase__info--right .btn-purchase__text { + opacity: 0; + } + &--animated--fade-show .btn-purchase__info--right .btn-purchase__text { + opacity: 1; + transition: 1s; + } &__shadow-wrapper:hover:after { opacity: 0; } From 2521c2daca7a13b361b1d066b464d5dc61aa6733 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 13:48:55 +0800 Subject: [PATCH 04/13] purchase.jsx : refactor code --- .../Modules/Trading/Containers/purchase.jsx | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx b/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx index cac7fcc60bd70..e31c28af53680 100644 --- a/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx +++ b/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx @@ -21,17 +21,17 @@ const Purchase = ({ trade_types, validation_errors, }) => { + const is_high_low = /high_low/.test(contract_type.toLowerCase()); + const isLoading = info => { + const has_validation_error = Object.values(validation_errors).some(e => e.length); + return !has_validation_error && !info.has_error && !info.id; + }; + const components = []; Object.keys(trade_types).map((type, index) => { - const info = proposal_info[type] || {}; - const is_disabled = !is_purchase_enabled - || !is_trade_enabled - || !info.id - || !is_client_allowed_to_visit; - const is_high_low = /high_low/.test(contract_type.toLowerCase()); - const is_validation_error = Object.values(validation_errors).some(e => e.length); - const is_loading = !is_validation_error && !info.has_error && !info.id; - const is_proposal_error = info.has_error && !info.has_error_details; + const info = proposal_info[type] || {}; + const is_disabled = !is_purchase_enabled || !is_trade_enabled || !info.id || !is_client_allowed_to_visit; + const is_proposal_error = info.has_error && !info.has_error_details; const purchase_fieldset = ( ); + const contract_type_position = getContractTypePosition(type); - if (contract_type_position === 'top') { - components.unshift(purchase_fieldset); - } else if (contract_type_position === 'bottom') { - components.push(purchase_fieldset); - } else { - components.push(purchase_fieldset); + switch (contract_type_position) { + case 'top': + components.unshift(purchase_fieldset); + break; + case 'bottom': + components.push(purchase_fieldset); + break; + default: + components.push(purchase_fieldset); + break; } }); From dadc4bf006a0871d376b9ad7033bffac63963700 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 13:59:35 +0800 Subject: [PATCH 05/13] purchase.jsx : refactor code --- src/javascript/app_2/Modules/Trading/Containers/purchase.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx b/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx index e31c28af53680..81dca41c42396 100644 --- a/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx +++ b/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx @@ -54,8 +54,7 @@ const Purchase = ({ /> ); - const contract_type_position = getContractTypePosition(type); - switch (contract_type_position) { + switch (getContractTypePosition(type)) { case 'top': components.unshift(purchase_fieldset); break; From 5d33a31b1c728bcbd21d16907c33d4e82cba3104 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 14:39:24 +0800 Subject: [PATCH 06/13] contract-info: refactor minor stuff --- .../Form/Purchase/contract-info.jsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx index 3b78ec85de730..cfe5e7647a36f 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -14,7 +14,7 @@ const ContractInfo = ({ is_visible, proposal_info, }) => { - const is_loaded_with_error = proposal_info.has_error || !proposal_info.id; + const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id; return ( @@ -24,30 +24,33 @@ const ContractInfo = ({
:
-
-
{is_loaded_with_error ? basis : localize('[_1]', proposal_info.obj_contract_basis.text)}
+
+
+ {has_error_or_not_loaded + ? basis + : localize('[_1]', proposal_info.obj_contract_basis.text) + } +
- {is_loaded_with_error ? - '' - : - + {!has_error_or_not_loaded && + }
{is_visible &&
- {!is_loaded_with_error && has_increased !== null && } + {(!has_error_or_not_loaded && has_increased !== null) && + + }
}
- - - +
} From 40b17cc788dde07a7f61ccee38e7a9eb99bfcf47 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 15:31:03 +0800 Subject: [PATCH 07/13] Added new animation to purchase button --- .../Components/Elements/purchase-fieldset.jsx | 1 + .../Form/Purchase/contract-info.jsx | 70 +++++++++---------- src/sass/app_2/modules/trading.scss | 27 ++++--- 3 files changed, 52 insertions(+), 46 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx index a33ff5bce8046..a4bbb9b2645c3 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx @@ -66,6 +66,7 @@ class PurchaseFieldset extends React.PureComponent { proposal_info={info} has_increased={info.has_increased} is_loading={is_loading} + is_param_change={this.state.is_param_change} is_visible={!is_contract_mode} />
{ const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id; return ( - - {is_loading ? -
-
+
+
+
+ {has_error_or_not_loaded + ? basis + : localize('[_1]', proposal_info.obj_contract_basis.text) + }
- : -
-
-
- {has_error_or_not_loaded - ? basis - : localize('[_1]', proposal_info.obj_contract_basis.text) - } -
-
- {!has_error_or_not_loaded && - - } -
- {is_visible && -
- {(!has_error_or_not_loaded && has_increased !== null) && - - } -
- } -
- +
+ {!has_error_or_not_loaded && + + }
- } - + {is_visible && +
+ {(!has_error_or_not_loaded && has_increased !== null) && + + } +
+ } +
+ +
); }; ContractInfo.propTypes = { diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss index 5e45fcca87604..222e61600023f 100644 --- a/src/sass/app_2/modules/trading.scss +++ b/src/sass/app_2/modules/trading.scss @@ -67,16 +67,6 @@ } } } - &__loader { - width: 92px; - height: 8px; - margin: 3.5px 0; - @extend .loader; - - &--loading { - @extend .loader--loading; - } - } &__error { justify-content: center; align-items: center; @@ -144,11 +134,26 @@ } } } + &--animated--slide { + width: 92px; + height: 8px; + margin: 3.5px 0; + @extend .loader; + + .trade-container__price-info-basis { + @extend .loader--loading; + } + } + &--animated--fade &-value { + opacity: 0; + } &-value { @include typeface(--small-left-bold-black); @include themify($themes) { color: themed('text_color'); } + opacity: 1; + transition: 0.3s; } &-basis { @include typeface(--paragraph-left-normal-black); @@ -489,7 +494,7 @@ } &--animated--fade-show .btn-purchase__info--right .btn-purchase__text { opacity: 1; - transition: 1s; + transition: 0.3s; } &__shadow-wrapper:hover:after { opacity: 0; From 1b02ff73dfc6d1cbce577f0afac0ee0817e07554 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 15:39:47 +0800 Subject: [PATCH 08/13] fix button bobbing --- .../Trading/Components/Form/Purchase/contract-info.jsx | 4 ++-- src/sass/app_2/modules/trading.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx index c34726d2a66eb..a5a841b791d1b 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -23,8 +23,8 @@ const ContractInfo = ({ 'trade-container__price-info', { 'trade-container__price-info--disabled' : has_error_or_not_loaded, - 'trade-container__price-info--animated--slide': is_loading && !is_param_change, - 'trade-container__price-info--animated--fade' : is_loading && is_param_change, + 'trade-container__price-info--animated--slide': is_loading && is_param_change, + 'trade-container__price-info--animated--fade' : is_loading && !is_param_change, })} >
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss index 222e61600023f..93f94e56594ff 100644 --- a/src/sass/app_2/modules/trading.scss +++ b/src/sass/app_2/modules/trading.scss @@ -137,7 +137,7 @@ &--animated--slide { width: 92px; height: 8px; - margin: 3.5px 0; + margin: 6.5px 0; @extend .loader; .trade-container__price-info-basis { From 7e9c4c61ad374f0fa8e3c578777def070e16d355 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 15:41:48 +0800 Subject: [PATCH 09/13] fix only show slide when first load --- .../Trading/Components/Form/Purchase/contract-info.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx index a5a841b791d1b..c34726d2a66eb 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -23,8 +23,8 @@ const ContractInfo = ({ 'trade-container__price-info', { 'trade-container__price-info--disabled' : has_error_or_not_loaded, - 'trade-container__price-info--animated--slide': is_loading && is_param_change, - 'trade-container__price-info--animated--fade' : is_loading && !is_param_change, + 'trade-container__price-info--animated--slide': is_loading && !is_param_change, + 'trade-container__price-info--animated--fade' : is_loading && is_param_change, })} >
From 9a4ef91dc4937de166d618fb0186ba3c1be6aa98 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 16:39:36 +0800 Subject: [PATCH 10/13] is_param_change -> should_fade --- .../Trading/Components/Elements/purchase-button.jsx | 12 ++++++------ .../Components/Elements/purchase-fieldset.jsx | 10 +++++----- .../Components/Form/Purchase/contract-info.jsx | 6 +++--- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx index 7823ceff7978c..a8fae0449ab9e 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx @@ -12,12 +12,12 @@ const PurchaseButton = ({ is_disabled, is_high_low, is_loading, - is_param_change, + should_fade, onClickPurchase, type, }) => { const getIconType = () => { - if (!is_param_change && is_loading) return ''; + if (!should_fade && is_loading) return ''; return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase(); }; @@ -29,9 +29,9 @@ const PurchaseButton = ({ 'btn-purchase', { 'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading, - 'btn-purchase--animated--slide' : !is_param_change && is_loading, - 'btn-purchase--animated--fade' : is_param_change && is_loading, - 'btn-purchase--animated--fade-show': is_param_change && !is_loading, + 'btn-purchase--animated--slide' : !should_fade && is_loading, + 'btn-purchase--animated--fade' : should_fade && is_loading, + 'btn-purchase--animated--fade-show': should_fade && !is_loading, })} has_effect onClick={() => { onClickPurchase(info.id, info.stake, type); }} @@ -46,7 +46,7 @@ const PurchaseButton = ({
- {(!is_param_change && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))} + {(!should_fade && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx index a4bbb9b2645c3..28d8a3a90bbc1 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx @@ -11,11 +11,11 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button. class PurchaseFieldset extends React.PureComponent { state = { - show_tooltip : false, - is_param_change: false, + show_tooltip: false, + should_fade : false, } - componentDidUpdate = () => this.setState({ is_param_change: true }); + componentDidUpdate = () => this.setState({ should_fade: true }); onMouseEnter = () => this.setState({ show_tooltip: true }); onMouseLeave = () => this.setState({ show_tooltip: false }); @@ -47,7 +47,7 @@ class PurchaseFieldset extends React.PureComponent { is_high_low={is_high_low} is_loading={is_loading} onClickPurchase={onClickPurchase} - is_param_change={this.state.is_param_change} + should_fade={this.state.should_fade} type={type} /> ); @@ -66,7 +66,7 @@ class PurchaseFieldset extends React.PureComponent { proposal_info={info} has_increased={info.has_increased} is_loading={is_loading} - is_param_change={this.state.is_param_change} + should_fade={this.state.should_fade} is_visible={!is_contract_mode} />
{ @@ -23,8 +23,8 @@ const ContractInfo = ({ 'trade-container__price-info', { 'trade-container__price-info--disabled' : has_error_or_not_loaded, - 'trade-container__price-info--animated--slide': is_loading && !is_param_change, - 'trade-container__price-info--animated--fade' : is_loading && is_param_change, + 'trade-container__price-info--animated--slide': is_loading && !should_fade, + 'trade-container__price-info--animated--fade' : is_loading && should_fade, })} >
From e9ccb9d35d3d1b15c36cf9b74591185921fe78f3 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 17:18:23 +0800 Subject: [PATCH 11/13] refactor --- .../Components/Elements/purchase-button.jsx | 5 ++--- .../Components/Elements/purchase-fieldset.jsx | 5 ++++- .../Components/Form/Purchase/contract-info.jsx | 6 +++--- src/sass/app_2/modules/trading.scss | 15 ++++++++------- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx index a8fae0449ab9e..03efa8b1c3c6d 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx @@ -29,9 +29,8 @@ const PurchaseButton = ({ 'btn-purchase', { 'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading, - 'btn-purchase--animated--slide' : !should_fade && is_loading, - 'btn-purchase--animated--fade' : should_fade && is_loading, - 'btn-purchase--animated--fade-show': should_fade && !is_loading, + 'btn-purchase--animated--slide' : is_loading && !should_fade, + 'btn-purchase--animated--fade' : is_loading && should_fade, })} has_effect onClick={() => { onClickPurchase(info.id, info.stake, type); }} diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx index 28d8a3a90bbc1..70b661b0c58aa 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx @@ -15,7 +15,10 @@ class PurchaseFieldset extends React.PureComponent { should_fade : false, } - componentDidUpdate = () => this.setState({ should_fade: true }); + componentDidMount() { + this.setState({ should_fade: true }); + } + onMouseEnter = () => this.setState({ show_tooltip: true }); onMouseLeave = () => this.setState({ show_tooltip: false }); diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx index 5eac0ccb3c6c0..98f0899179bc8 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -22,9 +22,9 @@ const ContractInfo = ({
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss index 93f94e56594ff..f107ee4110ff1 100644 --- a/src/sass/app_2/modules/trading.scss +++ b/src/sass/app_2/modules/trading.scss @@ -134,7 +134,7 @@ } } } - &--animated--slide { + &--slide { width: 92px; height: 8px; margin: 6.5px 0; @@ -144,7 +144,7 @@ @extend .loader--loading; } } - &--animated--fade &-value { + &--fade &-value { opacity: 0; } &-value { @@ -411,6 +411,11 @@ float: right; justify-content: right; background-color: transparent; + + .btn-purchase__text { + opacity: 1; + transition: 0.3s; + } } &__effect-detail { width: 0; @@ -489,13 +494,9 @@ } } } - &--animated--fade .btn-purchase__info--right .btn-purchase__text { + &--animated--fade &__info--right &__text { opacity: 0; } - &--animated--fade-show .btn-purchase__info--right .btn-purchase__text { - opacity: 1; - transition: 0.3s; - } &__shadow-wrapper:hover:after { opacity: 0; } From 7f6fcd01d0223f4402512733b8a1520a65576902 Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Tue, 30 Apr 2019 17:23:08 +0800 Subject: [PATCH 12/13] fix linting issue --- .../Modules/Trading/Components/Elements/purchase-button.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx index 03efa8b1c3c6d..0963a5e38f380 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx @@ -28,9 +28,9 @@ const PurchaseButton = ({ className={classNames( 'btn-purchase', { - 'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading, - 'btn-purchase--animated--slide' : is_loading && !should_fade, - 'btn-purchase--animated--fade' : is_loading && should_fade, + 'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading, + 'btn-purchase--animated--slide': is_loading && !should_fade, + 'btn-purchase--animated--fade' : is_loading && should_fade, })} has_effect onClick={() => { onClickPurchase(info.id, info.stake, type); }} From 3dd9a3355e885c3eb0aa8e023b17a248f740becb Mon Sep 17 00:00:00 2001 From: brandon <26451183+ahkuma@users.noreply.github.com> Date: Thu, 2 May 2019 14:12:01 +0800 Subject: [PATCH 13/13] fix wrong basis name issue --- .../Form/Purchase/contract-info.jsx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx index 98f0899179bc8..314715874cacf 100644 --- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -1,10 +1,11 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { localize } from '_common/localize'; -import Money from 'App/Components/Elements/money.jsx'; -import Tooltip from 'App/Components/Elements/tooltip.jsx'; -import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract'; +import { localize } from '_common/localize'; +import Money from 'App/Components/Elements/money.jsx'; +import Tooltip from 'App/Components/Elements/tooltip.jsx'; +import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx'; const ContractInfo = ({ basis, @@ -15,8 +16,19 @@ const ContractInfo = ({ is_visible, proposal_info, }) => { - const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id; + const localized_basis = getLocalizedBasis(); + const basisOrPayout = () => { + switch (basis) { + case 'stake': + return localized_basis.payout; + case 'payout': + return localized_basis.stake; + default: + return basis; + } + }; + const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id; return (
{has_error_or_not_loaded - ? basis + ? basisOrPayout() : localize('[_1]', proposal_info.obj_contract_basis.text) }