diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index e8f32f9..9684bc6 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -2007,6 +2007,10 @@ export default function MapView({ onSubcategoryToggle={handleSubcategoryToggle} onTime={(h) => setTimeHours(h)} onWeather={() => setWeatherViewEnabled((prev) => !prev)} + onClearAllFilters={() => { + setMainFilters([]); + setSubFilters([]); + }} activeCategories={mainFilters} activeSubcategories={subFilters} activeTime={timeHours} diff --git a/src/components/Map/RadialMenu.css b/src/components/Map/RadialMenu.css index d97a80d..eb68319 100644 --- a/src/components/Map/RadialMenu.css +++ b/src/components/Map/RadialMenu.css @@ -7,7 +7,7 @@ background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); - z-index: 398; /* Below search dropdown (500) */ + z-index: 440; /* Above weather widget (300), below FAB items */ animation: fab-fade-in 0.2s ease; } @@ -21,7 +21,7 @@ .fab-right { position: fixed; top: 180px; - z-index: 399; /* Below search dropdown (500) */ + z-index: 450; /* Above weather widget (300), below search dropdown (500) */ } .fab-left { @@ -46,10 +46,10 @@ align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; position: relative; - z-index: 400; /* Below search dropdown (500) */ + z-index: 451; /* Above weather widget (300), below search dropdown (500) */ } .fab-btn-right { @@ -81,16 +81,50 @@ transform: translateX(-50%); font-size: 10px; font-weight: 700; - color: #e2e8f0; - text-shadow: 0 1px 4px rgba(0,0,0,0.8); + color: #1e293b; + text-shadow: 0 1px 2px rgba(255,255,255,0.8); white-space: nowrap; pointer-events: none; + background: rgba(255, 255, 255, 0.85); + padding: 2px 6px; + border-radius: 4px; + max-width: 80px; + overflow: hidden; + text-overflow: ellipsis; } .fab-label-time { background: rgba(15, 23, 42, 0.85); - padding: 2px 6px; - border-radius: 4px; + color: #e2e8f0; + text-shadow: 0 1px 4px rgba(0,0,0,0.8); +} + +.fab-label-cat { + background: rgba(255, 255, 255, 0.9); + color: #1e293b; +} + +/* Item labels (category/subcategory names) */ +.fab-item-label { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + margin-top: 4px; + font-size: 9px; + font-weight: 700; + color: #1e293b; + text-shadow: 0 1px 2px rgba(255,255,255,0.9); + white-space: nowrap; + pointer-events: none; + background: rgba(255, 255, 255, 0.9); + padding: 1px 5px; + border-radius: 3px; +} + +.fab-sub-label { + font-size: 8px; + margin-top: 3px; } /* Ring containers */ @@ -138,6 +172,7 @@ transform: translate(var(--x), var(--y)) scale(1); pointer-events: auto; transition-delay: var(--delay); + z-index: 452; /* Above weather widget when visible */ } .fab-item:hover { @@ -175,6 +210,7 @@ animation: fab-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: var(--delay); --color: #64748b; + z-index: 453; /* Above category items */ } .fab-sub.is-active { diff --git a/src/components/Map/RadialMenu.jsx b/src/components/Map/RadialMenu.jsx index bdcae2c..bc5ec63 100644 --- a/src/components/Map/RadialMenu.jsx +++ b/src/components/Map/RadialMenu.jsx @@ -2,34 +2,34 @@ import React, { useState, useCallback } from "react"; import "./RadialMenu.css"; const CATEGORIES = [ - { id: "News", icon: "fa-solid fa-newspaper", color: "#3b82f6" }, - { id: "Friends", icon: "fa-solid fa-users", color: "#10b981" }, - { id: "Events", icon: "fa-solid fa-calendar", color: "#f59e0b" }, - { id: "Market", icon: "fa-solid fa-store", color: "#8b5cf6" }, + { id: "News", icon: "fa-solid fa-newspaper", color: "#3b82f6", label: "News" }, + { id: "Friends", icon: "fa-solid fa-users", color: "#10b981", label: "Social" }, + { id: "Events", icon: "fa-solid fa-calendar", color: "#f59e0b", label: "Events" }, + { id: "Market", icon: "fa-solid fa-store", color: "#8b5cf6", label: "Market" }, ]; const SUBCATEGORIES = { News: [ - { id: "World", icon: "fa-solid fa-globe" }, - { id: "Politics", icon: "fa-solid fa-landmark" }, - { id: "Tech", icon: "fa-solid fa-microchip" }, - { id: "Finance", icon: "fa-solid fa-chart-line" }, - { id: "Local", icon: "fa-solid fa-location-dot" }, + { id: "World", icon: "fa-solid fa-globe", label: "World" }, + { id: "Politics", icon: "fa-solid fa-landmark", label: "Politics" }, + { id: "Tech", icon: "fa-solid fa-microchip", label: "Tech" }, + { id: "Finance", icon: "fa-solid fa-chart-line", label: "Finance" }, + { id: "Local", icon: "fa-solid fa-location-dot", label: "Local" }, ], Friends: [ - { id: "Nearby", icon: "fa-solid fa-location-crosshairs" }, - { id: "Chats", icon: "fa-solid fa-comments" }, - { id: "Groups", icon: "fa-solid fa-user-group" }, + { id: "Nearby", icon: "fa-solid fa-location-crosshairs", label: "Near" }, + { id: "Chats", icon: "fa-solid fa-comments", label: "Chats" }, + { id: "Groups", icon: "fa-solid fa-user-group", label: "Groups" }, ], Events: [ - { id: "Today", icon: "fa-solid fa-calendar-day" }, - { id: "Music", icon: "fa-solid fa-music" }, - { id: "Sports", icon: "fa-solid fa-football" }, + { id: "Today", icon: "fa-solid fa-calendar-day", label: "Today" }, + { id: "Music", icon: "fa-solid fa-music", label: "Music" }, + { id: "Sports", icon: "fa-solid fa-football", label: "Sports" }, ], Market: [ - { id: "Deals", icon: "fa-solid fa-tags" }, - { id: "Tech", icon: "fa-solid fa-laptop" }, - { id: "Auto", icon: "fa-solid fa-car" }, + { id: "Deals", icon: "fa-solid fa-tags", label: "Deals" }, + { id: "Tech", icon: "fa-solid fa-laptop", label: "Tech" }, + { id: "Auto", icon: "fa-solid fa-car", label: "Auto" }, ], }; @@ -46,6 +46,7 @@ export default function RadialMenu({ onSubcategoryToggle, onTime, onWeather, + onClearAllFilters, activeCategories = [], activeSubcategories = [], activeTime, @@ -59,6 +60,8 @@ export default function RadialMenu({ .filter(c => activeCategories.includes(c.id)) .map(c => c.color); + const hasActiveFilters = activeCategories.length > 0 || activeSubcategories.length > 0; + const handleLeftToggle = () => { setLeftOpen(!leftOpen); if (!leftOpen) setRightOpen(false); @@ -85,6 +88,15 @@ export default function RadialMenu({ onWeather?.(); }; + const handleClearAll = () => { + // Clear all category filters + for (const cat of activeCategories) { + onCategoryToggle?.(cat); + } + setLeftOpen(false); + onClearAllFilters?.(); + }; + // Build gradient for multi-select FAB const fabGradient = activeColors.length === 0 ? "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)" @@ -129,12 +141,13 @@ export default function RadialMenu({ {/* Category button */} {/* Subcategories - appear around the category when active */} @@ -162,6 +175,7 @@ export default function RadialMenu({ title={sub.id} > + {sub.label} ); })} @@ -173,10 +187,13 @@ export default function RadialMenu({ {/* Main FAB - split colors */} + {leftOpen ? "Clear" : activeCategories.length > 0 ? activeCategories.join(", ") : "Filter"} {/* RIGHT FAB - Time & Weather */}