Merge branch 'imprv/omit-atlaskit' into feat/db-sync-ui-settings

packages/app/src/components/Sidebar.tsx

@@ -15,6 +15,7 @@ import DrawerToggler from './Navbar/DrawerToggler';
 import SidebarNav from './Sidebar/SidebarNav';
 import SidebarContents from './Sidebar/SidebarContents';
 import { scheduleToPutUserUISettings } from '~/services/user-ui-settings';
+import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
@@ -106,7 +107,7 @@ const Sidebar: FC<Props> = (props: Props) => {
   const [isDragging, setDrag] = useState(false);
   const [isMounted, setMounted] = useState(false);
 
-  const isResizableByDrag = !isDrawerMode && (!isCollapsed || isHover);
+  const isResizableByDrag = !isResizeDisabled && !isDrawerMode && (!isCollapsed || isHover);
   /**
    * hack and override UIController.storeState
    *
@@ -249,15 +250,16 @@ const Sidebar: FC<Props> = (props: Props) => {
     }
     else {
       const newWidth = resizableContainer.current.clientWidth;
+      mutateSidebarCollapsed(false);
       mutateProductNavWidth(newWidth, false);
-      scheduleToPutUserUISettings({ currentProductNavWidth: newWidth });
+      scheduleToPutUserUISettings({ isSidebarCollapsed: false, currentProductNavWidth: newWidth });
     }
 
     resizableContainer.current.classList.remove('dragging');
 
   }, [mutateProductNavWidth, mutateSidebarCollapsed]);
 
-  const dragableAreaMouseDownHandler = useCallback((event: MouseEvent) => {
+  const dragableAreaMouseDownHandler = useCallback((event: React.MouseEvent) => {
     if (!isResizableByDrag) {
       return;
     }
@@ -301,12 +303,14 @@ const Sidebar: FC<Props> = (props: Props) => {
               </div>
             </div>
             <div className="grw-navigation-draggable">
-              <div
-                className={`${isResizableByDrag ? 'resizable' : ''} grw-navigation-draggable-hitarea`}
-                onMouseDown={dragableAreaMouseDownHandler}
-              >
-                <div className="grw-navigation-draggable-hitarea-child"></div>
-              </div>
+              { isResizableByDrag && (
+                <div
+                  className="grw-navigation-draggable-hitarea"
+                  onMouseDown={dragableAreaMouseDownHandler}
+                >
+                  <div className="grw-navigation-draggable-hitarea-child"></div>
+                </div>
+              ) }
               <button
                 className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapsed' : ''} `}
                 type="button"
@@ -315,9 +319,8 @@ const Sidebar: FC<Props> = (props: Props) => {
                 disabled={isDrawerMode}
                 onClick={toggleNavigationBtnClickHandler}
               >
-                <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 className="hexagon-container" role="presentation">
+                  <NavigationResizeHexagon />
                 </span>
                 <span className="hitarea" role="presentation"></span>
               </button>

packages/app/src/components/Sidebar/NavigationResizeHexagon.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+type Props = {
+
+};
+
+export const NavigationResizeHexagon: FC<Props> = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 27.691 23.999"
+  >
+    <g className="background" transform="translate(0 0)">
+      <path d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z" transform="translate(0)"></path>
+    </g>
+    <g className="icon" transform="translate(10 6)">
+      { /* eslint-disable-next-line max-len */ }
+      <path d="M2.124,9.114l5.28,5.34a.647.647,0,0,0,.922,0l.616-.623a.665.665,0,0,0,0-.932L4.759,8.648,8.943,4.4a.665.665,0,0,0,0-.932l-.616-.623a.647.647,0,0,0-.922,0l-5.28,5.34A.665.665,0,0,0,2.124,9.114Z" transform="translate(-1.933 -2.648)"></path>
+    </g>
+  </svg>
+);

packages/app/src/styles/_sidebar.scss

@@ -25,29 +25,40 @@
   .grw-navigation-resize-button {
     position: fixed;
 
-    $size: 24px;
+    $width: 27.691px;
+    $height: 23.999px;
 
     // locate to the center of screen
-    top: calc(50vh - 20px);
+    top: calc(50vh - $height/2);
 
-    width: $size;
-    height: $size;
     padding: 0px;
+    background-color: transparent;
     border: 0;
     opacity: 0;
-    transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
+    transition: 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);
+    .hexagon-container {
+      // set transform
+      svg * {
+        transition: fill 100ms linear;
+      }
+      svg {
+        width: $width + 2px; // add 1px for drop-shadow
+        height: $height + 2px; // add 1px for drop-shadow
+        .background {
+          filter: drop-shadow(0px 1px 0px rgba(#999, 60%));
+        }
+      }
     }
     .hitarea {
       @extend .rounded-pill;
 
-      $size-hitarea: $size * 2.5;
+      $size-hitarea: 80px;
+
       position: absolute;
-      top: ($size - $size-hitarea) / 2;
-      left: ($size - $size-hitarea) / 2;
+      top: ($width - $size-hitarea) / 2;
+      left: ($height - $size-hitarea) / 2;
       width: $size-hitarea;
       height: $size-hitarea;
     }
@@ -55,13 +66,15 @@
     // reverse and center icon at the time of collapsed
     &.collapsed {
       opacity: 1;
-      .icon-container {
+      .hexagon-container svg {
         transform: rotate(180deg);
       }
     }
   }
-  &:hover .grw-navigation-resize-button {
-    opacity: 1;
+  &:hover {
+    .grw-navigation-resize-button {
+      opacity: 1;
+    }
   }
 
   // override @atlaskit/navigation-next styles
@@ -100,8 +113,6 @@
           min-width: 240px;
           height: 100%;
           overflow-x: hidden;
-          color: rgb(66, 82, 110);
-          background-color: rgb(244, 245, 247);
           transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
           transition-duration: 0.22s;
           transition-property: boxShadow, transform;
@@ -143,7 +154,7 @@
         transition-duration: 0.22s;
         transition-property: left, opacity, width;
       }
-      .resizable.grw-navigation-draggable-hitarea {
+      .grw-navigation-draggable-hitarea {
         position: relative;
         left: -4px;
         width: 24px;
@@ -166,7 +177,6 @@
   }
 
   .grw-sidebar-nav {
-    min-width: 62px;
     height: 100vh;
 
     .btn {

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

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