Skip to content

Commit

Permalink
refactor(client): Reorganise the map controls
Browse files Browse the repository at this point in the history
SS-100
  • Loading branch information
clementprdhomme committed Nov 6, 2024
1 parent 103c2e3 commit f4b5a4e
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 23 deletions.
6 changes: 3 additions & 3 deletions client/src/components/map/controls/contextual-layers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ const ContextualLayersControls = () => {
return (
<Sheet>
<SheetTrigger asChild>
<Button type="button" variant="yellow" className="w-8 font-sans xl:w-auto">
<LayersIcon aria-hidden className="xl:!size-5" />
<span className="sr-only xl:not-sr-only">Contextual layers</span>
<Button type="button" variant="yellow" size="icon">
<span className="sr-only">Contextual layers</span>
<LayersIcon aria-hidden />
</Button>
</SheetTrigger>
<SheetContent
Expand Down
23 changes: 5 additions & 18 deletions client/src/components/map/controls/index.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,18 @@
import useMapLayers from "@/hooks/use-map-layers";
import { cn } from "@/lib/utils";

import ContextualLayersControls from "./contextual-layers";
import LegendControls from "./legend";
import MapSettingsControls from "./map-settings";
import ZoomControls from "./zoom";

const Controls = () => {
const [layers] = useMapLayers();

return (
<>
<div
className={cn({
"absolute right-5 z-10 leading-none xl:bottom-auto xl:right-10 xl:top-6": true,
"bottom-[120px]": layers.length > 0,
"bottom-[80px]": layers.length === 0,
})}
>
<div className="absolute right-5 top-5 z-10 flex flex-col gap-2 xl:right-10 xl:top-6">
<ContextualLayersControls />
</div>
<div className="absolute bottom-10 right-5 z-10 flex flex-col items-end gap-2 xl:bottom-6 xl:right-10">
<ZoomControls />
<div className="flex flex-col gap-2 xl:flex-row-reverse xl:gap-6">
<MapSettingsControls />
<LegendControls />
</div>
<MapSettingsControls />
</div>
<div className="absolute bottom-10 right-5 z-10 xl:bottom-6 xl:right-10">
<LegendControls />
</div>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/map/controls/map-settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const MapSettingsControls = () => {
<GlobeIcon aria-hidden />
</Button>
</PopoverTrigger>
<PopoverContent side="left" align="end" className="w-[250px]">
<PopoverContent side="left" align="start" className="w-[250px]">
<MapSettingsPanel />
</PopoverContent>
</Popover>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ui/popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
VariantProps<typeof popoverContentVariants>
>(({ variant, className, align = "center", sideOffset = 24, ...props }, ref) => (
>(({ variant, className, align = "center", sideOffset = 16, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
Expand Down

0 comments on commit f4b5a4e

Please sign in to comment.