From 320a49389fdeeed0e71b2ea1324e749acc1fbf88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Wed, 16 Nov 2022 19:03:56 +0300 Subject: [PATCH 1/7] accu design chart position fix --- packages/trader/src/Modules/Trading/Containers/trade.jsx | 2 +- packages/trader/src/sass/app/_common/layout/trader-layouts.scss | 2 +- .../src/sass/app/modules/contract/accumulators-stats.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx index 2a12131ce511..8067dcb90311 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade.jsx +++ b/packages/trader/src/Modules/Trading/Containers/trade.jsx @@ -158,7 +158,7 @@ const Trade = ({ id='chart_container' className='chart-container' is_disabled={isDesktop()} - height_offset={is_accumulator ? '317px' : '259px'} + height_offset={is_accumulator ? '295px' : '259px'} > Date: Mon, 21 Nov 2022 12:41:52 +0300 Subject: [PATCH 2/7] accu page for reports rendering --- .../contract-card/contract-card-items/contract-update-form.jsx | 1 - packages/reports/src/Containers/open-positions.jsx | 2 +- packages/shared/src/utils/contract/contract.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx index 9745446e6830..fcb2ea8b5dc7 100644 --- a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx +++ b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx @@ -118,7 +118,6 @@ const ContractUpdateForm = props => { onChange={onChange} error_message_alignment={error_message_alignment || 'right'} value={contract_profit_or_loss.contract_update_take_profit} - is_checkbox_hidden={is_accumulator} is_disabled={!is_accumulator && !!is_valid_to_cancel} setCurrentFocus={setCurrentFocus} /> diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx index 85baf29a5126..1872c224b35e 100644 --- a/packages/reports/src/Containers/open-positions.jsx +++ b/packages/reports/src/Containers/open-positions.jsx @@ -94,7 +94,7 @@ const MobileRowRenderer = ({ const duration_type = getContractDurationType(contract_info.longcode); const progress_value = getTimePercentage(server_time, date_start, date_expiry) / 100; - if (isMultiplierContract(type)) { + if (isMultiplierContract(type) || isAccumulatorContract(type)) { return ( export const hasContractEntered = (contract_info: TContractInfo) => !!contract_info.entry_spot; -export const isAccumulatorContract = (contract_type: string) => /(A|DE)CCU/i.test(contract_type); +export const isAccumulatorContract = (contract_type: string) => /ACCU/i.test(contract_type); export const isMultiplierContract = (contract_type: string) => /MULT/i.test(contract_type); From dcc0b3193379160601f26b4c61c791ef996eee68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Wed, 23 Nov 2022 16:20:03 +0300 Subject: [PATCH 3/7] reports card design fix --- .../contract-card-items/contract-card-body.jsx | 11 +++++------ packages/reports/src/sass/app/modules/reports.scss | 6 ++++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx index 040de0d14b30..2d18acf5b5a1 100644 --- a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx +++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx @@ -175,15 +175,14 @@ const AccumulatorCardBody = ({ - - +
0, + 'dc-contract-card--loss': +profit < 0, })} > - {status === 'profit' && } - {status === 'loss' && } +
Date: Wed, 23 Nov 2022 16:20:41 +0300 Subject: [PATCH 4/7] reports card design fix2 --- .../contract-card/contract-card.scss | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/components/src/components/contract-card/contract-card.scss b/packages/components/src/components/contract-card/contract-card.scss index 543895e4e2b7..574f1c092ada 100644 --- a/packages/components/src/components/contract-card/contract-card.scss +++ b/packages/components/src/components/contract-card/contract-card.scss @@ -221,24 +221,6 @@ fill: var(--brand-secondary) !important; } } - //&--accumulators { - // @include mobile { - // justify-content: flex-end; - // - // .dc-contract-type__type { - // &-label { - // width: fit-content; - // } - // &-wrapper { - // padding: 0.5em 0.8em 0.5em 0.3em; - // } - // } - // } - // .dc-contract-type__type-wrapper .category-type { - // width: unset; - // height: unset; - // } - //} } &__symbol { margin-left: 0.4rem; From e8c12960daa027eb213a0dee3541c57c9f1d5a7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Fri, 25 Nov 2022 21:54:01 +0300 Subject: [PATCH 5/7] updated design fix --- .../contract-card-body.jsx | 11 +- .../contract-card/contract-card.jsx | 3 - packages/components/stories/icon/icons.js | 32 ++--- .../accumulators_stats_manual_desktop.svg | 89 +++++++++++- .../accumulators_stats_manual_mobile.svg | 131 +++++++++++++++++- .../Trading/Categories/trade-categories.jsx | 2 +- .../accumulators-stats-manual-modal.jsx | 6 +- .../ticks-history-counter.jsx | 47 +++++-- .../ContractTypeInfo/contract-type-info.jsx | 6 +- .../Trading/Containers/trade-params.jsx | 2 +- .../modules/contract/accumulators-stats.scss | 38 ++++- 11 files changed, 317 insertions(+), 50 deletions(-) diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx index 2d18acf5b5a1..e07ffecb8990 100644 --- a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx +++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx @@ -175,14 +175,15 @@ const AccumulatorCardBody = ({ - + +
0, - 'dc-contract-card--loss': +profit < 0, + className={classNames('dc-contract-card__indicative--movement', { + 'dc-contract-card__indicative--movement-complete': is_sold, })} > - + {status === 'profit' && } + {status === 'loss' && }
\ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/src/public/images/common/static_images/accumulators_stats_manual_mobile.svg b/packages/core/src/public/images/common/static_images/accumulators_stats_manual_mobile.svg index 8cd862001c9c..6cf7653d271a 100644 --- a/packages/core/src/public/images/common/static_images/accumulators_stats_manual_mobile.svg +++ b/packages/core/src/public/images/common/static_images/accumulators_stats_manual_mobile.svg @@ -1 +1,130 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/trader/src/Assets/Trading/Categories/trade-categories.jsx b/packages/trader/src/Assets/Trading/Categories/trade-categories.jsx index ff21a72182ff..82b36fffc395 100644 --- a/packages/trader/src/Assets/Trading/Categories/trade-categories.jsx +++ b/packages/trader/src/Assets/Trading/Categories/trade-categories.jsx @@ -13,7 +13,7 @@ const TradeCategories = ({ category }) => {

{localize( - 'When you open a position, barriers will be created around the asset price. For each new tick, the upper and lower barriers are automatically calculated based on the asset and accumulator value that you choose. You will earn a profit if you close your position before the asset price hits either of the barriers.' + 'When you open a position, barriers will be created around the asset price. For each new tick, the upper and lower barriers are automatically calculated based on the asset and accumulator value you choose. You will earn a profit if you close your position before the asset price hits either of the barriers.' )}

diff --git a/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx b/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx index f1b41ddb65b4..47ebde615978 100644 --- a/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx +++ b/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx @@ -20,8 +20,8 @@ const AccumulatorsStatsManualModal = ({ title, icon_classname, is_manual_open, t should_header_stick_body={false} title={title} toggleModal={toggleManual} - height={is_mobile ? '605px' : '712px'} - width={is_mobile ? '328px' : '755px'} + height={is_mobile ? '605px' : '615px'} + width={is_mobile ? '328px' : '596px'} className='accumulators-stats-manual-modal' > @@ -40,7 +40,7 @@ const AccumulatorsStatsManualModal = ({ title, icon_classname, is_manual_open, t 'The numbers show the history (last 100 results from the current spot) of tick counts that stayed inside the barrier of your selected market and accumulator.' )}{' '} {localize( - 'For example, a tick count of 5 means that the price “stayed inside” for 5 ticks before breaking outside the barrier for Volatility 100 index with a 3% accumulator.' + 'For example, a tick count of 5 means that the price “stayed inside” for 5 ticks before breaking outside the barrier for Volatility 10 index with a 3% accumulator.' )} diff --git a/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx b/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx index f680140d7b86..8c88b9845ed9 100644 --- a/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx +++ b/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx @@ -1,18 +1,41 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; -const TicksHistoryCounter = ({ has_progress_dots, value }) => ( -

- {value} - {has_progress_dots && ( -
- {[1, 2, 3].map(dot => { - return ; - })} -
- )} -
-); +const TicksHistoryCounter = ({ has_progress_dots, value }) => { + const [is_spot_emphasizing, setIsSpotEmphasizing] = React.useState(has_progress_dots && value); + + React.useLayoutEffect(() => { + let emphasizing_timeout; + if (has_progress_dots && value) { + setIsSpotEmphasizing(true); + emphasizing_timeout = setTimeout(() => { + setIsSpotEmphasizing(false); + }, 700); + } + return () => { + clearTimeout(emphasizing_timeout); + }; + }, [value]); + + return ( +
+ {value} + {has_progress_dots && ( +
+ {[1, 2, 3].map(dot => { + return ; + })} +
+ )} +
+ ); +}; TicksHistoryCounter.propTypes = { has_progress_dots: PropTypes.bool, diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx index 8bc02a99e5e9..912d05abbb73 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx @@ -15,7 +15,11 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
- +
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params.jsx b/packages/trader/src/Modules/Trading/Containers/trade-params.jsx index a345c4b2211c..5d75dfb8c6c4 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade-params.jsx +++ b/packages/trader/src/Modules/Trading/Containers/trade-params.jsx @@ -22,8 +22,8 @@ const TradeParams = ({ form_components, is_minimized }) => { {isVisible('duration') && } {isVisible('barrier') && } {isVisible('last_digit') && } - {isVisible('amount') && } {isVisible('accumulator') && } + {isVisible('amount') && } {isVisible('take_profit') && } {isVisible('stop_loss') && } {isVisible('cancellation') && } diff --git a/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss b/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss index 1773793af6aa..0fd4913b650b 100644 --- a/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss +++ b/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss @@ -36,7 +36,7 @@ display: flex; align-items: center; width: 100%; - height: 5.2rem; + height: 3.8rem; position: relative; padding: 0.8rem; @@ -68,6 +68,26 @@ } } } + + &__spot-emphasizing { + position: relative; + + &::before { + content: ''; + position: absolute; + width: 3.2rem; + height: 3.2rem; + top: -0.3rem; + left: 0.3rem; + border-radius: 50%; + background: center no-repeat radial-gradient(50% 50% at 50% 50%, rgba(55, 124, 252, 0.72) 0%, rgba(55, 124, 252, 0) 100%); + + @include mobile { + left: 0rem; + } + } + } + &__history { display: flex; align-items: center; @@ -141,7 +161,7 @@ display: flex; flex-direction: column; gap: 1rem; - padding: 0.6rem 0.8rem 1.3rem; + padding: 0.2rem 0.8rem 1.2rem; width: 100%; #{ $self }__row { @@ -175,10 +195,10 @@ display: flex; flex-direction: column; align-items: center; + padding: 1.6rem; &__image { - margin-bottom: 2.4rem; - height: 49rem; + margin-bottom: 0.8rem; @include mobile { margin: 0.8rem 0 1.6rem; @@ -190,10 +210,16 @@ } } -@include mobile { - .dc-modal-header--accumulators-stats-manual-modal { +.dc-modal-header--accumulators-stats-manual-modal { + height: 5.6rem; + + @include mobile { height: 5.2rem; + } +} + +@include mobile { .dc-mobile-dialog__accumulators-stats { padding: 1.1rem 1.6rem; } From 3804ea8df7d9e6859bb4e08e50b59f8c26aea31d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Sat, 26 Nov 2022 10:03:35 +0300 Subject: [PATCH 6/7] pseudoelement colon fix --- .../src/sass/app/modules/contract/accumulators-stats.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss b/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss index 0fd4913b650b..69a75eeae153 100644 --- a/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss +++ b/packages/trader/src/sass/app/modules/contract/accumulators-stats.scss @@ -72,7 +72,7 @@ &__spot-emphasizing { position: relative; - &::before { + &:before { content: ''; position: absolute; width: 3.2rem; From 954c29a886a529429828b874bf4e125b5d778f6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?= <“yauheni@deriv.me”> Date: Sat, 26 Nov 2022 10:18:51 +0300 Subject: [PATCH 7/7] emphasizing value fix --- .../Components/AccumulatorsStats/ticks-history-counter.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx b/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx index 8c88b9845ed9..43aa420116cd 100644 --- a/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx +++ b/packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; const TicksHistoryCounter = ({ has_progress_dots, value }) => { - const [is_spot_emphasizing, setIsSpotEmphasizing] = React.useState(has_progress_dots && value); + const [is_spot_emphasizing, setIsSpotEmphasizing] = React.useState(has_progress_dots && value === 0); React.useLayoutEffect(() => { let emphasizing_timeout; - if (has_progress_dots && value) { + if (has_progress_dots && value === 0) { setIsSpotEmphasizing(true); emphasizing_timeout = setTimeout(() => { setIsSpotEmphasizing(false);