Merge branch 'master' of github.com:Pregnant-Guild/FE_User_history_web
This commit is contained in:
taDuc
@@ -0,0 +1,248 @@
|
||||
.panel {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
z-index: 20;
|
||||
width: 280px;
|
||||
max-width: calc(100vw - 2rem);
|
||||
background: rgba(15, 23, 42, 0.88);
|
||||
border-radius: 14px;
|
||||
backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 12px 16px;
|
||||
transition: border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.headerCollapsed {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.collapseButton {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #f8fafc;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.collapseButton:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.collapseIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.iconRotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
max-height: 1000px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.contentCollapsed {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition: color 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.actionButton:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for premium look */
|
||||
.listContainer::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.listContainer::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.listContainer::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.listContainer::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.listItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.15s ease;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.listItem:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.listItemLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.itemHashIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: #94a3b8;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.itemName {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.eyeIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.listItem:hover .eyeIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Active status styling */
|
||||
.listItemActiveSky .itemHashIcon {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.listItemActiveEmerald .itemHashIcon {
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
/* Inactive status styling */
|
||||
.listItemInactive {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.listItemInactive .itemName {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.listItemInactive:hover {
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.eyeIconInactive {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #94a3b8;
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -2283,6 +2283,8 @@ function buildEntityLabelContextDraft(draft: FeatureCollection, entities: Entity
|
||||
...feature,
|
||||
properties: {
|
||||
...feature.properties,
|
||||
entity_id: entityIds[0] || null,
|
||||
entity_ids: entityIds,
|
||||
entity_name: candidates[0]?.name || null,
|
||||
entity_names: candidates.map((candidate) => candidate.name),
|
||||
entity_label_candidates: candidates,
|
||||
|
||||
+144
-19
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Map, { type MapHoverPayload } from "@/uhm/components/Map";
|
||||
import PublicWikiSidebar from "@/uhm/components/wiki/PublicWikiSidebar";
|
||||
import TimelineBar from "@/uhm/components/ui/TimelineBar";
|
||||
import mapLayersStyles from "./MapLayers.module.css";
|
||||
import { fetchEntities, type Entity } from "@/uhm/api/entities";
|
||||
import { fetchGeometriesByBBox } from "@/uhm/api/geometries";
|
||||
import { ApiError } from "@/uhm/api/http";
|
||||
@@ -80,6 +81,7 @@ export default function Page() {
|
||||
total: 0,
|
||||
});
|
||||
const [hoverAnchor, setHoverAnchor] = useState<MapHoverPayload | null>(null);
|
||||
const [isMapLayersCollapsed, setIsMapLayersCollapsed] = useState(false);
|
||||
const [activeEntityId, setActiveEntityId] = useState<string | null>(null);
|
||||
const [activeWikiSlug, setActiveWikiSlug] = useState<string | null>(null);
|
||||
const [wikiCache, setWikiCache] = useState<Record<string, Wiki>>({});
|
||||
@@ -553,26 +555,55 @@ export default function Page() {
|
||||
style={activeEntityId && isLargeScreen ? { right: `${sidebarWidth + 32}px` } : undefined}
|
||||
/>
|
||||
|
||||
<div className="absolute left-4 top-4 z-20 w-[280px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-white/10 bg-slate-950/92 shadow-xl backdrop-blur">
|
||||
<div className="border-b border-white/10 px-4 py-3">
|
||||
<div className="text-sm font-semibold text-white">Map Layers</div>
|
||||
<div className="mt-1 text-xs text-slate-400">{helperText}</div>
|
||||
<div className={mapLayersStyles.panel}>
|
||||
<div className={`${mapLayersStyles.header} ${isMapLayersCollapsed ? mapLayersStyles.headerCollapsed : ""}`}>
|
||||
<div>
|
||||
<div className={mapLayersStyles.title}>Map Layers</div>
|
||||
<div className={mapLayersStyles.subtitle}>{helperText}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsMapLayersCollapsed(!isMapLayersCollapsed)}
|
||||
className={mapLayersStyles.collapseButton}
|
||||
aria-label={isMapLayersCollapsed ? "Expand Map Layers" : "Collapse Map Layers"}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`${mapLayersStyles.collapseIcon} ${isMapLayersCollapsed ? mapLayersStyles.iconRotated : ""}`}
|
||||
>
|
||||
<polyline points="18 15 12 9 6 15" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 px-4 py-4">
|
||||
<div className={`${mapLayersStyles.content} ${isMapLayersCollapsed ? mapLayersStyles.contentCollapsed : ""}`}>
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.08em] text-slate-500">
|
||||
<div className={mapLayersStyles.sectionHeader}>
|
||||
<span>Background</span>
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={handleShowAllBackgroundLayers} className="text-slate-300 transition hover:text-white">
|
||||
<div className={mapLayersStyles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleShowAllBackgroundLayers}
|
||||
className={mapLayersStyles.actionButton}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button type="button" onClick={handleHideAllBackgroundLayers} className="text-slate-300 transition hover:text-white">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleHideAllBackgroundLayers}
|
||||
className={mapLayersStyles.actionButton}
|
||||
>
|
||||
Off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className={mapLayersStyles.listContainer}>
|
||||
{BACKGROUND_LAYER_OPTIONS.map((layer) => {
|
||||
const active = Boolean(backgroundVisibility[layer.id]);
|
||||
return (
|
||||
@@ -580,12 +611,58 @@ export default function Page() {
|
||||
key={layer.id}
|
||||
type="button"
|
||||
onClick={() => handleToggleBackgroundLayer(layer.id)}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs transition ${active
|
||||
? "border-sky-400/40 bg-sky-500/10 text-sky-200"
|
||||
: "border-white/10 bg-white/[0.03] text-slate-400 hover:text-slate-200"
|
||||
className={`${mapLayersStyles.listItem} ${
|
||||
active ? mapLayersStyles.listItemActiveSky : mapLayersStyles.listItemInactive
|
||||
}`}
|
||||
>
|
||||
{layer.label}
|
||||
<div className={mapLayersStyles.listItemLeft}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={mapLayersStyles.itemHashIcon}
|
||||
>
|
||||
<line x1="4" y1="9" x2="20" y2="9" />
|
||||
<line x1="4" y1="15" x2="20" y2="15" />
|
||||
<line x1="10" y1="3" x2="8" y2="21" />
|
||||
<line x1="16" y1="3" x2="14" y2="21" />
|
||||
</svg>
|
||||
<span className={mapLayersStyles.itemName}>{layer.label}</span>
|
||||
</div>
|
||||
|
||||
{active ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={mapLayersStyles.eyeIcon}
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={mapLayersStyles.eyeIconInactive}
|
||||
>
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -593,10 +670,10 @@ export default function Page() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 text-[11px] uppercase tracking-[0.08em] text-slate-500">
|
||||
<div className={mapLayersStyles.sectionTitle}>
|
||||
Geometry
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className={mapLayersStyles.listContainer}>
|
||||
{GEO_TYPE_KEYS.map((typeKey) => {
|
||||
const active = geometryVisibility[typeKey] !== false;
|
||||
return (
|
||||
@@ -609,12 +686,60 @@ export default function Page() {
|
||||
[typeKey]: prev[typeKey] === false,
|
||||
}));
|
||||
}}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs capitalize transition ${active
|
||||
? "border-emerald-400/40 bg-emerald-500/10 text-emerald-200"
|
||||
: "border-white/10 bg-white/[0.03] text-slate-400 hover:text-slate-200"
|
||||
className={`${mapLayersStyles.listItem} ${
|
||||
active ? mapLayersStyles.listItemActiveEmerald : mapLayersStyles.listItemInactive
|
||||
}`}
|
||||
>
|
||||
<div className={mapLayersStyles.listItemLeft}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={mapLayersStyles.itemHashIcon}
|
||||
>
|
||||
<line x1="4" y1="9" x2="20" y2="9" />
|
||||
<line x1="4" y1="15" x2="20" y2="15" />
|
||||
<line x1="10" y1="3" x2="8" y2="21" />
|
||||
<line x1="16" y1="3" x2="14" y2="21" />
|
||||
</svg>
|
||||
<span className={mapLayersStyles.itemName}>
|
||||
{typeKey.replaceAll("_", " ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{active ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={mapLayersStyles.eyeIcon}
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={mapLayersStyles.eyeIconInactive}
|
||||
>
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -94,7 +94,12 @@ export function useMapSync({
|
||||
fitBoundsAppliedRef.current = false;
|
||||
}, [fitBoundsKey]);
|
||||
|
||||
const applyDraftToMap = useCallback((fc: FeatureCollection) => {
|
||||
const applyDraftToMap = useCallback((
|
||||
fc: FeatureCollection,
|
||||
labelContextOverride?: FeatureCollection,
|
||||
selectedIdsOverride?: (string | number)[],
|
||||
highlightFeaturesOverride?: FeatureCollection | null
|
||||
) => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
@@ -110,11 +115,16 @@ export function useMapSync({
|
||||
}
|
||||
}
|
||||
|
||||
const labelContext = labelContextOverride || labelContextDraftRef.current || fc;
|
||||
const currentSelectedIds = selectedIdsOverride || selectedFeatureIdsRef.current;
|
||||
const highlightFeaturesVal = highlightFeaturesOverride !== undefined
|
||||
? highlightFeaturesOverride
|
||||
: highlightFeaturesRef.current;
|
||||
|
||||
const visibleDraftRaw = respectBindingFilterRef.current
|
||||
? filterDraftByBinding(fc, selectedFeatureIdsRef.current, highlightFeaturesRef.current)
|
||||
: fc;
|
||||
? filterDraftByBinding(labelContext, currentSelectedIds, highlightFeaturesVal)
|
||||
: labelContext;
|
||||
const visibleDraft = filterDraftByGeometryVisibility(visibleDraftRaw, geometryVisibilityRef.current);
|
||||
const labelContext = labelContextDraftRef.current || fc;
|
||||
const labelTimelineYear = labelTimelineYearRef.current;
|
||||
const { polygons, points } = splitDraftFeatures(visibleDraft);
|
||||
const labeledGeometries = decorateLineFeaturesWithLabels(polygons, labelContext, labelTimelineYear);
|
||||
@@ -127,7 +137,6 @@ export function useMapSync({
|
||||
polygonLabelSource.setData(polygonLabels);
|
||||
(map.getSource(PATH_ARROW_SOURCE_ID) as maplibregl.GeoJSONSource | undefined)?.setData(pathArrowShapes);
|
||||
|
||||
const currentSelectedIds = selectedFeatureIdsRef.current;
|
||||
currentSelectedIds.forEach((id) => {
|
||||
setSelectedFeatureState(map, id, true);
|
||||
});
|
||||
@@ -197,7 +206,7 @@ export function useMapSync({
|
||||
}, [imageOverlay, mapRef]);
|
||||
|
||||
useEffect(() => {
|
||||
applyDraftToMap(draft);
|
||||
applyDraftToMap(draft, labelContextDraft, selectedFeatureIds, highlightFeatures);
|
||||
const editingId = editingEngineRef.current?.editingRef?.current?.id;
|
||||
if (allowGeometryEditing && editingId !== undefined && editingId !== null) {
|
||||
const stillExists = draft.features.some((f) => f.properties.id === editingId);
|
||||
|
||||
@@ -0,0 +1,283 @@
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
bottom: 16px;
|
||||
z-index: 10;
|
||||
background: linear-gradient(135deg, rgba(30, 30, 30, 0.72) 0%, rgba(20, 20, 20, 0.85) 100%);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50px;
|
||||
padding: 10px 16px;
|
||||
color: #f8fafc;
|
||||
box-shadow:
|
||||
0 10px 30px -10px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes borderPulse {
|
||||
0% {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 10px 30px -10px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 1px 0 rgba(255, 255, 255, 0.7),
|
||||
inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: rgba(16, 185, 129, 0.55);
|
||||
box-shadow:
|
||||
0 10px 30px -10px rgba(0, 0, 0, 0.15),
|
||||
0 0 12px rgba(16, 185, 129, 0.25),
|
||||
inset 0 1px 1px 0 rgba(255, 255, 255, 0.75),
|
||||
inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 10px 30px -10px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 1px 0 rgba(255, 255, 255, 0.7),
|
||||
inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.containerLoading {
|
||||
animation: borderPulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.flexWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
column-gap: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.labelBounds {
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
min-width: 44px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.labelBoundsRight {
|
||||
composes: labelBounds;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Custom range slider styling */
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.slider:hover::-webkit-slider-runnable-track {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-top: -6px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, #34d399 0%, #059669 100%);
|
||||
border: 1.5px solid #ffffff;
|
||||
box-shadow:
|
||||
0 0 10px rgba(16, 185, 129, 0.4),
|
||||
0 3px 6px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.4);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.slider:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.2);
|
||||
box-shadow:
|
||||
0 0 15px rgba(16, 185, 129, 0.6),
|
||||
0 5px 10px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.slider:active::-webkit-slider-thumb {
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 0 8px rgba(16, 185, 129, 0.5),
|
||||
0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Firefox slider styling */
|
||||
.slider::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.slider:hover::-moz-range-track {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, #34d399 0%, #059669 100%);
|
||||
border: 1.5px solid #ffffff;
|
||||
box-shadow:
|
||||
0 0 10px rgba(16, 185, 129, 0.4),
|
||||
0 3px 6px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.4);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.slider:hover::-moz-range-thumb {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Custom inputs styling */
|
||||
.numberInput {
|
||||
width: 128px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.numberInput:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.numberInput:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(16, 185, 129, 0.25),
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.rangeInput {
|
||||
composes: numberInput;
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.rangeLabel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.rangeLabel:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Custom switch toggle styling */
|
||||
.toggleContainer {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.toggleTrack {
|
||||
width: 38px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.toggleTrackActive {
|
||||
background: rgba(16, 185, 129, 0.35);
|
||||
border-color: rgba(16, 185, 129, 0.6);
|
||||
box-shadow:
|
||||
0 0 8px rgba(16, 185, 129, 0.35),
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toggleThumb {
|
||||
position: absolute;
|
||||
top: 1.5px;
|
||||
left: 2px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: #94a3b8;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.toggleThumbActive {
|
||||
left: 19px;
|
||||
background: #34d399;
|
||||
box-shadow:
|
||||
0 0 10px rgba(52, 211, 153, 0.6),
|
||||
0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.toggleContainer:hover .toggleTrack {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.toggleContainer:hover .toggleTrackActive {
|
||||
border-color: rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.disabled .slider,
|
||||
.disabled .numberInput,
|
||||
.disabled .toggleContainer,
|
||||
.disabled .toggleTrack {
|
||||
cursor: not-allowed !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { FIXED_TIMELINE_END_YEAR, FIXED_TIMELINE_START_YEAR, clampYearValue } from "@/uhm/lib/utils/timeline";
|
||||
import styles from "./TimelineBar.module.css";
|
||||
|
||||
type Props = {
|
||||
year: number;
|
||||
@@ -48,68 +49,22 @@ export default function TimelineBar({
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "18px",
|
||||
right: "18px",
|
||||
bottom: "16px",
|
||||
zIndex: 10,
|
||||
background: "rgba(15, 23, 42, 0.9)",
|
||||
border: "1px solid rgba(148, 163, 184, 0.3)",
|
||||
borderRadius: "10px",
|
||||
padding: "10px 12px",
|
||||
color: "#e2e8f0",
|
||||
backdropFilter: "blur(2px)",
|
||||
...style,
|
||||
}}
|
||||
className={`${styles.container} ${isLoading ? styles.containerLoading : ""} ${effectiveDisabled ? styles.disabled : ""}`}
|
||||
style={style}
|
||||
title={helperText || undefined}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
rowGap: "8px",
|
||||
columnGap: "10px",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
<div className={styles.flexWrapper}>
|
||||
{typeof filterEnabled === "boolean" && onFilterEnabledChange ? (
|
||||
<label
|
||||
title={filterEnabled ? "Dang bat loc timeline" : "Dang tat loc timeline (hien thi tat ca geometry)"}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
cursor: effectiveDisabled ? "not-allowed" : "pointer",
|
||||
userSelect: "none",
|
||||
opacity: effectiveDisabled ? 0.6 : 1,
|
||||
}}
|
||||
className={`${styles.toggleContainer} ${effectiveDisabled ? styles.disabled : ""}`}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: 36,
|
||||
height: 20,
|
||||
borderRadius: 999,
|
||||
border: "1px solid rgba(148, 163, 184, 0.45)",
|
||||
background: filterEnabled ? "rgba(34, 197, 94, 0.9)" : "rgba(148, 163, 184, 0.25)",
|
||||
position: "relative",
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
className={`${styles.toggleTrack} ${filterEnabled ? styles.toggleTrackActive : ""}`}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 2,
|
||||
left: filterEnabled ? 18 : 2,
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 999,
|
||||
background: "#0b1220",
|
||||
border: "1px solid rgba(148, 163, 184, 0.35)",
|
||||
transition: "left 120ms ease",
|
||||
}}
|
||||
className={`${styles.toggleThumb} ${filterEnabled ? styles.toggleThumbActive : ""}`}
|
||||
/>
|
||||
</span>
|
||||
<input
|
||||
@@ -122,7 +77,7 @@ export default function TimelineBar({
|
||||
/>
|
||||
</label>
|
||||
) : null}
|
||||
<span style={{ color: "#94a3b8", minWidth: 44 }}>{formatYear(lower)}</span>
|
||||
<span className={styles.labelBounds}>{formatYear(lower)}</span>
|
||||
<input
|
||||
type="range"
|
||||
min={lower}
|
||||
@@ -131,16 +86,10 @@ export default function TimelineBar({
|
||||
value={safeYear}
|
||||
onChange={(event) => handleYearChange(Number(event.target.value))}
|
||||
disabled={effectiveDisabled}
|
||||
className={styles.slider}
|
||||
aria-label="Timeline year"
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: "120px",
|
||||
accentColor: "#22c55e",
|
||||
cursor: effectiveDisabled ? "not-allowed" : "pointer",
|
||||
opacity: effectiveDisabled ? 0.6 : 1,
|
||||
}}
|
||||
/>
|
||||
<span style={{ color: "#94a3b8", minWidth: 44, textAlign: "right" }}>
|
||||
<span className={styles.labelBoundsRight}>
|
||||
{formatYear(upper)}
|
||||
</span>
|
||||
<input
|
||||
@@ -151,31 +100,15 @@ export default function TimelineBar({
|
||||
value={safeYear}
|
||||
onChange={(event) => handleYearChange(Number(event.target.value))}
|
||||
disabled={effectiveDisabled}
|
||||
className={styles.numberInput}
|
||||
aria-label="Timeline exact year"
|
||||
style={{
|
||||
width: "128px",
|
||||
border: "1px solid rgba(148, 163, 184, 0.45)",
|
||||
borderRadius: "6px",
|
||||
padding: "6px 8px",
|
||||
background: "rgba(15, 23, 42, 0.7)",
|
||||
color: "#f8fafc",
|
||||
fontSize: "13px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
{typeof timeRange === "number" && onTimeRangeChange ? (
|
||||
<label
|
||||
title="time_range (0-30)"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
color: "#94a3b8",
|
||||
whiteSpace: "nowrap",
|
||||
opacity: effectiveDisabled ? 0.6 : 1,
|
||||
}}
|
||||
className={`${styles.rangeLabel} ${effectiveDisabled ? styles.disabled : ""}`}
|
||||
>
|
||||
<span style={{ fontSize: "12px" }}>Range</span>
|
||||
<span>Range</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
@@ -184,17 +117,8 @@ export default function TimelineBar({
|
||||
value={Math.max(0, Math.min(30, Math.trunc(timeRange)))}
|
||||
onChange={(event) => handleTimeRangeChange(Number(event.target.value))}
|
||||
disabled={effectiveDisabled}
|
||||
className={styles.rangeInput}
|
||||
aria-label="Timeline range"
|
||||
style={{
|
||||
width: "84px",
|
||||
border: "1px solid rgba(148, 163, 184, 0.45)",
|
||||
borderRadius: "6px",
|
||||
padding: "6px 8px",
|
||||
background: "rgba(15, 23, 42, 0.7)",
|
||||
color: "#f8fafc",
|
||||
fontSize: "13px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
) : null}
|
||||
@@ -209,3 +133,4 @@ function formatYear(year: number): string {
|
||||
}
|
||||
return `${year}`;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import maplibregl, { LayerSpecification } from "maplibre-gl";
|
||||
|
||||
const TYPE_MATCH_EXPR: maplibregl.ExpressionSpecification = ["coalesce", ["get", "type"], ["get", "entity_type_id"], ""];
|
||||
const DRAFT_ENTITY_EXPR: maplibregl.ExpressionSpecification = ["==", ["coalesce", ["get", "entity_id"], ""], ""];
|
||||
const DRAFT_ENTITY_EXPR: maplibregl.ExpressionSpecification = [
|
||||
"all",
|
||||
["==", ["coalesce", ["get", "entity_id"], ""], ""],
|
||||
["!", ["has", "binding"]]
|
||||
];
|
||||
const SELECTED_EXPR: maplibregl.ExpressionSpecification = ["boolean", ["feature-state", "selected"], false];
|
||||
|
||||
const SELECTED_COLOR = "#22c55e";
|
||||
|
||||
Reference in New Issue
Block a user