Merge pull request #1034 from scm-manager/feature/ui_utilization

ui utilization

scm-ui/ui-components/src/navigation/MenuContext.ts

@@ -0,0 +1,15 @@
+import React from "react";
+
+const MENU_COLLAPSED = "secondary-menu-collapsed";
+
+export const MenuContext = React.createContext({
+  menuCollapsed: isMenuCollapsed(),
+  setMenuCollapsed: (collapsed: boolean) => {}
+});
+
+export function isMenuCollapsed() {
+  return localStorage.getItem(MENU_COLLAPSED) === "true";
+}
+export function storeMenuCollapsed(status: boolean) {
+  localStorage.setItem(MENU_COLLAPSED, String(status));
+}

scm-ui/ui-components/src/navigation/NavLink.tsx

@@ -10,6 +10,8 @@ type Props = {
   label: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
+  collapsed?: boolean;
+  title?: string;
 };
 
 class NavLink extends React.Component<Props> {
@@ -23,7 +25,7 @@ class NavLink extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, icon, label } = this.props;
+    const { to, icon, label, collapsed, title } = this.props;
 
     let showIcon = null;
     if (icon) {
@@ -35,10 +37,13 @@ class NavLink extends React.Component<Props> {
     }
 
     return (
-      <li>
-        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+      <li title={collapsed ? title : undefined}>
+        <Link
+          className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
+          to={to}
+        >
           {showIcon}
-          {label}
+          {collapsed ? null : label}
         </Link>
       </li>
     );

scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx

@@ -0,0 +1,110 @@
+import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
+import styled from "styled-components";
+import SubNavigation from "./SubNavigation";
+import { matchPath, useLocation } from "react-router-dom";
+import { isMenuCollapsed, MenuContext } from "./MenuContext";
+
+type Props = {
+  label: string;
+  children: ReactElement[];
+  collapsed: boolean;
+  onCollapse?: (newStatus: boolean) => void;
+};
+
+type CollapsedProps = {
+  collapsed: boolean;
+};
+
+const SectionContainer = styled.aside<CollapsedProps>`
+  position: sticky;
+  position: -webkit-sticky; /* Safari */
+  top: 2rem;
+  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
+`;
+
+const Icon = styled.i<CollapsedProps>`
+  padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
+  padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.4rem")};
+  height: 1.5rem;
+  font-size: 24px;
+  margin-top: -0.75rem;
+`;
+
+const MenuLabel = styled.p<CollapsedProps>`
+  height: 3.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
+  cursor: pointer;
+`;
+
+const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
+  const location = useLocation();
+  const menuContext = useContext(MenuContext);
+
+  const subNavActive = isSubNavigationActive(children, location.pathname);
+  const isCollapsed = collapsed && !subNavActive;
+
+  useEffect(() => {
+    if (isMenuCollapsed()) {
+      menuContext.setMenuCollapsed(!subNavActive);
+    }
+  }, [subNavActive]);
+
+  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
+    React.cloneElement(child, { collapsed: isCollapsed })
+  );
+  const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
+
+  return (
+    <SectionContainer className="menu" collapsed={isCollapsed}>
+      <div>
+        <MenuLabel
+          className="menu-label"
+          collapsed={isCollapsed}
+          onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
+        >
+          {onCollapse && !subNavActive && (
+            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
+              {arrowIcon}
+            </Icon>
+          )}
+          {isCollapsed ? "" : label}
+        </MenuLabel>
+        <ul className="menu-list">{childrenWithProps}</ul>
+      </div>
+    </SectionContainer>
+  );
+};
+
+const createParentPath = (to: string) => {
+  const parents = to.split("/");
+  parents.splice(-1, 1);
+  return parents.join("/");
+};
+
+const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
+  const childArray = React.Children.toArray(children);
+  const match = childArray
+    .filter(child => {
+      // what about extension points?
+      // @ts-ignore
+      return child.type.name === SubNavigation.name;
+    })
+    .map(child => {
+      // @ts-ignore
+      return child.props;
+    })
+    .find(props => {
+      const path = createParentPath(props.to);
+      const matches = matchPath(url, {
+        path,
+        exact: props.activeOnlyWhenExact as boolean
+      });
+      return matches != null;
+    });
+
+  return match != null;
+};
+
+export default SecondaryNavigation;

scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement, ReactNode } from "react";
+import { MenuContext } from "./MenuContext";
+import SubNavigation from "./SubNavigation";
+import NavLink from "./NavLink";
+
+type Props = {
+  to: string;
+  icon: string;
+  label: string;
+  title: string;
+  activeWhenMatch?: (route: any) => boolean;
+  activeOnlyWhenExact?: boolean;
+  children?: ReactElement[];
+};
+
+export default class SecondaryNavigationItem extends React.Component<Props> {
+  render() {
+    const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
+    if (children) {
+      return (
+        <MenuContext.Consumer>
+          {({ menuCollapsed }) => (
+            <SubNavigation
+              to={to}
+              icon={icon}
+              label={label}
+              title={title}
+              activeWhenMatch={activeWhenMatch}
+              activeOnlyWhenExact={activeOnlyWhenExact}
+              collapsed={menuCollapsed}
+            >
+              {children}
+            </SubNavigation>
+          )}
+        </MenuContext.Consumer>
+      );
+    } else {
+      return (
+        <MenuContext.Consumer>
+          {({ menuCollapsed }) => <NavLink to={to} icon={icon} label={label} title={title} collapsed={menuCollapsed} />}
+        </MenuContext.Consumer>
+      );
+    }
+  }
+}

