From 39307e1bb379a984886e12bee6c3c0ccbae56f29 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Mon, 1 Dec 2025 20:30:09 +0100 Subject: [PATCH] Make popups respect dark theme --- CHANGELOG.md | 1 + .../maps_v2/components/popup_factory.js | 49 +++++++++++-------- .../maps_v2/components/visit_popup.js | 25 ++++++---- app/javascript/maps_v2/layers/photos_layer.js | 21 +++++--- ..._id_reverse_geocoded_at_index_to_points.rb | 12 +++++ db/schema.rb | 3 +- 6 files changed, 72 insertions(+), 39 deletions(-) create mode 100644 db/migrate/20251201192510_add_user_id_reverse_geocoded_at_index_to_points.rb diff --git a/CHANGELOG.md b/CHANGELOG.md index 91cf497f..10364b74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - Heatmap and Fog of War now are moving correctly during map interactions. #1798 - Polyline crossing international date line now are rendered correctly. #1162 - Place popup tags parsing (MapLibre GL JS compatibility) +- Stats calculation should be faster now. ## Changed diff --git a/app/javascript/maps_v2/components/popup_factory.js b/app/javascript/maps_v2/components/popup_factory.js index a29ad057..4a6e9a47 100644 --- a/app/javascript/maps_v2/components/popup_factory.js +++ b/app/javascript/maps_v2/components/popup_factory.js @@ -1,4 +1,5 @@ import { formatTimestamp } from '../utils/geojson_transformers' +import { getCurrentTheme, getThemeColors } from '../utils/popup_theme' /** * Factory for creating map popups @@ -12,38 +13,42 @@ export class PopupFactory { static createPointPopup(properties) { const { id, timestamp, altitude, battery, accuracy, velocity } = properties + // Get theme colors + const theme = getCurrentTheme() + const colors = getThemeColors(theme) + return ` -
-
+
+
Point #${id}
- Time: - ${formatTimestamp(timestamp)} + Time: + ${formatTimestamp(timestamp)}
${altitude ? `
- Altitude: - ${Math.round(altitude)}m + Altitude: + ${Math.round(altitude)}m
` : ''} ${battery ? `
- Battery: - ${battery}% + Battery: + ${battery}%
` : ''} ${accuracy ? `
- Accuracy: - ${Math.round(accuracy)}m + Accuracy: + ${Math.round(accuracy)}m
` : ''} ${velocity ? `
- Speed: - ${Math.round(velocity * 3.6)} km/h + Speed: + ${Math.round(velocity * 3.6)} km/h
` : ''}
@@ -59,6 +64,10 @@ export class PopupFactory { static createPlacePopup(properties) { const { id, name, latitude, longitude, note, tags } = properties + // Get theme colors + const theme = getCurrentTheme() + const colors = getThemeColors(theme) + // Parse tags if they're stringified let parsedTags = tags if (typeof tags === 'string') { @@ -76,27 +85,27 @@ export class PopupFactory { ${tag.icon} #${tag.name} `).join(' ') - : 'Untagged' + : `Untagged` return ` -
-
+
+
${name || `Place #${id}`}
${note ? `
- Note: - ${note} + Note: + ${note}
` : ''}
- Tags: + Tags:
${tagsHtml}
- Coordinates: - ${latitude.toFixed(5)}, ${longitude.toFixed(5)} + Coordinates: + ${latitude.toFixed(5)}, ${longitude.toFixed(5)}
diff --git a/app/javascript/maps_v2/components/visit_popup.js b/app/javascript/maps_v2/components/visit_popup.js index 52cc527e..26084422 100644 --- a/app/javascript/maps_v2/components/visit_popup.js +++ b/app/javascript/maps_v2/components/visit_popup.js @@ -1,4 +1,5 @@ import { formatTimestamp } from '../utils/geojson_transformers' +import { getCurrentTheme, getThemeColors } from '../utils/popup_theme' /** * Factory for creating visit popups @@ -17,6 +18,10 @@ export class VisitPopupFactory { const durationHours = Math.round(duration / 3600) const durationDisplay = durationHours >= 1 ? `${durationHours}h` : `${Math.round(duration / 60)}m` + // Get theme colors + const theme = getCurrentTheme() + const colors = getThemeColors(theme) + return `
@@ -54,7 +59,7 @@ export class VisitPopupFactory { align-items: center; margin-bottom: 12px; padding-bottom: 8px; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid ${colors.border}; } .visit-badge { @@ -67,13 +72,13 @@ export class VisitPopupFactory { } .visit-badge.suggested { - background: #fef3c7; - color: #92400e; + background: ${colors.badgeSuggested.bg}; + color: ${colors.badgeSuggested.text}; } .visit-badge.confirmed { - background: #d1fae5; - color: #065f46; + background: ${colors.badgeConfirmed.bg}; + color: ${colors.badgeConfirmed.text}; } .popup-body { @@ -89,24 +94,24 @@ export class VisitPopupFactory { } .popup-row .label { - color: #6b7280; + color: ${colors.textMuted}; } .popup-row .value { font-weight: 500; - color: #111827; + color: ${colors.textPrimary}; } .popup-footer { padding-top: 8px; - border-top: 1px solid #e5e7eb; + border-top: 1px solid ${colors.border}; } .view-details-btn { display: block; text-align: center; padding: 6px 12px; - background: #3b82f6; + background: ${colors.accent}; color: white; text-decoration: none; border-radius: 6px; @@ -116,7 +121,7 @@ export class VisitPopupFactory { } .view-details-btn:hover { - background: #2563eb; + background: ${colors.accentHover}; } ` diff --git a/app/javascript/maps_v2/layers/photos_layer.js b/app/javascript/maps_v2/layers/photos_layer.js index 6401dd01..13df1381 100644 --- a/app/javascript/maps_v2/layers/photos_layer.js +++ b/app/javascript/maps_v2/layers/photos_layer.js @@ -1,5 +1,6 @@ import { BaseLayer } from './base_layer' import maplibregl from 'maplibre-gl' +import { getCurrentTheme, getThemeColors } from '../utils/popup_theme' /** * Photos layer with thumbnail markers @@ -131,10 +132,14 @@ export class PhotosLayer extends BaseLayer { const location = [city, state, country].filter(Boolean).join(', ') || 'Unknown location' const mediaType = type === 'VIDEO' ? '🎥 Video' : '📷 Photo' - // Create popup HTML with thumbnail image + // Get theme colors + const theme = getCurrentTheme() + const colors = getThemeColors(theme) + + // Create popup HTML with theme-aware styling const popupHTML = `
-
+
${filename || 'Photo'}
- ${filename ? `
${filename}
` : ''} -
📅 ${takenDate}
-
📍 ${location}
-
Coordinates: ${lat.toFixed(6)}, ${lng.toFixed(6)}
- ${source ? `
Source: ${source}
` : ''} -
${mediaType}
+ ${filename ? `
${filename}
` : ''} +
📅 ${takenDate}
+
📍 ${location}
+
Coordinates: ${lat.toFixed(6)}, ${lng.toFixed(6)}
+ ${source ? `
Source: ${source}
` : ''} +
${mediaType}
` diff --git a/db/migrate/20251201192510_add_user_id_reverse_geocoded_at_index_to_points.rb b/db/migrate/20251201192510_add_user_id_reverse_geocoded_at_index_to_points.rb new file mode 100644 index 00000000..b522df60 --- /dev/null +++ b/db/migrate/20251201192510_add_user_id_reverse_geocoded_at_index_to_points.rb @@ -0,0 +1,12 @@ +class AddUserIdReverseGeocodedAtIndexToPoints < ActiveRecord::Migration[8.0] + disable_ddl_transaction! + + def change + add_index :points, + [:user_id, :reverse_geocoded_at], + where: 'reverse_geocoded_at IS NOT NULL', + algorithm: :concurrently, + name: 'index_points_on_user_id_and_reverse_geocoded_at', + if_not_exists: true + end +end diff --git a/db/schema.rb b/db/schema.rb index ce92cec3..2bf29bb3 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema[8.0].define(version: 2025_11_18_210506) do +ActiveRecord::Schema[8.0].define(version: 2025_12_01_192510) do # These are extensions that must be enabled in order to support this database enable_extension "pg_catalog.plpgsql" enable_extension "postgis" @@ -243,6 +243,7 @@ ActiveRecord::Schema[8.0].define(version: 2025_11_18_210506) do t.index ["track_id"], name: "index_points_on_track_id" t.index ["trigger"], name: "index_points_on_trigger" t.index ["user_id", "country_name"], name: "idx_points_user_country_name" + t.index ["user_id", "reverse_geocoded_at"], name: "index_points_on_user_id_and_reverse_geocoded_at", where: "(reverse_geocoded_at IS NOT NULL)" t.index ["user_id", "timestamp", "track_id"], name: "idx_points_track_generation" t.index ["user_id"], name: "index_points_on_user_id" t.index ["visit_id"], name: "index_points_on_visit_id"