Project

General

Profile

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

haketilo / html / options.html @ b93f26bf

1
<!doctype html>
2
<!--
3
    Copyright (C) 2021 Wojtek Kosior
4
    Copyright (C) 2021 Nicholas Johnson
5
    Redistribution terms are gathered in the `copyright' file.
6
  -->
7
<html>
8
  <head>
9
    <meta charset="utf-8"/>
10
    <title>Myext options</title>
11
    <style>
12
      input[type="checkbox"], input[type="radio"], .hide, .popup.hide {
13
	  display: none;
14
      }
15

    
16
      /* pages list */
17
      #page_components_ul {
18
	  max-height: 80vh;
19
	  overflow-y: auto;
20
      }
21
      #page_components_ul li.dragover_li {
22
	  border-top: 2px solid blue;
23
      }
24
      #page_components_ul li {
25
	  border-top: 2px solid white;
26
      }
27
      li[draggable=true] * {
28
	  pointer-events: none;
29
      }
30
      li[draggable=true] label,
31
      li[draggable=true] button {
32
	  pointer-events: auto;
33
      }
34

    
35
      /* tabbed view */
36
      #show_pages:not(:checked) ~ #pages,
37
      #show_bags:not(:checked) ~ #bags,
38
      #show_scripts:not(:checked) ~ #scripts {
39
	  display: none;
40
      }
41

    
42
      #show_pages:checked ~ #pages_lbl,
43
      #show_bags:checked ~ #bags_lbl,
44
      #show_scripts:checked ~ #scripts_lbl {
45
	  background: #4CAF50;
46
          color: white;
47
      }
48

    
49
      body > div {
50
	  border-top: 6px solid #4CAF50;
51
      }
52

    
53
      .tab_head {
54
	  display: inline-block;
55
      }
56

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

    
71
      .popup_frame {
72
	  background-color: white;
73
	  width: 50vw;
74
      }
75

    
76
      input[type="radio"]:not(:checked)+.import_window_content {
77
	  display: none;
78
      }
79

    
80
      /* buttons */
81
      button {
82
          background-color: #4CAF50;
83
          border: none;
84
          border-radius: 8px;
85
          color: white;
86
          padding: 6px 12px;
87
          text-align: center;
88
          text-decoration: none;
89
          display: inline-block;
90
          margin: 2px 0px;
91
      }
92

    
93
    button:hover {
94
        box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
95
    }
96
    </style>
97
  </head>
98
  <body>
99
    <!-- The invisible div below is for elements that will be cloned. -->
100
    <div class="hide">
101
      <li id="item_li_template">
102
	<span></span>
103
	<button> Edit </button>
104
	<button> Remove </button>
105
	<button> Export </button>
106
      </li>
107
      <li id="bag_component_li_template">
108
	<span></span>
109
	<button> Remove </button>
110
      </li>
111
      <li id="chbx_component_li_template">
112
	<input type="checkbox" style="display: inline;"></input>
113
	<span></span>
114
      </li>
115
      <li id="radio_component_li_template">
116
	<input type="radio" style="display: inline;" name="page_components"></input>
117
	<span></span>
118
      </li>
119
      <li id="import_li_template">
120
	<span></span>
121
	<input type="checkbox" style="display: inline;" checked></input>
122
	<span></span>
123
      </li>
124
    </div>
125

    
126
    <input type="radio" name="tabs" id="show_pages" checked></input>
127
    <input type="radio" name="tabs" id="show_bags"></input>
128
    <input type="radio" name="tabs" id="show_scripts"></input>
129
    <label for="show_pages" id="pages_lbl"
130
	   class="tab_head"> Pages </label>
131
    <label for="show_bags" id="bags_lbl"
132
	   class="tab_head"> Bags </label>
133
    <label for="show_scripts" id="scripts_lbl"
134
	   class="tab_head"> Scripts </label>
135

    
136
    <div id="pages">
137
      <ul id="pages_ul">
138
	<li id="work_page_li" class="hide">
139
	  <label for="page_url_field">URL: </label>
140
	  <input id="page_url_field"></input>
141
	  <br/>
142
	  <label>Payload: </label>
143
	  <span id="page_payload"></span>
144
	  <button id="select_page_components_but">
145
	    Choose payload
146
	  </button>
147
	  <br/>
148
	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
149
	  <label for="page_allow_chbx">Allow native scripts</label>
150
	  <br/>
151
	  <button id="save_page_but" type="button"> Save </button>
152
	  <button id="discard_page_but" type="button"> Cancel </button>
153
	</li>
154
      </ul>
155
      <button id="add_page_but" type="button"> Add page </button>
156
    </div>
157

    
158
    <div id="bags">
159
      <ul id="bags_ul">
160
	<li id="work_bag_li" class="hide">
161
	  <label for="bag_name_field"> Name: </label>
162
	  <input id="bag_name_field"></input>
163
	  <ul id="bag_components_ul">
164
	    <li id="empty_bag_component_li" class="hide"></li>
165
	  </ul>
166
	  <button id="select_bag_components_but">
167
	    Add scripts
168
	  </button>
169
	  <br/>
170
	  <button id="save_bag_but"> Save </button>
171
	  <button id="discard_bag_but"> Cancel </button>
172
	</li>
173
      </ul>
174
      <button id="add_bag_but" type="button"> Add bag </button>
175
    </div>
176

    
177
    <div id="scripts">
178
      <ul id="scripts_ul">
179
	<li id="work_script_li" class="hide">
180
	  <label for="script_name_field"> Name: </label>
181
	  <input id="script_name_field"></input>
182
	  <br/>
183
	  <label for="script_url_field"> URL: </label>
184
	  <input id="script_url_field"></input>
185
	  <br/>
186
	  <label for="script_sha256_field"> sha256: </label>
187
	  <input id="script_sha256_field"></input>
188
	  <br/>
189
	  <label for="script_contents_field"> contents: </label>
190
	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
191
	  <br/>
192
	  <button id="save_script_but"> Save </button>
193
	  <button id="discard_script_but"> Cancel </button>
194
	</li>
195
      </ul>
196
      <button id="add_script_but" type="button"> Add script </button>
197
    </div>
198

    
199
    <button id="import_but" style="margin-top: 40px;"> Import </button>
200

    
201
    <div id="chbx_components_window" class="hide popup" position="absolute">
202
      <div class="popup_frame">
203
	<ul id="chbx_components_ul">
204

    
205
	</ul>
206
	<button id="commit_bag_components_but"> Add </button>
207
	<button id="cancel_bag_components_but"> Cancel </button>
208
      </div>
209
    </div>
210

    
211
    <div id="radio_components_window" class="hide popup" position="absolute">
212
      <div class="popup_frame">
213
	<ul id="radio_components_ul">
214

    
215
	  <li id="radio_component_none_li">
216
	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
217
	    <span>(None)</span>
218
	  </li>
219
	</ul>
220
	<button id="commit_page_components_but"> Choose </button>
221
	<button id="cancel_page_components_but"> Cancel </button>
222
      </div>
223
    </div>
224

    
225
    <div id="import_window" class="hide popup" position="absolute">
226
      <div class="popup_frame">
227
	<h2> Settings import </h2>
228
	<input id="import_loading_radio" type="radio" name="import_window_content"></input>
229
	<span class="import_window_content"> Loading... </span>
230
	<input id="import_failed_radio" type="radio" name="import_window_content"></input>
231
	<div class="import_window_content">
232
	  <span> Bad file :( </span>
233
	  <pre id="bad_file_errormsg"></pre>
234
	  <button id="import_failok_but"> OK </button>
235
	</div>
236
	<input id="import_selection_radio" type="radio" name="import_window_content"></input>
237
	<div class="import_window_content">
238
	  <button id="check_all_import_but"> Check all </button>
239
	  <button id="uncheck_all_import_but"> Uncheck all </button>
240
	  <button id="uncheck_colliding_import_but"> Uncheck existing </button>
241
	  <ul id="import_ul">
242
	  </ul>
243
	  <button id="commit_import_but"> OK </button>
244
	  <button id="cancel_import_but"> Cancel </button>
245
	</div>
246
      </div>
247
    </div>
248

    
249
    <a id="file_downloader" class="hide"></a>
250
    <form id="file_opener_form" style="visibility: hidden;">
251
      <input type="file" id="file_opener"></input>
252
    </form>
253

    
254
    <script src="/common/connection_types.js"></script>
255
    <script src="/common/stored_types.js"></script>
256
    <script src="/common/once.js"></script>
257
    <script src="/common/browser.js"></script>
258
    <script src="/common/storage_client.js"></script>
259
    <script src="./options_main.js"></script>
260
  </body>
261
</html>
(3-3/4)