Fix behavior of secondary navigation and content (with different display sizes)

2026-01-09 17:12:15 +01:00 · 2020-03-25 15:35:46 +01:00
parent b64729304c
commit b438cbdebc
10 changed files with 211 additions and 35 deletions
--- a/scm-ui/ui-components/src/layout/CustomQueryFlexWrappedColumns.tsx
+++ b/scm-ui/ui-components/src/layout/CustomQueryFlexWrappedColumns.tsx
@@ -0,0 +1,43 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+
+type Props = {
+  children?: ReactNode;
+};
+
+const FlexWrapped = styled.div`
+  /* Do not wrap before using the media query, 
+  otherwise long content will always break the navigation. */
+  @media (max-width: 785px) {
+    flex-wrap: wrap;
+  }
+`;
+
+export default class CustomQueryFlexWrappedColumns extends React.Component<Props> {
+  render() {
+    return <FlexWrapped className="columns">{this.props.children}</FlexWrapped>;
+  }
+}
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
@@ -0,0 +1,56 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+
+type Props = {
+  children?: ReactNode;
+  collapsed: boolean;
+};
+
+const PrimaryColumn = styled.div<{ collapsed: boolean }>`
+  /* This is the counterpart to the specific column in SecondaryNavigationColumn. */
+  flex: none;
+  width: ${(props: { collapsed: boolean }) => (props.collapsed ? "89.7%" : "75%")};
+  /* Render this column to full size if column construct breaks (page size too small). */
+  @media (max-width: 785px) {
+    width: 100%;
+  }
+`;
+
+export default class PrimaryContentColumn extends React.Component<Props> {
+  static defaultProps = {
+    collapsed: false
+  };
+
+  render() {
+    const { children, collapsed } = this.props;
+
+    return (
+      <PrimaryColumn className="column" collapsed={collapsed}>
+        {children}
+      </PrimaryColumn>
+    );
+  }
+}
--- a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
+++ b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
@@ -0,0 +1,59 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+
+type Props = {
+  children?: ReactNode;
+  collapsed: boolean;
+};
+
+const SecondaryColumn = styled.div<{ collapsed: boolean }>`
+  /* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size. 
+  Navigation size should be as constant as possible. */
+  flex: none;
+  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
+  max-width: ${(props: { collapsed: boolean }) => (props.collapsed ? "11.3%" : "25%")};
+  /* Render this column to full size if column construct breaks (page size too small). */
+  @media (max-width: 785px) {
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+
+export default class SecondaryNavigationColumn extends React.Component<Props> {
+  static defaultProps = {
+    collapsed: false
+  };
+
+  render() {
+    const { children, collapsed } = this.props;
+
+    return (
+      <SecondaryColumn className="column" collapsed={collapsed}>
+        {children}
+      </SecondaryColumn>
+    );
+  }
+}
--- a/scm-ui/ui-components/src/layout/index.ts
+++ b/scm-ui/ui-components/src/layout/index.ts
@@ -31,3 +31,7 @@ export { default as Page } from "./Page";
 export { default as PageActions } from "./PageActions";
 export { default as Subtitle } from "./Subtitle";
 export { default as Title } from "./Title";
+export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrappedColumns";
+export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
+export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";
+
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -38,11 +38,10 @@ type CollapsedProps = {
  collapsed: boolean;
 };

-const SectionContainer = styled.aside<CollapsedProps>`
+const SectionContainer = styled.aside`
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: 2rem;
-  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
 `;

 const Icon = styled.i<CollapsedProps>`
@@ -80,7 +79,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse
  const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;

  return (
-    <SectionContainer className="menu" collapsed={isCollapsed}>
+    <SectionContainer className="menu">
      <div>
        <MenuLabel
          className="menu-label"
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -31,6 +31,9 @@ import { Links } from "@scm-manager/ui-types";
 import {
  NavLink,
  Page,
+  CustomQueryFlexWrappedColumns,
+  PrimaryContentColumn,
+  SecondaryNavigationColumn,
  SecondaryNavigation,
  SubNavigation,
  isMenuCollapsed,
@@ -104,8 +107,8 @@ class Admin extends React.Component<Props, State> {
        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
      >
        <Page>
-          <div className="columns">
-            <div className="column">
+          <CustomQueryFlexWrappedColumns>
+            <PrimaryContentColumn collapsed={menuCollapsed}>
              <Switch>
                <Redirect exact from={url} to={`${url}/info`} />
                <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -143,8 +146,8 @@ class Admin extends React.Component<Props, State> {
                <Route path={`${url}/roles/:page`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
                <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
              </Switch>
-            </div>
-            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+            </PrimaryContentColumn>
+            <SecondaryNavigationColumn collapsed={menuCollapsed}>
              <SecondaryNavigation
                label={t("admin.menu.navigationLabel")}
                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
@@ -189,8 +192,8 @@ class Admin extends React.Component<Props, State> {
                  <ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
                </SubNavigation>
              </SecondaryNavigation>
-            </div>
-          </div>
+            </SecondaryNavigationColumn>
+          </CustomQueryFlexWrappedColumns>
        </Page>
      </MenuContext.Provider>
    );
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -34,6 +34,9 @@ import {
  MenuContext,
  NavLink,
  Page,
+  CustomQueryFlexWrappedColumns,
+  PrimaryContentColumn,
+  SecondaryNavigationColumn,
  SecondaryNavigation,
  SubNavigation
 } from "@scm-manager/ui-components";
@@ -107,13 +110,13 @@ class Profile extends React.Component<Props, State> {
        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
      >
        <Page title={me.displayName}>
-          <div className="columns">
-            <div className="column">
+          <CustomQueryFlexWrappedColumns>
+            <PrimaryContentColumn collapsed={menuCollapsed}>
              <Route path={url} exact render={() => <ProfileInfo me={me} />} />
              <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
              <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
-            </div>
-            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+            </PrimaryContentColumn>
+            <SecondaryNavigationColumn collapsed={menuCollapsed}>
              <SecondaryNavigation
                label={t("profile.navigationLabel")}
                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
@@ -134,8 +137,8 @@ class Profile extends React.Component<Props, State> {
                  <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
                </SubNavigation>
              </SecondaryNavigation>
-            </div>
-          </div>
+            </SecondaryNavigationColumn>
+          </CustomQueryFlexWrappedColumns>
        </Page>
      </MenuContext.Provider>
    );
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -34,6 +34,9 @@ import {
  MenuContext,
  NavLink,
  Page,
+  CustomQueryFlexWrappedColumns,
+  PrimaryContentColumn,
+  SecondaryNavigationColumn,
  SecondaryNavigation,
  SubNavigation
 } from "@scm-manager/ui-components";
@@ -113,8 +116,8 @@ class SingleGroup extends React.Component<Props, State> {
        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
      >
        <Page title={group.name}>
-          <div className="columns">
-            <div className="column">
+          <CustomQueryFlexWrappedColumns>
+            <PrimaryContentColumn collapsed={menuCollapsed}>
              <Route path={url} exact component={() => <Details group={group} />} />
              <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
              <Route
@@ -123,8 +126,8 @@ class SingleGroup extends React.Component<Props, State> {
                component={() => <SetPermissions selectedPermissionsLink={group._links.permissions} />}
              />
              <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
-            </div>
-            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+            </PrimaryContentColumn>
+            <SecondaryNavigationColumn collapsed={menuCollapsed}>
              <SecondaryNavigation
                label={t("singleGroup.menu.navigationLabel")}
                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
@@ -147,8 +150,8 @@ class SingleGroup extends React.Component<Props, State> {
                  <ExtensionPoint name="group.setting" props={extensionProps} renderAll={true} />
                </SubNavigation>
              </SecondaryNavigation>
-            </div>
-          </div>
+            </SecondaryNavigationColumn>
+          </CustomQueryFlexWrappedColumns>
        </Page>
      </MenuContext.Provider>
    );
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -32,6 +32,9 @@ import {
  Loading,
  NavLink,
  Page,
+  CustomQueryFlexWrappedColumns,
+  PrimaryContentColumn,
+  SecondaryNavigationColumn,
  SecondaryNavigation,
  SubNavigation,
  MenuContext,
@@ -170,8 +173,8 @@ class RepositoryRoot extends React.Component<Props, State> {
        }}
      >
        <Page title={repository.namespace + "/" + repository.name}>
-          <div className="columns">
-            <div className={menuCollapsed ? "column is-11" : "column is-9"}>
+          <CustomQueryFlexWrappedColumns>
+            <PrimaryContentColumn collapsed={menuCollapsed}>
              <Switch>
                <Redirect exact from={this.props.match.url} to={redirectedUrl} />

@@ -220,8 +223,8 @@ class RepositoryRoot extends React.Component<Props, State> {
                <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
              </Switch>
-            </div>
-            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+            </PrimaryContentColumn>
+            <SecondaryNavigationColumn collapsed={menuCollapsed}>
              <SecondaryNavigation
                label={t("repositoryRoot.menu.navigationLabel")}
                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
@@ -265,8 +268,8 @@ class RepositoryRoot extends React.Component<Props, State> {
                  <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
                </SubNavigation>
              </SecondaryNavigation>
-            </div>
-          </div>
+            </SecondaryNavigationColumn>
+          </CustomQueryFlexWrappedColumns>
        </Page>
      </MenuContext.Provider>
    );
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -33,8 +33,12 @@ import {
  MenuContext,
  NavLink,
  Page,
+  CustomQueryFlexWrappedColumns,
+  PrimaryContentColumn,
+  SecondaryNavigationColumn,
  SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  storeMenuCollapsed
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
@@ -44,7 +48,6 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { getUsersLink } from "../../modules/indexResource";
 import SetUserPassword from "../components/SetUserPassword";
 import SetPermissions from "../../permissions/components/SetPermissions";
-import { storeMenuCollapsed } from "@scm-manager/ui-components/src";

 type Props = RouteComponentProps &
  WithTranslation & {
@@ -114,8 +117,8 @@ class SingleUser extends React.Component<Props, State> {
        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
      >
        <Page title={user.displayName}>
-          <div className="columns">
-            <div className="column">
+          <CustomQueryFlexWrappedColumns>
+            <PrimaryContentColumn collapsed={menuCollapsed}>
              <Route path={url} exact component={() => <Details user={user} />} />
              <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
              <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
@@ -124,8 +127,8 @@ class SingleUser extends React.Component<Props, State> {
                component={() => <SetPermissions selectedPermissionsLink={user._links.permissions} />}
              />
              <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
-            </div>
-            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+            </PrimaryContentColumn>
+            <SecondaryNavigationColumn collapsed={menuCollapsed}>
              <SecondaryNavigation
                label={t("singleUser.menu.navigationLabel")}
                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
@@ -148,8 +151,8 @@ class SingleUser extends React.Component<Props, State> {
                  <ExtensionPoint name="user.setting" props={extensionProps} renderAll={true} />
                </SubNavigation>
              </SecondaryNavigation>
-            </div>
-          </div>
+            </SecondaryNavigationColumn>
+          </CustomQueryFlexWrappedColumns>
        </Page>
      </MenuContext.Provider>
    );