diff options
Diffstat (limited to 'html/options.html')
| -rw-r--r-- | html/options.html | 463 |
1 files changed, 328 insertions, 135 deletions
diff --git a/html/options.html b/html/options.html index e7dc3aa..e0c3c23 100644 --- a/html/options.html +++ b/html/options.html @@ -1,7 +1,6 @@ <!doctype html> <!-- Copyright (C) 2021 Wojtek Kosior - Copyright (C) 2021 Nicholas Johnson Redistribution terms are gathered in the `copyright' file. --> <html> @@ -11,23 +10,11 @@ <link type="text/css" rel="stylesheet" href="reset.css" /> <link type="text/css" rel="stylesheet" href="base.css" /> <style> - /* pages list */ - #page_components_ul { - max-height: 80vh; - overflow-y: auto; - } - #page_components_ul li.dragover_li { - border-top: 2px solid blue; - } - #page_components_ul li { - border-top: 2px solid white; - } - li[draggable=true] * { - pointer-events: none; - } - li[draggable=true] label, - li[draggable=true] button { - pointer-events: auto; + body { + background-color: #f0f0f0; + color: #555; + overflow: auto; + width: 100%; } /* tabbed view */ @@ -38,20 +25,41 @@ display: none; } - #show_repos:checked ~ #repos_lbl, - #show_pages:checked ~ #pages_lbl, - #show_bags:checked ~ #bags_lbl, - #show_scripts:checked ~ #scripts_lbl { + #show_repos:checked ~ div #repos_lbl, + #show_pages:checked ~ div #pages_lbl, + #show_bags:checked ~ div #bags_lbl, + #show_scripts:checked ~ div #scripts_lbl { background: #4CAF50; color: white; } - body > div { - border-top: 6px solid #4CAF50; + #tab_heads>* { + font-size: 130%; + padding: 10px; + display: inline-block; + -moz-user-select: none; + user-select: none; } - .tab_head { - display: inline-block; + #import_but { + font: unset; + font-size: 130%; + float: right; + margin: 0; + border-radius: 0; + } + + #tab_heads::after { + display: block; + height: 8px; + content: ""; + background: linear-gradient(#555, transparent); + } + + div.tab { + min-width: 50vw; + width: fit-content; + padding-left: 6px; } /* popup window with list of selectable components */ @@ -61,7 +69,7 @@ height: 100vh; left: 0; top: 0; - background-color: rgba(0,0,0,0.4); + background-color: rgba(60,60,60,0.4); z-index: 1; overflow: auto; vertical-align: center; @@ -69,8 +77,130 @@ } .popup_frame { - background-color: white; - width: 50vw; + background-color: #f0f0f0; + margin: 5vh auto; + padding: 15px; + border: solid #333 4px; + border-radius: 15px; + width: -moz-fit-content; + width: fit-content; + } + + div.ul_container { + background-color: #f0f0f0; + width: -moz-fit-content; + width: fit-content; + margin: 6px 0; + } + + div.ul_container::after, div.ul_container::before { + display: block; + height: 6px; + content: ""; + background: linear-gradient(transparent, #555); + } + + div.ul_container::after { + background: linear-gradient(#555, transparent); + } + + .work_li div.ul_container::before { + background: linear-gradient(#e0f0f0, #555); + } + + .work_li div.ul_container::after { + background: linear-gradient(#555, #e0f0f0); + } + + div.ul_container>.always_scrollbar{ + border-left: solid #454 8px; + max-height: 80vh; + overflow-y: scroll; + } + + div.ul_container table { + border-collapse: unset; + } + + div.ul_container, div.ul_container>*, div.ul_container table>tbody { + width: -moz-min-content; + width: min-content; + } + + div.ul_container div.ul_container>.always_scrollbar, + .popup_frame div.ul_container>.always_scrollbar { + max-height: 60vh; + } + + .popup_frame div.ul_container table { + min-width: 30vw; + } + + .popup_frame div.ul_container { + margin: 0 auto; + } + + tr:nth-child(odd) { + background-color: #e5e5e5; + } + + td { + vertical-align: middle; + min-width: fit-content; + min-width: -moz-fit-content; + width: 1%; + } + + tr>td:first-child { + padding: 3px 10px 6px; + max-width: 70vw; + overflow: hidden; + width: 100%; + white-space: nowrap; + } + + tr.work_li>td:first-child { + padding-right: 0; + max-width: unset; + } + + tr.work_li>td>div { + background-color: #e0f0f0; + border-left: solid #454 5px; + border-right: solid #454 2px; + padding: 5px 10px; + } + + .form_grid { + display: grid; + grid-template-columns: auto auto; + } + + .form_grid>label { + grid-column: 1 / span 1; + margin-right: 10px; + } + + .form_grid label { + line-height: 34px; /* center text vertically */ + } + + .form_grid>input, .form_grid>span { + grid-column: 2 / span 1; + } + + .form_grid>label[for="script_contents_field"], + .form_grid>* { + grid-column: 1 / span 2; + } + + .form_grid>textarea { + min-width: 70vw; + resize: none; + } + + td>div.button { + margin-right: 4px; } input[type="radio"]:not(:checked)+.import_window_content { @@ -80,24 +210,28 @@ </head> <body> <template> - <li id="item_li"> - <span></span> - <button> Edit </button> - <button> Remove </button> - <button> Export </button> - </li> - <li id="bag_component_li"> - <span></span> - <button> Remove </button> - </li> - <li id="chbx_component_li"> - <input type="checkbox" style="display: inline;"></input> - <span></span> - </li> - <li id="radio_component_li"> - <input type="radio" style="display: inline;" name="page_components"></input> - <span></span> - </li> + <tr id="item_li"> + <td></td> + <td><div class="button"> Edit </div></td> + <td><div class="button"> Remove </div></td> + <td><div class="button"> Export </div></td> + </tr> + <tr id="bag_component_li"> + <td></td> + <td><div class="button"> Remove </div></td> + </tr> + <tr id="chbx_component_li"> + <td> + <input type="checkbox" style="display: inline;"></input> + <span></span> + </td> + </tr> + <tr id="radio_component_li"> + <td> + <input type="radio" style="display: inline;" name="page_components"></input> + <span></span> + </td> + </tr> </template> <!-- Mind the show_*s ids below - their format is assumed in js code --> @@ -105,98 +239,150 @@ <input type="radio" name="tabs" id="show_pages" checked></input> <input type="radio" name="tabs" id="show_bags"></input> <input type="radio" name="tabs" id="show_scripts"></input> - <label for="show_repos" id="repos_lbl" - class="tab_head"> Repos </label> - <label for="show_pages" id="pages_lbl" - class="tab_head"> Pages </label> - <label for="show_bags" id="bags_lbl" - class="tab_head"> Bags </label> - <label for="show_scripts" id="scripts_lbl" - class="tab_head"> Scripts </label> - - <div id="repos"> - <ul id="repos_ul"> - <li id="work_repo_li" class="hide"> - <label for="repo_url_field">URL: </label> - <input id="repo_url_field"></input> - <br/> - <button id="save_repo_but" type="button"> Save </button> - <button id="discard_repo_but" type="button"> Cancel </button> - </li> - </ul> + <div id="tab_heads"> + <label for="show_repos" id="repos_lbl"> Repos </label> + <label for="show_pages" id="pages_lbl"> Pages </label> + <label for="show_bags" id="bags_lbl"> Bags </label> + <label for="show_scripts" id="scripts_lbl"> Scripts </label> + <button id="import_but" style="margin-left: 40px;"> Import </button> + </div> + <div id="repos" class="tab"> + <div class="ul_container"> + <div> + <table> + <tbody id="repos_ul"> + <tr id="work_repo_li" class="hide work_li"> + <td colspan="4"> + <div class="form_grid"> + <label for="repo_url_field">URL: </label> + <input id="repo_url_field"></input> + <div> + <button id="save_repo_but" type="button"> Save </button> + <button id="discard_repo_but" type="button"> Cancel </button> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </div> + </div> <button id="add_repo_but" type="button"> Add repository </button> </div> - - <div id="pages"> - <ul id="pages_ul"> - <li id="work_page_li" class="hide"> - <label for="page_url_field">URL: </label> - <input id="page_url_field"></input> - <br/> - <label>Payload: </label> - <span id="page_payload"></span> - <button id="select_page_components_but"> - Choose payload - </button> - <br/> - <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input> - <label for="page_allow_chbx">Allow native scripts</label> - <br/> - <button id="save_page_but" type="button"> Save </button> - <button id="discard_page_but" type="button"> Cancel </button> - </li> - </ul> + <div id="pages" class="tab"> + <div class="ul_container"> + <div> + <table> + <tbody id="pages_ul"> + <tr id="work_page_li" class="hide work_li"> + <td colspan="4"> + <div class="form_grid"> + <label for="page_url_field">URL: </label> + <input id="page_url_field"></input> + <label>Payload: </label> + <span> + <span id="page_payload"></span> + <button id="select_page_components_but"> + Choose payload + </button> + </span> + <div> + <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input> + <label for="page_allow_chbx">Allow native scripts</label> + </div> + <div> + <button id="save_page_but" type="button"> Save </button> + <button id="discard_page_but" type="button"> Cancel </button> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </div> + </div> <button id="add_page_but" type="button"> Add page </button> </div> - - <div id="bags"> - <ul id="bags_ul"> - <li id="work_bag_li" class="hide"> - <label for="bag_name_field"> Name: </label> - <input id="bag_name_field"></input> - <ul id="bag_components_ul"> - <li id="empty_bag_component_li" class="hide"></li> - </ul> - <button id="select_bag_components_but"> - Add scripts - </button> - <br/> - <button id="save_bag_but"> Save </button> - <button id="discard_bag_but"> Cancel </button> - </li> - </ul> + <div id="bags" class="tab"> + <div class="ul_container"> + <div> + <table> + <tbody id="bags_ul"> + <tr id="work_bag_li" class="hide work_li"> + <td colspan="4"> + <div class="form_grid"> + <label for="bag_name_field"> Name: </label> + <input id="bag_name_field"></input> + <div class="ul_container"> + <div> + <table> + <tbody id="bag_components_ul"> + <tr id="empty_bag_component_li" class="hide"></tr> + </tbody> + </table> + </div> + </div> + <div> + <button id="select_bag_components_but"> + Add scripts + </button> + </div> + <div> + <button id="save_bag_but"> Save </button> + <button id="discard_bag_but"> Cancel </button> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </div> + </div> <button id="add_bag_but" type="button"> Add bag </button> </div> - - <div id="scripts"> - <ul id="scripts_ul"> - <li id="work_script_li" class="hide"> - <label for="script_name_field"> Name: </label> - <input id="script_name_field"></input> - <br/> - <label for="script_url_field"> URL: </label> - <input id="script_url_field"></input> - <br/> - <label for="script_sha256_field"> sha256: </label> - <input id="script_sha256_field"></input> - <br/> - <label for="script_contents_field"> contents: </label> - <textarea id="script_contents_field" rows="20" cols="80"></textarea> - <br/> - <button id="save_script_but"> Save </button> - <button id="discard_script_but"> Cancel </button> - </li> - </ul> + <div id="scripts" class="tab"> + <div class="ul_container"> + <div> + <table> + <tbody id="scripts_ul"> + <tr id="work_script_li" class="hide work_li"> + <td colspan="4"> + <div class="form_grid"> + <label for="script_name_field"> Name: </label> + <input id="script_name_field"></input> + <label for="script_url_field"> URL: </label> + <input id="script_url_field"></input> + <label for="script_sha256_field"> SHA256: </label> + <input id="script_sha256_field"></input> + <aside> + Note: URL and SHA256 are ignored if script text is provided. + </aside> + <label for="script_contents_field"> contents: </label> + <textarea id="script_contents_field" rows="20" cols="80"></textarea> + <div> + <button id="save_script_but"> Save </button> + <button id="discard_script_but"> Cancel </button> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </div> + </div> <button id="add_script_but" type="button"> Add script </button> </div> - <button id="import_but" style="margin-top: 40px;"> Import </button> - <div id="chbx_components_window" class="hide popup" position="absolute"> <div class="popup_frame"> - <ul id="chbx_components_ul"> - - </ul> + <div class="ul_container"> + <div> + <table> + <tbody id="chbx_components_ul"> + </tbody> + </table> + </div> + </div> <button id="commit_bag_components_but"> Add </button> <button id="cancel_bag_components_but"> Cancel </button> </div> @@ -204,13 +390,20 @@ <div id="radio_components_window" class="hide popup" position="absolute"> <div class="popup_frame"> - <ul id="radio_components_ul"> - - <li id="radio_component_none_li"> - <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input> - <span>(None)</span> - </li> - </ul> + <div class="ul_container"> + <div class="always_scrollbar"> + <table> + <tbody id="radio_components_ul"> + <tr id="radio_component_none_li"> + <td> + <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input> + <span>(None)</span> + </td> + </tr> + </tbody> + </table> + </div> + </div> <button id="commit_page_components_but"> Choose </button> <button id="cancel_page_components_but"> Cancel </button> </div> |