diff --git a/CHANGELOG.md b/CHANGELOG.md index d4dcc480d1..4bb851e876 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Unreleased +### Added +- Added footer extension points for links and avatar + ## 2.0.0-rc4 - 2020-02-14 ### Added - Support for Java versions > 8 diff --git a/scm-ui/ui-components/src/avatar/AvatarImage.tsx b/scm-ui/ui-components/src/avatar/AvatarImage.tsx index 48808b582f..a30a999d18 100644 --- a/scm-ui/ui-components/src/avatar/AvatarImage.tsx +++ b/scm-ui/ui-components/src/avatar/AvatarImage.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, {FC} from "react"; import { binder } from "@scm-manager/ui-extensions"; import { Image } from ".."; import { Person } from "./Avatar"; @@ -6,21 +6,20 @@ import { EXTENSION_POINT } from "./Avatar"; type Props = { person: Person; + representation?: "rounded" | "rounded-border"; }; -class AvatarImage extends React.Component { - render() { - const { person } = this.props; - +const AvatarImage:FC = ({person, representation = "rounded-border"}) => { const avatarFactory = binder.getExtension(EXTENSION_POINT); if (avatarFactory) { const avatar = avatarFactory(person); - return {person.name}; + const className = representation === "rounded" ? "is-rounded" : "has-rounded-border"; + + return {person.name}; } return null; - } -} +}; export default AvatarImage; diff --git a/scm-ui/ui-components/src/layout/Footer.tsx b/scm-ui/ui-components/src/layout/Footer.tsx index 6c56061a71..2761268a1c 100644 --- a/scm-ui/ui-components/src/layout/Footer.tsx +++ b/scm-ui/ui-components/src/layout/Footer.tsx @@ -1,23 +1,66 @@ import React from "react"; -import { Me } from "@scm-manager/ui-types"; +import { Me, Links } from "@scm-manager/ui-types"; import { Link } from "react-router-dom"; +import { binder } from "@scm-manager/ui-extensions"; +import { AvatarWrapper, AvatarImage } from "../avatar"; type Props = { me?: Me; + version: string; + links: Links; }; +const RestDocLink = () => { + return Rest Documentation; +}; + +binder.bind("footer.links", RestDocLink); + class Footer extends React.Component { render() { - const { me } = this.props; + const { me, version, links } = this.props; if (!me) { return ""; } + + const extensions = binder.getExtensions("footer.links", { me, links }); + return ( ); diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss index cca6a484ed..dffa4cb00e 100644 --- a/scm-ui/ui-styles/src/scm.scss +++ b/scm-ui/ui-styles/src/scm.scss @@ -67,8 +67,10 @@ hr.header-with-actions { } } -.footer { - height: 50px; +footer.footer { + //height: 100px; + background-color: whitesmoke; + padding: 2rem 1.5rem 1rem; } // 6. Import the rest of Bulma @@ -691,11 +693,6 @@ form .field:not(.is-grouped) { } } -// footer -.footer { - background-color: whitesmoke; -} - // aside .aside-background { bottom: 0; diff --git a/scm-ui/ui-webapp/src/containers/App.tsx b/scm-ui/ui-webapp/src/containers/App.tsx index 281e47e920..6170621c65 100644 --- a/scm-ui/ui-webapp/src/containers/App.tsx +++ b/scm-ui/ui-webapp/src/containers/App.tsx @@ -8,6 +8,7 @@ import { fetchMe, getFetchMeFailure, getMe, isAuthenticated, isFetchMePending } import { ErrorPage, Footer, Header, Loading, PrimaryNavigation } from "@scm-manager/ui-components"; import { Links, Me } from "@scm-manager/ui-types"; import { + getAppVersion, getFetchIndexResourcesFailure, getLinks, getMeLink, @@ -21,6 +22,7 @@ type Props = WithTranslation & { loading: boolean; links: Links; meLink: string; + version: string; // dispatcher functions fetchMe: (link: string) => void; @@ -34,7 +36,7 @@ class App extends Component { } render() { - const { me, loading, error, authenticated, links, t } = this.props; + const { me, loading, error, authenticated, links, version, t } = this.props; let content; const navigation = authenticated ? : ""; @@ -50,7 +52,7 @@ class App extends Component {
{navigation}
{content} - {authenticated &&
); } @@ -69,13 +71,15 @@ const mapStateToProps = (state: any) => { const error = getFetchMeFailure(state) || getFetchIndexResourcesFailure(state); const links = getLinks(state); const meLink = getMeLink(state); + const version = getAppVersion(state); return { authenticated, me, loading, error, links, - meLink + meLink, + version }; };