diff --git a/scm-ui/ui-components/src/__resources__/avatar.png b/scm-ui/ui-components/src/__resources__/hitchhiker.png similarity index 100% rename from scm-ui/ui-components/src/__resources__/avatar.png rename to scm-ui/ui-components/src/__resources__/hitchhiker.png diff --git a/scm-ui/ui-components/src/__resources__/marvin.jpg b/scm-ui/ui-components/src/__resources__/marvin.jpg new file mode 100644 index 0000000000..a98f6b09cd Binary files /dev/null and b/scm-ui/ui-components/src/__resources__/marvin.jpg differ diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx index 35a277ab61..4ada3dc429 100644 --- a/scm-ui/ui-components/src/layout/Footer.stories.tsx +++ b/scm-ui/ui-components/src/layout/Footer.stories.tsx @@ -5,8 +5,11 @@ import { Binder, BinderContext } from "@scm-manager/ui-extensions"; import { Me } from "@scm-manager/ui-types"; import { EXTENSION_POINT } from "../avatar/Avatar"; // @ts-ignore ignore unknown png -import avatar from "../__resources__/avatar.png"; +import hitchhiker from "../__resources__/hitchhiker.png"; +// @ts-ignore ignore unknown jpg +import marvin from "../__resources__/marvin.jpg"; import NavLink from "../navigation/NavLink"; +import ExternalLink from "../navigation/ExternalLink"; const trillian: Me = { name: "trillian", @@ -16,15 +19,16 @@ const trillian: Me = { _links: {} }; -const bindAvatar = (binder: Binder) => { +const bindAvatar = (binder: Binder, avatar: string) => { binder.bind(EXTENSION_POINT, () => { return avatar; }); }; const bindLinks = (binder: Binder) => { - binder.bind("footer.links", () => REST API); - binder.bind("footer.links", () => CLI); + binder.bind("footer.information", () => ); + binder.bind("footer.information", () => ); + binder.bind("footer.support", () => ); binder.bind("profile.setting", () => ); }; @@ -42,7 +46,7 @@ storiesOf("Layout|Footer", module) }) .add("With Avatar", () => { const binder = new Binder("avatar-story"); - bindAvatar(binder); + bindAvatar(binder, hitchhiker); return withBinder(binder); }) .add("With Plugin Links", () => { @@ -52,7 +56,7 @@ storiesOf("Layout|Footer", module) }) .add("Full", () => { const binder = new Binder("link-story"); - bindAvatar(binder); + bindAvatar(binder, marvin); bindLinks(binder); return withBinder(binder); }); diff --git a/scm-ui/ui-components/src/layout/Footer.tsx b/scm-ui/ui-components/src/layout/Footer.tsx index 35916a7f52..515d3410b5 100644 --- a/scm-ui/ui-components/src/layout/Footer.tsx +++ b/scm-ui/ui-components/src/layout/Footer.tsx @@ -6,6 +6,8 @@ import NavLink from "../navigation/NavLink"; import FooterSection from "./FooterSection"; import styled from "styled-components"; import { EXTENSION_POINT } from "../avatar/Avatar"; +import ExternalLink from "../navigation/ExternalLink"; +import { useTranslation } from "react-i18next"; type Props = { me?: Me; @@ -50,10 +52,12 @@ const TitleWithAvatar: FC = ({ me }) => ( ); const Footer: FC = ({ me, version, links }) => { + const [t] = useTranslation("commons"); const binder = useBinder(); if (!me) { return null; } + const extensionProps = { me, url: "/me", links }; let meSectionTile; if (binder.hasExtension(EXTENSION_POINT)) { @@ -67,24 +71,18 @@ const Footer: FC = ({ me, version, links }) => {
- - + + - }> - - SCM-Manager {version} - - + }> + + - }> - - Learn more - - - Powered by Cloudogu - - + }> + + +
diff --git a/scm-ui/ui-components/src/layout/FooterSection.tsx b/scm-ui/ui-components/src/layout/FooterSection.tsx index 8f94499ff7..57476d31fe 100644 --- a/scm-ui/ui-components/src/layout/FooterSection.tsx +++ b/scm-ui/ui-components/src/layout/FooterSection.tsx @@ -18,11 +18,7 @@ const FooterSection: FC = ({ title, children }) => { return (
{title} - - {React.Children.map(children, (child, index) => ( -
  • {child}
    • - ))} -     + {children}
    ); }; diff --git a/scm-ui/ui-components/src/navigation/ExternalLink.tsx b/scm-ui/ui-components/src/navigation/ExternalLink.tsx new file mode 100644 index 0000000000..de9e46ce2c --- /dev/null +++ b/scm-ui/ui-components/src/navigation/ExternalLink.tsx @@ -0,0 +1,30 @@ +import React, { FC } from "react"; +import classNames from "classnames"; + +type Props = { + to: string; + icon?: string; + label: string; +}; + +const ExternalLink: FC = ({ to, icon, label }) => { + let showIcon; + if (icon) { + showIcon = ( + <> + {" "} + + ); + } + + return ( +
  • + + {showIcon} + {label} + +
    • + ); +}; + +export default ExternalLink; diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss index e4e489f880..3adb51da90 100644 --- a/scm-ui/ui-styles/src/scm.scss +++ b/scm-ui/ui-styles/src/scm.scss @@ -69,8 +69,12 @@ hr.header-with-actions { footer.footer { //height: 100px; - background-color: whitesmoke; + background-color: $white-ter; padding: inherit; + + a { + color: darken($blue, 15%); + } } // 6. Import the rest of Bulma diff --git a/scm-ui/ui-webapp/public/locales/de/commons.json b/scm-ui/ui-webapp/public/locales/de/commons.json index 8c575cc4e9..310c14ead3 100644 --- a/scm-ui/ui-webapp/public/locales/de/commons.json +++ b/scm-ui/ui-webapp/public/locales/de/commons.json @@ -86,5 +86,18 @@ "passwordConfirmFailed": "Passwörter müssen identisch sein!", "submit": "Speichern", "changedSuccessfully": "Passwort erfolgreich geändert!" + }, + "footer": { + "user": { + "profile": "Profil" + }, + "information": { + "title": "Information" + }, + "support": { + "title": "Support", + "community": "Community", + "enterprise": "Enterprise" + } } } diff --git a/scm-ui/ui-webapp/public/locales/en/commons.json b/scm-ui/ui-webapp/public/locales/en/commons.json index f7bab46d22..f57a944c65 100644 --- a/scm-ui/ui-webapp/public/locales/en/commons.json +++ b/scm-ui/ui-webapp/public/locales/en/commons.json @@ -87,5 +87,18 @@ "passwordConfirmFailed": "Passwords have to be identical", "submit": "Submit", "changedSuccessfully": "Password changed successfully" + }, + "footer": { + "user": { + "profile": "Profile" + }, + "information": { + "title": "Information" + }, + "support": { + "title": "Support", + "community": "Community", + "enterprise": "Enterprise" + } } }