Added aircraft settigs dialog

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;
+}

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 );

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;
 

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");
         });

client/views/index.ejs

@@ -31,6 +31,7 @@
   <%- include('mouseinfopanel.ejs') %>
   <%- include('navbar.ejs') %>
   <%- include('connectionstatuspanel.ejs') %>
+  <%- include('dialogs.ejs') %>
   
   <% /* %>
   <%- include('log.ejs') %> 

client/views/unitcontrolpanel.ejs

@@ -58,8 +58,10 @@
 
     <hr />
 
-    <div class="ol-button-group">
-        <button class="ol-button-warning">Delete unit</button>
-    </div>
+    <button class="ol-button-settings" data-on-click="toggleElements" data-on-click-params='{"selector": "#aircraft-settings-dialog"}'>Adjust settings</button>
+
+    <hr />
+
+    <button class="ol-button-warning">Delete unit</button>
 
 </div>