Merge pull request #29 from Vizzuality/ESA-home-tooltips

(FE): refinement
Vizzuality · Dec 5, 2023 · 88cc16a · 88cc16a
2 parents 69dddba + c500140
commit 88cc16a
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 11 deletions.
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -40,9 +40,10 @@ import Map from '@/components/map';
 // import Controls from '@/components/map/controls';
 // import SettingsControl from '@/components/map/controls/settings';
 // import ZoomControl from '@/components/map/controls/zoom';
-import Marker from '@/components/map/layers/marker';
 import { CustomMapProps } from '@/components/map/types';
 
+import HomeTooltip from './tooltips/home-tooltip';
+
 const LayerManager = dynamic(() => import('@/containers/map/layer-manager'), {
   ssr: false,
 });
@@ -51,7 +52,7 @@ const DEFAULT_PROPS: CustomMapProps = {
   id: 'default',
   initialViewState: DEFAULT_MAP_STATE,
   minZoom: 2,
-  maxZoom: 20,
+  maxZoom: 14,
 };
 
 // const FOG = {
@@ -235,12 +236,12 @@ export default function MapContainer() {
         {isHomePage && <HomeMarkers />}
 
         {marker && isHomePage && (
-          <Marker
+          <HomeTooltip
             key={marker.id}
             longitude={marker.geometry.coordinates[0]}
             latitude={marker.geometry.coordinates[1]}
-            onClick={(e) => {
-              e.originalEvent.stopPropagation();
+            properties={marker.properties}
+            onClick={() => {
               setMarker(null);
               push(`/stories/${marker.id}`);
             }}

diff --git a/client/src/containers/map/markers/home-markers/index.tsx b/client/src/containers/map/markers/home-markers/index.tsx
@@ -36,10 +36,13 @@ const StoryMarkers = () => {
             id,
             geometry: { type: 'Point', coordinates: [attributes?.longitude, attributes?.latitude] },
             properties: {
+              // TODO:  Category should be saved with all the attributes, not just slug or name
               category: attributes?.category?.data?.attributes?.slug,
+              categoryName: attributes?.category?.data?.attributes?.name,
               ifi: 'IFAD',
               status: 'completed',
               tags: ['nature'],
+              title: attributes?.title,
             },
           };
         }) || [],

diff --git a/client/src/containers/map/tooltips/home-tooltip/index.tsx b/client/src/containers/map/tooltips/home-tooltip/index.tsx
@@ -0,0 +1,45 @@
+import { MarkerProps as RMarkerProps, Popup as RPopup } from 'react-map-gl';
+
+import { cn } from '@/lib/classnames';
+
+import { Button } from '@/components/ui/button';
+import CategoryIcon from '@/components/ui/category-icon';
+
+interface HomeTooltipProps extends RMarkerProps {
+  properties: GeoJSON.GeoJsonProperties;
+}
+
+const HomeTooltip = (props: HomeTooltipProps) => {
+  const { properties, onClick } = props;
+
+  return (
+    <RPopup
+      {...props}
+      className={cn({
+        'home-tooltip items-left relative flex w-56 -translate-x-1/2 cursor-pointer flex-col justify-center rounded border border-white bg-[#335E6F80] px-6 py-4 text-white transition-opacity':
+          true,
+      })}
+    >
+      <div>
+        <div className="mb-2 flex  items-center space-x-4">
+          <CategoryIcon
+            slug={properties?.category}
+            className="fill-secondary h-10 w-10 opacity-80"
+          />
+          <p className="text-xs">{properties?.categoryName}</p>
+        </div>
+        <p className="text-sm">{properties?.title}</p>
+        <p className="mb-4 text-xs italic text-gray-300">{properties?.location}</p>
+        <Button
+          variant="secondary"
+          className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white"
+          onClick={onClick as () => void}
+        >
+          Discover story
+        </Button>
+      </div>
+    </RPopup>
+  );
+};
+
+export default HomeTooltip;
diff --git a/client/src/containers/story/index.tsx b/client/src/containers/story/index.tsx
@@ -64,6 +64,7 @@ const Story = () => {
   useEffect(() => {
     if (!steps) return;
     const stepLayout = steps[step]?.attributes?.layout?.[0];
+
     // Location
     const stepLocation = stepLayout?.map?.location;
     if (stepLocation) {
@@ -106,15 +107,16 @@ const Story = () => {
             </ScrollItem>
           );
         })}
-        <div className="fixed right-6 z-30 flex h-full flex-col justify-center space-y-2">
-          {steps?.map((_, index) => (
+        <div className="fixed right-6 z-30 flex h-full flex-col justify-center">
+          {steps?.map((s, index) => (
             <ScrollItemController
               className={cn(
-                'hover:bg-secondary block h-2 w-2 rounded-full transition-all duration-200',
-                index === step ? 'bg-secondary scale-125' : 'scale-100 bg-gray-800'
+                'hover:outline-secondary h-2 w-2 rounded-full border-[1.5px] border-gray-800 outline outline-[1.5px] transition-all duration-200',
+                index === step ? 'bg-secondary outline-secondary' : 'bg-gray-800 outline-gray-700'
               )}
               key={index}
               newStep={index}
+              title={s.attributes?.layout[0]?.card && s.attributes?.layout[0]?.card[0]?.title}
             />
           ))}
         </div>

diff --git a/client/src/containers/story/steps/controller/controller-item.tsx b/client/src/containers/story/steps/controller/controller-item.tsx
@@ -7,13 +7,15 @@ import { useScrollToItem } from '@/lib/scroll';
 import { stepAtom } from '@/store/stories';
 
 import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 type ScrollItemControllerProps = {
+  title: string;
   newStep: number | string;
   className?: string;
 };
 
-export const ScrollItemController = ({ newStep, className }: ScrollItemControllerProps) => {
+export const ScrollItemController = ({ title, newStep, className }: ScrollItemControllerProps) => {
   const scrollToItem = useScrollToItem();
 
   const currStep = useRecoilValue(stepAtom);
@@ -24,5 +26,24 @@ export const ScrollItemController = ({ newStep, className }: ScrollItemControlle
     }
   }, [currStep, newStep, scrollToItem]);
 
-  return <Button variant="icon" className={className} onClick={handleSCrollToItem} size="icon" />;
+  return (
+    <>
+      <Tooltip delayDuration={300}>
+        <TooltipTrigger type="button" aria-label="Change layer opacity" className="h-5">
+          <Button variant="icon" className={className} onClick={handleSCrollToItem} size="icon" />
+        </TooltipTrigger>
+
+        <TooltipContent
+          align="end"
+          alignOffset={-10}
+          sideOffset={0}
+          className="rounded-none px-1 py-px font-normal"
+        >
+          {title && <p>{title}</p>}
+          {newStep === 0 && !title && <p>Introduction</p>}
+          {newStep === 4 && !title && <p>Conclusion</p>}
+        </TooltipContent>
+      </Tooltip>
+    </>
+  );
 };
diff --git a/client/src/styles/mapbox.css b/client/src/styles/mapbox.css
@@ -632,3 +632,16 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 #home-globe .mapboxgl-ctrl-logo {
   display: none;
 }
+
+
+.home-tooltip {
+  .mapboxgl-popup-close-button {
+   display: none;
+  }
+  .mapboxgl-popup-content {
+    background: transparent;
+  }
+  .mapboxgl-popup-tip {
+   display: none;
+  }
+}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -53,6 +53,7 @@ module.exports = {
         gray: {
           200: 'hsla(60, 8%, 90%, 1)',
           500: 'hsla(202, 15%, 66%, 1)',
+          700: '#5A7A8A',
           800: 'hsla(197, 37%, 32%, 1)',
         },
         'enlight-yellow': {