From f981a661d58004bc116d835bb139e0b34b75dd4d Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Fri, 3 Nov 2023 13:29:09 +0000 Subject: [PATCH] Added lock image and tooltip/titles. --- client/public/stylesheets/style/style.css | 30 ++++++++++---- .../images/buttons/other/lock-open-solid.svg | 1 + .../images/buttons/other/lock-solid.svg | 1 + client/src/constants/constants.ts | 40 +++++++++++-------- client/src/map/map.ts | 16 ++++++-- 5 files changed, 62 insertions(+), 26 deletions(-) create mode 100644 client/public/themes/olympus/images/buttons/other/lock-open-solid.svg create mode 100644 client/public/themes/olympus/images/buttons/other/lock-solid.svg diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css index d1537c93..28247d9c 100644 --- a/client/public/stylesheets/style/style.css +++ b/client/public/stylesheets/style/style.css @@ -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 { diff --git a/client/public/themes/olympus/images/buttons/other/lock-open-solid.svg b/client/public/themes/olympus/images/buttons/other/lock-open-solid.svg new file mode 100644 index 00000000..444c234e --- /dev/null +++ b/client/public/themes/olympus/images/buttons/other/lock-open-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/themes/olympus/images/buttons/other/lock-solid.svg b/client/public/themes/olympus/images/buttons/other/lock-solid.svg new file mode 100644 index 00000000..fe66baea --- /dev/null +++ b/client/public/themes/olympus/images/buttons/other/lock-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/constants/constants.ts b/client/src/constants/constants.ts index 1fc27028..5d2c18ee 100644 --- a/client/src/constants/constants.ts +++ b/client/src/constants/constants.ts @@ -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"]; diff --git a/client/src/map/map.ts b/client/src/map/map.ts index 952e0fe5..dc8f216a 100644 --- a/client/src/map/map.ts +++ b/client/src/map/map.ts @@ -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 = 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 = ` - - `; unitVisibilityControls.appendChild(div); if ( control.protectable ) { + div.innerHTML += ` + `; + const btn = 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,