improved footer layout

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", () => <a href="#">REST API</a>);
+  binder.bind("footer.information", () => <ExternalLink to="#" label="REST API" />);
-  binder.bind("footer.links", () => <a href="#">CLI</a>);
+  binder.bind("footer.information", () => <ExternalLink to="#" label="CLI" />);
+  binder.bind("footer.support", () => <ExternalLink to="#" label="FAQ" />);
   binder.bind("profile.setting", () => <NavLink label="Authorized Keys" to="#" />);
 };
 
@@ -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);
   });

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<TitleWithAvatarProps> = ({ me }) => (
 );
 
 const Footer: FC<Props> = ({ 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<Props> = ({ me, version, links }) => {
       <section className="section container">
         <div className="columns is-size-7">
           <FooterSection title={meSectionTile}>
-            <NavLink to="#" label="Profile" />
+            <NavLink to="/me" label={t("footer.user.profile")} />
-            <NavLink to="#" label="Change Password" />
+            <NavLink to="/me/settings/password" label={t("profile.changePasswordNavLink")} />
             <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
           </FooterSection>
-          <FooterSection title={<TitleWithIcon title="Information" icon="info-circle" />}>
+          <FooterSection title={<TitleWithIcon title={t("footer.information.title")} icon="info-circle" />}>
-            <a href="https://www.scm-manager.org/" target="_blank">
+            <ExternalLink to="https://www.scm-manager.org/" label={`SCM-Manager ${version}`} />
-              SCM-Manager {version}
+            <ExtensionPoint name="footer.information" props={extensionProps} renderAll={true} />
-            </a>
-            <ExtensionPoint name="footer.links" props={extensionProps} renderAll={true} />
           </FooterSection>
-          <FooterSection title={<TitleWithIcon title="About" icon="external-link-alt" />}>
+          <FooterSection title={<TitleWithIcon title={t("footer.support.title")} icon="life-ring" />}>
-            <a href="https://www.scm-manager.org/" target="_blank">
+            <ExternalLink to="https://www.scm-manager.org/support/" label={t("footer.support.community")} />
-              Learn more
+            <ExternalLink to="https://cloudogu.com/en/scm-manager-enterprise/" label={t("footer.support.enterprise")} />
-            </a>
+            <ExtensionPoint name="footer.support" props={extensionProps} renderAll={true} />
-            <a target="_blank" href="https://cloudogu.com/">
-              Powered by Cloudogu
-            </a>
-            <ExtensionPoint name="footer.links" props={extensionProps} renderAll={true} />
           </FooterSection>
         </div>
       </section>

scm-ui/ui-components/src/layout/FooterSection.tsx

@@ -18,11 +18,7 @@ const FooterSection: FC<Props> = ({ title, children }) => {
   return (
     <section className="column is-one-third">
       <Title>{title}</Title>
-      <Menu>
+      <Menu>{children}</Menu>
-        {React.Children.map(children, (child, index) => (
-          <li key={index}>{child}</li>
-        ))}
-      </Menu>
     </section>
   );
 };

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<Props> = ({ to, icon, label }) => {
+  let showIcon;
+  if (icon) {
+    showIcon = (
+      <>
+        <i className={classNames(icon, "fa-fw")} />{" "}
+      </>
+    );
+  }
+
+  return (
+    <li>
+      <a target="_blank" href={to}>
+        {showIcon}
+        {label}
+      </a>
+    </li>
+  );
+};
+
+export default ExternalLink;

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

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"
+    }
   }
 }

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"
+    }
   }
 }