diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css index 6fe29e9e..ac998075 100644 --- a/client/public/stylesheets/layout.css +++ b/client/public/stylesheets/layout.css @@ -347,3 +347,106 @@ dl.data-grid dd { #mouse-info-panel dd { width:60%; } + + +.ol-panel.ol-dialog { + align-self: center; + background-color: var( --background-slate-blue ); + justify-self: center; + padding:25px; + position: absolute; + z-index:1000; +} + +.ol-dialog-close { + cursor: pointer; + font-size:16px; + font-weight: var( --font-weight-bolder ); + position: absolute; + right: 25px; + top: 25px; +} + +.ol-dialog-close::before { + content: "\d7"; +} + +.ol-dialog-header { + border-bottom:1px solid var( --background-grey ); + padding-bottom:10px; +} + +.ol-dialog-footer { + border-top:1px solid var( --background-grey ); + padding-top:15px; +} + +.ol-checkbox label { + align-items: center; + cursor: pointer; + display: flex; + flex-wrap: nowrap; + white-space: nowrap; +} + +.ol-checkbox input[type="checkbox"] { + appearance:none; + background-color: transparent; + border:none; + margin:0; +} + +.ol-checkbox input[type="checkbox"]::before { + align-self:center; + background-image: url( "/images/icons/square-check-solid.svg" ); + background-repeat: no-repeat; + content: ""; + filter: invert( 100% ); + display:flex; + height:16px; + margin-right:10px; + width:16px; +} + + +.ol-checkbox input[type="checkbox"]:checked::before { + background-image: url( "/images/icons/square-regular.svg" ); +} + + +[class|="ol-button"] { + align-items: center; + background-repeat: no-repeat; + display:flex; + font-weight: normal; + padding:8px 10px; + white-space: nowrap; +} + +[class|="ol-button"]::before { + margin-right:8px; +} + +.ol-button-close { + background: transparent; + border:1px solid white; +} + +.ol-button-close::before { + content: "\d7"; +} + +.ol-button-settings { + background-color: var( --background-slate-blue ); +} + +.ol-button-settings::before { + background-image: url( "/images/icons/gears-solid.svg" ); + background-position:0 50%; + background-size:24px 24px; + content: ""; + display:flex; + filter: invert( 100% ); + height: 24px; + width: 24px; +} \ No newline at end of file diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 995240ae..cdd1cacd 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -71,6 +71,15 @@ button[disabled="disabled"] { cursor: not-allowed; } +form { + margin: 0; + padding: 0; +} + +form > div { + margin: 20px 0; +} + .pill { background-color: var( --background-darksteel ); diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css index 48d9ca93..69f1768d 100644 --- a/client/public/themes/olympus/olympus.css +++ b/client/public/themes/olympus/olympus.css @@ -21,6 +21,7 @@ --accent-light-blue : #5ca7ff; --background-grey : #3d4651; + --background-slate-blue : #363c43; --background-offwhite : #f2f2f3; --background-steel : #202831; diff --git a/client/src/index.ts b/client/src/index.ts index 266490d7..90a7c853 100644 --- a/client/src/index.ts +++ b/client/src/index.ts @@ -172,6 +172,15 @@ function setupEvents() { document.body.toggleAttribute("data-hide-" + ev.detail.unitType); }); + document.addEventListener( "closeDialog", (ev: CustomEventInit) => { + ev.detail._element.closest( ".ol-dialog" ).classList.add( "hide" ); + }); + + document.addEventListener( "toggleElements", (ev: CustomEventInit) => { + document.querySelectorAll( ev.detail.selector ).forEach( el => { + el.classList.toggle( "hide" ); + }) + }); /** Olympus UI ***/ document.querySelectorAll(".ol-select").forEach(select => { @@ -179,6 +188,10 @@ function setupEvents() { // Do open/close toggle select.addEventListener("click", ev => { + if ( ev.target instanceof HTMLElement && ev.target.nodeName !== "A" ) { + ev.preventDefault(); + } + ev.stopPropagation(); select.classList.toggle("is-open"); }); diff --git a/client/views/index.ejs b/client/views/index.ejs index cecce721..3fbfbf5d 100644 --- a/client/views/index.ejs +++ b/client/views/index.ejs @@ -31,6 +31,7 @@ <%- include('mouseinfopanel.ejs') %> <%- include('navbar.ejs') %> <%- include('connectionstatuspanel.ejs') %> + <%- include('dialogs.ejs') %> <% /* %> <%- include('log.ejs') %> diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs index 37682631..ca818dc4 100644 --- a/client/views/unitcontrolpanel.ejs +++ b/client/views/unitcontrolpanel.ejs @@ -58,8 +58,10 @@