Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-02 03:25:56 +01:00
Code Issues Packages Projects Releases Activity

un collapse menu on each interaction with it

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-03-31 11:00:07 +02:00
parent 2821005d8c
commit 13633fb57e
11 changed files with 154 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -34188,70 +34188,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
</div> </div>
`; `;
exports[`Storyshots Navigation|Secondary Collapsed 1`] = ` exports[`Storyshots Navigation|Secondary Default 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 ktrCnD menu-label"
onClick={[Function]}
>
<i
className="SecondaryNavigation__Icon-sc-8p1rgi-1 cqWEjA is-medium"
color="info"
>
<i
className="fas fa-caret-down"
/>
</i>
</p>
<ul
className="menu-list"
>
<li
title="Puzzle 42"
>
<a
className="is-active has-text-centered"
href="/"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
</a>
</li>
<li
title="Heart Of Gold"
>
<a
className="has-text-centered"
href="/some"
onClick={[Function]}
>
<i
className="fas fa-star fa-fw"
/>
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
<div <div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns" className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
> >
@@ -34264,11 +34201,75 @@ exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
<div> <div>
<p <p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label" className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
>
<i
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
color="info"
>
<i
className="fas fa-caret-right"
/>
</i>
Hitchhiker
</p>
<ul
className="menu-list"
onClick={[Function]}
>
<li>
<a
className=""
href="/42"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
Puzzle 42
</a>
</li>
<li>
<a
className=""
href="/heart-of-gold"
onClick={[Function]}
>
<i
className="fas fa-star fa-fw"
/>
Heart Of Gold
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
> >
Hitchhiker Hitchhiker
</p> </p>
<ul <ul
className="menu-list" className="menu-list"
onClick={[Function]}
> >
<li> <li>
<a <a
@@ -34329,67 +34330,6 @@ exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
</div> </div>
`; `;
exports[`Storyshots Navigation|Secondary Default 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
>
<i
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
color="info"
>
<i
className="fas fa-caret-right"
/>
</i>
Hitchhiker
</p>
<ul
className="menu-list"
>
<li>
<a
className="is-active"
href="/"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
Puzzle 42
</a>
</li>
<li>
<a
className=""
href="/some"
onClick={[Function]}
>
<i
className="fas fa-star fa-fw"
/>
Heart Of Gold
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = ` exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
<div <div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns" className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
@@ -34417,6 +34357,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
</p> </p>
<ul <ul
className="menu-list" className="menu-list"
onClick={[Function]}
> >
<li> <li>
<a <a
@@ -34451,84 +34392,6 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
</div> </div>
`; `;
exports[`Storyshots Navigation|Secondary Sub Navigation Collapsed 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
>
Hitchhiker
</p>
<ul
className="menu-list"
>
<li>
<a
className=""
href="/42"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
Puzzle 42
</a>
</li>
<li>
<a
className="is-active"
href="/hitchhiker/starships"
onClick={[Function]}
>
<i
className="fas fa-cog fa-fw"
/>
Starships
</a>
<ul
className="sub-menu"
>
<li>
<a
className="is-active"
href="/hitchhiker/starships/heart-of-gold"
onClick={[Function]}
>
<i
className="fas fa-star fa-fw"
/>
Heart Of Gold
</a>
</li>
<li>
<a
className=""
href="/hitchhiker/starships/titanic"
onClick={[Function]}
>
Titanic
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots RepositoryEntry Avatar EP 1`] = ` exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
<div <div
className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow" className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"

31
scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
View File

@@ -21,13 +21,9 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE. * SOFTWARE.
*/ */
import React, { ReactNode } from "react"; import React, { FC } from "react";
import styled from "styled-components"; import styled from "styled-components";
import useMenuContext from "../navigation/MenuContext";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
const PrimaryColumn = styled.div<{ collapsed: boolean }>` const PrimaryColumn = styled.div<{ collapsed: boolean }>`
/* This is the counterpart to the specific column in SecondaryNavigationColumn. */ /* This is the counterpart to the specific column in SecondaryNavigationColumn. */
@@ -39,18 +35,13 @@ const PrimaryColumn = styled.div<{ collapsed: boolean }>`
} }
`; `;
export default class PrimaryContentColumn extends React.Component<Props> { const PrimaryContentColumn: FC = ({ children }) => {
static defaultProps = { const context = useMenuContext();
collapsed: false return (
}; <PrimaryColumn className="column" collapsed={context.isCollapsed()}>
{children}
</PrimaryColumn>
);
};
render() { export default PrimaryContentColumn;
const { children, collapsed } = this.props;
return (
<PrimaryColumn className="column" collapsed={collapsed}>
{children}
</PrimaryColumn>
);
}
}

