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 = `
-