Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

Commit 9ca7270

Browse files
negarnnegarn
authored
Merge pull request #5418 from negarn/translations
Translations
2 parents 2b09914 + 0f7f726 commit 9ca7270

File tree

22 files changed

+199
-153
lines changed

22 files changed

+199
-153
lines changed

‎src/javascript/_autogenerated/it.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,26 @@ const PurchaseButton = ({
1212
is_disabled,
1313
is_high_low,
1414
is_loading,
15+
should_fade,
1516
onClickPurchase,
1617
type,
1718
}) => {
1819
const getIconType = () => {
19-
if (is_loading) return '';
20+
if (!should_fade && is_loading) return '';
2021
return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase();
2122
};
23+
2224
return (
2325
<Button
2426
is_disabled={is_contract_mode || is_disabled}
2527
id={`purchase_${type}`}
2628
className={classNames(
2729
'btn-purchase',
28-
{ 'btn-purchase--disabled': (is_contract_mode || is_disabled) && !is_loading },
29-
{ 'btn-purchase--animated': is_loading })}
30+
{
31+
'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading,
32+
'btn-purchase--animated--slide': is_loading && !should_fade,
33+
'btn-purchase--animated--fade' : is_loading && should_fade,
34+
})}
3035
has_effect
3136
onClick={() => { onClickPurchase(info.id, info.stake, type); }}
3237
>
@@ -40,14 +45,14 @@ const PurchaseButton = ({
4045
</div>
4146
<div className='btn-purchase__text_wrapper'>
4247
<span className='btn-purchase__text'>
43-
{!is_loading && localize('[_1]', getContractTypeDisplay(type, is_high_low))}
48+
{(!should_fade && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
4449
</span>
4550
</div>
4651
</div>
4752
<div className='btn-purchase__effect-detail' />
4853
<div className='btn-purchase__info btn-purchase__info--right'>
4954
<div className='btn-purchase__text_wrapper'>
50-
<span className='btn-purchase__text'>{is_loading || is_disabled ? '' : info.returns}</span>
55+
<span className='btn-purchase__text'>{!(is_loading || is_disabled) ? info.returns : ''}</span>
5156
</div>
5257
</div>
5358
</React.Fragment>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button.
1212
class PurchaseFieldset extends React.PureComponent {
1313
state = {
1414
show_tooltip: false,
15+
should_fade : false,
1516
}
1617

17-
onMouseEnter = () => {
18-
this.setState({ show_tooltip: true });
18+
componentDidMount() {
19+
this.setState({ should_fade: true });
1920
}
2021

21-
onMouseLeave = () => {
22-
this.setState({ show_tooltip: false });
23-
}
22+
onMouseEnter = () => this.setState({ show_tooltip: true });
23+
onMouseLeave = () => this.setState({ show_tooltip: false });
2424

2525
render() {
2626
const {
@@ -50,6 +50,7 @@ class PurchaseFieldset extends React.PureComponent {
5050
is_high_low={is_high_low}
5151
is_loading={is_loading}
5252
onClickPurchase={onClickPurchase}
53+
should_fade={this.state.should_fade}
5354
type={type}
5455
/>
5556
);
@@ -68,6 +69,7 @@ class PurchaseFieldset extends React.PureComponent {
6869
proposal_info={info}
6970
has_increased={info.has_increased}
7071
is_loading={is_loading}
72+
should_fade={this.state.should_fade}
7173
is_visible={!is_contract_mode}
7274
/>
7375
<div

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

Lines changed: 55 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,71 @@
1-
import classNames from 'classnames';
2-
import PropTypes from 'prop-types';
3-
import React from 'react';
4-
import { localize } from '_common/localize';
5-
import Money from 'App/Components/Elements/money.jsx';
6-
import Tooltip from 'App/Components/Elements/tooltip.jsx';
7-
import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
1+
import classNames from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract';
5+
import { localize } from '_common/localize';
6+
import Money from 'App/Components/Elements/money.jsx';
7+
import Tooltip from 'App/Components/Elements/tooltip.jsx';
8+
import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
89

910
const ContractInfo = ({
1011
basis,
1112
currency,
1213
has_increased,
1314
is_loading,
15+
should_fade,
1416
is_visible,
1517
proposal_info,
1618
}) => {
17-
const is_loaded_with_error = proposal_info.has_error || !proposal_info.id;
19+
const localized_basis = getLocalizedBasis();
20+
const basisOrPayout = () => {
21+
switch (basis) {
22+
case 'stake':
23+
return localized_basis.payout;
24+
case 'payout':
25+
return localized_basis.stake;
26+
default:
27+
return basis;
28+
}
29+
};
1830

31+
const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id;
1932
return (
20-
<React.Fragment>
21-
{is_loading ?
22-
<div className='trade-container__loader'>
23-
<div className='trade-container__loader--loading' />
33+
<div className='trade-container__price'>
34+
<div className={classNames(
35+
'trade-container__price-info',
36+
{
37+
'trade-container__price-info--disabled': has_error_or_not_loaded,
38+
'trade-container__price-info--slide' : is_loading && !should_fade,
39+
'trade-container__price-info--fade' : is_loading && should_fade,
40+
})}
41+
>
42+
<div className='trade-container__price-info-basis'>
43+
{has_error_or_not_loaded
44+
? basisOrPayout()
45+
: localize('[_1]', proposal_info.obj_contract_basis.text)
46+
}
2447
</div>
25-
:
26-
<div className='trade-container__price'>
27-
<div className={classNames('trade-container__price-info', { 'trade-container__price-info--disabled': is_loaded_with_error })}>
28-
<div className='trade-container__price-info-basis'>{is_loaded_with_error ? basis : localize('[_1]', proposal_info.obj_contract_basis.text)}</div>
29-
<div className='trade-container__price-info-value'>
30-
{is_loaded_with_error ?
31-
''
32-
:
33-
<Money amount={proposal_info.obj_contract_basis.value} className='trade-container__price-info-currency' currency={currency} />
34-
}
35-
</div>
36-
{is_visible &&
37-
<div className='trade-container__price-info-movement'>
38-
{!is_loaded_with_error && has_increased !== null && <IconPriceMove type={has_increased ? 'profit' : 'loss'} />}
39-
</div>
40-
}
41-
</div>
42-
<span>
43-
<Tooltip
44-
alignment='left'
45-
className={classNames('trade-container__price-tooltip', { 'trade-container__price-tooltip--disabled': is_loaded_with_error })}
46-
classNameIcon='trade-container__price-tooltip-i'
47-
icon='info'
48-
message={is_loaded_with_error ? '' : proposal_info.message}
49-
/>
50-
</span>
48+
<div className='trade-container__price-info-value'>
49+
{!has_error_or_not_loaded &&
50+
<Money amount={proposal_info.obj_contract_basis.value} className='trade-container__price-info-currency' currency={currency} />
51+
}
5152
</div>
52-
}
53-
</React.Fragment>
53+
{is_visible &&
54+
<div className='trade-container__price-info-movement'>
55+
{(!has_error_or_not_loaded && has_increased !== null) &&
56+
<IconPriceMove type={has_increased ? 'profit' : 'loss'} />
57+
}
58+
</div>
59+
}
60+
</div>
61+
<Tooltip
62+
alignment='left'
63+
className={classNames('trade-container__price-tooltip', { 'trade-container__price-tooltip--disabled': has_error_or_not_loaded })}
64+
classNameIcon='trade-container__price-tooltip-i'
65+
icon='info'
66+
message={has_error_or_not_loaded ? '' : proposal_info.message}
67+
/>
68+
</div>
5469
);
5570
};
5671
ContractInfo.propTypes = {

‎src/javascript/app_2/Modules/Trading/Containers/purchase.jsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ const Purchase = ({
2121
trade_types,
2222
validation_errors,
2323
}) => {
24+
const is_high_low = /high_low/.test(contract_type.toLowerCase());
25+
const isLoading = info => {
26+
const has_validation_error = Object.values(validation_errors).some(e => e.length);
27+
return !has_validation_error && !info.has_error && !info.id;
28+
};
29+
2430
const components = [];
2531
Object.keys(trade_types).map((type, index) => {
26-
const info = proposal_info[type] || {};
27-
const is_disabled = !is_purchase_enabled
28-
|| !is_trade_enabled
29-
|| !info.id
30-
|| !is_client_allowed_to_visit;
31-
const is_high_low = /high_low/.test(contract_type.toLowerCase());
32-
const is_validation_error = Object.values(validation_errors).some(e => e.length);
33-
const is_loading = !is_validation_error && !info.has_error && !info.id;
34-
const is_proposal_error = info.has_error && !info.has_error_details;
32+
const info = proposal_info[type] || {};
33+
const is_disabled = !is_purchase_enabled || !is_trade_enabled || !info.id || !is_client_allowed_to_visit;
34+
const is_proposal_error = info.has_error && !info.has_error_details;
3535

3636
const purchase_fieldset = (
3737
<PurchaseFieldset
@@ -43,7 +43,7 @@ const Purchase = ({
4343
is_contract_mode={is_contract_mode}
4444
is_disabled={is_disabled}
4545
is_high_low={is_high_low}
46-
is_loading={is_loading}
46+
is_loading={isLoading(info)}
4747
// is_purchase_confirm_on={is_purchase_confirm_on}
4848
is_proposal_error={is_proposal_error}
4949
// is_purchase_locked={is_purchase_locked}
@@ -53,13 +53,17 @@ const Purchase = ({
5353
type={type}
5454
/>
5555
);
56-
const contract_type_position = getContractTypePosition(type);
57-
if (contract_type_position === 'top') {
58-
components.unshift(purchase_fieldset);
59-
} else if (contract_type_position === 'bottom') {
60-
components.push(purchase_fieldset);
61-
} else {
62-
components.push(purchase_fieldset);
56+
57+
switch (getContractTypePosition(type)) {
58+
case 'top':
59+
components.unshift(purchase_fieldset);
60+
break;
61+
case 'bottom':
62+
components.push(purchase_fieldset);
63+
break;
64+
default:
65+
components.push(purchase_fieldset);
66+
break;
6367
}
6468
});
6569

‎src/sass/app_2/modules/trading.scss

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@keyframes data--loading {
1+
@keyframes slide {
22
0% {
33
transform: translateX(-100%);
44
}
@@ -16,7 +16,7 @@
1616
&--loading {
1717
width: inherit;
1818
height: inherit;
19-
animation: data--loading 1s cubic-bezier(1, 0, 0.5, 0) infinite;
19+
animation: slide 1s cubic-bezier(1, 0, 0.5, 0) infinite;
2020
background-image: linear-gradient(to left, rgba(255, 255, 255, 0), $COLOR_WHITE 10%, rgba(255, 255, 255, 0));
2121
opacity: 0.32;
2222
}
@@ -67,16 +67,6 @@
6767
}
6868
}
6969
}
70-
&__loader {
71-
width: 92px;
72-
height: 8px;
73-
margin: 3.5px 0;
74-
@extend .loader;
75-
76-
&--loading {
77-
@extend .loader--loading;
78-
}
79-
}
8070
&__error {
8171
justify-content: center;
8272
align-items: center;
@@ -144,6 +134,19 @@
144134
}
145135
}
146136
}
137+
&--slide {
138+
width: 92px;
139+
height: 8px;
140+
margin: 6.5px 0;
141+
@extend .loader;
142+
143+
.trade-container__price-info-basis {
144+
@extend .loader--loading;
145+
}
146+
}
147+
&--fade &-value {
148+
opacity: 0;
149+
}
147150
&-value {
148151
font-size: 1.4em;
149152
font-weight: 700;
@@ -154,6 +157,8 @@
154157
@include themify($themes) {
155158
color: themed('text_color');
156159
}
160+
opacity: 1;
161+
transition: 0.3s;
157162
}
158163
&-basis {
159164
margin-left: 0;
@@ -411,6 +416,11 @@
411416
float: right;
412417
justify-content: right;
413418
background-color: transparent;
419+
420+
.btn-purchase__text {
421+
opacity: 1;
422+
transition: 0.3s;
423+
}
414424
}
415425
&__effect-detail {
416426
width: 0;
@@ -469,7 +479,7 @@
469479
}
470480
}
471481
}
472-
&--animated {
482+
&--animated--slide {
473483
.btn-purchase__icon_wrapper, .btn-purchase__text_wrapper {
474484
@extend .loader;
475485
}
@@ -489,6 +499,9 @@
489499
}
490500
}
491501
}
502+
&--animated--fade &__info--right &__text {
503+
opacity: 0;
504+
}
492505
&__shadow-wrapper:hover:after {
493506
opacity: 0;
494507
}

‎src/sass/landing_pages/grid_lp.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@
184184
}
185185
.header-sub {
186186
font-size: 24px;
187-
line-height: 50px;
187+
line-height: 36px;
188188
font-weight: bold;
189189
}
190190
.home-header-content {
@@ -219,6 +219,13 @@
219219
display: block;
220220
}
221221

222+
@media (max-width: 480px) {
223+
.block-xs {
224+
display: block;
225+
margin-top: 10px;
226+
}
227+
}
228+
222229
@media only screen and (max-width: 1024px) {
223230
.binary-grid-landing {
224231
.home--header {

0 commit comments

Comments
 (0)