Skip to content

Commit bdc7947

Browse files
crocsgcrocsg
committed
printing/device area customization dialog
1 parent 70a3d95 commit bdc7947

File tree

4 files changed

+73
-30
lines changed

4 files changed

+73
-30
lines changed

‎src/App.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,14 @@ a.pure-button-secondary
241241
padding: 0em !important;
242242
height: 100%;
243243
}
244+
.select_modal
245+
{
246+
font-size: 1em;
247+
margin-right: 0.5em;
248+
margin-left:0.5em;
249+
padding:0;
250+
height:80%;
251+
}
244252

245253
.div_column
246254
{

‎src/locales/en.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@
3535
"param.custom.device_size.aria":"Customize device size",
3636
"param.usable_size": "Print area size",
3737
"param.custom.usable_size.aria":"Customize print area size",
38+
"param.modal.title.devicesize":"Customize device size",
39+
"param.modal.title.printsize":"Customize printing area size",
40+
"param.modal.updatelocked":"You cannot modify a locked element",
41+
"param.modal.details":"Area details",
42+
"param.modal.add":"Add",
43+
"param.modal.delete":"Delete",
44+
"param.modal.update":"Update",
45+
"param.modal.duplicate":"Duplicate",
46+
"param.modal.ok":"Ok",
47+
"param.modal.cancel":"Cancel",
3848
"param.formtitle": "Options",
3949
"param.form_aria": "Application parameters form",
4050
"param.path_step": "Step delta along path (mm)",

‎src/pages/ModalPrintSize.js

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React, { useState, useContext, useEffect } from 'react';
22
import Modal from 'react-modal'
33
import AppContext from "../components/AppContext";
44

5-
6-
const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
5+
const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize, title}) => {
76
const { GetLocaleString } = useContext(AppContext);
87
const [SelectedSize, setSelectedSize] = useState(0);
98
const [Name, setName] = useState('New');
109
const [usableWidth, setUsableWidth] = useState(210);
1110
const [usableHeight, setUsableHeight] = useState(297 - 45);
1211
const [usableSize, setUsableSize] = useState([...paperusablesize] || []);
12+
const [Message, setMessage] =useState("");
1313

1414
useEffect(() => {
1515

@@ -28,7 +28,8 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
2828
}, [usableSize]);
2929

3030
const render_lock = (locked) => {
31-
return locked ? String.fromCodePoint(0x1f512) : " ";
31+
return locked ? String.fromCodePoint(0x1f512): " ";
32+
3233
}
3334

3435
const onOk = () => {
@@ -50,8 +51,15 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
5051
let index = parseInt(SelectedSize);
5152
let option = [...usableSize];
5253
let data = { name: Name, width: usableWidth, height: usableHeight, lock: false };
53-
option[index] = data;
54-
setUsableSize(option);
54+
if (! option[index].lock)
55+
{
56+
option[index] = data;
57+
setUsableSize(option);
58+
}
59+
else{
60+
setMessage (GetLocaleString("param.modal.updatelocked"));
61+
}
62+
5563
}
5664
const onDelete = () => {
5765
if (SelectedSize) {
@@ -65,7 +73,7 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
6573
}
6674
}
6775
const onDuplicate = () => {
68-
if (SelectedSize) {
76+
if (SelectedSize >= 0) {
6977
let data = [...usableSize];
7078
let elem = { ...data[SelectedSize] };
7179
elem.name += " Copy";
@@ -75,7 +83,29 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
7583

7684
}
7785
}
86+
87+
const render_message = () => {
88+
if (Message.length > 0)
89+
return (<div className='content'>
90+
<div class="alert alert-danger alert-white rounded">
91+
{Message}
92+
<button type="button" class="close"
93+
data-dismiss="alert"
94+
aria-hidden="true"
95+
onClick={() => { setMessage("") }}>×</button>
96+
<div class="icon"><i class="fa fa-check"></i></div>
97+
</div>
98+
99+
</div>);
100+
return (<div className='content'>
101+
102+
<div class="rounded">
103+
&nbsp;
78104

105+
<div class="icon"><i class="fa fa-check"></i></div>
106+
</div>
107+
</div>)
108+
}
79109
return (
80110

81111
<div
@@ -90,12 +120,15 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
90120
}}>
91121
<Modal
92122
isOpen={show}
93-
contentLabel=""
123+
contentLabel="Toto"
94124
aria={{ hidden: false, label: ' ' }}
95-
125+
onRequestClose={()=>{onCancel()}}
96126
>
127+
97128
<div className='MakeColumn100' >
129+
98130
<div>
131+
<h2>{title ? title : ""}</h2>
99132
<select
100133
onChange={(e) => {
101134
console.log (e);
@@ -109,7 +142,7 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
109142
value={SelectedSize}
110143
id="usablepaper"
111144
name="usablepaper"
112-
className='select_param'
145+
className='select_modal'
113146
size="6"
114147
>
115148
{usableSize.map((item, index) => {
@@ -123,20 +156,9 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
123156
</div>
124157
<div>
125158
<div className='pure-form pure-form-aligned'>
126-
<div className='content'>
127-
<div class="alert alert-danger alert-white rounded">
128-
blabla
129-
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
130-
<div class="icon"><i class="fa fa-check"></i></div>
131-
</div>
132-
<div class="rounded">
133-
&nbsp;
134-
135-
<div class="icon"><i class="fa fa-check"></i></div>
136-
</div>
137-
</div>
159+
{render_message()}
138160
<div className='pure-control-group'>
139-
<legend>A legend for size</legend>
161+
<legend>{GetLocaleString("param.modal.details")}</legend>
140162
<fieldset>
141163
<label for='myInputWUDiag'>
142164
{GetLocaleString("param.usable.diag.name")}:
@@ -195,35 +217,35 @@ const ModalPrintSize = ({ show, handleOK, handleCancel, paperusablesize }) => {
195217
<button className="pad-button pure-button"
196218
onClick={() => { onAdd() }}
197219
>
198-
Add
220+
{GetLocaleString("param.modal.add")}
199221
</button>&nbsp;
200222
<button className="pad-button pure-button"
201223
onClick={() => { onDelete() }}
202224
>
203-
Delete
225+
{GetLocaleString("param.modal.delete")}
204226
</button>&nbsp;
205227
<button className="pad-button pure-button"
206228
onClick={() => { onUpdate() }}
207229
>
208-
Update
230+
{GetLocaleString("param.modal.update")}
209231
</button>&nbsp;
210232
<button className="pad-button pure-button"
211233
onClick={() => { onDuplicate() }}
212234
>
213-
Duplicate
235+
{GetLocaleString("param.modal.duplicate")}
214236
</button>&nbsp;
215237
</fieldset>
216238
<fieldset>
217239
<button className="pad-button pure-button"
218240
onClick={() => { onOk() }}
219241
>
220-
Ok
242+
{GetLocaleString("param.modal.ok")}
221243

222244
</button>&nbsp;
223245
<button className="pad-button pure-button"
224246
onClick={() => { onCancel() }}
225247
>
226-
Cancel
248+
{GetLocaleString("param.modal.cancel")}
227249

228250
</button>
229251
</fieldset>

‎src/pages/Parameter.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ class Parameters extends React.Component {
204204
else
205205
return " ";
206206
}
207-
render_size_dialog ()
207+
render_device_dialog ()
208208
{
209209
return (
210210
<ModalPrintSize
@@ -221,6 +221,7 @@ class Parameters extends React.Component {
221221
handleCancel = {()=>{this.display_printable_dialog(false)}}
222222

223223
paperusablesize = {this.state.papersize}
224+
title = {this.context.GetLocaleString("param.modal.title.devicesize")}
224225
></ModalPrintSize>);
225226
}
226227
render_usable_dialog() {
@@ -236,10 +237,12 @@ class Parameters extends React.Component {
236237
let options = {...this.context.Params};
237238
options.PaperUsableSize = newlist;
238239
this.context.SetOption (options); // todo : clarify save option
240+
239241
}}
240242
handleCancel = {()=>{this.display_usable_dialog(false)}}
241243

242244
paperusablesize = {this.state.paperusable}
245+
title = {this.context.GetLocaleString("param.modal.title.printsize")}
243246
></ModalPrintSize>
244247
);
245248
}
@@ -329,8 +332,8 @@ class Parameters extends React.Component {
329332

330333
return (
331334
<div>
335+
{this.render_device_dialog()}
332336
{this.render_usable_dialog()}
333-
{this.render_size_dialog()}
334337
<h2>{this.context.GetLocaleString("param.formtitle")}</h2>
335338

336339
<div className="pure-form pure-form-aligned">

0 commit comments

Comments
 (0)