Skip to content

Commit 9077f60

Browse files
ArturoManzoliArturoManzoli
committed
map: add Cockpit glass menu style to map buttons
Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
1 parent 8e9f202 commit 9077f60

2 files changed

Lines changed: 139 additions & 11 deletions

File tree

‎src/components/widgets/Map.vue‎

Lines changed: 70 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
v-contextmenu="handleContextMenu"
55
class="page-base"
66
:class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
7+
:style="glassMenuCssVars"
78
>
89
<div :id="mapId" ref="map" class="map">
910
<v-menu v-model="downloadMenuOpen" :close-on-content-click="false" location="top end">
1011
<template #activator="{ props: menuProps }">
1112
<v-btn
1213
v-show="showButtons"
14+
:style="interfaceStore.globalGlassMenuStyles"
1315
v-bind="menuProps"
1416
class="absolute right-[209px] m-3 bottom-button bg-slate-50 text-[14px]"
1517
elevation="2"
@@ -31,6 +33,7 @@
3133
<template #activator="{ props: tooltipProps }">
3234
<v-btn
3335
v-if="showButtons"
36+
:style="[interfaceStore.globalGlassMenuStyles, !home ? { color: '#FFFFFF33' } : {}]"
3437
v-bind="tooltipProps"
3538
class="absolute right-[166px] m-3 bottom-button bg-slate-50 text-[14px]"
3639
:class="!home ? 'active-events-on-disabled' : ''"
@@ -50,6 +53,7 @@
5053
<template #activator="{ props: tooltipProps }">
5154
<v-btn
5255
v-if="showButtons"
56+
:style="[interfaceStore.globalGlassMenuStyles, !vehiclePosition ? { color: '#FFFFFF33' } : {}]"
5357
v-bind="tooltipProps"
5458
class="absolute m-3 bottom-button right-[124px] bg-slate-50 text-[14px]"
5559
:class="!vehiclePosition ? 'active-events-on-disabled' : ''"
@@ -69,6 +73,7 @@
6973
<template #activator="{ props: tooltipProps }">
7074
<v-btn
7175
v-if="showButtons"
76+
:style="[interfaceStore.globalGlassMenuStyles, !vehicleStore.isVehicleOnline ? { color: '#FFFFFF33' } : {}]"
7277
v-bind="tooltipProps"
7378
class="absolute m-3 bottom-button right-[82px] bg-slate-50 text-[14px]"
7479
:class="!vehicleStore.isVehicleOnline ? 'active-events-on-disabled' : ''"
@@ -85,6 +90,7 @@
8590
<template #activator="{ props: tooltipProps }">
8691
<v-btn
8792
v-if="showButtons"
93+
:style="[interfaceStore.globalGlassMenuStyles, !vehicleStore.isVehicleOnline ? { color: '#FFFFFF33' } : {}]"
8894
v-bind="tooltipProps"
8995
class="absolute mb-3 ml-1 bottom-button right-[52px] bg-slate-50 text-[14px]"
9096
:class="!vehicleStore.isVehicleOnline ? 'active-events-on-disabled' : ''"
@@ -248,6 +254,14 @@ let osmSaveBtn: HTMLAnchorElement | undefined
248254
let seamarksSaveBtn: HTMLAnchorElement | undefined
249255
const downloadMenuOpen = ref(false)
250256
257+
const glassMenuCssVars = computed(() => ({
258+
'--glass-background': interfaceStore.globalGlassMenuStyles.backgroundColor,
259+
'--glass-filter': interfaceStore.globalGlassMenuStyles.backdropFilter,
260+
'--glass-border': interfaceStore.globalGlassMenuStyles.border,
261+
'--glass-color': interfaceStore.globalGlassMenuStyles.color,
262+
'--glass-box-shadow': interfaceStore.globalGlassMenuStyles.boxShadow,
263+
}))
264+
251265
const saveEsri = (): void => {
252266
esriSaveBtn?.click()
253267
downloadMenuOpen.value = false
@@ -1512,13 +1526,64 @@ watch(
15121526
right: 260px; /* Position to the left of the buttons */
15131527
background: rgba(255, 255, 255, 0.8);
15141528
border-radius: 1px;
1515-
padding: 8px 8px;
1516-
margin-bottom: 12px;
1517-
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
1518-
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1529+
padding: 6px 6px;
1530+
background: var(--glass-background);
1531+
backdrop-filter: var(--glass-filter);
1532+
box-shadow: var(--glass-box-shadow);
1533+
color: var(--glass-color);
1534+
border: var(--glass-border);
1535+
font-weight: bolder;
15191536
}
15201537
1521-
:deep(.leaflet-control-zoom) {
1538+
/* Style the Leaflet zoom control */
1539+
:deep(.leaflet-control-zoom.leaflet-bar) {
15221540
bottom: v-bind('bottomButtonsDisplacement');
1541+
background: var(--glass-background);
1542+
backdrop-filter: var(--glass-filter);
1543+
box-shadow: var(--glass-box-shadow);
1544+
color: var(--glass-color);
1545+
border: var(--glass-border);
1546+
}
1547+
1548+
:deep(.leaflet-control-zoom.leaflet-bar a) {
1549+
background: transparent !important;
1550+
border: none;
1551+
color: var(--glass-color);
1552+
}
1553+
1554+
:deep(.leaflet-control-zoom.leaflet-bar a:hover),
1555+
:deep(.leaflet-control-zoom.leaflet-bar a:focus) {
1556+
background: transparent !important;
1557+
}
1558+
1559+
/* Style the Leaflet layer provider selector */
1560+
:deep(.leaflet-control-layers) {
1561+
background: var(--glass-background) !important;
1562+
backdrop-filter: var(--glass-filter) !important;
1563+
box-shadow: var(--glass-box-shadow) !important;
1564+
color: var(--glass-color) !important;
1565+
border: var(--glass-border) !important;
1566+
border-radius: 4px;
1567+
}
1568+
1569+
:deep(.leaflet-control-layers-expanded) {
1570+
background: var(--glass-background) !important;
1571+
backdrop-filter: var(--glass-filter) !important;
1572+
box-shadow: var(--glass-box-shadow) !important;
1573+
color: var(--glass-color) !important;
1574+
border: var(--glass-border) !important;
1575+
}
1576+
1577+
:deep(.leaflet-control-layers-list) {
1578+
background: transparent !important;
1579+
color: var(--glass-color) !important;
1580+
}
1581+
1582+
:deep(.leaflet-control-layers-selector) {
1583+
accent-color: var(--glass-color) !important;
1584+
}
1585+
1586+
:deep(.leaflet-control-layers label) {
1587+
color: var(--glass-color) !important;
15231588
}
15241589
</style>

‎src/views/MissionPlanningView.vue‎

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="mission-planning">
2+
<div class="mission-planning" :style="glassMenuCssVars">
33
<div id="planningMap" ref="planningMap" class="relative" />
44
<v-tooltip location="top" text="Generate waypoints">
55
<template #activator="{ props }">
@@ -338,6 +338,7 @@
338338
<v-btn
339339
v-bind="{ ...menuProps, ...tooltipProps }"
340340
class="absolute m-3 rounded-sm shadow-sm bottom-12 bg-slate-50 right-[133px] text-[14px]"
341+
:style="interfaceStore.globalGlassMenuStyles"
341342
size="x-small"
342343
icon="mdi-download-multiple"
343344
/>
@@ -355,6 +356,7 @@
355356
<template #activator="{ props: tooltipProps }">
356357
<v-btn
357358
class="absolute m-3 rounded-sm shadow-sm bottom-12 bg-slate-50 right-[88px] text-[14px]"
359+
:style="[interfaceStore.globalGlassMenuStyles, !home ? { color: '#FFFFFF44' } : {}]"
358360
:class="[!home ? 'active-events-on-disabled' : '']"
359361
:color="followerTarget == WhoToFollow.HOME ? 'red' : ''"
360362
icon="mdi-home-search"
@@ -370,6 +372,7 @@
370372
<template #activator="{ props: tooltipProps }">
371373
<v-btn
372374
class="absolute m-3 rounded-sm shadow-sm bottom-12 bg-slate-50 right-[44px] text-[14px]"
375+
:style="[interfaceStore.globalGlassMenuStyles, !vehiclePosition ? { color: '#FFFFFF44' } : {}]"
373376
:class="[!vehiclePosition ? 'active-events-on-disabled' : '']"
374377
:color="followerTarget == WhoToFollow.VEHICLE ? 'red' : ''"
375378
icon="mdi-airplane-marker"
@@ -743,6 +746,14 @@ let measureTextEl: HTMLDivElement | null = null
743746
const surveyAreaMarkers = shallowRef<Record<string, L.Marker>>({})
744747
const liveSurveyAreaMarker = shallowRef<L.Marker | null>(null)
745748
749+
const glassMenuCssVars = computed(() => ({
750+
'--glass-background': interfaceStore.globalGlassMenuStyles.backgroundColor,
751+
'--glass-filter': interfaceStore.globalGlassMenuStyles.backdropFilter,
752+
'--glass-border': interfaceStore.globalGlassMenuStyles.border,
753+
'--glass-color': interfaceStore.globalGlassMenuStyles.color,
754+
'--glass-box-shadow': interfaceStore.globalGlassMenuStyles.boxShadow,
755+
}))
756+
746757
const clearLiveMeasure = (): void => {
747758
destroyMeasureOverlay(planningMap.value || undefined)
748759
}
@@ -3758,12 +3769,64 @@ watch(
37583769
bottom: 54px;
37593770
background: rgba(255, 255, 255, 0.8);
37603771
border-radius: 1px;
3761-
padding: 8px 8px;
3762-
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
3763-
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
3772+
padding: 6px 6px;
3773+
background: var(--glass-background);
3774+
backdrop-filter: var(--glass-filter);
3775+
box-shadow: var(--glass-box-shadow);
3776+
color: var(--glass-color);
3777+
border: var(--glass-border);
3778+
font-weight: bolder;
3779+
}
3780+
3781+
/* Style the Leaflet zoom control */
3782+
:deep(.leaflet-control-zoom.leaflet-bar) {
3783+
bottom: 33px;
3784+
background: var(--glass-background);
3785+
backdrop-filter: var(--glass-filter);
3786+
box-shadow: var(--glass-box-shadow);
3787+
color: var(--glass-color);
3788+
border: var(--glass-border);
3789+
}
3790+
3791+
:deep(.leaflet-control-zoom.leaflet-bar a) {
3792+
background: transparent !important;
3793+
border: none;
3794+
color: var(--glass-color);
3795+
}
3796+
3797+
:deep(.leaflet-control-zoom.leaflet-bar a:hover),
3798+
:deep(.leaflet-control-zoom.leaflet-bar a:focus) {
3799+
background: transparent !important;
3800+
}
3801+
3802+
/* Style the Leaflet layer provider selector */
3803+
:deep(.leaflet-control-layers) {
3804+
background: var(--glass-background) !important;
3805+
backdrop-filter: var(--glass-filter) !important;
3806+
box-shadow: var(--glass-box-shadow) !important;
3807+
color: var(--glass-color) !important;
3808+
border: var(--glass-border) !important;
3809+
border-radius: 4px;
3810+
}
3811+
3812+
:deep(.leaflet-control-layers-expanded) {
3813+
background: var(--glass-background) !important;
3814+
backdrop-filter: var(--glass-filter) !important;
3815+
box-shadow: var(--glass-box-shadow) !important;
3816+
color: var(--glass-color) !important;
3817+
border: var(--glass-border) !important;
3818+
}
3819+
3820+
:deep(.leaflet-control-layers-list) {
3821+
background: transparent !important;
3822+
color: var(--glass-color) !important;
3823+
}
3824+
3825+
:deep(.leaflet-control-layers-selector) {
3826+
accent-color: var(--glass-color) !important;
37643827
}
37653828
3766-
:deep(.leaflet-control-zoom) {
3767-
bottom: 30px;
3829+
:deep(.leaflet-control-layers label) {
3830+
color: var(--glass-color) !important;
37683831
}
37693832
</style>

0 commit comments

Comments
 (0)