Revision 544c6df3
Added by koszko about 2 years ago
html/options.html | ||
---|---|---|
1 | 1 |
<!doctype html> |
2 | 2 |
<!-- |
3 | 3 |
Copyright (C) 2021 Wojtek Kosior |
4 |
Copyright (C) 2021 Nicholas Johnson |
|
5 | 4 |
Redistribution terms are gathered in the `copyright' file. |
6 | 5 |
--> |
7 | 6 |
<html> |
... | ... | |
11 | 10 |
<link type="text/css" rel="stylesheet" href="reset.css" /> |
12 | 11 |
<link type="text/css" rel="stylesheet" href="base.css" /> |
13 | 12 |
<style> |
14 |
/* pages list */ |
|
15 |
#page_components_ul { |
|
16 |
max-height: 80vh; |
|
17 |
overflow-y: auto; |
|
18 |
} |
|
19 |
#page_components_ul li.dragover_li { |
|
20 |
border-top: 2px solid blue; |
|
21 |
} |
|
22 |
#page_components_ul li { |
|
23 |
border-top: 2px solid white; |
|
24 |
} |
|
25 |
li[draggable=true] * { |
|
26 |
pointer-events: none; |
|
27 |
} |
|
28 |
li[draggable=true] label, |
|
29 |
li[draggable=true] button { |
|
30 |
pointer-events: auto; |
|
13 |
body { |
|
14 |
background-color: #f0f0f0; |
|
15 |
color: #555; |
|
16 |
overflow: auto; |
|
17 |
width: 100%; |
|
31 | 18 |
} |
32 | 19 |
|
33 | 20 |
/* tabbed view */ |
... | ... | |
38 | 25 |
display: none; |
39 | 26 |
} |
40 | 27 |
|
41 |
#show_repos:checked ~ #repos_lbl, |
|
42 |
#show_pages:checked ~ #pages_lbl, |
|
43 |
#show_bags:checked ~ #bags_lbl, |
|
44 |
#show_scripts:checked ~ #scripts_lbl { |
|
28 |
#show_repos:checked ~ div #repos_lbl,
|
|
29 |
#show_pages:checked ~ div #pages_lbl,
|
|
30 |
#show_bags:checked ~ div #bags_lbl,
|
|
31 |
#show_scripts:checked ~ div #scripts_lbl {
|
|
45 | 32 |
background: #4CAF50; |
46 | 33 |
color: white; |
47 | 34 |
} |
48 | 35 |
|
49 |
body > div { |
|
50 |
border-top: 6px solid #4CAF50; |
|
36 |
#tab_heads>* { |
|
37 |
font-size: 130%; |
|
38 |
padding: 10px; |
|
39 |
display: inline-block; |
|
40 |
-moz-user-select: none; |
|
41 |
user-select: none; |
|
51 | 42 |
} |
52 | 43 |
|
53 |
.tab_head { |
|
54 |
display: inline-block; |
|
44 |
#import_but { |
|
45 |
font: unset; |
|
46 |
font-size: 130%; |
|
47 |
float: right; |
|
48 |
margin: 0; |
|
49 |
border-radius: 0; |
|
50 |
} |
|
51 |
|
|
52 |
#tab_heads::after { |
|
53 |
display: block; |
|
54 |
height: 8px; |
|
55 |
content: ""; |
|
56 |
background: linear-gradient(#555, transparent); |
|
57 |
} |
|
58 |
|
|
59 |
div.tab { |
|
60 |
min-width: 50vw; |
|
61 |
width: fit-content; |
|
62 |
padding-left: 6px; |
|
55 | 63 |
} |
56 | 64 |
|
57 | 65 |
/* popup window with list of selectable components */ |
... | ... | |
61 | 69 |
height: 100vh; |
62 | 70 |
left: 0; |
63 | 71 |
top: 0; |
64 |
background-color: rgba(0,0,0,0.4);
|
|
72 |
background-color: rgba(60,60,60,0.4);
|
|
65 | 73 |
z-index: 1; |
66 | 74 |
overflow: auto; |
67 | 75 |
vertical-align: center; |
... | ... | |
69 | 77 |
} |
70 | 78 |
|
71 | 79 |
.popup_frame { |
72 |
background-color: white; |
|
73 |
width: 50vw; |
|
80 |
background-color: #f0f0f0; |
|
81 |
margin: 5vh auto; |
|
82 |
padding: 15px; |
|
83 |
border: solid #333 4px; |
|
84 |
border-radius: 15px; |
|
85 |
width: -moz-fit-content; |
|
86 |
width: fit-content; |
|
87 |
} |
|
88 |
|
|
89 |
div.ul_container { |
|
90 |
background-color: #f0f0f0; |
|
91 |
width: -moz-fit-content; |
|
92 |
width: fit-content; |
|
93 |
margin: 6px 0; |
|
94 |
} |
|
95 |
|
|
96 |
div.ul_container::after, div.ul_container::before { |
|
97 |
display: block; |
|
98 |
height: 6px; |
|
99 |
content: ""; |
|
100 |
background: linear-gradient(transparent, #555); |
|
101 |
} |
|
102 |
|
|
103 |
div.ul_container::after { |
|
104 |
background: linear-gradient(#555, transparent); |
|
105 |
} |
|
106 |
|
|
107 |
.work_li div.ul_container::before { |
|
108 |
background: linear-gradient(#e0f0f0, #555); |
|
109 |
} |
|
110 |
|
|
111 |
.work_li div.ul_container::after { |
|
112 |
background: linear-gradient(#555, #e0f0f0); |
|
113 |
} |
|
114 |
|
|
115 |
div.ul_container>.always_scrollbar{ |
|
116 |
border-left: solid #454 8px; |
|
117 |
max-height: 80vh; |
|
118 |
overflow-y: scroll; |
|
119 |
} |
|
120 |
|
|
121 |
div.ul_container table { |
|
122 |
border-collapse: unset; |
|
123 |
} |
|
124 |
|
|
125 |
div.ul_container, div.ul_container>*, div.ul_container table>tbody { |
|
126 |
width: -moz-min-content; |
|
127 |
width: min-content; |
|
128 |
} |
|
129 |
|
|
130 |
div.ul_container div.ul_container>.always_scrollbar, |
|
131 |
.popup_frame div.ul_container>.always_scrollbar { |
|
132 |
max-height: 60vh; |
|
133 |
} |
|
134 |
|
|
135 |
.popup_frame div.ul_container table { |
|
136 |
min-width: 30vw; |
|
137 |
} |
|
138 |
|
|
139 |
.popup_frame div.ul_container { |
|
140 |
margin: 0 auto; |
|
141 |
} |
|
142 |
|
|
143 |
tr:nth-child(odd) { |
|
144 |
background-color: #e5e5e5; |
|
145 |
} |
|
146 |
|
|
147 |
td { |
|
148 |
vertical-align: middle; |
|
149 |
min-width: fit-content; |
|
150 |
min-width: -moz-fit-content; |
|
151 |
width: 1%; |
|
152 |
} |
|
153 |
|
|
154 |
tr>td:first-child { |
|
155 |
padding: 3px 10px 6px; |
|
156 |
max-width: 70vw; |
|
157 |
overflow: hidden; |
|
158 |
width: 100%; |
|
159 |
white-space: nowrap; |
|
160 |
} |
|
161 |
|
|
162 |
tr.work_li>td:first-child { |
|
163 |
padding-right: 0; |
|
164 |
max-width: unset; |
|
165 |
} |
|
166 |
|
|
167 |
tr.work_li>td>div { |
|
168 |
background-color: #e0f0f0; |
|
169 |
border-left: solid #454 5px; |
|
170 |
border-right: solid #454 2px; |
|
171 |
padding: 5px 10px; |
|
172 |
} |
|
173 |
|
|
174 |
.form_grid { |
|
175 |
display: grid; |
|
176 |
grid-template-columns: auto auto; |
|
177 |
} |
|
178 |
|
|
179 |
.form_grid>label { |
|
180 |
grid-column: 1 / span 1; |
|
181 |
margin-right: 10px; |
|
182 |
} |
|
183 |
|
|
184 |
.form_grid label { |
|
185 |
line-height: 34px; /* center text vertically */ |
|
186 |
} |
|
187 |
|
|
188 |
.form_grid>input, .form_grid>span { |
|
189 |
grid-column: 2 / span 1; |
|
190 |
} |
|
191 |
|
|
192 |
.form_grid>label[for="script_contents_field"], |
|
193 |
.form_grid>* { |
|
194 |
grid-column: 1 / span 2; |
|
195 |
} |
|
196 |
|
|
197 |
.form_grid>textarea { |
|
198 |
min-width: 70vw; |
|
199 |
resize: none; |
|
200 |
} |
|
201 |
|
|
202 |
td>div.button { |
|
203 |
margin-right: 4px; |
|
74 | 204 |
} |
75 | 205 |
|
76 | 206 |
input[type="radio"]:not(:checked)+.import_window_content { |
... | ... | |
80 | 210 |
</head> |
81 | 211 |
<body> |
82 | 212 |
<template> |
83 |
<li id="item_li"> |
|
84 |
<span></span> |
|
85 |
<button> Edit </button> |
|
86 |
<button> Remove </button> |
|
87 |
<button> Export </button> |
|
88 |
</li> |
|
89 |
<li id="bag_component_li"> |
|
90 |
<span></span> |
|
91 |
<button> Remove </button> |
|
92 |
</li> |
|
93 |
<li id="chbx_component_li"> |
|
94 |
<input type="checkbox" style="display: inline;"></input> |
|
95 |
<span></span> |
|
96 |
</li> |
|
97 |
<li id="radio_component_li"> |
|
98 |
<input type="radio" style="display: inline;" name="page_components"></input> |
|
99 |
<span></span> |
|
100 |
</li> |
|
213 |
<tr id="item_li"> |
|
214 |
<td></td> |
|
215 |
<td><div class="button"> Edit </div></td> |
|
216 |
<td><div class="button"> Remove </div></td> |
|
217 |
<td><div class="button"> Export </div></td> |
|
218 |
</tr> |
|
219 |
<tr id="bag_component_li"> |
|
220 |
<td></td> |
|
221 |
<td><div class="button"> Remove </div></td> |
|
222 |
</tr> |
|
223 |
<tr id="chbx_component_li"> |
|
224 |
<td> |
|
225 |
<input type="checkbox" style="display: inline;"></input> |
|
226 |
<span></span> |
|
227 |
</td> |
|
228 |
</tr> |
|
229 |
<tr id="radio_component_li"> |
|
230 |
<td> |
|
231 |
<input type="radio" style="display: inline;" name="page_components"></input> |
|
232 |
<span></span> |
|
233 |
</td> |
|
234 |
</tr> |
|
101 | 235 |
</template> |
102 | 236 |
|
103 | 237 |
<!-- Mind the show_*s ids below - their format is assumed in js code --> |
... | ... | |
105 | 239 |
<input type="radio" name="tabs" id="show_pages" checked></input> |
106 | 240 |
<input type="radio" name="tabs" id="show_bags"></input> |
107 | 241 |
<input type="radio" name="tabs" id="show_scripts"></input> |
108 |
<label for="show_repos" id="repos_lbl" |
|
109 |
class="tab_head"> Repos </label> |
|
110 |
<label for="show_pages" id="pages_lbl" |
|
111 |
class="tab_head"> Pages </label> |
|
112 |
<label for="show_bags" id="bags_lbl" |
|
113 |
class="tab_head"> Bags </label> |
|
114 |
<label for="show_scripts" id="scripts_lbl" |
|
115 |
class="tab_head"> Scripts </label> |
|
116 |
|
|
117 |
<div id="repos"> |
|
118 |
<ul id="repos_ul"> |
|
119 |
<li id="work_repo_li" class="hide"> |
|
120 |
<label for="repo_url_field">URL: </label> |
|
121 |
<input id="repo_url_field"></input> |
|
122 |
<br/> |
|
123 |
<button id="save_repo_but" type="button"> Save </button> |
|
124 |
<button id="discard_repo_but" type="button"> Cancel </button> |
|
125 |
</li> |
|
126 |
</ul> |
|
242 |
<div id="tab_heads"> |
|
243 |
<label for="show_repos" id="repos_lbl"> Repos </label> |
|
244 |
<label for="show_pages" id="pages_lbl"> Pages </label> |
|
245 |
<label for="show_bags" id="bags_lbl"> Bags </label> |
|
246 |
<label for="show_scripts" id="scripts_lbl"> Scripts </label> |
|
247 |
<button id="import_but" style="margin-left: 40px;"> Import </button> |
|
248 |
</div> |
|
249 |
<div id="repos" class="tab"> |
|
250 |
<div class="ul_container"> |
|
251 |
<div> |
|
252 |
<table> |
|
253 |
<tbody id="repos_ul"> |
|
254 |
<tr id="work_repo_li" class="hide work_li"> |
|
255 |
<td colspan="4"> |
|
256 |
<div class="form_grid"> |
|
257 |
<label for="repo_url_field">URL: </label> |
|
258 |
<input id="repo_url_field"></input> |
|
259 |
<div> |
|
260 |
<button id="save_repo_but" type="button"> Save </button> |
|
261 |
<button id="discard_repo_but" type="button"> Cancel </button> |
|
262 |
</div> |
|
263 |
</div> |
|
264 |
</td> |
|
265 |
</tr> |
|
266 |
</tbody> |
|
267 |
</table> |
|
268 |
</div> |
|
269 |
</div> |
|
127 | 270 |
<button id="add_repo_but" type="button"> Add repository </button> |
128 | 271 |
</div> |
129 |
|
|
130 |
<div id="pages"> |
|
131 |
<ul id="pages_ul"> |
|
132 |
<li id="work_page_li" class="hide"> |
|
133 |
<label for="page_url_field">URL: </label> |
|
134 |
<input id="page_url_field"></input> |
|
135 |
<br/> |
|
136 |
<label>Payload: </label> |
|
137 |
<span id="page_payload"></span> |
|
138 |
<button id="select_page_components_but"> |
|
139 |
Choose payload |
|
140 |
</button> |
|
141 |
<br/> |
|
142 |
<input id="page_allow_chbx" type="checkbox" style="display: inline;"></input> |
|
143 |
<label for="page_allow_chbx">Allow native scripts</label> |
|
144 |
<br/> |
|
145 |
<button id="save_page_but" type="button"> Save </button> |
|
146 |
<button id="discard_page_but" type="button"> Cancel </button> |
|
147 |
</li> |
|
148 |
</ul> |
|
272 |
<div id="pages" class="tab"> |
|
273 |
<div class="ul_container"> |
|
274 |
<div> |
|
275 |
<table> |
|
276 |
<tbody id="pages_ul"> |
|
277 |
<tr id="work_page_li" class="hide work_li"> |
|
278 |
<td colspan="4"> |
|
279 |
<div class="form_grid"> |
|
280 |
<label for="page_url_field">URL: </label> |
|
281 |
<input id="page_url_field"></input> |
|
282 |
<label>Payload: </label> |
|
283 |
<span> |
|
284 |
<span id="page_payload"></span> |
|
285 |
<button id="select_page_components_but"> |
|
286 |
Choose payload |
|
287 |
</button> |
|
288 |
</span> |
|
289 |
<div> |
|
290 |
<input id="page_allow_chbx" type="checkbox" style="display: inline;"></input> |
|
291 |
<label for="page_allow_chbx">Allow native scripts</label> |
|
292 |
</div> |
|
293 |
<div> |
|
294 |
<button id="save_page_but" type="button"> Save </button> |
|
295 |
<button id="discard_page_but" type="button"> Cancel </button> |
|
296 |
</div> |
|
297 |
</div> |
|
298 |
</td> |
|
299 |
</tr> |
|
300 |
</tbody> |
|
301 |
</table> |
|
302 |
</div> |
|
303 |
</div> |
|
149 | 304 |
<button id="add_page_but" type="button"> Add page </button> |
150 | 305 |
</div> |
151 |
|
|
152 |
<div id="bags"> |
|
153 |
<ul id="bags_ul"> |
|
154 |
<li id="work_bag_li" class="hide"> |
|
155 |
<label for="bag_name_field"> Name: </label> |
|
156 |
<input id="bag_name_field"></input> |
|
157 |
<ul id="bag_components_ul"> |
|
158 |
<li id="empty_bag_component_li" class="hide"></li> |
|
159 |
</ul> |
|
160 |
<button id="select_bag_components_but"> |
|
161 |
Add scripts |
|
162 |
</button> |
|
163 |
<br/> |
|
164 |
<button id="save_bag_but"> Save </button> |
|
165 |
<button id="discard_bag_but"> Cancel </button> |
|
166 |
</li> |
|
167 |
</ul> |
|
306 |
<div id="bags" class="tab"> |
|
307 |
<div class="ul_container"> |
|
308 |
<div> |
|
309 |
<table> |
|
310 |
<tbody id="bags_ul"> |
|
311 |
<tr id="work_bag_li" class="hide work_li"> |
|
312 |
<td colspan="4"> |
|
313 |
<div class="form_grid"> |
|
314 |
<label for="bag_name_field"> Name: </label> |
|
315 |
<input id="bag_name_field"></input> |
|
316 |
<div class="ul_container"> |
|
317 |
<div> |
|
318 |
<table> |
|
319 |
<tbody id="bag_components_ul"> |
|
320 |
<tr id="empty_bag_component_li" class="hide"></tr> |
|
321 |
</tbody> |
|
322 |
</table> |
|
323 |
</div> |
|
324 |
</div> |
|
325 |
<div> |
|
326 |
<button id="select_bag_components_but"> |
|
327 |
Add scripts |
|
328 |
</button> |
|
329 |
</div> |
|
330 |
<div> |
|
331 |
<button id="save_bag_but"> Save </button> |
|
332 |
<button id="discard_bag_but"> Cancel </button> |
|
333 |
</div> |
|
334 |
</div> |
|
335 |
</td> |
|
336 |
</tr> |
|
337 |
</tbody> |
|
338 |
</table> |
|
339 |
</div> |
|
340 |
</div> |
|
168 | 341 |
<button id="add_bag_but" type="button"> Add bag </button> |
169 | 342 |
</div> |
170 |
|
|
171 |
<div id="scripts"> |
|
172 |
<ul id="scripts_ul"> |
|
173 |
<li id="work_script_li" class="hide"> |
|
174 |
<label for="script_name_field"> Name: </label> |
|
175 |
<input id="script_name_field"></input> |
|
176 |
<br/> |
|
177 |
<label for="script_url_field"> URL: </label> |
|
178 |
<input id="script_url_field"></input> |
|
179 |
<br/> |
|
180 |
<label for="script_sha256_field"> sha256: </label> |
|
181 |
<input id="script_sha256_field"></input> |
|
182 |
<br/> |
|
183 |
<label for="script_contents_field"> contents: </label> |
|
184 |
<textarea id="script_contents_field" rows="20" cols="80"></textarea> |
|
185 |
<br/> |
|
186 |
<button id="save_script_but"> Save </button> |
|
187 |
<button id="discard_script_but"> Cancel </button> |
|
188 |
</li> |
|
189 |
</ul> |
|
343 |
<div id="scripts" class="tab"> |
|
344 |
<div class="ul_container"> |
|
345 |
<div> |
|
346 |
<table> |
|
347 |
<tbody id="scripts_ul"> |
|
348 |
<tr id="work_script_li" class="hide work_li"> |
|
349 |
<td colspan="4"> |
|
350 |
<div class="form_grid"> |
|
351 |
<label for="script_name_field"> Name: </label> |
|
352 |
<input id="script_name_field"></input> |
|
353 |
<label for="script_url_field"> URL: </label> |
|
354 |
<input id="script_url_field"></input> |
|
355 |
<label for="script_sha256_field"> SHA256: </label> |
|
356 |
<input id="script_sha256_field"></input> |
|
357 |
<aside> |
|
358 |
Note: URL and SHA256 are ignored if script text is provided. |
|
359 |
</aside> |
|
360 |
<label for="script_contents_field"> contents: </label> |
|
361 |
<textarea id="script_contents_field" rows="20" cols="80"></textarea> |
|
362 |
<div> |
|
363 |
<button id="save_script_but"> Save </button> |
|
364 |
<button id="discard_script_but"> Cancel </button> |
|
365 |
</div> |
|
366 |
</div> |
|
367 |
</td> |
|
368 |
</tr> |
|
369 |
</tbody> |
|
370 |
</table> |
|
371 |
</div> |
|
372 |
</div> |
|
190 | 373 |
<button id="add_script_but" type="button"> Add script </button> |
191 | 374 |
</div> |
192 | 375 |
|
193 |
<button id="import_but" style="margin-top: 40px;"> Import </button> |
|
194 |
|
|
195 | 376 |
<div id="chbx_components_window" class="hide popup" position="absolute"> |
196 | 377 |
<div class="popup_frame"> |
197 |
<ul id="chbx_components_ul"> |
|
198 |
|
|
199 |
</ul> |
|
378 |
<div class="ul_container"> |
|
379 |
<div> |
|
380 |
<table> |
|
381 |
<tbody id="chbx_components_ul"> |
|
382 |
</tbody> |
|
383 |
</table> |
|
384 |
</div> |
|
385 |
</div> |
|
200 | 386 |
<button id="commit_bag_components_but"> Add </button> |
201 | 387 |
<button id="cancel_bag_components_but"> Cancel </button> |
202 | 388 |
</div> |
... | ... | |
204 | 390 |
|
205 | 391 |
<div id="radio_components_window" class="hide popup" position="absolute"> |
206 | 392 |
<div class="popup_frame"> |
207 |
<ul id="radio_components_ul"> |
|
208 |
|
|
209 |
<li id="radio_component_none_li"> |
|
210 |
<input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input> |
|
211 |
<span>(None)</span> |
|
212 |
</li> |
|
213 |
</ul> |
|
393 |
<div class="ul_container"> |
|
394 |
<div class="always_scrollbar"> |
|
395 |
<table> |
|
396 |
<tbody id="radio_components_ul"> |
|
397 |
<tr id="radio_component_none_li"> |
|
398 |
<td> |
|
399 |
<input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input> |
|
400 |
<span>(None)</span> |
|
401 |
</td> |
|
402 |
</tr> |
|
403 |
</tbody> |
|
404 |
</table> |
|
405 |
</div> |
|
406 |
</div> |
|
214 | 407 |
<button id="commit_page_components_but"> Choose </button> |
215 | 408 |
<button id="cancel_page_components_but"> Cancel </button> |
216 | 409 |
</div> |
Also available in: Unified diff
add styling for options page\n\nThis does not include styling for contents of the import popup