diff --git a/client/public/stylesheets/markers/units.css b/client/public/stylesheets/markers/units.css
index 43bc53a0..8447f4d1 100644
--- a/client/public/stylesheets/markers/units.css
+++ b/client/public/stylesheets/markers/units.css
@@ -1,9 +1,3 @@
-:root {
- /* Generic marker settings */
- --unit-centre-x: calc(var(--unit-width) / 2);
- --unit-centre-y: calc(var(--unit-height) / 2);
-}
-
/*** Unit marker elements ***/
[data-object|="unit"] {
align-items: center;
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 2bce5980..a23ecfd6 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -486,13 +486,18 @@ nav.ol-panel> :last-child {
width: 100%;
}
+.slider-container:not(:first-of-type) {
+ margin-top: 10px;
+ width: 100%;
+}
+
.slider {
-webkit-appearance: none;
appearance: none;
background: #d3d3d3;
height: 2px;
margin-bottom: 10px;
- margin-top: 10px;
+ margin-top: 15px;
opacity: 0.7;
outline: none;
-webkit-transition: .2s;
@@ -1049,4 +1054,35 @@ input[type=number]::-webkit-outer-spin-button {
filter: invert(100%);
height: 24px;
width: 24px;
+}
+
+.toggle {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.toggle-input {
+ display: none;
+}
+
+.toggle-fill {
+ border-radius: 999px;
+ height: 20px;
+ position: relative;
+ transition: background-color 0.2s;
+}
+
+.toggle-fill::after {
+ aspect-ratio : 1 / 1;
+ background-clip: content-box;
+ background-color: #ffffff;
+ border-radius: 999px;
+ box-sizing: border-box;
+ content: "";
+ height: 100%;
+ padding: 2px;
+ position: absolute;
+ transition: transform 0.2s;
}
\ No newline at end of file
diff --git a/client/public/stylesheets/other/contextmenus.css b/client/public/stylesheets/other/contextmenus.css
index 9e325678..ddd329bd 100644
--- a/client/public/stylesheets/other/contextmenus.css
+++ b/client/public/stylesheets/other/contextmenus.css
@@ -109,6 +109,10 @@
border-top-right-radius: var(--border-radius-sm);
}
+#context-menu-switch .toggle-fill {
+ width: 40;
+}
+
[data-active-coalition="blue"].toggle-fill,
[data-active-coalition="blue"].unit-spawn-button:hover,
[data-active-coalition="blue"].unit-spawn-button.is-open,
@@ -155,15 +159,15 @@
}
[data-active-coalition="blue"].toggle-fill::after {
- transform: translateX(0);
+ transform: translateX(0%);
}
[data-active-coalition="red"].toggle-fill::after {
- transform: translateX(var(--height));
+ transform: translateX(100%);
}
[data-active-coalition="neutral"].toggle-fill::after {
- transform: translateX(calc(var(--height) / 2));
+ transform: translateX(50%);
}
[data-active-coalition="blue"]#active-coalition-label::after {
@@ -379,37 +383,3 @@
width: 180px;
z-index: 1000;
}
-
-.toggle {
- --width: 40px;
- --height: calc(var(--width) / 2);
- --border-radius: calc(var(--height) / 2);
- cursor: pointer;
-
- display: inline-block;
-}
-
-.toggle-input {
- display: none;
-}
-
-.toggle-fill {
- border-radius: var(--border-radius);
- height: var(--height);
- position: relative;
- transition: background-color 0.2s;
- width: var(--width);
-}
-
-.toggle-fill::after {
- background-color: #ffffff;
- border-radius: var(--border-radius);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
- content: "";
- height: calc(var(--height) - 4px);
- left: 2;
- position: absolute;
- top: 2;
- transition: transform 0.2s;
- width: calc(var(--height) - 4px);
-}
\ No newline at end of file
diff --git a/client/public/stylesheets/panels/unitcontrol.css b/client/public/stylesheets/panels/unitcontrol.css
index 521ec15f..c94e266a 100644
--- a/client/public/stylesheets/panels/unitcontrol.css
+++ b/client/public/stylesheets/panels/unitcontrol.css
@@ -147,4 +147,62 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
#general-settings-grid>div {
width: 49%;
+}
+
+#altitude-type-switch>.toggle-fill {
+ background-color: var(--background-offwhite);
+ height: 15px;
+ width: 40px;
+}
+
+#altitude-type-switch>.toggle-fill::before {
+ display: flex;
+ position: absolute;
+ box-sizing: border-box;
+ align-items: center;
+ padding: 0px 5px;
+ color: var(--background-steel);
+ font-weight: bold;
+ font-size: 10px;
+ transition: transform 0.2s;
+ height: 15px;
+}
+
+#altitude-type-switch[data-altitude-type="agl"]>.toggle-fill::before {
+ content: "AGL";
+}
+
+#altitude-type-switch[data-altitude-type="asl"]>.toggle-fill::before {
+ content: "ASL";
+ transform: translateX(calc(40px - 28px));
+}
+
+#altitude-type-switch>.toggle-fill::after {
+ position: absolute;
+ display: block;
+ background-color: var(--background-steel);
+ width: 15px;
+ top: 0px;
+}
+
+#altitude-type-switch[data-altitude-type="asl"]>.toggle-fill::after {
+ transform: translateX(0);
+}
+
+#altitude-type-switch[data-altitude-type="agl"]>.toggle-fill::after {
+ transform: translateX(calc(40px - 15px));
+}
+
+#altitude-slider dt {
+ width: 40%;
+}
+
+#altitude-slider dd {
+ column-gap: 5px;
+ width: 60%;
+}
+
+#altitude-slider dd>*:nth-child(2) {
+ width: 40px;
+ text-align: right;
}
\ No newline at end of file
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index ea90161d..2c2a2b09 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -48,6 +48,8 @@ export class UnitControlPanel extends Panel {
getUnitsManager().selectedUnitsSetSpeed(value / 1.94384)
});
+ this.getElement()?.querySelector("#altitude-type-switch")?.addEventListener('click', (e) => this.#onToggleAltitudeTypeSwitch(e));
+
/* Advanced settings dropdowns */
this.#TACANXYDropdown = new Dropdown("TACAN-XY", () => {});
this.#TACANXYDropdown.setOptions(["X", "Y"]);
@@ -82,7 +84,7 @@ export class UnitControlPanel extends Panel {
document.addEventListener("showAdvancedSettings", () => {
this.#updateAdvancedSettingsDialog(getUnitsManager().getSelectedUnits());
this.#advancedSettingsDialog.classList.remove("hide");
- })
+ });
this.hide();
}
@@ -354,4 +356,10 @@ export class UnitControlPanel extends Panel {
button.addEventListener("click", callback);
return button;
}
+
+ #onToggleAltitudeTypeSwitch(e: any) {
+ const altitudeType = this.getElement()?.querySelector("#altitude-type-switch")?.getAttribute("data-altitude-type");
+ var newAltitudeType = altitudeType == "asl"? "agl": "asl";
+ this.getElement()?.querySelector("#altitude-type-switch")?.setAttribute("data-altitude-type", newAltitudeType);
+ }
}
\ No newline at end of file
diff --git a/client/views/panels/unitcontrol.ejs b/client/views/panels/unitcontrol.ejs
index fe67082c..3ed41f53 100644
--- a/client/views/panels/unitcontrol.ejs
+++ b/client/views/panels/unitcontrol.ejs
@@ -20,24 +20,23 @@
-
-
-
-
-
-
-