31
scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
View File

@@ -21,13 +21,9 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE. * SOFTWARE.
*/ */
import React, { ReactNode } from "react"; import React, { FC } from "react";
import styled from "styled-components"; import styled from "styled-components";
import useMenuContext from "../navigation/MenuContext";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
const SecondaryColumn = styled.div<{ 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. /* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size.
@@ -42,18 +38,13 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
} }
`; `;
export default class SecondaryNavigationColumn extends React.Component<Props> { const SecondaryNavigationColumn: FC = ({ children }) => {
static defaultProps = { const context = useMenuContext();
collapsed: false return (
}; <SecondaryColumn className="column" collapsed={context.isCollapsed()}>
{children}
</SecondaryColumn>
);
};
render() { export default SecondaryNavigationColumn;
const { children, collapsed } = this.props;
return (
<SecondaryColumn className="column" collapsed={collapsed}>
{children}
</SecondaryColumn>
);
}
}

25
scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
View File

@@ -22,7 +22,7 @@
* SOFTWARE. * SOFTWARE.
*/ */
import React, { FC, ReactElement, ReactNode} from "react"; import React, {FC, ReactElement, ReactNode, useEffect, useMemo} from "react";
import styled from "styled-components"; import styled from "styled-components";
import SubNavigation from "./SubNavigation"; import SubNavigation from "./SubNavigation";
import { matchPath, useLocation } from "react-router-dom"; import { matchPath, useLocation } from "react-router-dom";
@@ -64,10 +64,27 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
const location = useLocation(); const location = useLocation();
const binder = useBinder(); const binder = useBinder();
const menuContext = useMenuContext(); const menuContext = useMenuContext();
const subNavActive = isSubNavigationActive(binder, children, location.pathname); const subNavActive = isSubNavigationActive(binder, children, location.pathname);
const isCollapsed = menuContext.isCollapsed(); const isCollapsed = menuContext.isCollapsed();
useEffect(() => {
if (isCollapsed && subNavActive) {
menuContext.setCollapsed(false);
}
}, [subNavActive, isCollapsed]);
const toggleCollapseState = () => {
if (!subNavActive) {
menuContext.setCollapsed(!isCollapsed);
}
};
const uncollapseMenu = () => {
if (isCollapsed) {
menuContext.setCollapsed(false);
}
};
const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />; const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return ( return (
@@ -76,7 +93,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
<MenuLabel <MenuLabel
className="menu-label" className="menu-label"
collapsed={isCollapsed} collapsed={isCollapsed}
onClick={!subNavActive ? () => menuContext.setCollapsed(!isCollapsed) : undefined} onClick={toggleCollapseState}
> >
{!subNavActive && ( {!subNavActive && (
<Icon color="info" className="is-medium" collapsed={isCollapsed}> <Icon color="info" className="is-medium" collapsed={isCollapsed}>
@@ -85,7 +102,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
)} )}
{isCollapsed ? "" : label} {isCollapsed ? "" : label}
</MenuLabel> </MenuLabel>
<ul className="menu-list">{children}</ul> <ul className="menu-list" onClick={uncollapseMenu}>{children}</ul>
</div> </div>
</SectionContainer> </SectionContainer>
); );

2
scm-ui/ui-components/src/navigation/index.ts
View File

@@ -31,5 +31,5 @@ export { default as SubNavigation } from "./SubNavigation";
export { default as PrimaryNavigation } from "./PrimaryNavigation"; export { default as PrimaryNavigation } from "./PrimaryNavigation";
export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink"; export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
export { default as SecondaryNavigation } from "./SecondaryNavigation"; export { default as SecondaryNavigation } from "./SecondaryNavigation";
export { MenuContext, LocalStorageMenuContextProvider } from "./MenuContext"; export { MenuContext, StateMenuContextProvider } from "./MenuContext";
export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem"; export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

10
scm-ui/ui-components/src/repos/DiffFile.tsx
View File

@@ -34,7 +34,6 @@ import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./
import TokenizedDiffView from "./TokenizedDiffView"; import TokenizedDiffView from "./TokenizedDiffView";
import DiffButton from "./DiffButton"; import DiffButton from "./DiffButton";
import { MenuContext } from "@scm-manager/ui-components"; import { MenuContext } from "@scm-manager/ui-components";
import { storeMenuCollapsed } from "../navigation";
const EMPTY_ANNOTATION_FACTORY = {}; const EMPTY_ANNOTATION_FACTORY = {};
@@ -132,7 +131,6 @@ class DiffFile extends React.Component<Props, State> {
}), }),
() => callback() () => callback()
); );
storeMenuCollapsed(true);
}; };
setCollapse = (collapsed: boolean) => { setCollapse = (collapsed: boolean) => {
@@ -289,11 +287,15 @@ class DiffFile extends React.Component<Props, State> {
<ButtonWrapper className={classNames("level-right", "is-flex")}> <ButtonWrapper className={classNames("level-right", "is-flex")}>
<ButtonGroup> <ButtonGroup>
<MenuContext.Consumer> <MenuContext.Consumer>
{({ setMenuCollapsed }) => ( {({ setCollapsed }) => (
<DiffButton <DiffButton
icon={sideBySide ? "align-left" : "columns"} icon={sideBySide ? "align-left" : "columns"}
tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")} tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))} onClick={() => this.toggleSideBySide(() => {
if (this.state.sideBySide) {
setCollapsed(true);
}
})}
/> />
)} )}
</MenuContext.Consumer> </MenuContext.Consumer>

