From 0ee3deedd84afad3ee1ed634ecd4aab14557ab96 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Mon, 13 Oct 2025 13:15:54 +0200 Subject: [PATCH] Fix family members tooltip and popup styles --- app/assets/stylesheets/leaflet_theme.css | 25 +++++++++++ .../controllers/family_members_controller.js | 42 ++++++++----------- app/views/map/index.html.erb | 1 - 3 files changed, 43 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/leaflet_theme.css b/app/assets/stylesheets/leaflet_theme.css index 7c7c1bea..aee5c6b7 100644 --- a/app/assets/stylesheets/leaflet_theme.css +++ b/app/assets/stylesheets/leaflet_theme.css @@ -138,4 +138,29 @@ background: var(--leaflet-scale-bg) !important; border-radius: 3px !important; padding: 2px !important; +} + +/* Family member tooltip - dark styled like the visit popup */ +.leaflet-tooltip.family-member-tooltip { + background-color: #374151 !important; + color: #ffffff !important; + border: 1px solid #4b5563 !important; + border-radius: 4px !important; + padding: 4px 8px !important; + font-size: 11px !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; +} + +.leaflet-tooltip.family-member-tooltip::before { + border-top-color: #374151 !important; +} + +/* Family member popup - just override colors, keep default layout */ +.leaflet-popup-content-wrapper:has(.family-member-popup) { + background-color: #1f2937 !important; + color: #f9fafb !important; +} + +.leaflet-popup-content-wrapper:has(.family-member-popup) + .leaflet-popup-tip { + background-color: #1f2937 !important; } \ No newline at end of file diff --git a/app/javascript/controllers/family_members_controller.js b/app/javascript/controllers/family_members_controller.js index a2d0759c..989509f4 100644 --- a/app/javascript/controllers/family_members_controller.js +++ b/app/javascript/controllers/family_members_controller.js @@ -6,7 +6,6 @@ export default class extends Controller { static targets = []; static values = { - familyMemberLocations: Array, features: Object, userTheme: String } @@ -53,16 +52,11 @@ export default class extends Controller { // Initialize family member markers layer this.familyMarkersLayer = L.layerGroup(); - this.createFamilyMarkers(); + this.familyMemberLocations = []; // Initialize as empty, will be fetched via API - // Add to layer control if available + // Add to layer control immediately (layer will be empty until data is fetched) this.addToLayerControl(); - // Add markers to map if layer control integration doesn't work initially - if (this.familyMarkersLayer.getLayers().length > 0) { - this.familyMarkersLayer.addTo(this.map); - } - // Listen for family data updates this.setupEventListeners(); } @@ -75,14 +69,14 @@ export default class extends Controller { // Only proceed if family feature is enabled and we have family member locations if (!this.featuresValue.family || - !this.familyMemberLocationsValue || - this.familyMemberLocationsValue.length === 0) { + !this.familyMemberLocations || + this.familyMemberLocations.length === 0) { return; } const bounds = []; - this.familyMemberLocationsValue.forEach((location) => { + this.familyMemberLocations.forEach((location) => { if (!location || !location.latitude || !location.longitude) { return; } @@ -105,7 +99,7 @@ export default class extends Controller { // Create small tooltip that shows automatically const tooltipContent = this.createTooltipContent(lastSeen); - familyMarker.bindTooltip(tooltipContent, { + const tooltip = familyMarker.bindTooltip(tooltipContent, { permanent: true, direction: 'top', offset: [0, -12], @@ -116,6 +110,14 @@ export default class extends Controller { const popupContent = this.createPopupContent(location, lastSeen); familyMarker.bindPopup(popupContent); + // Hide tooltip when popup opens, show when popup closes + familyMarker.on('popupopen', () => { + familyMarker.closeTooltip(); + }); + familyMarker.on('popupclose', () => { + familyMarker.openTooltip(); + }); + this.familyMarkersLayer.addLayer(familyMarker); // Add to bounds array for auto-zoom @@ -127,15 +129,7 @@ export default class extends Controller { } createTooltipContent(lastSeen) { - const isDark = this.userThemeValue === 'dark'; - const bgColor = isDark ? 'rgba(31, 41, 55, 0.95)' : 'rgba(255, 255, 255, 0.95)'; - const textColor = isDark ? '#f9fafb' : '#111827'; - - return ` -
- Last updated: ${lastSeen} -
- `; + return `Last updated: ${lastSeen}`; } createPopupContent(location, lastSeen) { @@ -187,7 +181,7 @@ export default class extends Controller { setupEventListeners() { // Listen for family data updates (for real-time updates in the future) document.addEventListener('family:locations:updated', (event) => { - this.familyMemberLocationsValue = event.detail.locations; + this.familyMemberLocations = event.detail.locations; this.createFamilyMarkers(); }); @@ -271,7 +265,7 @@ export default class extends Controller { // Method to manually update family member locations (for API calls) updateFamilyLocations(locations) { - this.familyMemberLocationsValue = locations; + this.familyMemberLocations = locations; this.createFamilyMarkers(); // Dispatch event for other controllers that might be interested @@ -367,6 +361,6 @@ export default class extends Controller { // Get family marker count getFamilyMemberCount() { - return this.familyMemberLocationsValue ? this.familyMemberLocationsValue.length : 0; + return this.familyMemberLocations ? this.familyMemberLocations.length : 0; } } \ No newline at end of file diff --git a/app/views/map/index.html.erb b/app/views/map/index.html.erb index 3f7e3046..3bd5fd5f 100644 --- a/app/views/map/index.html.erb +++ b/app/views/map/index.html.erb @@ -75,7 +75,6 @@ data-points_number="<%= @points_number %>" data-timezone="<%= Rails.configuration.time_zone %>" data-features='<%= @features.to_json.html_safe %>' - data-family-members-family-member-locations-value='<%= @family_member_locations.to_json.html_safe %>' data-family-members-features-value='<%= @features.to_json.html_safe %>' data-family-members-user-theme-value="<%= current_user&.theme || 'dark' %>">