added 3 column layout to footer

scm-ui/ui-components/src/layout/Footer.stories.tsx

@@ -6,6 +6,7 @@ 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 NavLink from "../navigation/NavLink";
 
 const trillian: Me = {
   name: "trillian",
@@ -24,6 +25,7 @@ const bindAvatar = (binder: Binder) => {
 const bindLinks = (binder: Binder) => {
   binder.bind("footer.links", () => <a href="#">REST API</a>);
   binder.bind("footer.links", () => <a href="#">CLI</a>);
+  binder.bind("profile.setting", () => <NavLink label="Authorized Keys" to="#" />);
 };
 
 const withBinder = (binder: Binder) => {

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

@@ -1,8 +1,11 @@
 import React, { FC } from "react";
 import { Me, Links } from "@scm-manager/ui-types";
-import { Link } from "react-router-dom";
-import { useBinder } from "@scm-manager/ui-extensions";
-import { AvatarWrapper, AvatarImage } from "../avatar";
+import { useBinder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import { AvatarImage } from "../avatar";
+import NavLink from "../navigation/NavLink";
+import FooterSection from "./FooterSection";
+import styled from "styled-components";
+import { EXTENSION_POINT } from "../avatar/Avatar";
 
 type Props = {
   me?: Me;
@@ -10,51 +13,81 @@ type Props = {
   links: Links;
 };
 
+type TitleWithIconsProps = {
+  title: string;
+  icon: string;
+};
+
+const TitleWithIcon: FC<TitleWithIconsProps> = ({ icon, title }) => (
+  <>
+    <i className={`fas fa-${icon} fa-fw`} /> {title}
+  </>
+);
+
+type TitleWithAvatarProps = {
+  me: Me;
+};
+
+const VCenteredAvatar = styled(AvatarImage)`
+  vertical-align: middle;
+`;
+
+const AvatarContainer = styled.span`
+  float: left;
+  margin-right: 0.3em;
+  padding-top: 0.2em;
+  width: 1em;
+  height: 1em;
+`;
+
+const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
+  <>
+    <AvatarContainer className="image is-rounded">
+      <VCenteredAvatar person={me} representation="rounded" />
+    </AvatarContainer>
+    {me.displayName}
+  </>
+);
+
 const Footer: FC<Props> = ({ me, version, links }) => {
   const binder = useBinder();
   if (!me) {
     return null;
   }
-  const extensionProps = { me, links };
-  const extensions = binder.getExtensions("footer.links", extensionProps);
+  const extensionProps = { me, url: "/me", links };
+  let meSectionTile;
+  if (binder.hasExtension(EXTENSION_POINT)) {
+    meSectionTile = <TitleWithAvatar me={me} />;
+  } else {
+    meSectionTile = <TitleWithIcon title={me.displayName} icon="user-circle" />;
+  }
 
   return (
     <footer className="footer">
-      <div className="container is-centered has-text-centered ">
-        <p className="is-size-6 columns is-centered">
-          <AvatarWrapper>
-            <figure className="media-left">
-              <p className="image is-24x24 is-rounded">
-                <AvatarImage person={me} representation="rounded" />
-              </p>
-            </figure>
-          </AvatarWrapper>
-          <Link to={"/me"}>{me.displayName}</Link>
-        </p>
-        <hr className={"has-background-grey-lighter"} />
-        <p>
-          <a href="https://www.scm-manager.org/" target="_blank">
-            SCM-Manager {version}
-          </a>
-          {extensions.map(Ext => (
-            <>
-              {" "}
-              | <Ext {...extensionProps} />
-            </>
-          ))}
-        </p>
-        <br />
-        <p>
-          Powered by{" "}
-          <a target="_blank" href="https://cloudogu.com/">
-            Cloudogu GmbH
-          </a>{" "}
-          | Learn more about{" "}
-          <a href="https://www.scm-manager.org/" target="_blank">
-            SCM-Manager
-          </a>
-        </p>
-      </div>
+      <section className="section container">
+        <div className="columns is-size-7">
+          <FooterSection title={meSectionTile}>
+            <NavLink to="#" label="Profile" />
+            <NavLink to="#" label="Change Password" />
+            <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
+          </FooterSection>
+          <FooterSection title={<TitleWithIcon title="Information" icon="info-circle" />}>
+            <a href="https://www.scm-manager.org/" target="_blank">
+              SCM-Manager {version}
+            </a>
+            <ExtensionPoint name="footer.links" props={extensionProps} renderAll={true} />
+          </FooterSection>
+          <FooterSection title={<TitleWithIcon title="About" icon="external-link-alt" />}>
+            <a href="https://www.scm-manager.org/" target="_blank">
+              Learn more
+            </a>
+            <a target="_blank" href="https://cloudogu.com/">
+              Powered by Cloudogu
+            </a>
+            <ExtensionPoint name="footer.links" props={extensionProps} renderAll={true} />
+          </FooterSection>
+        </div>
+      </section>
     </footer>
   );
 };

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

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from "react";
+import styled from "styled-components";
+
+type Props = {
+  title: ReactNode;
+};
+
+const Title = styled.div`
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+`;
+
+const Menu = styled.ul`
+  padding-left: 1.1rem;
+`;
+
+const FooterSection: FC<Props> = ({ title, children }) => {
+  return (
+    <section className="column is-one-third">
+      <Title>{title}</Title>
+      <Menu>
+        {React.Children.map(children, (child, index) => (
+          <li key={index}>{child}</li>
+        ))}
+      </Menu>
+    </section>
+  );
+};
+
+export default FooterSection;

scm-ui/ui-styles/src/scm.scss

@@ -70,7 +70,7 @@ hr.header-with-actions {
 footer.footer {
   //height: 100px;
   background-color: whitesmoke;
-  padding: 2rem 1.5rem 1rem;
+  padding: inherit;
 }
 
 // 6. Import the rest of Bulma