mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Commiting from the correct directory.
This commit is contained in:
PeekabooSteam
parent
8ca06a32df
commit
a4a0ee7ba2
@ -274,27 +274,25 @@ nav.ol-panel > :last-child {
|
||||
border-radius: var( --border-radius-sm );
|
||||
}
|
||||
|
||||
.ol-panel .ol-group-checkbox {
|
||||
.ol-panel .ol-group-button-toggle {
|
||||
align-items: center;
|
||||
column-gap: 20px;
|
||||
column-gap: 15px;
|
||||
display:flex;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group-checkbox .ol-checkbox {
|
||||
.ol-panel .ol-group-button-toggle button {
|
||||
align-items: center;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
background-image: url( "/themes/olympus/images/check_square.svg");
|
||||
background-position: 5px 50%;
|
||||
background-repeat: no-repeat;
|
||||
border:0;
|
||||
text-indent: 15px;
|
||||
}
|
||||
|
||||
|
||||
.ol-panel .ol-group-checkbox input,
|
||||
.ol-panel .ol-group-checkbox .ol-checkbox label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.highlight-primary {
|
||||
@ -315,6 +313,24 @@ nav.ol-panel > :last-child {
|
||||
color: var(--secondary-gunmetal-grey)
|
||||
}
|
||||
|
||||
|
||||
.accent-bluefor {
|
||||
color: var(--primary-blue);
|
||||
font-weight: var( --font-weight-bolder );
|
||||
}
|
||||
|
||||
.accent-redfor {
|
||||
color: var(--primary-red);
|
||||
font-weight: var( --font-weight-bolder );
|
||||
}
|
||||
|
||||
.accent-neutral {
|
||||
color: var( --primary-grey );
|
||||
font-weight: var( --font-weight-bolder );
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
@ -427,52 +443,62 @@ nav.ol-panel > :last-child {
|
||||
}
|
||||
|
||||
|
||||
#visibility-control {
|
||||
|
||||
|
||||
|
||||
#unit-visibility-control {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#visibility-control button {
|
||||
#unit-visibility-control button {
|
||||
border:none;
|
||||
height:32px;
|
||||
width:32px;
|
||||
}
|
||||
|
||||
#visibility-control-aircraft {
|
||||
#unit-visibility-control-aircraft {
|
||||
background-image: var( --visibility-control-aircraft-visible-url );
|
||||
}
|
||||
|
||||
body[data-hide-aircraft] #visibility-control-aircraft {
|
||||
body[data-hide-aircraft] #unit-visibility-control-aircraft {
|
||||
background-image: var( --visibility-control-aircraft-hidden-url );
|
||||
}
|
||||
|
||||
#visibility-control-ground {
|
||||
#unit-visibility-control-ground {
|
||||
background-image: var( --visibility-control-ground-visible-url );
|
||||
}
|
||||
|
||||
body[data-hide-ground] #visibility-control-ground {
|
||||
body[data-hide-ground] #unit-visibility-control-ground {
|
||||
background-image: var( --visibility-control-ground-hidden-url );
|
||||
}
|
||||
|
||||
#visibility-control-sam {
|
||||
#unit-visibility-control-sam {
|
||||
background-image: var( --visibility-control-sam-visible-url );
|
||||
}
|
||||
|
||||
body[data-hide-sam] #visibility-control-sam {
|
||||
body[data-hide-sam] #unit-visibility-control-sam {
|
||||
background-image: var( --visibility-control-sam-hidden-url );
|
||||
}
|
||||
|
||||
#visibility-control-threat {
|
||||
#unit-visibility-control-threat {
|
||||
background-image: var( --visibility-control-threat-visible-url );
|
||||
}
|
||||
|
||||
body[data-hide-threat] #visibility-control-threat {
|
||||
body[data-hide-threat] #unit-visibility-control-threat {
|
||||
background-image: var( --visibility-control-threat-hidden-url );
|
||||
}
|
||||
|
||||
#visibility-control-naval {
|
||||
#unit-visibility-control-naval {
|
||||
background-image: var( --visibility-control-naval-visible-url );
|
||||
}
|
||||
|
||||
body[data-hide-naval] #visibility-control-naval {
|
||||
body[data-hide-naval] #unit-visibility-control-naval {
|
||||
background-image: var( --visibility-control-naval-hidden-url );
|
||||
}
|
||||
|
||||
|
||||
[data-hide-blue] #coalition-visibility-control #coalition-visibility-control-blue,
|
||||
[data-hide-red] #coalition-visibility-control #coalition-visibility-control-red,
|
||||
[data-hide-neutral] #coalition-visibility-control #coalition-visibility-control-neutral {
|
||||
background-image:none;
|
||||
}
|
||||
@ -21,6 +21,18 @@ div.unit {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
[data-hide-aircraft] div.unit-air,
|
||||
[data-hide-ground] div.unit-ground,
|
||||
[data-hide-sam] div.unit-sam,
|
||||
[data-hide-threat] div.unit-threat,
|
||||
[data-hide-naval] div.unit-naval,
|
||||
[data-hide-blue] div.unit[data-coalition="blue"],
|
||||
[data-hide-red] div.unit[data-coalition="red"],
|
||||
[data-hide-neutral] div.unit[data-coalition="neutral"] {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
div.unit .unit-selected-spotlight {
|
||||
background-color: var( --unit-spotlight-fill );
|
||||
border-radius: 50%;
|
||||
@ -94,25 +106,6 @@ div.unit .unit-marker {
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
[data-hide-aircraft] div.unit-air {
|
||||
display:none;
|
||||
}
|
||||
|
||||
[data-hide-ground] div.unit-ground {
|
||||
display:none;
|
||||
}
|
||||
|
||||
[data-hide-sam] div.unit-sam {
|
||||
display:none;
|
||||
}
|
||||
|
||||
[data-hide-threat] div.unit-threat {
|
||||
display:none;
|
||||
}
|
||||
|
||||
[data-hide-naval] div.unit-naval {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
/* Air */
|
||||
@ -184,6 +177,44 @@ div.unit-sam[data-coalition="red"] .unit-marker {
|
||||
}
|
||||
|
||||
|
||||
/* Naval */
|
||||
|
||||
div.unit-naval .unit-marker {
|
||||
background-image: var( --unit-naval-marker-neutral-url );
|
||||
height: var( --unit-naval-marker-height );
|
||||
width: var( --unit-naval-marker-width );
|
||||
}
|
||||
|
||||
|
||||
div.unit-naval[data-coalition="blue"] .unit-marker {
|
||||
background-image: var( --unit-naval-marker-blue-url );
|
||||
}
|
||||
|
||||
|
||||
div.unit-naval[data-coalition="red"] .unit-marker {
|
||||
background-image: var( --unit-naval-marker-red-url );
|
||||
}
|
||||
|
||||
|
||||
/* Building */
|
||||
|
||||
div.unit-building .unit-marker {
|
||||
background-image: var( --unit-building-marker-neutral-url );
|
||||
height: var( --unit-building-marker-height );
|
||||
width: var( --unit-building-marker-width );
|
||||
}
|
||||
|
||||
|
||||
div.unit-building[data-coalition="blue"] .unit-marker {
|
||||
background-image: var( --unit-building-marker-blue-url );
|
||||
}
|
||||
|
||||
|
||||
div.unit-building[data-coalition="red"] .unit-marker {
|
||||
background-image: var( --unit-building-marker-red-url );
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.unit .unit-short-label {
|
||||
font-size: var(--unit-font-size);
|
||||
@ -196,6 +227,10 @@ div.unit-sam .unit-short-label {
|
||||
translate:0 50%;
|
||||
}
|
||||
|
||||
div.unit-naval .unit-short-label {
|
||||
translate:0 -50%;
|
||||
}
|
||||
|
||||
|
||||
div.unit .unit-fuel {
|
||||
background:white;
|
||||
|
||||
@ -144,4 +144,22 @@
|
||||
--unit-sam-marker-neutral-url: url( "/themes/olympus/images/icon_sam_neutral.svg" );
|
||||
--unit-sam-marker-red-url: url( "/themes/olympus/images/icon_sam_red.svg" );
|
||||
|
||||
|
||||
/*** Naval ***/
|
||||
--unit-naval-marker-height: 38px;
|
||||
--unit-naval-marker-width: 50px;
|
||||
|
||||
--unit-naval-marker-blue-url: url( "/themes/olympus/images/icon_naval_blue.svg" );
|
||||
--unit-naval-marker-neutral-url: url( "/themes/olympus/images/icon_naval_neutral.svg" );
|
||||
--unit-naval-marker-red-url: url( "/themes/olympus/images/icon_naval_red.svg" );
|
||||
|
||||
|
||||
/*** Building ***/
|
||||
--unit-building-marker-height: 24px;
|
||||
--unit-building-marker-width: 43px;
|
||||
|
||||
--unit-building-marker-blue-url: url( "/themes/olympus/images/icon_building_blue.svg" );
|
||||
--unit-building-marker-neutral-url: url( "/themes/olympus/images/icon_building_neutral.svg" );
|
||||
--unit-building-marker-red-url: url( "/themes/olympus/images/icon_building_red.svg" );
|
||||
|
||||
}
|
||||
@ -68,10 +68,12 @@ function setup() {
|
||||
if ( target.classList.contains( "olympus-dialog-close" ) ) {
|
||||
target.closest( "div.olympus-dialog" )?.classList.add( "hide" );
|
||||
}
|
||||
|
||||
if ( target.dataset.hasOwnProperty( "onClick" ) ) {
|
||||
const eventName:string = target.dataset.onClick || "";
|
||||
const params:string = target.dataset.onClickParams || "{}";
|
||||
|
||||
const triggerElement = target.closest( "[data-on-click]" );
|
||||
|
||||
if ( triggerElement instanceof HTMLElement ) {
|
||||
const eventName:string = triggerElement.dataset.onClick || "";
|
||||
const params:string = triggerElement.dataset.onClickParams || "{}";
|
||||
|
||||
if ( eventName ) {
|
||||
document.dispatchEvent( new CustomEvent( eventName, {
|
||||
@ -98,10 +100,12 @@ function setup() {
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener( "toggleVisibility", ( ev:CustomEventInit ) => {
|
||||
|
||||
document.body.toggleAttribute( "data-hide-" + ev.detail.unitType )
|
||||
document.addEventListener( "toggleCoalitionVisibility", ( ev:CustomEventInit ) => {
|
||||
document.body.toggleAttribute( "data-hide-" + ev.detail.coalition );
|
||||
});
|
||||
|
||||
document.addEventListener( "toggleUnitVisibility", ( ev:CustomEventInit ) => {
|
||||
document.body.toggleAttribute( "data-hide-" + ev.detail.unitType );
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -72,35 +72,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="visibility-control" class="ol-group">
|
||||
<button id="visibility-control-aircraft" title="Toggle aircraft' visibility" data-on-click="toggleVisibility" data-on-click-params='{ "unitType": "aircraft" }'></button>
|
||||
<button id="visibility-control-ground" title="Toggle ground units' visibility" data-on-click="toggleVisibility" data-on-click-params='{ "unitType": "ground" }'></button>
|
||||
<button id="visibility-control-sam" title="Toggle SAMs' visibility" data-on-click="toggleVisibility" data-on-click-params='{ "unitType": "sam" }'></button>
|
||||
<button id="visibility-control-threat" title="Toggle threat rings' visibility" data-on-click="toggleVisibility" data-on-click-params='{ "unitType": "threat" }'></button>
|
||||
<button id="visibility-control-naval" title="Toggle naval visibility" data-on-click="toggleVisibility" data-on-click-params='{ "unitType": "naval" }'></button>
|
||||
<div id="unit-visibility-control" class="ol-group">
|
||||
<button id="unit-visibility-control-aircraft" title="Toggle aircraft' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "aircraft" }'></button>
|
||||
<button id="unit-visibility-control-ground" title="Toggle ground units' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "ground" }'></button>
|
||||
<button id="unit-visibility-control-sam" title="Toggle SAMs' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "sam" }'></button>
|
||||
<button id="unit-visibility-control-threat" title="Toggle threat rings' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "threat" }'></button>
|
||||
<button id="unit-visibility-control-naval" title="Toggle naval visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "naval" }'></button>
|
||||
</div>
|
||||
|
||||
<div class="ol-group ol-group-checkbox">
|
||||
<div id="coalition-visibility-control" class="ol-group ol-group-button-toggle">
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<div class="ol-checkbox-input">
|
||||
<input id="checkbox-1" type="checkbox" />
|
||||
</div>
|
||||
<label for="checkbox-1">My label</label>
|
||||
<div>
|
||||
<button id="coalition-visibility-control-blue" data-on-click="toggleCoalitionVisibility" data-on-click-params='{ "coalition": "blue" }'>View <span class="accent-bluefor">BLUEFOR</span></button>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<div class="ol-checkbox-input">
|
||||
<input id="checkbox-2" type="checkbox" />
|
||||
</div>
|
||||
<label for="checkbox-2">My label</label>
|
||||
<div>
|
||||
<button id="coalition-visibility-control-red" data-on-click="toggleCoalitionVisibility" data-on-click-params='{ "coalition": "red" }'>View <span class="accent-redfor">REDFOR</span></button>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<div class="ol-checkbox-input">
|
||||
<input id="checkbox-3" type="checkbox" />
|
||||
</div>
|
||||
<label for="checkbox-3">My label</label>
|
||||
<div>
|
||||
<button id="coalition-visibility-control-neutral" data-on-click="toggleCoalitionVisibility" data-on-click-params='{ "coalition": "neutral" }'>View <span class="accent-neutral">NEUTRAL</span></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
@ -250,6 +250,96 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Naval</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral</div>
|
||||
|
||||
<div class="unit unit-naval" data-coalition="">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">Z</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Blue</div>
|
||||
|
||||
<div class="unit unit-naval" data-coalition="blue">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">Y</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Red</div>
|
||||
|
||||
<div class="unit unit-naval" data-coalition="red">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">X</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Buildings</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral</div>
|
||||
|
||||
<div class="unit unit-building" data-coalition="">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">J</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Blue</div>
|
||||
|
||||
<div class="unit unit-building" data-coalition="blue">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">K</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Red</div>
|
||||
|
||||
<div class="unit unit-building" data-coalition="red">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">L</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -1631,13 +1721,17 @@
|
||||
|
||||
|
||||
document.querySelectorAll( ".ol-select" ).forEach( select => {
|
||||
|
||||
select.addEventListener( "click", ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
select.classList.toggle( "is-open" );
|
||||
});
|
||||
|
||||
select.addEventListener( "mouseleave", ev => {
|
||||
select.classList.remove( "is-open" );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user