Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit fab9f4c

Browse files
Nuzhy-DerivNuzhy-Deriv
committedJun 27, 2024··
chore: draft form for stock indices touch/no-touch
1 parent 86363ae commit fab9f4c

File tree

8 files changed

+13621
-8079
lines changed

8 files changed

+13621
-8079
lines changed
 

‎package-lock.json

+13,485-8,061
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"@binary-com/binary-document-uploader": "^2.4.4",
107107
"@binary-com/binary-style": "^0.2.26",
108108
"@binary-com/webtrader-charts": "^0.6.1",
109-
"@deriv-com/quill-ui": "^1.10.27",
109+
"@deriv-com/quill-ui": "^1.11.4",
110110
"@livechat/customer-sdk": "4.0.2",
111111
"canvas-toBlob": "1.0.0",
112112
"classnames": "2.2.5",

‎src/javascript/app/pages/form/contract_form_wrapper.jsx

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import { TextField, InputDropdown, TextFieldAddon } from '@deriv-com/quill-ui';
3+
import ReactDOM from 'react-dom';
4+
import { getElementById } from '../../../_common/common_functions';
5+
6+
const ContractFormWrapper = () => {
7+
const handleSelect = (e) => {
8+
// eslint-disable-next-line no-alert
9+
alert(`selected ${e}`);
10+
};
11+
return (
12+
<div className='form_container'>
13+
<div className='form_rows'>
14+
<div className='row gap-8'>
15+
<div className='form_field'>
16+
<InputDropdown
17+
options={[
18+
{
19+
text : 'Duration',
20+
value: 'duration',
21+
},
22+
{
23+
text : 'End Time',
24+
value: 'endtime',
25+
},
26+
]}
27+
status='neutral'
28+
value={'duration'}
29+
// onSelectOption={(e) => handleSelect(e)}
30+
/>
31+
</div>
32+
<div className='form_field'>
33+
<TextField type='number' value='15' message='Minimum: 7' />
34+
</div>
35+
<div className='form_field'>
36+
<InputDropdown
37+
options={[
38+
{
39+
text : 'Days',
40+
value: 'days',
41+
},
42+
]}
43+
status='neutral'
44+
value={'days'}
45+
onSelectOption={(e) => handleSelect(e)}
46+
/>
47+
</div>
48+
</div>
49+
<div className='row'>
50+
<div className='form_field'>
51+
<TextField type='number' label='Barrier' value='2318.13' />
52+
</div>
53+
</div>
54+
<div className='row gap-8'>
55+
<div className='form_field'>
56+
<InputDropdown
57+
options={[
58+
{
59+
text : 'Stake',
60+
value: 'stake',
61+
},
62+
{
63+
text : 'Payout',
64+
value: 'payout',
65+
},
66+
]}
67+
status='neutral'
68+
value={'stake'}
69+
onSelectOption={(e) => handleSelect(e)}
70+
/>
71+
</div>
72+
<div className='form_field'>
73+
<TextFieldAddon addonLabel='USD' addOnPosition='right' value='10' />
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
);
79+
};
80+
81+
export const init = () => {
82+
ReactDOM.render(
83+
<ContractFormWrapper />,
84+
getElementById('contract_forms_wrapper')
85+
);
86+
};
87+
88+
export default init;

‎src/javascript/app/pages/trade/common.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const Tick = require('./tick');
44
const contractsElement = require('./contracts.jsx');
55
const marketsElement = require('./markets.jsx');
66
const TabsElement = require('../bottom/tabs.jsx');
7+
const FormsElement = require('../form/contract_form_wrapper.jsx');
78
const formatMoney = require('../../common/currency').formatMoney;
89
const ActiveSymbols = require('../../common/active_symbols');
910
const elementInnerHtml = require('../../../_common/common_functions').elementInnerHtml;
@@ -59,7 +60,7 @@ const commonTrading = (() => {
5960

6061
const displayMarkets = () => {
6162
marketsElement.init();
62-
63+
FormsElement.init();
6364
// All other Quill refactored components
6465
TabsElement.init();
6566
};

‎src/sass/_common/reskin.scss

+32-4
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111

1212
.tab-explanation {
1313
display: flex;
14-
flex-direction: column ;
14+
flex-direction: column;
1515
gap: 40px;
1616

1717
h3 {
18-
font-weight: 700;
18+
font-weight: 700;
1919
}
20-
2120
}
2221

2322
.secondary-title {
@@ -35,4 +34,33 @@
3534
.explanation-container {
3635
margin-block-end: 50px;
3736
padding-block: 20px;
38-
}
37+
}
38+
39+
.form_container {
40+
display: flex;
41+
width: 612px;
42+
position: relative;
43+
z-index: 99;
44+
padding: var(--semantic-spacing-general-md);
45+
46+
.form_rows {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 16px;
50+
}
51+
.row {
52+
padding-block: 0;
53+
54+
.form_field {
55+
flex: 1;
56+
}
57+
}
58+
.gap-8 {
59+
gap: 8px;
60+
}
61+
}
62+
63+
.deriv-dropdown__menu--open {
64+
position: relative;
65+
z-index: 99;
66+
}

‎src/sass/app/reality_check.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@
9898
font-size: 12px;
9999
}
100100

101-
input {
102-
width: 320px;
103-
padding: 10px 12px;
104-
border: 1px solid $COLOR_DARK_GRAY_4;
105-
font-size: 14px;
106-
}
101+
// input {
102+
// width: 320px;
103+
// padding: 10px 12px;
104+
// border: 1px solid $COLOR_DARK_GRAY_4;
105+
// font-size: 14px;
106+
// }

‎src/sass/app/trade.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,12 @@ ul.bullet {
136136
animation: fade 1s;
137137
animation-fill-mode: forwards;
138138
}
139-
select, input, div.select-dropdown {
140-
border-radius: 5px;
141-
box-sizing: border-box;
142-
height: 28px;
143-
border: solid 1px var(--border-normal);
144-
}
139+
// select, input, div.select-dropdown {
140+
// border-radius: 5px;
141+
// box-sizing: border-box;
142+
// height: 28px;
143+
// border: solid 1px var(--border-normal);
144+
// }
145145
div.select-dropdown:after {
146146
height: 16px;
147147
width: 16px;

‎src/templates/app/trade/trading.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const Trading = () => (
2222
<span id='spot' />
2323
</div>
2424
</div>
25+
<div id='contract_forms_wrapper' />
2526
<div className='row clear' id='contract_form_content_wrapper'>
2627
<div className='col row-inner gr-6 gr-12-p gr-12-m gr-no-gutter'>
2728
<div id='contract_container' className='col row'>

0 commit comments

Comments
 (0)
Please sign in to comment.