mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added lock image and tooltip/titles.
This commit is contained in:
PeekabooSteam
parent
4465f4a3bb
commit
f981a661d5
@ -650,22 +650,38 @@ nav.ol-panel> :last-child {
|
||||
width:28px;
|
||||
}
|
||||
|
||||
.ol-navbar-buttons-group > div > button.lock {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.ol-navbar-buttons-group > div.protectable > button.lock {
|
||||
.ol-navbar-buttons-group > .protectable > button.lock {
|
||||
align-items: center;
|
||||
background-color: #990000;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
display:inline-block;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
width:18px;
|
||||
}
|
||||
|
||||
.ol-navbar-buttons-group > div.protectable > button[data-protected].lock {
|
||||
.ol-navbar-buttons-group > .protectable > button[data-protected].lock {
|
||||
background-color: #008800;
|
||||
}
|
||||
|
||||
.ol-navbar-buttons-group > .protectable > button.lock svg {
|
||||
filter:invert(100);
|
||||
height:10px;
|
||||
width:10px;
|
||||
}
|
||||
|
||||
.ol-navbar-buttons-group > .protectable > button:not([data-protected]).lock svg.unlocked,
|
||||
.ol-navbar-buttons-group > .protectable > button[data-protected].lock svg.locked {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ol-navbar-buttons-group > .protectable > button[data-protected].lock svg.unlocked,
|
||||
.ol-navbar-buttons-group > .protectable > button:not([data-protected]).lock svg.locked {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#roe-buttons-container button,
|
||||
#reaction-to-threat-buttons-container button,
|
||||
#emissions-countermeasures-buttons-container button {
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z"/></svg>
|
||||
|
After Width: | Height: | Size: 485 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
|
||||
|
After Width: | Height: | Size: 460 B |
@ -149,39 +149,47 @@ export const visibilityControls: string[] = ["human", "dcs", "aircraft", "helico
|
||||
export const visibilityControlsTypes: string[][] = [["human"], ["dcs"], ["aircraft"], ["helicopter"], ["groundunit-sam", "groundunit-sam-radar", "groundunit-sam-launcher"], ["groundunit-other", "groundunit-ewr"], ["navyunit"], ["airbase"]];
|
||||
export const visibilityControlsTooltips: string[] = ["Toggle human players visibility", "Toggle DCS controlled units visibility", "Toggle aircrafts visibility", "Toggle helicopter visibility", "Toggle SAM units visibility", "Toggle ground units (not SAM) visibility", "Toggle navy units visibility", "Toggle airbases visibility"];
|
||||
export const MAP_MARKER_CONTROLS:MapMarkerControl[] = [{
|
||||
"name":"human",
|
||||
"name":"Human",
|
||||
"image": "visibility/human.svg",
|
||||
"toggles": [ "human" ]
|
||||
"toggles": [ "human" ],
|
||||
"tooltip": "Toggle human players' visibility"
|
||||
}, {
|
||||
"image": "visibility/dcs.svg",
|
||||
"isProtected": true,
|
||||
"name":"dcs",
|
||||
"name":"DCS",
|
||||
"protectable": true,
|
||||
"toggles": [ "dcs" ]
|
||||
"toggles": [ "dcs" ],
|
||||
"tooltip": "Toggle DCS-controlled units' visibility"
|
||||
}, {
|
||||
"image": "visibility/aircraft.svg",
|
||||
"name":"aircraft",
|
||||
"toggles": [ "aircraft" ]
|
||||
"name":"Aircraft",
|
||||
"toggles": [ "aircraft" ],
|
||||
"tooltip": "Toggle aircraft's visibility"
|
||||
}, {
|
||||
"image": "visibility/helicopter.svg",
|
||||
"name":"helicopter",
|
||||
"toggles": [ "helicopter" ]
|
||||
"name":"Helicopter",
|
||||
"toggles": [ "helicopter" ],
|
||||
"tooltip": "Toggle helicopters' visibility"
|
||||
}, {
|
||||
"image": "visibility/groundunit-sam.svg",
|
||||
"name":"groundunit-sam",
|
||||
"toggles": [ "groundunit-sam" ]
|
||||
"name":"Air defence",
|
||||
"toggles": [ "groundunit-sam" ],
|
||||
"tooltip": "Toggle air defence units' visibility"
|
||||
}, {
|
||||
"image": "visibility/groundunit-other.svg",
|
||||
"name":"groundunit-other",
|
||||
"toggles": [ "groundunit-other" ]
|
||||
"name":"Ground units",
|
||||
"toggles": [ "groundunit-other" ],
|
||||
"tooltip": "Toggle ground units' visibility"
|
||||
}, {
|
||||
"image": "visibility/navyunit.svg",
|
||||
"name":"navyunit",
|
||||
"toggles": [ "navyunit" ]
|
||||
"name":"Naval",
|
||||
"toggles": [ "navyunit" ],
|
||||
"tooltip": "Toggle naval units' visibility"
|
||||
}, {
|
||||
"image": "visibility/airbase.svg",
|
||||
"name":"airbase",
|
||||
"toggles": [ "airbase" ]
|
||||
"name":"Airbase",
|
||||
"toggles": [ "airbase" ],
|
||||
"tooltip": "Toggle airbase' visibility"
|
||||
}];
|
||||
|
||||
export const IADSTypes = ["AAA", "MANPADS", "SAM Site", "Radar"];
|
||||
|
||||
@ -43,7 +43,8 @@ export type MapMarkerControl = {
|
||||
"isProtected"?: boolean,
|
||||
"name":string,
|
||||
"protectable"?: boolean,
|
||||
"toggles": string[]
|
||||
"toggles": string[],
|
||||
"tooltip": string
|
||||
}
|
||||
|
||||
export class Map extends L.Map {
|
||||
@ -730,23 +731,32 @@ export class Map extends L.Map {
|
||||
|
||||
#createUnitMarkerControlButtons() {
|
||||
const unitVisibilityControls = <HTMLElement>document.getElementById("unit-visibility-control");
|
||||
const makeTitle = (isProtected:boolean) => {
|
||||
return ( isProtected ) ? "Unit type is protected and will ignore orders" : "Unit is NOT protected and will respond to orders";
|
||||
}
|
||||
this.#mapMarkerControls.forEach( (control:MapMarkerControl) => {
|
||||
const toggles = `["${control.toggles.join('","')}"]`;
|
||||
const div = document.createElement("div");
|
||||
div.className = control.protectable === true ? "protectable" : "";
|
||||
div.innerHTML = `
|
||||
<button data-on-click="toggleMarkerVisibility" data-on-click-params='{"types":${toggles}}'>
|
||||
<button data-on-click="toggleMarkerVisibility" title="${control.tooltip}" data-on-click-params='{"types":${toggles}}'>
|
||||
<img src="/resources/theme/images/buttons/${control.image}" />
|
||||
</button>
|
||||
<button class="lock" ${control.isProtected ? "data-protected" : "" }>x</button>
|
||||
`;
|
||||
unitVisibilityControls.appendChild(div);
|
||||
|
||||
if ( control.protectable ) {
|
||||
div.innerHTML += `
|
||||
<button class="lock" ${control.isProtected ? "data-protected" : ""} title="${makeTitle(control.isProtected || false)}">
|
||||
<img src="/resources/theme/images/buttons/other/lock-solid.svg" class="locked" />
|
||||
<img src="/resources/theme/images/buttons/other/lock-open-solid.svg" class="unlocked" />
|
||||
</button>`;
|
||||
|
||||
const btn = <HTMLButtonElement>div.querySelector("button.lock");
|
||||
btn.addEventListener("click", (ev:MouseEventInit) => {
|
||||
control.isProtected = !control.isProtected;
|
||||
btn.toggleAttribute("data-protected", control.isProtected);
|
||||
btn.title = makeTitle( control.isProtected );
|
||||
document.dispatchEvent(new CustomEvent("toggleMarkerProtection", {
|
||||
detail: {
|
||||
"_element": btn,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user