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/styles/manchette.css

@@ -1,32 +1,51 @@
 
 .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: 0px 0px 0px 10px;
+    @apply border-black-25;
+    display: flex;
+    height: 2.5rem;
+    width: inherit;
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 
-    .manchette-actions {
-      background-color: rgba(250, 249, 245, 0.6);
-      height: 2.5rem;
-      width: inherit;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      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-buttons {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      button {
+        border-right: solid 1px #d3d1cf;
+        border-top: solid 1px white;
+        height: 100%;
+        padding-inline: 12px;
       }
 
-      .zoom-in:disabled {
-        opacity: 0.4;
+      button:disabled {
+        span {
+          color: #B6B2AF
+        }
       }
 
-      .toggle-mode{
-        font-size: 0.875rem;
-        line-height: 14px;
+      .zoom-reset {
+        color: #797671;
+        font-weight: 600;
+        font-size: 14px;
       }
     }
+
+    .toggle-mode{
+      font-size: 0.875rem;
+      line-height: 14px;
+    }
   }
+}