add prop for reversing the shade of the Handle, and stop overlap with…

… scrollbar & iframe
storybookjs · Mar 16, 2022 · 534cf62 · 534cf62
1 parent f625d62
commit 534cf62
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 72 deletions.
diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
@@ -31,16 +31,16 @@ const Pane = styled.div<{
   ({ hidden }) =>
     hidden
       ? {
-          opacity: 0,
-        }
+        opacity: 0,
+      }
       : {
-          opacity: 1,
-        },
+        opacity: 1,
+      },
   ({ top }) =>
     top
       ? {
-          zIndex: 9,
-        }
+        zIndex: 9,
+      }
       : {},
   ({ border, theme }) => {
     switch (border) {
@@ -72,10 +72,10 @@ const Pane = styled.div<{
   ({ animate }) =>
     animate
       ? {
-          transition: ['width', 'height', 'top', 'left', 'background', 'opacity', 'transform']
-            .map((p) => `${p} 0.1s ease-out`)
-            .join(','),
-        }
+        transition: ['width', 'height', 'top', 'left', 'background', 'opacity', 'transform']
+          .map((p) => `${p} 0.1s ease-out`)
+          .join(','),
+      }
       : {}
 );
 
@@ -90,14 +90,14 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
   ({ isFullscreen, theme }) =>
     isFullscreen
       ? {
-          boxShadow: 'none',
-          borderRadius: 0,
-        }
+        boxShadow: 'none',
+        borderRadius: 0,
+      }
       : {
-          borderRadius: theme.appBorderRadius,
-          overflow: 'hidden',
-          boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
-        }
+        borderRadius: theme.appBorderRadius,
+        overflow: 'hidden',
+        boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
+      }
 );
 
 export const Sidebar: FunctionComponent<{ hidden: boolean; position: CSSProperties }> = ({
@@ -195,17 +195,17 @@ const getPreviewPosition = ({
 
   return panelPosition === 'bottom'
     ? {
-        height: panelY - margin,
-        left: 0,
-        top: 0,
-        width: bounds.width - navX - 2 * margin,
-      }
+      height: panelY - margin,
+      left: 0,
+      top: 0,
+      width: bounds.width - navX - 2 * margin,
+    }
     : {
-        height: bounds.height - 2 * margin,
-        left: 0,
-        top: 0,
-        width: panelX - navX - margin,
-      };
+      height: bounds.height - 2 * margin,
+      left: 0,
+      top: 0,
+      width: panelX - navX - margin,
+    };
 };
 
 const getMainPosition = ({
@@ -275,17 +275,17 @@ const getPanelPosition = ({
 
   return isPanelBottom
     ? {
-        height: bounds.height - panelY - margin,
-        left: 0,
-        top: panelY - margin,
-        width: bounds.width - navX - 2 * margin,
-      }
+      height: bounds.height - panelY - margin,
+      left: 0,
+      top: panelY - margin,
+      width: bounds.width - navX - 2 * margin,
+    }
     : {
-        height: bounds.height - 2 * margin,
-        left: panelX - navX - margin,
-        top: 0,
-        width: bounds.width - panelX - margin,
-      };
+      height: bounds.height - 2 * margin,
+      left: panelX - navX - margin,
+      top: 0,
+      width: bounds.width - panelX - margin,
+    };
 };
 
 export interface BasePanelRenderProps {
@@ -542,17 +542,17 @@ class Layout extends Component<LayoutProps, LayoutState> {
             bounds={
               isPanelBottom
                 ? {
-                    left: 0,
-                    top: MIN_CANVAS_HEIGHT,
-                    right: 0,
-                    bottom: bounds.height - MIN_PANEL_HEIGHT,
-                  }
+                  left: 0,
+                  top: MIN_CANVAS_HEIGHT,
+                  right: 0,
+                  bottom: bounds.height - MIN_PANEL_HEIGHT,
+                }
                 : {
-                    left: isNavHidden ? MIN_CANVAS_WIDTH : navX + MIN_CANVAS_WIDTH,
-                    top: 0,
-                    right: bounds.width - MIN_PANEL_WIDTH,
-                    bottom: 0,
-                  }
+                  left: isNavHidden ? MIN_CANVAS_WIDTH : navX + MIN_CANVAS_WIDTH,
+                  top: 0,
+                  right: bounds.width - MIN_PANEL_WIDTH,
+                  bottom: 0,
+                }
             }
             onStart={this.setDragPanel}
             onDrag={this.resizePanel}
@@ -563,13 +563,16 @@ class Layout extends Component<LayoutProps, LayoutState> {
               style={
                 isPanelBottom
                   ? {
-                      left: navX + margin,
-                      width: bounds.width - navX - 2 * margin,
-                      marginTop: -margin,
-                    }
-                  : {}
+                    left: navX + margin,
+                    width: bounds.width - navX - 2 * margin,
+                    marginTop: -margin,
+                  }
+                  : {
+                    marginLeft: 1,
+                  }
               }
               axis={isPanelBottom ? 'y' : 'x'}
+              reverse={true}
             />
           </Draggable>
         )}

diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 
 export type Axis = 'x' | 'y';
 
-const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
+const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }>(
   ({ theme, isDragging }) => ({
     zIndex: 10,
     position: 'absolute',
@@ -17,7 +17,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
 
     overflow: 'hidden',
     transition:
-      'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
+      'color 0.2s linear, background-size 0.2s linear, background 0.2s linear, background-position 0s linear',
     '&:hover': {
       color: theme.color.secondary,
     },
@@ -28,16 +28,16 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
   ({ theme, axis }) =>
     axis === 'x'
       ? {
-          height: '100%',
-          width: theme.layoutMargin,
-          marginLeft: 0,
-        }
+        height: '100%',
+        width: theme.layoutMargin,
+        marginLeft: 0,
+      }
       : {
-          height: theme.layoutMargin,
-          width: '100%',
-          marginTop: 0,
-        },
-  ({ axis, isDragging }) => {
+        height: theme.layoutMargin,
+        width: '100%',
+        marginTop: 0,
+      },
+  ({ axis, isDragging, reverse = false }) => {
     if (axis === 'y') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
@@ -48,25 +48,25 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
       return isDragging
         ? style
         : {
-            ...style,
-            backgroundPosition: '50% 10px',
-            '&:hover': style,
-          };
+          ...style,
+          backgroundPosition: '50% 10px',
+          '&:hover': style,
+        };
     }
     if (axis === 'x') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
         backgroundSize: '50px 100%',
-        backgroundPosition: '0 50%',
+        backgroundPosition: reverse ? '100% 50%' : '0 50%',
         backgroundRepeat: 'no-repeat',
       };
       return isDragging
         ? style
         : {
-            ...style,
-            backgroundPosition: '10px 50%',
-            '&:hover': style,
-          };
+          ...style,
+          backgroundPosition: '10px 50%',
+          '&:hover': style,
+        };
     }
     return {};
   }