mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added AGL/ASL switch
This commit is contained in:
Pax1601
parent
ec872e181d
commit
9586910f03
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -20,24 +20,23 @@
|
||||
</dl>
|
||||
<input type="range" min="0" max="100" value="0" class="slider">
|
||||
</div>
|
||||
|
||||
<div class="slider-container flight-control-slider" id="altitude-slider">
|
||||
<dl class="ol-data-grid">
|
||||
<dt>Altitude</dt>
|
||||
<dd class="flight-control-value" id="value"></dd>
|
||||
<dt> Altitude
|
||||
</dt>
|
||||
<dd>
|
||||
<label id="altitude-type-switch" class="toggle" data-altitude-type="agl">
|
||||
<div class="toggle-fill"></div>
|
||||
</label>
|
||||
<div class="flight-control-value" id="value"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
<input type="range" min="0" max="100" value="0" class="slider">
|
||||
</div>
|
||||
|
||||
<h5 id="categories-tooltip" class="hide">Multiple categories selected</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <h3>Formation</h3> -->
|
||||
<!-- <div id="formation-buttons-container"> -->
|
||||
<!-- This is where all the formation control buttons will be shown -->
|
||||
<!-- </div> -->
|
||||
|
||||
<div id="roe">
|
||||
<h4>Rules of engagement</h4>
|
||||
<div id="roe-buttons-container" class="ol-group ol-button-box ol-option-button">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user