Project

General

Profile

Download (9.67 KB) Statistics
| Branch: | Tag: | Revision:

haketilo / html / options.html @ 6247f163

1
<!doctype html>
2
<!--
3
    Copyright (C) 2021 Wojtek Kosior
4
    Redistribution terms are gathered in the `copyright' file.
5
  -->
6
<html>
7
  <head>
8
    <meta charset="utf-8"/>
9
    <title>Hachette options</title>
10
    <link type="text/css" rel="stylesheet" href="reset.css" />
11
    <link type="text/css" rel="stylesheet" href="base.css" />
12
    <link type="text/css" rel="stylesheet" href="table.css" />
13
    <style>
14
      body {
15
	  width: 100%;
16
      }
17

    
18
      /* tabbed view */
19
      #show_repos:not(:checked) ~ #repos,
20
      #show_pages:not(:checked) ~ #pages,
21
      #show_bags:not(:checked) ~ #bags,
22
      #show_scripts:not(:checked) ~ #scripts {
23
	  display: none;
24
      }
25

    
26
      #show_repos:checked ~ div #repos_lbl,
27
      #show_pages:checked ~ div #pages_lbl,
28
      #show_bags:checked ~ div #bags_lbl,
29
      #show_scripts:checked ~ div #scripts_lbl {
30
	  background: #4CAF50;
31
          color: white;
32
      }
33

    
34
      #tab_heads>* {
35
	  font-size: 130%;
36
	  padding: 10px;
37
	  display: inline-block;
38
	  cursor: pointer;
39
      }
40

    
41
      #tab_heads {
42
	  -moz-user-select: none;
43
	  user-select: none;
44
      }
45

    
46
      #import_but {
47
	  font: unset;
48
	  font-size: 130%;
49
	  float: right;
50
	  margin: 0;
51
	  border-radius: 0;
52
      }
53

    
54
      div.tab {
55
	  min-width: 50vw;
56
	  width: fit-content;
57
	  padding-left: 6px;
58
      }
59

    
60
      /* popup window with list of selectable components */
61
      .popup {
62
	  position: fixed;
63
	  width: 100vw;
64
	  height: 100vh;
65
	  left: 0;
66
	  top: 0;
67
	  background-color: rgba(60,60,60,0.4);
68
	  z-index: 1;
69
	  overflow: auto;
70
	  vertical-align: center;
71
	  horizontal-align: center;
72
      }
73

    
74
      .popup_frame {
75
	  background-color: #f0f0f0;
76
	  margin: 5vh auto;
77
	  padding: 15px;
78
	  border: solid #333 4px;
79
	  border-radius: 15px;
80
	  width: -moz-fit-content;
81
	  width: fit-content;
82
      }
83

    
84
      .work_li .table_wrapper::before {
85
	  background: linear-gradient(#e0f0f0, #555);
86
      }
87

    
88
      .work_li .table_wrapper::after {
89
	  background: linear-gradient(#555, #e0f0f0);
90
      }
91

    
92
      .table_wrapper.always_scrollbar>* {
93
	  border-left: solid #454 8px;
94
	  max-height: 80vh;
95
	  overflow-y: scroll;
96
      }
97

    
98
      .table_wrapper .table_wrapper.always_scrollbar>*,
99
      .popup_frame .table_wrapper.always_scrollbar>* {
100
	  max-height: 60vh;
101
      }
102

    
103
      .popup_frame .table_wrapper table {
104
	  min-width: 30vw;
105
      }
106

    
107
      .popup_frame .table_wrapper {
108
	  margin: 0 auto;
109
      }
110

    
111
      td:first-child {
112
	  max-width: 70vw;
113
	  overflow: hidden;
114
      }
115

    
116
      tr.work_li>td:first-child {
117
	  padding-right: 0;
118
	  max-width: unset;
119
      }
120

    
121
      tr.work_li>td>div {
122
	  background-color: #e0f0f0;
123
	  border-left: solid #454 5px;
124
	  border-right: solid #454 2px;
125
	  padding: 5px 10px;
126
      }
127

    
128
      .form_grid {
129
	  display: grid;
130
	  grid-template-columns: auto auto;
131
      }
132

    
133
      .form_grid>label {
134
	  grid-column: 1 / span 1;
135
	  margin-right: 10px;
136
      }
137

    
138
      .form_grid label {
139
	  line-height: 34px; /* center text vertically */
140
      }
141

    
142
      .form_grid>input, .form_grid>span {
143
	  grid-column: 2 / span 1;
144
      }
145

    
146
      .form_grid>label[for="script_contents_field"],
147
      .form_grid>* {
148
	  grid-column: 1 / span 2;
149
      }
150

    
151
      .form_grid>textarea {
152
	  min-width: 70vw;
153
	  resize: none;
154
      }
155
    </style>
156
  </head>
157
  <body>
158
    <template>
159
      <tr id="item_li" class="nowrap">
160
	<td></td>
161
	<td><div class="button"> Edit </div></td>
162
	<td><div class="button"> Remove </div></td>
163
	<td><div class="button"> Export </div></td>
164
      </tr>
165
      <tr id="bag_component_li" class="nowrap">
166
	<td></td>
167
	<td><div class="button"> Remove </div></td>
168
      </tr>
169
      <tr id="chbx_component_li" class="nowrap">
170
	<td>
171
	  <input type="checkbox" style="display: inline;"></input>
172
	  <span></span>
173
	</td>
174
      </tr>
175
      <tr id="radio_component_li" class="nowrap">
176
	<td>
177
	  <input type="radio" style="display: inline;" name="page_components"></input>
178
	  <span></span>
179
	</td>
180
      </tr>
181
    </template>
182

    
183
    <!-- Mind the show_*s ids below - their format is assumed in js code -->
184
    <input type="radio" name="tabs" id="show_repos"></input>
185
    <input type="radio" name="tabs" id="show_pages" checked></input>
186
    <input type="radio" name="tabs" id="show_bags"></input>
187
    <input type="radio" name="tabs" id="show_scripts"></input>
188
    <div id="tab_heads" class="has_bottom_line">
189
      <label for="show_repos" id="repos_lbl"> Repos </label>
190
      <label for="show_pages" id="pages_lbl"> Pages </label>
191
      <label for="show_bags" id="bags_lbl"> Bags </label>
192
      <label for="show_scripts" id="scripts_lbl"> Scripts </label>
193
      <button id="import_but" style="margin-left: 40px;"> Import </button>
194
    </div>
195
    <div id="repos" class="tab">
196
      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
197
	<div>
198
	  <table>
199
	    <tbody id="repos_ul">
200
	      <tr id="work_repo_li" class="hide work_li">
201
		<td colspan="4">
202
		  <div class="form_grid">
203
		    <label for="repo_url_field">URL: </label>
204
		    <input id="repo_url_field"></input>
205
		    <div>
206
		      <button id="save_repo_but" type="button"> Save </button>
207
		      <button id="discard_repo_but" type="button"> Cancel </button>
208
		    </div>
209
		  </div>
210
		</td>
211
	      </tr>
212
	    </tbody>
213
	  </table>
214
	</div>
215
      </div>
216
      <button id="add_repo_but" type="button"> Add repository </button>
217
    </div>
218
    <div id="pages" class="tab">
219
      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
220
	<div>
221
	  <table>
222
	    <tbody id="pages_ul">
223
	      <tr id="work_page_li" class="hide work_li">
224
		<td colspan="4">
225
		  <div class="form_grid">
226
		    <label for="page_url_field">URL: </label>
227
		    <input id="page_url_field"></input>
228
		    <label>Payload: </label>
229
		    <span>
230
		      <span id="page_payload"></span>
231
		      <button id="select_page_components_but">
232
			Choose payload
233
		      </button>
234
		    </span>
235
		    <div>
236
		      <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
237
		      <label for="page_allow_chbx">Allow native scripts</label>
238
		    </div>
239
		    <div>
240
		      <button id="save_page_but" type="button"> Save </button>
241
		      <button id="discard_page_but" type="button"> Cancel </button>
242
		    </div>
243
		  </div>
244
		</td>
245
	      </tr>
246
	    </tbody>
247
	  </table>
248
	</div>
249
      </div>
250
      <button id="add_page_but" type="button"> Add page </button>
251
      <IMPORT html/default_blocking_policy.html />
252
    </div>
253
    <div id="bags" class="tab">
254
      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
255
	<div>
256
	  <table>
257
	    <tbody id="bags_ul">
258
	      <tr id="work_bag_li" class="hide work_li">
259
		<td colspan="4">
260
		  <div class="form_grid">
261
		    <label for="bag_name_field"> Name: </label>
262
		    <input id="bag_name_field"></input>
263
		    <div class="table_wrapper tight_table has_bottom_line has_upper_line">
264
		      <div>
265
			<table>
266
			  <tbody id="bag_components_ul">
267
			    <tr id="empty_bag_component_li" class="hide"></tr>
268
			  </tbody>
269
			</table>
270
		      </div>
271
		    </div>
272
		    <div>
273
		      <button id="select_bag_components_but">
274
			Add scripts
275
		      </button>
276
		    </div>
277
		    <div>
278
		      <button id="save_bag_but"> Save </button>
279
		      <button id="discard_bag_but"> Cancel </button>
280
		    </div>
281
		  </div>
282
		</td>
283
	      </tr>
284
	    </tbody>
285
	  </table>
286
	</div>
287
      </div>
288
      <button id="add_bag_but" type="button"> Add bag </button>
289
    </div>
290
    <div id="scripts" class="tab">
291
      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
292
	<div>
293
	  <table>
294
	    <tbody id="scripts_ul">
295
	      <tr id="work_script_li" class="hide work_li">
296
		<td colspan="4">
297
		  <div class="form_grid">
298
		    <label for="script_name_field"> Name: </label>
299
		    <input id="script_name_field"></input>
300
		    <label for="script_url_field"> URL: </label>
301
		    <input id="script_url_field"></input>
302
		    <label for="script_sha256_field"> SHA256: </label>
303
		    <input id="script_sha256_field"></input>
304
		    <aside>
305
		      Note: URL and SHA256 are ignored if script text is provided.
306
		    </aside>
307
		    <label for="script_contents_field"> contents: </label>
308
		    <textarea id="script_contents_field" rows="20" cols="80"></textarea>
309
		    <div>
310
		      <button id="save_script_but"> Save </button>
311
		      <button id="discard_script_but"> Cancel </button>
312
		    </div>
313
		  </div>
314
		</td>
315
	      </tr>
316
	    </tbody>
317
	  </table>
318
	</div>
319
      </div>
320
      <button id="add_script_but" type="button"> Add script </button>
321
    </div>
322

    
323
    <div id="chbx_components_window" class="hide popup" position="absolute">
324
      <div class="popup_frame">
325
	<div class="table_wrapper tight_table has_bottom_line has_upper_line">
326
	  <div>
327
	    <table>
328
	      <tbody id="chbx_components_ul">
329
	      </tbody>
330
	    </table>
331
	  </div>
332
	</div>
333
	<button id="commit_bag_components_but"> Add </button>
334
	<button id="cancel_bag_components_but"> Cancel </button>
335
      </div>
336
    </div>
337

    
338
    <div id="radio_components_window" class="hide popup" position="absolute">
339
      <div class="popup_frame">
340
	<div class="table_wrapper tight_table always_scrollbar has_bottom_line has_upper_line">
341
	  <div>
342
	    <table>
343
	      <tbody id="radio_components_ul">
344
		<tr id="radio_component_none_li">
345
		  <td>
346
		    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
347
		    <span>(None)</span>
348
		  </td>
349
		</tr>
350
	      </tbody>
351
	    </table>
352
	  </div>
353
	</div>
354
	<button id="commit_page_components_but"> Choose </button>
355
	<button id="cancel_page_components_but"> Cancel </button>
356
      </div>
357
    </div>
358

    
359
    <div id="import_window" class="hide popup" position="absolute">
360
      <div class="popup_frame">
361
	<h2> Settings import </h2>
362
	<IMPORT html/import_frame.html />
363
      </div>
364
    </div>
365

    
366
    <a id="file_downloader" class="hide"></a>
367
    <form id="file_opener_form" style="visibility: hidden;">
368
      <input type="file" id="file_opener"></input>
369
    </form>_OPTIONSSCRIPTS_
370
  </body>
371
</html>
(11-11/14)