ahkuma/purchase_animation

src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx

@@ -12,21 +12,26 @@ const PurchaseButton = ({
     is_disabled,
     is_high_low,
     is_loading,
+    should_fade,
     onClickPurchase,
     type,
 }) => {
     const getIconType = () => {
-        if (is_loading) return '';
+        if (!should_fade && is_loading) return '';
         return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase();
     };
+
     return (
         <Button
             is_disabled={is_contract_mode || is_disabled}
             id={`purchase_${type}`}
             className={classNames(
                 'btn-purchase',
-                { 'btn-purchase--disabled': (is_contract_mode || is_disabled) && !is_loading },
-                { 'btn-purchase--animated': is_loading })}
+                {
+                    '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); }}
         >
@@ -40,14 +45,14 @@ const PurchaseButton = ({
                     </div>
                     <div className='btn-purchase__text_wrapper'>
                         <span className='btn-purchase__text'>
-                            {!is_loading && localize('[_1]', getContractTypeDisplay(type, is_high_low))}
+                            {(!should_fade && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
                         </span>
                     </div>
                 </div>
                 <div className='btn-purchase__effect-detail' />
                 <div className='btn-purchase__info btn-purchase__info--right'>
                     <div className='btn-purchase__text_wrapper'>
-                        <span className='btn-purchase__text'>{is_loading || is_disabled ? '' : info.returns}</span>
+                        <span className='btn-purchase__text'>{!(is_loading || is_disabled) ? info.returns : ''}</span>
                     </div>
                 </div>
             </React.Fragment>

src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx

@@ -12,15 +12,15 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button.
 class PurchaseFieldset extends React.PureComponent {
     state = {
         show_tooltip: false,
+        should_fade : false,
     }
 
-    onMouseEnter = () => {
-        this.setState({ show_tooltip: true });
+    componentDidMount() {
+        this.setState({ should_fade: true });
     }
 
-    onMouseLeave = () => {
-        this.setState({ show_tooltip: false });
-    }
+    onMouseEnter = () => this.setState({ show_tooltip: true });
+    onMouseLeave = () => this.setState({ show_tooltip: false });
 
     render() {
         const {
@@ -50,6 +50,7 @@ class PurchaseFieldset extends React.PureComponent {
                 is_high_low={is_high_low}
                 is_loading={is_loading}
                 onClickPurchase={onClickPurchase}
+                should_fade={this.state.should_fade}
                 type={type}
             />
         );
@@ -68,6 +69,7 @@ class PurchaseFieldset extends React.PureComponent {
                         proposal_info={info}
                         has_increased={info.has_increased}
                         is_loading={is_loading}
+                        should_fade={this.state.should_fade}
                         is_visible={!is_contract_mode}
                     />
                     <div

src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx

@@ -1,56 +1,71 @@
-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,
     currency,
     has_increased,
     is_loading,
+    should_fade,
     is_visible,
     proposal_info,
 }) => {
-    const is_loaded_with_error = 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 (
-        <React.Fragment>
-            {is_loading ?
-                <div className='trade-container__loader'>
-                    <div className='trade-container__loader--loading' />
+        <div className='trade-container__price'>
+            <div className={classNames(
+                'trade-container__price-info',
+                {
+                    'trade-container__price-info--disabled': has_error_or_not_loaded,
+                    'trade-container__price-info--slide'   : is_loading && !should_fade,
+                    'trade-container__price-info--fade'    : is_loading && should_fade,
+                })}
+            >
+                <div className='trade-container__price-info-basis'>
+                    {has_error_or_not_loaded
+                        ? basisOrPayout()
+                        : localize('[_1]', proposal_info.obj_contract_basis.text)
+                    }
                 </div>
-                :
-                <div className='trade-container__price'>
-                    <div className={classNames('trade-container__price-info', { 'trade-container__price-info--disabled': is_loaded_with_error })}>
-                        <div className='trade-container__price-info-basis'>{is_loaded_with_error ? basis : localize('[_1]', proposal_info.obj_contract_basis.text)}</div>
-                        <div className='trade-container__price-info-value'>
-                            {is_loaded_with_error ?
-                                ''
-                                :
-                                <Money amount={proposal_info.obj_contract_basis.value} className='trade-container__price-info-currency' currency={currency} />
-                            }
-                        </div>
-                        {is_visible &&
-                        <div className='trade-container__price-info-movement'>
-                            {!is_loaded_with_error && has_increased !== null && <IconPriceMove type={has_increased ? 'profit' : 'loss'} />}
-                        </div>
-                        }
-                    </div>
-                    <span>
-                        <Tooltip
-                            alignment='left'
-                            className={classNames('trade-container__price-tooltip', { 'trade-container__price-tooltip--disabled': is_loaded_with_error })}
-                            classNameIcon='trade-container__price-tooltip-i'
-                            icon='info'
-                            message={is_loaded_with_error ? '' : proposal_info.message}
-                        />
-                    </span>
+                <div className='trade-container__price-info-value'>
+                    {!has_error_or_not_loaded &&
+                    <Money amount={proposal_info.obj_contract_basis.value} className='trade-container__price-info-currency' currency={currency} />
+                    }
                 </div>
-            }
-        </React.Fragment>
+                {is_visible &&
+                <div className='trade-container__price-info-movement'>
+                    {(!has_error_or_not_loaded && has_increased !== null) &&
+                        <IconPriceMove type={has_increased ? 'profit' : 'loss'} />
+                    }
+                </div>
+                }
+            </div>
+            <Tooltip
+                alignment='left'
+                className={classNames('trade-container__price-tooltip', { 'trade-container__price-tooltip--disabled': has_error_or_not_loaded })}
+                classNameIcon='trade-container__price-tooltip-i'
+                icon='info'
+                message={has_error_or_not_loaded ? '' : proposal_info.message}
+            />
+        </div>
     );
 };
 ContractInfo.propTypes = {

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 = (
             <PurchaseFieldset
@@ -43,7 +43,7 @@ const Purchase = ({
                 is_contract_mode={is_contract_mode}
                 is_disabled={is_disabled}
                 is_high_low={is_high_low}
-                is_loading={is_loading}
+                is_loading={isLoading(info)}
                 // is_purchase_confirm_on={is_purchase_confirm_on}
                 is_proposal_error={is_proposal_error}
                 // is_purchase_locked={is_purchase_locked}
@@ -53,13 +53,17 @@ const Purchase = ({
                 type={type}
             />
         );
-        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 (getContractTypePosition(type)) {
+            case 'top':
+                components.unshift(purchase_fieldset);
+                break;
+            case 'bottom':
+                components.push(purchase_fieldset);
+                break;
+            default:
+                components.push(purchase_fieldset);
+                break;
         }
     });
 

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;
     }
@@ -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,6 +134,19 @@
                     }
                 }
             }
+            &--slide {
+                width: 92px;
+                height: 8px;
+                margin: 6.5px 0;
+                @extend .loader;
+
+                .trade-container__price-info-basis {
+                    @extend .loader--loading;
+                }
+            }
+            &--fade &-value {
+                opacity: 0;
+            }
             &-value {
                 font-size: 1.4em;
                 font-weight: 700;
@@ -154,6 +157,8 @@
                 @include themify($themes) {
                     color: themed('text_color');
                 }
+                opacity: 1;
+                transition: 0.3s;
             }
             &-basis {
                 margin-left: 0;
@@ -411,6 +416,11 @@
         float: right;
         justify-content: right;
         background-color: transparent;
+
+        .btn-purchase__text {
+            opacity: 1;
+            transition: 0.3s;
+        }
     }
     &__effect-detail {
         width: 0;
@@ -469,7 +479,7 @@
             }
         }
     }
-    &--animated {
+    &--animated--slide {
         .btn-purchase__icon_wrapper, .btn-purchase__text_wrapper {
             @extend .loader;
         }
@@ -489,6 +499,9 @@
             }
         }
     }
+    &--animated--fade &__info--right &__text {
+        opacity: 0;
+    }
     &__shadow-wrapper:hover:after {
         opacity: 0;
     }