fix hotkey info position issue

Opentrons · Dec 13, 2024 · 7e7127e · 7e7127e
1 parent 041bda1
commit 7e7127e
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 20 deletions.
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -7,7 +7,13 @@ const INITIAL_SIDEBAR_WIDTH = 350
 const MIN_SIDEBAR_WIDTH = 80
 const MAX_SIDEBAR_WIDTH = 350
 
-export function DraggableSidebar(): JSX.Element {
+interface DraggableSidebarProps {
+  setTargetWidth: (width: number) => void
+}
+
+export function DraggableSidebar({
+  setTargetWidth,
+}: DraggableSidebarProps): JSX.Element {
   const sidebarRef = useRef<HTMLDivElement>(null)
   const [isResizing, setIsResizing] = useState(false)
   const [sidebarWidth, setSidebarWidth] = useState(INITIAL_SIDEBAR_WIDTH)
@@ -29,10 +35,11 @@ export function DraggableSidebar(): JSX.Element {
 
         if (newWidth >= MIN_SIDEBAR_WIDTH && newWidth <= MAX_SIDEBAR_WIDTH) {
           setSidebarWidth(newWidth)
+          setTargetWidth(newWidth)
         }
       }
     },
-    [isResizing]
+    [isResizing, setTargetWidth]
   )
 
   useEffect(() => {
@@ -46,29 +53,63 @@ export function DraggableSidebar(): JSX.Element {
   }, [resize, stopResizing])
 
   return (
-    <SidebarContainer ref={sidebarRef} width={sidebarWidth}>
-      <SidebarContent>
-        <TimelineToolbox sidebarWidth={sidebarWidth} />
-      </SidebarContent>
+    <SidebarContainer ref={sidebarRef} resizedWidth={sidebarWidth}>
+      {/* <SidebarContent> */}
+      <TimelineToolbox sidebarWidth={sidebarWidth} />
+      {/* </SidebarContent> */}
       <SidebarResizer dragging={isResizing} onMouseDown={startResizing} />
     </SidebarContainer>
   )
 }
 
-const SidebarContainer = styled(Flex)<{ width: number }>`
+// const SidebarContainer = styled(Flex)<{ resizedWidth: number }>`
+//   display: ${DISPLAY_FLEX};
+//   flex-direction: ${DIRECTION_COLUMN};
+//   background-color: #f4f4f4;
+//   border-right: 1px solid #ccc;
+//   position: relative;
+//   width: ${props => props.resizedWidth}px;
+//   overflow: hidden;
+//   height: 100%;
+// `
+
+const SidebarContainer = styled(Flex)<{ resizedWidth: number }>`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_COLUMN};
   background-color: #f4f4f4;
   border-right: 1px solid #ccc;
   position: relative;
-  width: ${props => props.width}px;
-  /* width: 100%; */
-  overflow: hidden;
+  width: ${props => props.resizedWidth}px;
+  overflow: hidden; /* Prevent content overflow */
+  height: 100%;
+  margin: 0; /* Ensure no margins */
+  padding: 0; /* Ensure no padding */
 `
 
-const SidebarContent = styled(Flex)`
-  flex: 1;
-`
+// const SidebarContent = styled(Flex)`
+//   flex: 1;
+// `
+
+// const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
+//   width: 0.3125rem;
+//   cursor: ew-resize;
+//   background-color: #ddd;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+//   bottom: 0;
+//   transition: background-color 0.2s ease;
+
+//   &:hover {
+//     background-color: blue; /* Hover state */
+//   }
+
+//   ${props =>
+//     props.dragging === true &&
+//     `
+//     background-color: darkblue; /* Dragging state */
+//   `}
+// `
 
 const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
   width: 0.3125rem;
@@ -78,6 +119,8 @@ const SidebarResizer = styled(Flex)<{ dragging: boolean }>`
   top: 0;
   right: 0;
   bottom: 0;
+  margin: 0;
+  padding: 0;
   transition: background-color 0.2s ease;
 
   &:hover {

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -215,7 +215,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           role="button"
           onDoubleClick={onDoubleClick}
           onClick={onClick}
-          padding={`${SPACING.spacing8} ${SPACING.spacing12}`}
+          padding={`${SPACING.spacing4} ${SPACING.spacing12}`}
           borderRadius={BORDERS.borderRadius8}
           width="100%"
           backgroundColor={backgroundColor}
@@ -226,7 +226,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
-            height="1.75rem"
+            height="1.9375rem"
           >
             <Flex
               alignItems={ALIGN_CENTER}

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -1,15 +1,20 @@
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+
 import {
   ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  DIRECTION_ROW,
   FLEX_MAX_CONTENT,
   Flex,
   JUSTIFY_CENTER,
+  JUSTIFY_END,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_FIXED,
+  POSITION_RELATIVE,
   SPACING,
   StyledText,
   Tag,
@@ -57,6 +62,7 @@ export function ProtocolSteps(): JSX.Element {
   const [deckView, setDeckView] = useState<
     typeof leftString | typeof rightString
   >(leftString)
+  const [targetWidth, setTargetWidth] = useState<number>(350)
 
   const currentHoveredStepId = useSelector(getHoveredStepId)
   const currentSelectedStepId = useSelector(getSelectedStepId)
@@ -75,6 +81,7 @@ export function ProtocolSteps(): JSX.Element {
     hasTimelineErrors && tab === 'protocolSteps' && formData == null
   const stepDetails = currentStep?.stepDetails ?? null
 
+  console.log('targetWidth', targetWidth)
   return (
     <Flex
       backgroundColor={COLORS.grey10}
@@ -83,15 +90,37 @@ export function ProtocolSteps(): JSX.Element {
       width="100%"
       padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      // justifyContent={JUSTIFY_SPACE_BETWEEN}
+      id="container for sidebar and main"
     >
-      <DraggableSidebar />
       <Flex
+        // width="100%"
+        // minWidth="100%"
+        flex="1"
+        id="sidebar"
+        css={css`
+          outline: 1px solid red;
+        `}
+        height="100%"
+      >
+        <DraggableSidebar setTargetWidth={setTargetWidth} />
+      </Flex>
+      <Flex
+        backgroundColor={COLORS.blue35}
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
-        width="100%"
+        flex="2.85"
+        // width="82.3%"
+        // maxWidth="100%"
+        // minWidth="82.3%"
+        // maxwidth={targetWidth === null ? '100%' : `calc(100% - ${targetWidth})`}
+        id="main"
+        css={css`
+          outline: 1px solid blue;
+        `}
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
+        position={POSITION_RELATIVE}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
@@ -142,11 +171,15 @@ export function ProtocolSteps(): JSX.Element {
         </Flex>
         {enableHoyKeyDisplay ? (
           <Flex
+            id="hotkey-display"
             position={POSITION_FIXED}
-            left="21rem"
+            left={`calc(1.5rem + ${targetWidth}px)`}
             bottom="0.75rem"
-            gridGap={SPACING.spacing6}
+            gridGap={SPACING.spacing4}
             flexDirection={DIRECTION_COLUMN}
+            css={css`
+              outline: 1px solid orange;
+            `}
           >
             <Tag
               text={t('double_click_to_edit')}