ui-manchette: add fit button

Signed-off-by: Clara Ni <[email protected]>

Author: clarani

ui-manchette/src/components/Manchette.tsx

@@ -12,6 +12,7 @@ type ManchetteProps = {
   activeOperationalPointId?: string;
   zoomYIn: () => void;
   zoomYOut: () => void;
+  resetZoom: () => void;
   height?: number;
   yZoom?: number;
   children?: React.ReactNode;
@@ -22,6 +23,7 @@ type ManchetteProps = {
 const Manchette = ({
   zoomYIn,
   zoomYOut,
+  resetZoom,
   yZoom = 1,
   operationalPoints,
   activeOperationalPointId,
@@ -31,7 +33,7 @@ const Manchette = ({
 }: ManchetteProps) => (
   <div className="manchette-container">
     <div
-      className=" bg-ambientB-10 border-r border-grey-30"
+      className="bg-ambientB-10 border-r border-grey-30"
       style={{ minHeight: `${INITIAL_OP_LIST_HEIGHT}px` }}
     >
       <OperationalPointList
@@ -40,24 +42,17 @@ const Manchette = ({
       />
       {children}
     </div>
-    <div className="manchette-actions flex items-center">
-      <div className=" flex items-center ">
-        <button
-          className="h-full px-3 w-full zoom-out"
-          onClick={zoomYOut}
-          disabled={yZoom <= MIN_ZOOM_Y}
-        >
+    <div className="manchette-actions">
+      <div className="zoom-buttons">
+        <button className="zoom-out" onClick={zoomYOut} disabled={yZoom <= MIN_ZOOM_Y}>
           <ZoomOut />
         </button>
-      </div>
-      <div className=" flex items-center  border-x border-black-25  h-full">
-        <button
-          className="h-full px-3 w-full zoom-in"
-          disabled={yZoom >= MAX_ZOOM_Y}
-          onClick={zoomYIn}
-        >
+        <button className="zoom-in" onClick={zoomYIn} disabled={yZoom >= MAX_ZOOM_Y}>
           <ZoomIn />
         </button>
+        <button className="zoom-reset" onClick={resetZoom}>
+          Fit
+        </button>
       </div>
       <div className="flex items-center ml-auto text-sans font-semibold">
         <button className="toggle-mode" onClick={toggleMode}>

ui-manchette/src/stories/Manchette.stories.tsx

@@ -74,6 +74,7 @@ const ManchetteWithWaypointMenu = () => {
       }))}
       zoomYIn={() => {}}
       zoomYOut={() => {}}
+      resetZoom={() => {}}
       toggleMode={() => {}}
       activeOperationalPointId={activeOperationalPointId}
     >

ui-manchette/src/styles/manchette.css

@@ -1,6 +1,12 @@
 .manchette-container {
   .manchette-actions {
+    align-items: center;
     background-color: rgba(250, 249, 245, 0.6);
+    border-top: solid 1px;
+    border-right: solid 1px;
+    border-radius: 0 0 0 10px;
+    @apply border-black-25;
+    display: flex;
     height: 2.5rem;
     width: inherit;
     position: sticky;
@@ -9,17 +15,29 @@
     width: 100%;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
-    border-top: solid 1px;
-    border-right: solid 1px;
-    @apply border-black-25;
-    border-radius: 0px 0px 0px 10px;
 
-    .zoom-out:disabled {
-      opacity: 0.4;
-    }
 
-    .zoom-in:disabled {
-      opacity: 0.4;
+    .zoom-buttons {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      button {
+        border-right: solid 1px theme('colors.grey.20');
+        border-top: solid 1px white;
+        height: 100%;
+        padding-inline: 12px;
+      }
+
+      button:disabled {
+        @apply text-grey-30;
+      }
+
+      .zoom-reset {
+        @apply text-grey-50;
+        font-weight: 600;
+        font-size: 14px;
+      }
     }
 
     .toggle-mode {