scm-ui/ui-components/src/navigation/Section.tsx

@@ -1,20 +0,0 @@
-import React, { ReactNode } from "react";
-
-type Props = {
-  label: string;
-  children?: ReactNode;
-};
-
-class Section extends React.Component<Props> {
-  render() {
-    const { label, children } = this.props;
-    return (
-      <div>
-        <p className="menu-label">{label}</p>
-        <ul className="menu-list">{children}</ul>
-      </div>
-    );
-  }
-}
-
-export default Section;

scm-ui/ui-components/src/navigation/SubNavigation.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
-import { Link, Route } from "react-router-dom";
+import React, { FC, ReactElement, useContext, useEffect } from "react";
+import { Link, useRouteMatch } from "react-router-dom";
 import classNames from "classnames";
 
 type Props = {
@@ -8,52 +8,39 @@ type Props = {
   label: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
-  children?: ReactNode;
+  children?: ReactElement[];
+  collapsed?: boolean;
+  title?: string;
 };
 
-class SubNavigation extends React.Component<Props> {
-  static defaultProps = {
-    activeOnlyWhenExact: false
-  };
+const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
+  const parents = to.split("/");
+  parents.splice(-1, 1);
+  const parent = parents.join("/");
 
-  isActive(route: any) {
-    const { activeWhenMatch } = this.props;
-    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  const match = useRouteMatch({
+    path: parent,
+    exact: activeOnlyWhenExact
+  });
+
+  let defaultIcon = "fas fa-cog";
+  if (icon) {
+    defaultIcon = icon;
   }
 
-  renderLink = (route: any) => {
-    const { to, icon, label } = this.props;
-
-    let defaultIcon = "fas fa-cog";
-    if (icon) {
-      defaultIcon = icon;
-    }
-
-    let children = null;
-    if (this.isActive(route)) {
-      children = <ul className="sub-menu">{this.props.children}</ul>;
-    }
-
-    return (
-      <li>
-        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
-          <i className={classNames(defaultIcon, "fa-fw")} /> {label}
-        </Link>
-        {children}
-      </li>
-    );
-  };
-
-  render() {
-    const { to, activeOnlyWhenExact } = this.props;
-
-    // removes last part of url
-    const parents = to.split("/");
-    parents.splice(-1, 1);
-    const parent = parents.join("/");
-
-    return <Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} />;
+  let childrenList = null;
+  if (match && !collapsed) {
+    childrenList = <ul className="sub-menu">{children}</ul>;
   }
-}
+
+  return (
+    <li title={collapsed ? title : undefined}>
+      <Link className={classNames(match != null ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
+        <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
+      </Link>
+      {childrenList}
+    </li>
+  );
+};
 
 export default SubNavigation;

scm-ui/ui-components/src/navigation/index.ts

@@ -6,4 +6,6 @@ export { default as Navigation } from "./Navigation";
 export { default as SubNavigation } from "./SubNavigation";
 export { default as PrimaryNavigation } from "./PrimaryNavigation";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
-export { default as Section } from "./Section";
+export { default as SecondaryNavigation } from "./SecondaryNavigation";
+export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
+export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -10,6 +10,8 @@ import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
+import { MenuContext } from "@scm-manager/ui-components";
+import { storeMenuCollapsed } from "../navigation";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -100,10 +102,14 @@ class DiffFile extends React.Component<Props, State> {
     }
   };
 
-  toggleSideBySide = () => {
-    this.setState(state => ({
-      sideBySide: !state.sideBySide
-    }));
+  toggleSideBySide = (callback: () => void) => {
+    this.setState(
+      state => ({
+        sideBySide: !state.sideBySide
+      }),
+      () => callback()
+    );
+    storeMenuCollapsed(true);
   };
 
   setCollapse = (collapsed: boolean) => {
@@ -259,11 +265,15 @@ class DiffFile extends React.Component<Props, State> {
       file.hunks && file.hunks.length > 0 ? (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
-            <DiffButton
-              icon={sideBySide ? "align-left" : "columns"}
-              tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-              onClick={this.toggleSideBySide}
-            />
+            <MenuContext.Consumer>
+              {({ setMenuCollapsed }) => (
+                <DiffButton
+                  icon={sideBySide ? "align-left" : "columns"}
+                  tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+                  onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
+                />
+              )}
+            </MenuContext.Consumer>
             {fileControls}
           </ButtonGroup>
         </ButtonWrapper>