Merge branch 'imprv/omit-atlaskit' into feat/enable-drawer-mode

packages/app/src/components/Sidebar.tsx

@@ -102,6 +102,11 @@ const Sidebar: FC<Props> = (props: Props) => {
   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
   const { data: isResizeDisabled, mutate: mutateSidebarResizeDisabled } = useSidebarResizeDisabled();
 
+  const [isHover, setHover] = useState(false);
+  const [isDragging, setDrag] = useState(false);
+  const [isMounted, setMounted] = useState(false);
+
+  const isResizableByDrag = !isDrawerMode && (!isCollapsed || isHover);
   /**
    * hack and override UIController.storeState
    *
@@ -169,8 +174,6 @@ const Sidebar: FC<Props> = (props: Props) => {
     mutateDrawerOpened(false, false);
   }, [mutateDrawerOpened]);
 
-  const [isMounted, setMounted] = useState(false);
-
   useEffect(() => {
     // this.hackUIController();
     setMounted(true);
@@ -180,9 +183,6 @@ const Sidebar: FC<Props> = (props: Props) => {
     toggleDrawerMode(isDrawerMode);
   }, [isDrawerMode, toggleDrawerMode]);
 
-  const [isHover, setHover] = useState(false);
-  const [isDragging, setDrag] = useState(false);
-
   const resizableContainer = useRef<HTMLDivElement>(null);
   const setContentWidth = useCallback((newWidth) => {
     if (resizableContainer.current == null) {
@@ -191,20 +191,23 @@ const Sidebar: FC<Props> = (props: Props) => {
     resizableContainer.current.style.width = `${newWidth}px`;
   }, []);
 
-  const hoverHandler = useCallback((isHover: boolean) => {
-    if (!isCollapsed || isDrawerMode) {
+  const hoverOnResizableContainerHandler = useCallback(() => {
+    if (!isCollapsed || isDrawerMode || isDragging) {
       return;
     }
 
-    setHover(isHover);
+    setHover(true);
+    setContentWidth(currentProductNavWidth);
+  }, [isCollapsed, isDrawerMode, isDragging, setContentWidth, currentProductNavWidth]);
 
-    if (isHover) {
-      setContentWidth(currentProductNavWidth);
-    }
-    if (!isHover) {
-      setContentWidth(sidebarMinimizeWidth);
+  const hoverOutHandler = useCallback(() => {
+    if (!isCollapsed || isDrawerMode || isDragging) {
+      return;
     }
-  }, [isCollapsed, isDrawerMode, setContentWidth, currentProductNavWidth]);
+
+    setHover(false);
+    setContentWidth(sidebarMinimizeWidth);
+  }, [isCollapsed, isDragging, isDrawerMode, setContentWidth]);
 
   const toggleNavigationBtnClickHandler = useCallback(() => {
     const newValue = !isCollapsed;
@@ -221,16 +224,15 @@ const Sidebar: FC<Props> = (props: Props) => {
     }
   }, [currentProductNavWidth, isCollapsed, setContentWidth]);
 
-  const draggableAreaMoveHandler = useCallback((event) => {
-    if (isDragging) {
-      event.preventDefault();
-      const newWidth = event.pageX - 60;
-      if (resizableContainer.current != null) {
-        setContentWidth(newWidth);
-        resizableContainer.current.classList.add('dragging');
-      }
+  const draggableAreaMoveHandler = useCallback((event: MouseEvent) => {
+    event.preventDefault();
+
+    const newWidth = event.pageX - 60;
+    if (resizableContainer.current != null) {
+      setContentWidth(newWidth);
+      resizableContainer.current.classList.add('dragging');
     }
-  }, [isDragging, setContentWidth]);
+  }, [setContentWidth]);
 
   const dragableAreaMouseUpHandler = useCallback(() => {
     if (resizableContainer.current == null) {
@@ -241,7 +243,7 @@ const Sidebar: FC<Props> = (props: Props) => {
 
     if (resizableContainer.current.clientWidth < sidebarMinWidth) {
       // force collapsed
-      mutateSidebarCollapsed(true, false);
+      mutateSidebarCollapsed(true);
       mutateProductNavWidth(sidebarMinWidth, false);
       scheduleToPutUserUISettings({ isSidebarCollapsed: true, currentProductNavWidth: sidebarMinWidth });
     }
@@ -253,28 +255,34 @@ const Sidebar: FC<Props> = (props: Props) => {
 
     resizableContainer.current.classList.remove('dragging');
 
-    document.removeEventListener('mousemove', draggableAreaMoveHandler);
-    document.removeEventListener('mouseup', dragableAreaMouseUpHandler);
-
-  }, [draggableAreaMoveHandler, mutateProductNavWidth, mutateSidebarCollapsed]);
+  }, [mutateProductNavWidth, mutateSidebarCollapsed]);
 
-  const dragableAreaClickHandler = useCallback(() => {
-    if (isCollapsed || isDrawerMode) {
+  const dragableAreaMouseDownHandler = useCallback((event: MouseEvent) => {
+    if (!isResizableByDrag) {
       return;
     }
+
+    event.preventDefault();
+
     setDrag(true);
-  }, [isCollapsed, isDrawerMode]);
 
-  useEffect(() => {
+    const removeEventListeners = () => {
+      document.removeEventListener('mousemove', draggableAreaMoveHandler);
+      document.removeEventListener('mouseup', dragableAreaMouseUpHandler);
+      document.removeEventListener('mouseup', removeEventListeners);
+    };
+
     document.addEventListener('mousemove', draggableAreaMoveHandler);
     document.addEventListener('mouseup', dragableAreaMouseUpHandler);
-  }, [draggableAreaMoveHandler, dragableAreaMouseUpHandler]);
+    document.addEventListener('mouseup', removeEventListeners);
+
+  }, [dragableAreaMouseUpHandler, draggableAreaMoveHandler, isResizableByDrag]);
 
   return (
     <>
       <div className={`grw-sidebar d-print-none ${isDrawerMode ? 'grw-sidebar-drawer' : ''} ${isDrawerOpened ? 'open' : ''}`}>
         <div className="data-layout-container">
-          <div className="navigation">
+          <div className="navigation" onMouseLeave={hoverOutHandler}>
             <div className="grw-navigation-wrap">
               <div className="grw-global-navigation">
                 { isMounted ? <GlobalNavigation></GlobalNavigation> : <GlobalNavigationSkelton></GlobalNavigationSkelton> }
@@ -282,10 +290,7 @@ const Sidebar: FC<Props> = (props: Props) => {
               <div
                 ref={resizableContainer}
                 className="grw-contextual-navigation"
-                onMouseEnter={() => hoverHandler(true)}
-                onMouseLeave={() => hoverHandler(false)}
-                onMouseMove={draggableAreaMoveHandler}
-                onMouseUp={dragableAreaMouseUpHandler}
+                onMouseEnter={hoverOnResizableContainerHandler}
                 style={{ width: isCollapsed ? sidebarMinimizeWidth : currentProductNavWidth }}
               >
                 <div className="grw-contextual-navigation-child">
@@ -297,22 +302,24 @@ const Sidebar: FC<Props> = (props: Props) => {
             </div>
             <div className="grw-navigation-draggable">
               <div
-                className={`${!isDrawerMode ? 'resizable' : ''} grw-navigation-draggable-hitarea`}
-                onMouseDown={dragableAreaClickHandler}
+                className={`${isResizableByDrag ? 'resizable' : ''} grw-navigation-draggable-hitarea`}
+                onMouseDown={dragableAreaMouseDownHandler}
               >
                 <div className="grw-navigation-draggable-hitarea-child"></div>
               </div>
               <button
-                className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapse-state' : 'normal-state'} `}
+                className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapsed' : ''} `}
                 type="button"
                 aria-expanded="true"
                 aria-label="Toggle navigation"
                 disabled={isDrawerMode}
                 onClick={toggleNavigationBtnClickHandler}
               >
-                <span role="presentation">
-                  <i className="ml-1 fa fa-fw fa-angle-left text-white"></i>
+                <span className="background" role="presentation"></span>
+                <span className="icon-container" role="presentation">
+                  <i className="fa fa-fw fa-angle-left text-white" role="presentation"></i>
                 </span>
+                <span className="hitarea" role="presentation"></span>
               </button>
             </div>
           </div>

packages/app/src/styles/_mixins.scss

@@ -110,118 +110,6 @@
   }
 }
 
-/*
- * see: https://gist.github.com/bjmiller121/902745cbb38d88178882
- *
- * Makes a CSS hexagon! based off of http://csshexagon.com/
- * Demo: http://sassmeister.com/gist/98fcf3ce163a97d2ef7e
- */
-@mixin hexagonize($size, $color, $box-shadow: 0, $border: 0) {
-  width: $size;
-  height: ($size * 0.577);
-  margin: ($size * 0.288) 0;
-  background-color: $color;
-  border-right: $border;
-  border-left: $border;
-
-  @if $box-shadow != 0 {
-    box-shadow: $box-shadow;
-  }
-
-  &:before,
-  &:after {
-    position: absolute;
-    content: '';
-
-    @if $border == 0 and $box-shadow == 0 {
-      left: 0;
-      width: 0;
-      border-right: ($size/2) solid transparent;
-      border-left: ($size/2) solid transparent;
-    } @else {
-      left: ($size * 0.129);
-      z-index: 1;
-      width: ($size * 0.707);
-      height: ($size * 0.707);
-      background-color: inherit;
-      transform: scaleY(0.6) rotate(-45deg);
-    }
-
-    @if $box-shadow != 0 {
-      box-shadow: $box-shadow;
-    }
-  }
-
-  &:before {
-    @if $border == 0 and $box-shadow == 0 {
-      bottom: 99%;
-      border-bottom: ($size * 0.288) solid $color;
-    } @else {
-      top: -($size * 0.353);
-    }
-
-    @if $border != 0 {
-      border-top: $border;
-      border-right: $border;
-    }
-  }
-
-  &:after {
-    @if $border == 0 and $box-shadow == 0 {
-      top: 99%;
-      width: 0;
-      border-top: ($size * 0.288) solid $color;
-    } @else {
-      bottom: -($size * 0.353);
-    }
-
-    @if $border != 0 {
-      border-bottom: $border;
-      border-left: $border;
-    }
-  }
-
-  @if $box-shadow != 0 {
-    > span {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-
-      &:after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: $size;
-        height: $size * 0.577;
-        content: '';
-        background-color: $color;
-      }
-    }
-  }
-}
-
-@mixin override-hexagon-color($color, $bgcolor) {
-  background-color: $bgcolor;
-  transition: background-color 200ms linear, color 100ms linear, opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);
-
-  &:before {
-    border-bottom-color: $bgcolor;
-    transition: border-bottom-color 200ms linear;
-  }
-  &:after {
-    border-top-color: $bgcolor;
-    transition: border-top-color 200ms linear;
-  }
-  > span:after {
-    background-color: $bgcolor;
-    transition: background-color 200ms linear;
-  }
-  svg path {
-    fill: $color;
-  }
-}
-
 @mixin apply-navigation-transition() {
   transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
   transition-duration: 300ms;

packages/app/src/styles/_sidebar.scss

@@ -25,31 +25,44 @@
   .grw-navigation-resize-button {
     position: fixed;
 
+    $size: 24px;
+
     // locate to the center of screen
     top: calc(50vh - 20px);
 
-    $box-shadow: 0 0 0 0 rgba(96, 96, 96, 0.75);
-    @include hexagonize(24px, white, $box-shadow);
-
-    // rotate 30deg
-    transform: translate(-50%) rotate(30deg);
-    > span {
-      top: -2px;
-      transform: rotate(-30deg);
-      &::after {
-        // override
-        content: none;
-      }
+    width: $size;
+    height: $size;
+    padding: 0px;
+    border: 0;
+    opacity: 0;
+    transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
+    transform: translateX(-50%);
+
+    .background {
+      $box-shadow: 0 0 0 0 rgba(96, 96, 96, 0.75);
+    }
+    .hitarea {
+      @extend .rounded-pill;
+
+      $size-hitarea: $size * 2.5;
+      position: absolute;
+      top: ($size - $size-hitarea) / 2;
+      left: ($size - $size-hitarea) / 2;
+      width: $size-hitarea;
+      height: $size-hitarea;
     }
 
     // reverse and center icon at the time of collapsed
-    &.collapse-state {
-      > span {
-        left: 2px;
-        transform: rotate(-210deg);
+    &.collapsed {
+      opacity: 1;
+      .icon-container {
+        transform: rotate(180deg);
       }
     }
   }
+  &:hover .grw-navigation-resize-button {
+    opacity: 1;
+  }
 
   // override @atlaskit/navigation-next styles
   $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
@@ -65,15 +78,6 @@
     }
   }
   .navigation {
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    z-index: 200;
-    &:hover .grw-navigation-resize-button.resizable.normal-state {
-      cursor: pointer;
-      opacity: 1;
-    }
     .grw-navigation-wrap {
       display: flex;
       flex-direction: row;
@@ -319,40 +323,3 @@
 .grw-sidebar-backdrop.modal-backdrop {
   z-index: $zindex-fixed + 1;
 }
-
-.collapse-state {
-  position: absolute;
-  top: 32px;
-  width: 24px;
-  height: 24px;
-  padding: 0px;
-  color: rgb(107, 119, 140);
-  cursor: pointer;
-  background: 0px center white;
-  border: 0px;
-  border-radius: 50%;
-  outline: 0px;
-  box-shadow: rgb(9 30 66 / 8%) 0px 0px 0px 1px, rgb(9 30 66 / 8%) 0px 2px 4px 1px;
-  opacity: 1;
-  transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s,
-    transform 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
-  transform: translate(-50%);
-}
-
-.normal-state {
-  position: absolute;
-  top: 32px;
-  width: 24px;
-  height: 24px;
-  padding: 0px;
-  color: rgb(107, 119, 140);
-  /* background: 0px center white; */
-  border: 0px;
-  border-radius: 50%;
-  outline: 0px;
-  box-shadow: rgb(9 30 66 / 8%) 0px 0px 0px 1px, rgb(9 30 66 / 8%) 0px 2px 4px 1px;
-  opacity: 0;
-  transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s,
-    transform 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
-  transform: translate(-50%);
-}

packages/app/src/styles/theme/_apply-colors.scss

@@ -223,11 +223,7 @@ ul.pagination {
     $color-resize-button-hover: $color-reversal !default;
     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
 
-    @include override-hexagon-color($color-resize-button, $bgcolor-resize-button);
-
-    &:hover {
-      @include override-hexagon-color($color-resize-button-hover, $bgcolor-resize-button-hover);
-    }
+    // TODO fill color
   }
   div.grw-global-navigation {
     > div {