+ 
+
+`;
+
exports[`Storyshots MarkdownView Code without Lang 1`] = `
+ {
- render() {
- const { children } = this.props;
- return (
-
-
-
-
-
+
+ );
+};
+
+const Header: FC = ({ authenticated, children, links }) => {
+ if (authenticated) {
+ return {children} ;
+ } else {
+ return {
- createNavigationAppender = (navigationItems: ReactNode[]): Appender => {
- const { t, links } = this.props;
+const PrimaryNavigation: FC = ({ links }) => {
+ const [t] = useTranslation("commons");
+ const location = useLocation();
+ const createNavigationAppender = (navItems: ReactNode[]): Appender => {
return (to: string, match: string, label: string, linkName: string) => {
const link = links[linkName];
if (link) {
- const navigationItem = {
append("/groups/", "/(group|groups)", "primary-navigation.groups", "groups");
append("/admin", "/admin", "primary-navigation.admin", "config");
- navigationItems.push(
+ navItems.push(
{
- renderLink = (route: any) => {
- const { to, label, testId } = this.props;
- return (
-
-
- {label}
-
-
- );
- };
+const PrimaryNavigationLink: FC = ({ to, match, testId, label, className }) => {
+ const routeMatch = useRouteMatch({ path: match });
- render() {
- const { to, match, activeOnlyWhenExact, testId } = this.props;
- const path = match ? match : to;
- return (
-
-
+const SmallHeader: FC<{ children: ReactNode }> = ({ children }) => {
+ return {children}
;
+};
+
+const LargeHeader: FC = () => {
+ return (
+
+
+
+
-
+
+
-
-
- );
+ {children}
-
-
- {authenticated ? (
-
+
{content}
{authenticated ? : null}
diff --git a/scm-ui/ui-webapp/src/containers/HeaderActions.tsx b/scm-ui/ui-webapp/src/containers/HeaderActions.tsx
new file mode 100644
index 0000000000..b61d525293
--- /dev/null
+++ b/scm-ui/ui-webapp/src/containers/HeaderActions.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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, { FC } from "react";
+import Notifications from "./Notifications";
+import LogoutButton from "./LogoutButton";
+import { Links } from "@scm-manager/ui-types";
+import LoginButton from "./LoginButton";
+
+type Props = {
+ burgerMode: boolean;
+ links: Links;
+};
+
+const HeaderActions: FC = ({ burgerMode, links }) => {
+ return (
+ <>
+ {!burgerMode ? = ({ burgerMode, links, className }) => {
+ const [t] = useTranslation("commons");
+ const history = useHistory();
+
+ const extensionProps = {
+ links,
+ label: t("primary-navigation.login"),
+ };
+
+ if (links?.login) {
+ if (binder.hasExtension("primary-navigation.login", extensionProps)) {
+ return history.push({ pathname: "/login" })}
+ className={classNames("is-align-items-center", "navbar-item", className)}
+ >
+
+ );
+ }
+ }
+ return null;
+};
+
+export default LoginButton;
diff --git a/scm-ui/ui-webapp/src/containers/LogoutButton.tsx b/scm-ui/ui-webapp/src/containers/LogoutButton.tsx
new file mode 100644
index 0000000000..dcc600a6a5
--- /dev/null
+++ b/scm-ui/ui-webapp/src/containers/LogoutButton.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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, { FC } from "react";
+import { devices, Icon } from "@scm-manager/ui-components";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import { useTranslation } from "react-i18next";
+import { Links } from "@scm-manager/ui-types";
+import classNames from "classnames";
+import { useHistory } from "react-router-dom";
+import styled from "styled-components";
+
+type Props = {
+ className?: string;
+ links?: Links;
+ burgerMode: boolean;
+};
+
+const StyledLogoutButton = styled.div`
+ @media screen and (max-width: ${devices.desktop.width}px) {
+ border-top: 1px solid white;
+ margin-top: 1rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+
+ @media screen and (min-width: ${devices.desktop.width}px) {
+ margin-left: 2rem;
+ }
+`;
+
+const LogoutButton: FC = ({ burgerMode, links, className }) => {
+ const [t] = useTranslation("commons");
+ const history = useHistory();
+
+ const extensionProps = {
+ links,
+ label: t("primary-navigation.logout"),
+ };
+
+ if (links?.logout) {
+ if (binder.hasExtension("primary-navigation.logout", extensionProps)) {
+ return history.push({ pathname: "/logout" })}
+ className={classNames("is-align-items-center", "navbar-item", className)}
+ >
+
+ );
+ }
+ }
+ return null;
+};
+
+export default LogoutButton;
diff --git a/scm-ui/ui-webapp/src/containers/Main.tsx b/scm-ui/ui-webapp/src/containers/Main.tsx
index f8bf785922..5408d9da9d 100644
--- a/scm-ui/ui-webapp/src/containers/Main.tsx
+++ b/scm-ui/ui-webapp/src/containers/Main.tsx
@@ -48,6 +48,7 @@ import Profile from "./Profile";
import NamespaceRoot from "../repos/namespaces/containers/NamespaceRoot";
import ImportLog from "../repos/importlog/ImportLog";
import CreateRepositoryRoot from "../repos/containers/CreateRepositoryRoot";
+import styled from "styled-components";
type Props = {
me: Me;
@@ -55,6 +56,14 @@ type Props = {
links: Links;
};
+type StyledMainProps = {
+ isSmallHeader: boolean;
+};
+
+const StyledMain = styled.div.attrs((props) => ({}))`
+ min-height: calc(100vh - ${(props) => (props.isSmallHeader ? 250 : 210)}px);
+`;
+
class Main extends React.Component {
render() {
const { authenticated, me, links } = this.props;
@@ -71,7 +80,7 @@ class Main extends React.Component {
}
return (
-
);
}
diff --git a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
new file mode 100644
index 0000000000..e9f09911dc
--- /dev/null
+++ b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
@@ -0,0 +1,144 @@
+/*
+ * 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, { FC, useEffect, useState } from "react";
+import { Links } from "@scm-manager/ui-types";
+import classNames from "classnames";
+import styled from "styled-components";
+import { devices, Logo, PrimaryNavigation } from "@scm-manager/ui-components";
+import HeaderActions from "./HeaderActions";
+import Notifications from "./Notifications";
+
+const StyledMenuBar = styled.div`
+ background-color: transparent !important;
+`;
+
+const LogoItem = styled.a`
+ cursor: default !important;
+`;
+
+const StyledNavBar = styled.nav`
+ @media screen and (min-width: ${devices.desktop.width - 1}px) {
+ .navbar-burger-actions {
+ display: none;
+ }
+ }
+
+ .navbar-start .navbar-item {
+ border-bottom: solid 5px transparent;
+ &.is-active {
+ border-bottom: solid 5px #28b1e8;
+ }
+ }
+
+ .navbar-menu.is-active .navbar-start .navbar-item {
+ border-bottom: none;
+ border-left: solid 5px transparent;
+ &.is-active {
+ border-left: solid 5px #28b1e8;
+ }
+ }
+
+ .navbar-menu {
+ padding: 0;
+ }
+
+ .navbar-brand {
+ @media screen and (max-width: ${devices.desktop.width - 1}px) {
+ border-bottom: 1px solid white;
+ }
+ }
+
+ .navbar-menu.is-active .navbar-end .navbar-item {
+ border-left: solid 5px transparent;
+ }
+
+ .navbar-burger {
+ color: #fff !important;
+ }
+
+ .navbar-item {
+ :hover:not(.logo) {
+ background-color: rgba(10, 10, 10, 0.1) !important;
+ color: #fff;
+ }
+ color: #fff !important;
+ background-color: transparent !important;
+ }
+ color: #fff;
+ background-color: transparent !important;
+`;
+
+type Props = {
+ links: Links;
+};
+
+const BurgerActionBar: FC = () => (
+ = ({ links }) => {
+ const [burgerActive, setBurgerActive] = useState(false);
+ useEffect(() => {
+ const close = () => {
+ if (burgerActive) {
+ setBurgerActive(false);
+ }
+ };
+ window.addEventListener("click", close);
+ return () => window.removeEventListener("click", close);
+ }, [burgerActive]);
+
+ return (
+
+
+
+
+ );
+};
+
+export default NavigationBar;
diff --git a/scm-ui/ui-webapp/src/containers/Notifications.tsx b/scm-ui/ui-webapp/src/containers/Notifications.tsx
index 522b1a36a7..e7ef1cb72f 100644
--- a/scm-ui/ui-webapp/src/containers/Notifications.tsx
+++ b/scm-ui/ui-webapp/src/containers/Notifications.tsx
@@ -33,14 +33,14 @@ import {
ToastType,
Loading,
DateFromNow,
- devices
+ devices,
} from "@scm-manager/ui-components";
import styled from "styled-components";
import {
useClearNotifications,
useDismissNotification,
useNotifications,
- useNotificationSubscription
+ useNotificationSubscription,
} from "@scm-manager/ui-api";
import { Notification, NotificationCollection } from "@scm-manager/ui-types";
import { useHistory, Link } from "react-router-dom";
@@ -54,13 +54,14 @@ const Bell = styled(Icon)`
const Container = styled.div`
display: flex;
cursor: pointer;
-
- @media screen and (max-width: ${devices.desktop.width}px) {
- padding-right: 1rem;
- }
`;
-const DropDownMenu = styled.div`
+type DropDownProps = {
+ direction: "left" | "right";
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const DropDownMenu = styled.div.attrs((props) => {})`
min-width: 35rem;
@media screen and (max-width: ${devices.mobile.width}px) {
@@ -79,7 +80,7 @@ const DropDownMenu = styled.div`
height: 0;
width: 0;
top: 0;
- right: 0.9rem;
+ ${(props) => props.direction}: 1.25rem;
border-color: transparent;
border-bottom-color: white;
border-left-color: white;
@@ -273,6 +274,9 @@ const BellNotificationContainer = styled.div`
position: relative;
width: 2rem;
height: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
`;
type NotificationCounterProps = {
@@ -282,7 +286,7 @@ type NotificationCounterProps = {
const NotificationCounter = styled.span`
position: absolute;
top: -0.5rem;
- right: ${props => (props.count < 10 ? "0" : "-0.25")}rem;
+ right: ${(props) => (props.count < 10 ? "0" : "-0.25")}rem;
`;
type BellNotificationIconProps = {
@@ -317,7 +321,12 @@ const ErrorBox: FC<{ error: Error | null }> = ({ error }) => {
);
};
-const Notifications: FC = () => {
+type NotificationProps = {
+ className?: string;
+ direction?: "left" | "right";
+};
+
+const Notifications: FC = ({ className, direction = "right" }) => {
const { data, isLoading, error, refetch } = useNotifications();
const { notifications, remove, clear } = useNotificationSubscription(refetch, data);
@@ -332,15 +341,21 @@ const Notifications: FC = () => {
<>
-
- ) : null}
+
+
{
props={{
me,
links,
- authenticated
+ authenticated,
}}
/>
-
+
+
+);
+
+const NavigationBar: FC
+
+
+
+
+
+
+
+ e.stopPropagation()}
+ className={classNames(
+ "dropdown",
+ `is-${direction}`,
+ "is-hoverable",
+ {
+ "is-active": open,
+ },
+ className
+ )}
+ onClick={(e) => e.stopPropagation()}
>
- setOpen(o => !o)} />
+ setOpen((o) => !o)} />
-
+