Skip to content

Commit 5881d7f

Browse files
crocsgcrocsg
committed
Move usable print size dialog in component for code lisibility
1 parent 501e641 commit 5881d7f

File tree

4 files changed

+154
-44
lines changed

4 files changed

+154
-44
lines changed

‎desktopbraillerap.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"PaperUsableSize":[
3535
{"name":"A4","usablewidth":210, "usableheight":250, "lock":True},
3636
{"name":"A3","usablewidth":297, "usableheight":420-47, "lock":True},
37-
{"name":"A4 (BrailleRAP)","usablewidth":190, "usableheight":250, "Lock":True}
37+
{"name":"A4 (BrailleRAP)","usablewidth":190, "usableheight":250, "lock":True}
3838
]
3939
}
4040

‎src/locales/en.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@
4444
"param.path_no_optim": "Forward Only",
4545
"param.path_optim_1": "Easy optimization",
4646
"param.path_optim_2": "Strong optimization",
47+
"param.usable.diag.name":"Name",
48+
"param.usable.diag.width":"Width",
49+
"param.usable.diag.height":"Height",
4750
"pattern.title": "Filling pattern",
4851
"pattern.fillselect": "By fill color",
4952
"pattern.strokeselect": "By stroke color",

‎src/pages/ModalUsablePrint.js

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React, { useState, useContext} from 'react';
2+
import Modal from 'react-modal'
3+
import AppContext from "../components/AppContext";
4+
5+
6+
const ModalUsablePrint = ({show, handleOK, handleCancel, paperusablesize}) =>
7+
{
8+
const {GetLocaleString} = useContext(AppContext);
9+
const [SelectedSize, setSelectedSize] = useState(0);
10+
const [usableWidth, setUsableWidth] = useState(210);
11+
const [usableHeight, setUsableHeight] = useState(297-45);
12+
13+
const render_lock = (locked) => {
14+
15+
return locked ? String.fromCodePoint(0x1f512) : " ";
16+
if (locked)
17+
return String.fromCodePoint(0x1f512);
18+
//return "🔒";
19+
//return "🔒";
20+
else
21+
return " ";
22+
}
23+
24+
const onOk = () =>
25+
{
26+
if (handleOK)
27+
handleOK();
28+
}
29+
const onCancel = () =>
30+
{
31+
if (handleCancel)
32+
handleCancel();
33+
}
34+
const onAdd = () => {
35+
36+
}
37+
const onDelete = () => {
38+
39+
}
40+
41+
return (
42+
43+
<>
44+
<Modal
45+
isOpen={show}
46+
contentLabel=""
47+
aria={{ hidden: false, label: ' ' }}
48+
>
49+
<select
50+
id="usablepaper"
51+
name="usablepaper"
52+
className='select_param'
53+
size="6"
54+
>
55+
{paperusablesize.map((item, index) => {
56+
if (SelectedSize === index)
57+
return (<option aria-selected={true} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
58+
else
59+
return (<option aria-selected={false} key={item.name} value={index}>{render_lock(item.lock)} {item.name} [{item.usablewidth}mm x {item.usableheight}mm]</option>);
60+
})
61+
}
62+
</select>
63+
<label for='myInputWUDiag'>
64+
{GetLocaleString("param.usable.diag.name")}:
65+
</label>
66+
<input type="text"
67+
defaultValue="New"
68+
name="myInputNameDiag"
69+
id="myInputNameDiag"
70+
71+
onChange={(e) => {
72+
//this.handleChangePaper('usablewidth', e.target.value);
73+
}}
74+
style={{ width: "12em" }}
75+
/>
76+
<label for='myInputWUDiag'>
77+
{GetLocaleString("param.usable.diag.width")}:
78+
</label>
79+
<input type="number"
80+
min={100}
81+
max={420}
82+
defaultValue={usableWidth}
83+
name="myInputWUDiag"
84+
id="myInputWUDiag"
85+
86+
onChange={(e) => {
87+
//this.handleChangePaper('usablewidth', e.target.value);
88+
}}
89+
style={{ width: "5em" }}
90+
/>
91+
92+
93+
94+
<label for="myInputHUDiag">
95+
{GetLocaleString("param.usable_height")}:
96+
</label>
97+
98+
<input type="number"
99+
min={100}
100+
max={550}
101+
defaultValue={usableHeight}
102+
id="myInputHUDiag"
103+
name="myInputHUDiag"
104+
onChange={(e) => {
105+
//this.handleChangePaper('usableheight', e.target.value);
106+
}}
107+
style={{ width: "5em" }}
108+
/>
109+
110+
111+
<button className="pad-button pure-button"
112+
onClick={() => { onOk () }}
113+
>
114+
Ok
115+
116+
</button>
117+
<button className="pad-button pure-button"
118+
onClick={() => { onCancel () }}
119+
>
120+
Cancel
121+
122+
</button>
123+
<button className="pad-button pure-button"
124+
onClick={() => { onAdd()}}
125+
>
126+
Add
127+
</button>
128+
<button className="pad-button pure-button"
129+
onClick={() => { onDelete()}}
130+
>
131+
Delete
132+
</button>
133+
</Modal>
134+
</>
135+
);
136+
}
137+
export default ModalUsablePrint;

‎src/pages/Parameter.js

Lines changed: 13 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33
import Modal from 'react-modal'
44
import AppContext from "../components/AppContext";
5+
import ModalUsablePrint from "./ModalUsablePrint";
56

67
function braille_info(fname, desc, lang, region, flags) {
78
this.fname = fname;
@@ -182,57 +183,26 @@ class Parameters extends React.Component {
182183
}
183184
render_lock (locked)
184185
{
185-
console.log (locked);
186+
//console.log (locked);
186187
if (locked)
187-
return "🔒";
188+
return String.fromCodePoint(0x1f512);
189+
//return "🔒";
188190
//return "&#x1F512;";
189191
else
190192
return " ";
191193
}
192-
render_usable_dialog() {
193194

195+
render_usable_dialog() {
194196
return (
195-
<>
196-
<Modal
197-
isOpen={this.state.showModalUsable}
198-
contentLabel=""
199-
aria={{ hidden: false, label: ' ' }}
200-
>
201-
<select
202-
id="usablepaper"
203-
name="usablepaper"
204-
className='select_param'
205-
size="6"
206-
>
207-
{this.state.paperusable.map((item, index) => {
208-
if (this.context.Params.OptimLevel === index)
209-
return (<option aria-selected={true} key={item.name} value={index}>{this.render_lock(item.lock)} {item.name} [{item.usablewidth} x {item.usableheight}]</option>);
210-
else
211-
return (<option aria-selected={false} key={item.name} value={index}>{this.render_lock(item.lock)} {item.name} [{item.usablewidth} x {item.usableheight}]</option>);
212-
})
213-
}
214-
</select>
215-
216-
<button className="pad-button pure-button"
217-
onClick={() => { this.setState({ showModalUsable: false }) }}
218-
>
219-
Ok
220-
221-
</button>
222-
<button className="pad-button pure-button"
223-
onClick={() => { this.setState({ showModalUsable: false }) }}
224-
>
225-
Add
226-
</button>
227-
<button className="pad-button pure-button"
228-
onClick={() => { this.setState({ showModalUsable: false }) }}
229-
>
230-
Delete
231-
</button>
232-
</Modal>
233-
</>
234-
)
197+
<ModalUsablePrint
198+
show={this.state.showModalUsable}
199+
handleOk = {()=>{this.display_usable_dialog(false)}}
200+
handleCancel = {()=>{this.display_usable_dialog(false)}}
201+
paperusablesize = {this.state.paperusable}
202+
></ModalUsablePrint>
203+
);
235204
}
205+
236206
render_comport() {
237207
if (this.state.data === null)
238208
return (

0 commit comments

Comments
 (0)