Merge pull request #564 from Pax1601/563-map-icon-disappears-after-changing-map-type

We no longer LOSE the icon

client/public/stylesheets/style/style.css

@@ -67,10 +67,6 @@ button>img:first-child {
     pointer-events: none;
 }
 
-.ol-box-shadow {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-}
-
 form {
     margin: 0;
     padding: 0;
@@ -230,13 +226,13 @@ form {
 }
 
 .ol-select.is-open[data-position="top"]>.ol-select-options {
-    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     top: 0;
     translate: 0 -100%;
 }
 
 .ol-select>.ol-select-options>div {
     background-color: var(--background-grey);
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     display: flex;
     justify-content: left;
     padding: 2px 15px;
@@ -266,6 +262,7 @@ form {
     color: white;
     display: block;
     font-size: 13px;
+    font-weight: normal;
     height: 32px;
     padding: 6px 2px;
     padding: 5px;
@@ -718,6 +715,62 @@ nav.ol-panel> :last-child {
 }
 
 
+
+#roe-buttons-container button,
+#reaction-to-threat-buttons-container button,
+#emissions-countermeasures-buttons-container button,
+#shots-scatter-buttons-container button
+#shots-intensity-buttons-container button {
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid var(--accent-light-blue);
+    display: flex;
+    height: 30px;
+    justify-content: center;
+    width: 30px;
+}
+
+#reaction-to-threat-buttons-container button:not(:first-child) svg {
+    width: 150%;
+    margin: -5px;
+}
+
+#unit-control-panel .ol-option-button button.selected {
+    background-color: white;
+    border-color: white;
+}
+
+#unit-control-panel .ol-option-button button.selected svg * {
+    fill: var(--background-steel);
+    stroke: var(--background-steel);
+}
+
+#rapid-controls {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    height: fit-content;
+    width: fit-content;
+}
+
+#rapid-controls button {
+    padding: 4px;
+}
+
+#rapid-controls svg {
+    height: 20px;
+    width: 20px;
+    fill: white;
+    stroke: white;
+}
+
+#rapid-controls button:before {
+    display: inline-block;
+    filter: invert(100%);
+    height: 20px;
+    width: 20px;
+}
+
 /****************************************************************************************/
 #splash-screen {
     border-radius: var(--border-radius-md);
@@ -1272,12 +1325,13 @@ input[type=number]::-webkit-outer-spin-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: 4px;
+    margin-right: 8px;
 }
 
 .ol-button-close {
@@ -1314,12 +1368,10 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .ol-switch {
-    align-items: center;
     cursor: pointer;
     display: flex;
-    height: 25px;
+    align-items: center;
     justify-content: center;
-    width: 40px;
 }
 
 .ol-switch-input {
@@ -1355,7 +1407,7 @@ input[type=number]::-webkit-outer-spin-button {
     display: flex;
     font-size: 11px;
     height: 100%;
-    padding: 0px 6px;
+    padding: 0px 7px;
     position: absolute;
     transition: transform 0.2s;
 }
@@ -1372,29 +1424,6 @@ input[type=number]::-webkit-outer-spin-button {
     transform: translateX(calc((var(--width) - var(--height)) * 0.5));
 }
 
-.switch-control.yes-no .ol-switch[data-value="true"] .ol-switch-fill {
-    background-color: var(--accent-light-blue);
-}
-
-.switch-control.yes-no .ol-switch[data-value="false"] .ol-switch-fill {
-	background-color: var(--ol-switch-off);
-}
-
-.switch-control.coalition .ol-switch>.ol-switch-fill::before,
-.switch-control.yes-no .ol-switch>.ol-switch-fill::before {
-    translate:-100% 0;
-    transform: none;
-}
-
-.switch-control.yes-no .ol-switch[data-value="true"]>.ol-switch-fill::before {
-	content: "YES";
-}
-
-.switch-control.yes-no .ol-switch[data-value="false"]>.ol-switch-fill::before {
-	content: "NO";
-}
-
-
 .ol-contexmenu-panel {
     padding: 20px;
 }
@@ -1410,26 +1439,6 @@ input[type=number]::-webkit-outer-spin-button {
 .ol-coalition-switch[data-value="undefined"]>.ol-switch-fill {
     background-color: var(--primary-neutral);
 }
-/*
-#unit-control-panel .switch-control .ol-switch-fill::after {
-	background-color: white;
-}
-*/
-.switch-control.coalition [data-value="true"] .ol-switch-fill {
-	background-color: var(--accent-light-blue);
-}
-
-.switch-control.coalition [data-value="false"] .ol-switch-fill {
-	background-color: var(--primary-red);
-}
-
-.switch-control.coalition [data-value="true"]>.ol-switch-fill::before {
-	content: "BLUE" !important;
-}
-
-.switch-control.coalition [data-value="false"]>.ol-switch-fill::before {
-	content: "RED" !important;
-}
 
 .ol-context-menu>ul {
     max-height: 200px;

client/src/controls/dropdown.ts

@@ -7,6 +7,7 @@ export class Dropdown {
     #optionsList: string[] = [];
     #index: number = 0;
     #hidden: boolean = false;
+    #text!:HTMLElement;
 
     constructor(ID: string | null, callback: CallableFunction, options: string[] | null = null, defaultText?: string) {
         if (ID === null)
@@ -15,7 +16,10 @@ export class Dropdown {
             this.#container = document.getElementById(ID) as HTMLElement;
 
         this.#options = this.#container.querySelector(".ol-select-options") as HTMLElement;
-        this.#value = this.#container.querySelector(".ol-select-value") as HTMLElement;
+
+        const text = this.#container.querySelector(".ol-select-value-text");
+        this.#value = ( text instanceof HTMLElement ) ? text : this.#container.querySelector(".ol-select-value") as HTMLElement;
+
         this.#defaultValue = this.#value.innerText;
         this.#callback = callback;
 

client/views/toolbars/primary.ejs

@@ -28,7 +28,7 @@
 
     <div class="ol-group">
         <div id="map-type" class="ol-select">
-            <div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg>ArcGIS Satellite</div>
+            <div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg><span class="ol-select-value-text">ArcGIS Satellite</span></div>
             <div class="ol-select-options">
                 <!-- Here the available map sources will be listed-->
             </div>