Merge pull request #920 from SlideRuleEarth/carlos-dev4

Carlos dev4

Author: cugarteblair

web-client/src/components/SrAnalysisMap.vue

@@ -70,7 +70,7 @@ const { addPolarOverlay, removePolarOverlay } = usePolarOverlay({
   zIndex: 100
 })
 
-const template = 'Lat:{y}\u00B0, Long:{x}\u00B0'
+const template = '{y}\u00B0, {x}\u00B0'
 const stringifyFunc = (coordinate: Coordinate) => {
   const projName = computedProjName.value
   let newProj = getProjection(projName)
@@ -1206,13 +1206,13 @@ function handleSaveTooltip() {
 :deep(.sr-legend-control) {
   background: rgba(255, 255, 255, 0.25);
   bottom: 0.25rem;
-  right: 3.5rem;
+  right: 10rem;
 }
 
 :deep(.sr-col-menu-sel-control) {
   top: auto;
   bottom: 0.25rem;
-  right: 15.5rem;
+  right: 3.5rem;
   border-radius: var(--p-border-radius);
 }
 
@@ -1279,48 +1279,48 @@ function handleSaveTooltip() {
 }
 
 :deep(.ol-zoom) {
-  top: 0.5rem;
-  right: 0.75rem; /* right align -- override the default */
+  top: 2rem;
+  right: 0.5rem; /* right align -- match layer switcher and attribution */
   left: auto; /* Override the default positioning */
-  background-color: black;
+  background: color-mix(in srgb, var(--p-primary-color) 20%, transparent);
+  border: 1px solid var(--p-primary-color);
   border-radius: var(--p-border-radius);
   margin: auto;
   font-size: 0.75rem;
   z-index: 99999; /* Ensure it stays on top */
 }
 
+:deep(.ol-zoom:hover) {
+  background: color-mix(in srgb, var(--p-primary-color) 40%, transparent);
+}
+
 :deep(.ol-zoom button) {
   width: 1.5rem; /* Smaller button size */
   height: 1.5rem;
+  color: black;
+  background: transparent;
 }
 
 :deep(.ol-zoom .ol-zoom-in),
 :deep(.ol-zoom .ol-zoom-out) {
   position: relative;
   margin: 1px;
   border-radius: var(--p-border-radius);
-  background-color: black;
-  color: var(--ol-font-color);
+  background: rgba(255, 255, 255, 0.3);
+  color: black;
   font-size: 1rem; /* Reduce text size in buttons */
   font-weight: normal;
 }
 
-:deep(.ol-zoom .ol-zoom-out):active {
-  background-color: rgba(60, 60, 60, 1); /* Change color on hover */
-  transform: translateY(2px); /* Slight downward movement to simulate press */
-}
-
-:deep(.ol-zoom .ol-zoom-out):hover {
-  background-color: rgba(60, 60, 60, 1); /* Change color on hover */
-}
-
+:deep(.ol-zoom .ol-zoom-out):active,
 :deep(.ol-zoom .ol-zoom-in):active {
-  background-color: rgba(60, 60, 60, 1); /* Change color on hover */
-  transform: translateY(2px); /* Slight downward movement to simulate press */
+  background: color-mix(in srgb, var(--p-primary-color) 50%, transparent);
+  transform: translateY(1px); /* Slight downward movement to simulate press */
 }
 
+:deep(.ol-zoom .ol-zoom-out):hover,
 :deep(.ol-zoom .ol-zoom-in):hover {
-  background-color: rgba(60, 60, 60, 1); /* Change color on hover */
+  background: rgba(255, 255, 255, 0.5);
 }
 
 :deep(.ol-zoom .ol-zoom-out):before {
@@ -1329,32 +1329,31 @@ function handleSaveTooltip() {
   top: 0px;
   left: 25%; /* Adjust this value to control where the border starts */
   right: 25%; /* Adjust this value to control where the border ends */
-  border-top: 1px dashed rgb(200, 200, 200);
+  border-top: 1px dashed var(--p-primary-color);
 }
 
 :deep(.ol-control.sr-baselayer-control) {
   top: 0.25rem;
   bottom: auto;
-  right: 3rem;
+  right: 0.5rem;
   left: auto;
   border-radius: var(--p-border-radius);
   color: white;
   max-width: 30rem;
-  background: rgba(255, 255, 255, 0.25);
+  background: transparent;
 }
 
 :deep(.ol-control.sr-graticule-control) {
   top: auto;
-  bottom: 2.125rem;
-  right: auto;
-  left: 0rem;
-  margin: 0.125rem;
+  bottom: 0.25rem;
+  right: 23rem;
+  left: auto;
+  margin: 0;
   border-radius: var(--p-border-radius);
-  background: rgba(255, 255, 255, 0.8);
 }
 
 :deep(.ol-scale-line) {
-  bottom: 0.5rem;
+  bottom: 0.25rem;
   left: 0.5rem;
   background: rgba(255, 255, 255, 0.25);
   border-radius: var(--p-border-radius);
@@ -1367,24 +1366,35 @@ function handleSaveTooltip() {
 
 /* Layer Switcher Control */
 :deep(.ol-control.ol-layerswitcher) {
-  top: 5rem;
+  top: 6.5rem;
   bottom: auto;
   left: auto;
   right: 0.5rem;
-  background-color: transparent;
+  background: color-mix(in srgb, var(--p-primary-color) 20%, transparent);
+  border: 1px solid var(--p-primary-color);
   border-radius: var(--p-border-radius);
   z-index: 10000; /* Above Deck.gl overlay */
 }
 
+:deep(.ol-control.ol-layerswitcher:hover) {
+  background: color-mix(in srgb, var(--p-primary-color) 40%, transparent);
+}
+
 :deep(.ol-control.ol-layerswitcher > button) {
   width: 1.5rem;
   height: 1.5rem;
   padding: 0;
-  background: transparent;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: var(--p-border-radius);
   display: grid;
   place-items: center;
   line-height: 1;
   font-size: 1rem;
+  color: black;
+}
+
+:deep(.ol-control.ol-layerswitcher > button:hover) {
+  background: rgba(255, 255, 255, 0.5);
 }
 
 :deep(.ol-control.ol-layerswitcher .panel-container) {

web-client/src/components/SrBaseLayerControl.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { Control } from 'ol/control'
 import { getBaseLayersForView } from '@/composables/SrViews'
 import { isGoogleLayerAvailable } from '@/composables/SrLayers'
 import { useMapStore } from '@/stores/mapStore'
-import SrMenu from './SrMenu.vue'
+import Select from 'primevue/select'
 import { useToast } from 'primevue/usetoast'
 import { createLogger } from '@/utils/logger'
 
@@ -14,6 +14,7 @@ const mapStore = useMapStore()
 const toast = useToast()
 const baseLayerControlElement = ref<HTMLElement | null>(null)
 const previousBaseLayer = ref<string>(mapStore.selectedBaseLayer)
+const selectedBaseLayer = ref(mapStore.selectedBaseLayer)
 
 const emit = defineEmits<{
   (_e: 'baselayer-control-created', _control: Control): void
@@ -22,12 +23,15 @@ const emit = defineEmits<{
 
 let customControl: Control | null = null
 
+const baseLayerOptions = computed(() => getBaseLayersForView(mapStore.selectedView).value)
+
 onMounted(() => {
   if (baseLayerControlElement.value) {
     customControl = new Control({ element: baseLayerControlElement.value })
     emit('baselayer-control-created', customControl)
   }
   previousBaseLayer.value = mapStore.selectedBaseLayer
+  selectedBaseLayer.value = mapStore.selectedBaseLayer
 })
 
 onUnmounted(() => {
@@ -36,11 +40,10 @@ onUnmounted(() => {
   }
 })
 
-function updateBaseLayer(_event: Event) {
-  const selectedLayer = mapStore.selectedBaseLayer
-
+// Watch for local selection changes
+watch(selectedBaseLayer, (newLayer) => {
   // Check if user selected Google without a valid API key
-  if (selectedLayer === 'Google' && !isGoogleLayerAvailable()) {
+  if (newLayer === 'Google' && !isGoogleLayerAvailable()) {
     logger.warn('Google base layer selected but no API key configured')
 
     // Show toast prompting user to add API key
@@ -53,43 +56,78 @@ function updateBaseLayer(_event: Event) {
     })
 
     // Revert to previous base layer
-    mapStore.setSelectedBaseLayer(previousBaseLayer.value)
+    selectedBaseLayer.value = previousBaseLayer.value
     return
   }
 
-  // Update previous layer for next time
-  previousBaseLayer.value = selectedLayer
+  // Update store and previous layer
+  mapStore.setSelectedBaseLayer(newLayer)
+  previousBaseLayer.value = newLayer
 
-  emit('update-baselayer', selectedLayer)
-  logger.debug('updateBaseLayer', { event: _event, selectedBaseLayer: selectedLayer })
-}
+  emit('update-baselayer', newLayer)
+  logger.debug('updateBaseLayer', { selectedBaseLayer: newLayer })
+})
+
+// Watch for external changes to the store
+watch(
+  () => mapStore.selectedBaseLayer,
+  (newLayer) => {
+    if (newLayer !== selectedBaseLayer.value) {
+      selectedBaseLayer.value = newLayer
+    }
+  }
+)
 </script>
 
 <template>
   <div ref="baseLayerControlElement" class="sr-baselayer-control ol-unselectable ol-control">
-    <SrMenu
-      v-model="mapStore.selectedBaseLayer"
-      @change="updateBaseLayer"
-      :menuOptions="getBaseLayersForView(mapStore.selectedView).value"
-      :getSelectedMenuItem="mapStore.getSelectedBaseLayer"
-      :setSelectedMenuItem="mapStore.setSelectedBaseLayer"
-      tooltipText="Base Map Layer"
+    <Select
+      v-model="selectedBaseLayer"
+      :options="baseLayerOptions"
+      v-tooltip.top="'Base Map Layer'"
+      class="sr-baselayer-select"
+      size="small"
     />
   </div>
 </template>
 
 <style scoped>
-.ol-control.sr-baselayer-control .select-baseLayer select {
-  color: white;
-  background-color: black;
-  border-radius: var(--p-border-radius);
+.sr-baselayer-control {
+  background-color: transparent;
+}
+
+.sr-baselayer-select {
+  min-width: 8rem;
+}
+
+:deep(.p-select) {
+  background: color-mix(in srgb, var(--p-primary-color) 20%, transparent);
+  border: 1px solid var(--p-primary-color);
+  padding: 0 0.25rem;
+  min-height: 0;
+  height: 1.4rem;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.p-select:hover) {
+  background: color-mix(in srgb, var(--p-primary-color) 40%, transparent);
+}
+
+:deep(.p-select-label) {
+  color: black;
+  font-weight: 500;
+  font-size: 0.7rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
 }
 
-.sr-baselayer-control .sr-baselayer-button-box {
-  display: flex; /* Aligns children (input and icon) in a row */
-  flex-direction: row; /* Stack children horizontally */
-  align-items: center; /* Centers children vertically */
-  justify-content: center; /* Centers children horizontally */
-  margin: 0px;
+:deep(.p-select-dropdown) {
+  color: black;
+  width: 1.25rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
 }
 </style>