41
scm-ui/ui-webapp/src/admin/containers/Admin.tsx
View File

@@ -35,10 +35,7 @@ import {
PrimaryContentColumn, PrimaryContentColumn,
SecondaryNavigationColumn, SecondaryNavigationColumn,
SecondaryNavigation, SecondaryNavigation,
SubNavigation, SubNavigation
isMenuCollapsed,
MenuContext,
storeMenuCollapsed
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource"; import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
import AdminDetails from "./AdminDetails"; import AdminDetails from "./AdminDetails";
@@ -47,6 +44,7 @@ import GlobalConfig from "./GlobalConfig";
import RepositoryRoles from "../roles/containers/RepositoryRoles"; import RepositoryRoles from "../roles/containers/RepositoryRoles";
import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole"; import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole"; import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
import {StateMenuContextProvider} from "@scm-manager/ui-components/src/navigation/MenuContext";
type Props = RouteComponentProps & type Props = RouteComponentProps &
WithTranslation & { WithTranslation & {
@@ -55,23 +53,7 @@ type Props = RouteComponentProps &
installedPluginsLink: string; installedPluginsLink: string;
}; };
type State = { class Admin extends React.Component<Props> {
menuCollapsed: boolean;
};
class Admin extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
onCollapseAdminMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
stripEndingSlash = (url: string) => { stripEndingSlash = (url: string) => {
if (url.endsWith("/")) { if (url.endsWith("/")) {
if (url.includes("role")) { if (url.includes("role")) {
@@ -94,7 +76,6 @@ class Admin extends React.Component<Props, State> {
render() { render() {
const { links, availablePluginsLink, installedPluginsLink, t } = this.props; const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
const { menuCollapsed } = this.state;
const url = this.matchedUrl(); const url = this.matchedUrl();
const extensionProps = { const extensionProps = {
@@ -103,12 +84,10 @@ class Admin extends React.Component<Props, State> {
}; };
return ( return (
<MenuContext.Provider <StateMenuContextProvider>
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page> <Page>
<CustomQueryFlexWrappedColumns> <CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}> <PrimaryContentColumn>
<Switch> <Switch>
<Redirect exact from={url} to={`${url}/info`} /> <Redirect exact from={url} to={`${url}/info`} />
<Route path={`${url}/info`} exact component={AdminDetails} /> <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -147,12 +126,8 @@ class Admin extends React.Component<Props, State> {
<ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} /> <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
</Switch> </Switch>
</PrimaryContentColumn> </PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}> <SecondaryNavigationColumn>
<SecondaryNavigation <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
label={t("admin.menu.navigationLabel")}
onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink <NavLink
to={`${url}/info`} to={`${url}/info`}
icon="fas fa-info-circle" icon="fas fa-info-circle"
@@ -195,7 +170,7 @@ class Admin extends React.Component<Props, State> {
</SecondaryNavigationColumn> </SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns> </CustomQueryFlexWrappedColumns>
</Page> </Page>
</MenuContext.Provider> </StateMenuContextProvider>
); );
} }
} }

41
scm-ui/ui-webapp/src/containers/Profile.tsx
View File

@@ -30,20 +30,18 @@ import { WithTranslation, withTranslation } from "react-i18next";
import { Me } from "@scm-manager/ui-types"; import { Me } from "@scm-manager/ui-types";
import { import {
ErrorPage, ErrorPage,
isMenuCollapsed,
MenuContext,
NavLink, NavLink,
Page, Page,
CustomQueryFlexWrappedColumns, CustomQueryFlexWrappedColumns,
PrimaryContentColumn, PrimaryContentColumn,
SecondaryNavigationColumn, SecondaryNavigationColumn,
SecondaryNavigation, SecondaryNavigation,
SubNavigation SubNavigation,
StateMenuContextProvider
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import ChangeUserPassword from "./ChangeUserPassword"; import ChangeUserPassword from "./ChangeUserPassword";
import ProfileInfo from "./ProfileInfo"; import ProfileInfo from "./ProfileInfo";
import { ExtensionPoint } from "@scm-manager/ui-extensions"; import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
type Props = RouteComponentProps & type Props = RouteComponentProps &
WithTranslation & { WithTranslation & {
@@ -53,23 +51,7 @@ type Props = RouteComponentProps &
match: any; match: any;
}; };
type State = { class Profile extends React.Component<Props> {
menuCollapsed: boolean;
};
class Profile extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
onCollapseProfileMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
stripEndingSlash = (url: string) => { stripEndingSlash = (url: string) => {
if (url.endsWith("/")) { if (url.endsWith("/")) {
return url.substring(0, url.length - 2); return url.substring(0, url.length - 2);
@@ -85,7 +67,6 @@ class Profile extends React.Component<Props, State> {
const url = this.matchedUrl(); const url = this.matchedUrl();
const { me, t } = this.props; const { me, t } = this.props;
const { menuCollapsed } = this.state;
if (!me) { if (!me) {
return ( return (
@@ -106,22 +87,16 @@ class Profile extends React.Component<Props, State> {
}; };
return ( return (
<MenuContext.Provider <StateMenuContextProvider>
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={me.displayName}> <Page title={me.displayName}>
<CustomQueryFlexWrappedColumns> <CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}> <PrimaryContentColumn>
<Route path={url} exact render={() => <ProfileInfo me={me} />} /> <Route path={url} exact render={() => <ProfileInfo me={me} />} />
<Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} /> <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
<ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} /> <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
</PrimaryContentColumn> </PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}> <SecondaryNavigationColumn>
<SecondaryNavigation <SecondaryNavigation label={t("profile.navigationLabel")}>
label={t("profile.navigationLabel")}
onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink <NavLink
to={`${url}`} to={`${url}`}
icon="fas fa-info-circle" icon="fas fa-info-circle"
@@ -140,7 +115,7 @@ class Profile extends React.Component<Props, State> {
</SecondaryNavigationColumn> </SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns> </CustomQueryFlexWrappedColumns>
</Page> </Page>
</MenuContext.Provider> </StateMenuContextProvider>
); );
} }
} }

41
scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
View File

@@ -29,16 +29,15 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { Group } from "@scm-manager/ui-types"; import { Group } from "@scm-manager/ui-types";
import { import {
ErrorPage, ErrorPage,
isMenuCollapsed,
Loading, Loading,
MenuContext,
NavLink, NavLink,
Page, Page,
CustomQueryFlexWrappedColumns, CustomQueryFlexWrappedColumns,
PrimaryContentColumn, PrimaryContentColumn,
SecondaryNavigationColumn, SecondaryNavigationColumn,
SecondaryNavigation, SecondaryNavigation,
SubNavigation SubNavigation,
StateMenuContextProvider
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import { getGroupsLink } from "../../modules/indexResource"; import { getGroupsLink } from "../../modules/indexResource";
import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups"; import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
@@ -46,7 +45,6 @@ import { Details } from "./../components/table";
import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks"; import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
import EditGroup from "./EditGroup"; import EditGroup from "./EditGroup";
import SetPermissions from "../../permissions/components/SetPermissions"; import SetPermissions from "../../permissions/components/SetPermissions";
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
type Props = RouteComponentProps & type Props = RouteComponentProps &
WithTranslation & { WithTranslation & {
@@ -60,27 +58,11 @@ type Props = RouteComponentProps &
fetchGroupByName: (p1: string, p2: string) => void; fetchGroupByName: (p1: string, p2: string) => void;
}; };
type State = { class SingleGroup extends React.Component<Props> {
menuCollapsed: boolean;
};
class SingleGroup extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
componentDidMount() { componentDidMount() {
this.props.fetchGroupByName(this.props.groupLink, this.props.name); this.props.fetchGroupByName(this.props.groupLink, this.props.name);
} }
onCollapseGroupMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
stripEndingSlash = (url: string) => { stripEndingSlash = (url: string) => {
if (url.endsWith("/")) { if (url.endsWith("/")) {
return url.substring(0, url.length - 2); return url.substring(0, url.length - 2);
@@ -94,7 +76,6 @@ class SingleGroup extends React.Component<Props, State> {
render() { render() {
const { t, loading, error, group } = this.props; const { t, loading, error, group } = this.props;
const { menuCollapsed } = this.state;
if (error) { if (error) {
return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />; return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />;
@@ -112,12 +93,10 @@ class SingleGroup extends React.Component<Props, State> {
}; };
return ( return (
<MenuContext.Provider <StateMenuContextProvider>
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={group.name}> <Page title={group.name}>
<CustomQueryFlexWrappedColumns> <CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}> <PrimaryContentColumn>
<Route path={url} exact component={() => <Details group={group} />} /> <Route path={url} exact component={() => <Details group={group} />} />
<Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} /> <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
<Route <Route
@@ -127,12 +106,8 @@ class SingleGroup extends React.Component<Props, State> {
/> />
<ExtensionPoint name="group.route" props={extensionProps} renderAll={true} /> <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
</PrimaryContentColumn> </PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}> <SecondaryNavigationColumn>
<SecondaryNavigation <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
label={t("singleGroup.menu.navigationLabel")}
onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink <NavLink
to={`${url}`} to={`${url}`}
icon="fas fa-info-circle" icon="fas fa-info-circle"
@@ -153,7 +128,7 @@ class SingleGroup extends React.Component<Props, State> {
</SecondaryNavigationColumn> </SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns> </CustomQueryFlexWrappedColumns>
</Page> </Page>
</MenuContext.Provider> </StateMenuContextProvider>
); );
} }
} }

42
scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
View File

@@ -37,9 +37,7 @@ import {
SecondaryNavigationColumn, SecondaryNavigationColumn,
SecondaryNavigation, SecondaryNavigation,
SubNavigation, SubNavigation,
MenuContext, StateMenuContextProvider
storeMenuCollapsed,
isMenuCollapsed
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos"; import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
import RepositoryDetails from "../components/RepositoryDetails"; import RepositoryDetails from "../components/RepositoryDetails";
@@ -70,19 +68,7 @@ type Props = RouteComponentProps &
fetchRepoByName: (link: string, namespace: string, name: string) => void; fetchRepoByName: (link: string, namespace: string, name: string) => void;
}; };
type State = { class RepositoryRoot extends React.Component<Props> {
menuCollapsed: boolean;
};
class RepositoryRoot extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
componentDidMount() { componentDidMount() {
const { fetchRepoByName, namespace, name, repoLink } = this.props; const { fetchRepoByName, namespace, name, repoLink } = this.props;
fetchRepoByName(repoLink, namespace, name); fetchRepoByName(repoLink, namespace, name);
@@ -131,13 +117,8 @@ class RepositoryRoot extends React.Component<Props, State> {
return `${url}/changesets`; return `${url}/changesets`;
}; };
onCollapseRepositoryMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
render() { render() {
const { loading, error, indexLinks, repository, t } = this.props; const { loading, error, indexLinks, repository, t } = this.props;
const { menuCollapsed } = this.state;
if (error) { if (error) {
return ( return (
@@ -166,18 +147,13 @@ class RepositoryRoot extends React.Component<Props, State> {
} }
return ( return (
<MenuContext.Provider <StateMenuContextProvider>
value={{
menuCollapsed,
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
}}
>
<Page <Page
title={repository.namespace + "/" + repository.name} title={repository.namespace + "/" + repository.name}
afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />} afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
> >
<CustomQueryFlexWrappedColumns> <CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}> <PrimaryContentColumn>
<Switch> <Switch>
<Redirect exact from={this.props.match.url} to={redirectedUrl} /> <Redirect exact from={this.props.match.url} to={redirectedUrl} />
@@ -227,12 +203,8 @@ class RepositoryRoot extends React.Component<Props, State> {
<ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} /> <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
</Switch> </Switch>
</PrimaryContentColumn> </PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}> <SecondaryNavigationColumn>
<SecondaryNavigation <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
label={t("repositoryRoot.menu.navigationLabel")}
onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} /> <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
<NavLink <NavLink
to={`${url}/info`} to={`${url}/info`}
@@ -274,7 +246,7 @@ class RepositoryRoot extends React.Component<Props, State> {
</SecondaryNavigationColumn> </SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns> </CustomQueryFlexWrappedColumns>
</Page> </Page>
</MenuContext.Provider> </StateMenuContextProvider>
); );
} }
} }

39
scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
View File

@@ -28,9 +28,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { User } from "@scm-manager/ui-types"; import { User } from "@scm-manager/ui-types";
import { import {
ErrorPage, ErrorPage,
isMenuCollapsed,
Loading, Loading,
MenuContext,
NavLink, NavLink,
Page, Page,
CustomQueryFlexWrappedColumns, CustomQueryFlexWrappedColumns,
@@ -38,7 +36,7 @@ import {
SecondaryNavigationColumn, SecondaryNavigationColumn,
SecondaryNavigation, SecondaryNavigation,
SubNavigation, SubNavigation,
storeMenuCollapsed StateMenuContextProvider
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import { Details } from "./../components/table"; import { Details } from "./../components/table";
import EditUser from "./EditUser"; import EditUser from "./EditUser";
@@ -61,19 +59,7 @@ type Props = RouteComponentProps &
fetchUserByName: (p1: string, p2: string) => void; fetchUserByName: (p1: string, p2: string) => void;
}; };
type State = { class SingleUser extends React.Component<Props> {
menuCollapsed: boolean;
};
class SingleUser extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
componentDidMount() { componentDidMount() {
this.props.fetchUserByName(this.props.usersLink, this.props.name); this.props.fetchUserByName(this.props.usersLink, this.props.name);
} }
@@ -85,17 +71,12 @@ class SingleUser extends React.Component<Props, State> {
return url; return url;
}; };
onCollapseUserMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
matchedUrl = () => { matchedUrl = () => {
return this.stripEndingSlash(this.props.match.url); return this.stripEndingSlash(this.props.match.url);
}; };
render() { render() {
const { t, loading, error, user } = this.props; const { t, loading, error, user } = this.props;
const { menuCollapsed } = this.state;
if (error) { if (error) {
return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />; return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />;
@@ -113,12 +94,10 @@ class SingleUser extends React.Component<Props, State> {
}; };
return ( return (
<MenuContext.Provider <StateMenuContextProvider>
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={user.displayName}> <Page title={user.displayName}>
<CustomQueryFlexWrappedColumns> <CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}> <PrimaryContentColumn>
<Route path={url} exact component={() => <Details user={user} />} /> <Route path={url} exact component={() => <Details user={user} />} />
<Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} /> <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
<Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} /> <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
@@ -128,12 +107,8 @@ class SingleUser extends React.Component<Props, State> {
/> />
<ExtensionPoint name="user.route" props={extensionProps} renderAll={true} /> <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
</PrimaryContentColumn> </PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}> <SecondaryNavigationColumn>
<SecondaryNavigation <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
label={t("singleUser.menu.navigationLabel")}
onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink <NavLink
to={`${url}`} to={`${url}`}
icon="fas fa-info-circle" icon="fas fa-info-circle"
@@ -154,7 +129,7 @@ class SingleUser extends React.Component<Props, State> {
</SecondaryNavigationColumn> </SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns> </CustomQueryFlexWrappedColumns>
</Page> </Page>
</MenuContext.Provider> </StateMenuContextProvider>
); );
} }
} }