From 7fed62ff8ab1f18a9e5bc1e92ed2fcce873b6a3d Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Tue, 5 Feb 2019 18:36:26 +0100
Subject: [PATCH 01/10] Added extension point for author metadata

---
 .../scm/api/v2/resources/HalAppender.java      |  4 ++--
 .../src/repos/changesets/ChangesetAuthor.js    | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/scm-core/src/main/java/sonia/scm/api/v2/resources/HalAppender.java b/scm-core/src/main/java/sonia/scm/api/v2/resources/HalAppender.java
index a7beaf1f6e..6afb542646 100644
--- a/scm-core/src/main/java/sonia/scm/api/v2/resources/HalAppender.java
+++ b/scm-core/src/main/java/sonia/scm/api/v2/resources/HalAppender.java
@@ -27,7 +27,7 @@ public interface HalAppender {
   LinkArrayBuilder linkArrayBuilder(String rel);
 
   /**
-   * Appends one embedded to the json response.
+   * Appends one embedded object to the json response.
    *
    * @param rel name of relation
    * @param embeddedItem embedded object
@@ -40,7 +40,7 @@ public interface HalAppender {
   interface LinkArrayBuilder {
 
     /**
-     * Append an link to the array.
+     * Append a link to the array.
      *
      * @param name name of link
      * @param href link target
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js
index 5bb6437575..bba29a1da2 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js
@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
-import type {Changeset} from "@scm-manager/ui-types";
+import type { Changeset } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
 type Props = {
   changeset: Changeset
@@ -16,11 +17,24 @@ class ChangesetAuthor extends React.Component<Props> {
     const { name } = changeset.author;
     return (
       <>
-        {name} {this.renderMail()}
+        {name} {this.renderMail()} {this.renderAuthorMetadataExtensionPoint()}
       </>
     );
   }
 
+  renderAuthorMetadataExtensionPoint = () => {
+    const { changeset } = this.props;
+    return (
+      <ExtensionPoint
+        name="changesets.changeset.author.metadata"
+        props={{ changeset }}
+        renderAll={true}
+      >
+        asas
+      </ExtensionPoint>
+    );
+  };
+
   renderMail() {
     const { mail } = this.props.changeset.author;
     if (mail) {

From 927ba5df186b9e2ab5a29d545e7a9113399b14be Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 09:28:43 +0100
Subject: [PATCH 02/10] added title with the exact date to DateFromNow

---
 .../packages/ui-components/src/DateFromNow.js | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/DateFromNow.js b/scm-ui-components/packages/ui-components/src/DateFromNow.js
index b47de49a3d..be15bcdad2 100644
--- a/scm-ui-components/packages/ui-components/src/DateFromNow.js
+++ b/scm-ui-components/packages/ui-components/src/DateFromNow.js
@@ -2,31 +2,40 @@
 import React from "react";
 import moment from "moment";
 import { translate } from "react-i18next";
+import injectSheet from "react-jss";
+
+const styles = {
+  date: {
+    borderBottom: "1px dotted rgba(219, 219, 219)",
+    cursor: "help"
+  }
+};
 
 type Props = {
   date?: string,
 
   // context props
+  classes: any,
   i18n: any
 };
 
 class DateFromNow extends React.Component<Props> {
-  static format(locale: string, date?: string) {
-    let fromNow = "";
-    if (date) {
-      fromNow = moment(date)
-        .locale(locale)
-        .fromNow();
-    }
-    return fromNow;
-  }
 
   render() {
-    const { i18n, date } = this.props;
+    const { i18n, date, classes } = this.props;
 
-    const fromNow = DateFromNow.format(i18n.language, date);
-    return <span>{fromNow}</span>;
+    if (date) {
+      const dateWithLocale = moment(date).locale(i18n.language);
+
+      return (
+        <time title={dateWithLocale.format()} className={classes.date}>
+          {dateWithLocale.fromNow()}
+        </time>
+      );
+    }
+
+    return null;
   }
 }
 
-export default translate()(DateFromNow);
+export default injectSheet(styles)(translate()(DateFromNow));

From 9cb1c24567558877c43ff846cf4094c999c11a04 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 09:29:53 +0100
Subject: [PATCH 03/10] use react children for Button and ButtonGroup

---
 .../ui-components/src/buttons/Button.js       |  8 +--
 .../ui-components/src/buttons/ButtonGroup.js  | 45 ++++++----------
 .../components/content/FileButtonGroup.js     | 53 ++++++++-----------
 3 files changed, 45 insertions(+), 61 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/buttons/Button.js b/scm-ui-components/packages/ui-components/src/buttons/Button.js
index 4ad88f4eac..2102bb540a 100644
--- a/scm-ui-components/packages/ui-components/src/buttons/Button.js
+++ b/scm-ui-components/packages/ui-components/src/buttons/Button.js
@@ -1,16 +1,17 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 import { withRouter } from "react-router-dom";
 
 export type ButtonProps = {
-  label: string,
+  label?: string,
   loading?: boolean,
   disabled?: boolean,
   action?: (event: Event) => void,
   link?: string,
   fullWidth?: boolean,
   className?: string,
+  children?: React.Node,
   classes: any
 };
 
@@ -45,6 +46,7 @@ class Button extends React.Component<Props> {
       type,
       color,
       fullWidth,
+      children,
       className
     } = this.props;
     const loadingClass = loading ? "is-loading" : "";
@@ -62,7 +64,7 @@ class Button extends React.Component<Props> {
           className
         )}
       >
-        {label}
+        {label} {children}
       </button>
     );
   };
diff --git a/scm-ui-components/packages/ui-components/src/buttons/ButtonGroup.js b/scm-ui-components/packages/ui-components/src/buttons/ButtonGroup.js
index 56ef66522a..fb48a3ba4f 100644
--- a/scm-ui-components/packages/ui-components/src/buttons/ButtonGroup.js
+++ b/scm-ui-components/packages/ui-components/src/buttons/ButtonGroup.js
@@ -1,41 +1,30 @@
 // @flow
-import React from "react";
-import Button from "./Button";
+import * as React from "react";
 
 type Props = {
-  firstlabel: string,
-  secondlabel: string,
-  firstAction?: (event: Event) => void,
-  secondAction?: (event: Event) => void,
-  firstIsSelected: boolean
+  addons?: boolean,
+  className?: string,
+  children: React.Node
 };
 
 class ButtonGroup extends React.Component<Props> {
 
+  static defaultProps = {
+    addons: true
+  };
+
   render() {
-    const { firstlabel, secondlabel, firstAction, secondAction, firstIsSelected } = this.props;
-
-    let showFirstColor = "";
-    let showSecondColor = "";
-
-    if (firstIsSelected) {
-      showFirstColor += "link is-selected";
-    } else {
-      showSecondColor += "link is-selected";
+    const { addons, className, children } = this.props;
+    let styleClasses = "buttons";
+    if (addons) {
+      styleClasses += " has-addons";
+    }
+    if (className) {
+      styleClasses += " " + className;
     }
-
     return (
-      <div className="buttons has-addons">
-        <Button
-          label={firstlabel}
-          color={showFirstColor}
-          action={firstAction}
-        />
-        <Button
-          label={secondlabel}
-          color={showSecondColor}
-          action={secondAction}
-        />
+      <div className={styleClasses}>
+        { children }
       </div>
     );
   }
diff --git a/scm-ui/src/repos/sources/components/content/FileButtonGroup.js b/scm-ui/src/repos/sources/components/content/FileButtonGroup.js
index c56df2e5a1..6318425711 100644
--- a/scm-ui/src/repos/sources/components/content/FileButtonGroup.js
+++ b/scm-ui/src/repos/sources/components/content/FileButtonGroup.js
@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { ButtonGroup } from "@scm-manager/ui-components";
+import { ButtonGroup, Button } from "@scm-manager/ui-components";
 
 type Props = {
   t: string => string,
@@ -18,39 +18,32 @@ class FileButtonGroup extends React.Component<Props> {
     this.props.showHistory(false);
   };
 
+  color = (selected: boolean) => {
+    return selected ? "link is-selected" : null;
+  };
+
   render() {
     const { t, historyIsSelected } = this.props;
 
-    const sourcesLabel = (
-      <>
-        <span className="icon">
-          <i className="fas fa-code" />
-        </span>
-        <span className="is-hidden-mobile">
-          {t("sources.content.sourcesButton")}
-        </span>
-      </>
-    );
-
-    const historyLabel = (
-      <>
-        <span className="icon">
-          <i className="fas fa-history" />
-        </span>
-        <span className="is-hidden-mobile">
-          {t("sources.content.historyButton")}
-        </span>
-      </>
-    );
-
     return (
-      <ButtonGroup
-        firstlabel={sourcesLabel}
-        secondlabel={historyLabel}
-        firstAction={this.showSources}
-        secondAction={this.showHistory}
-        firstIsSelected={!historyIsSelected}
-      />
+      <ButtonGroup>
+        <Button action={this.showSources} color={ this.color(!historyIsSelected) }>
+          <span className="icon">
+            <i className="fas fa-code"/>
+          </span>
+            <span className="is-hidden-mobile">
+            {t("sources.content.sourcesButton")}
+          </span>
+        </Button>
+        <Button action={this.showHistory} color={ this.color(historyIsSelected) }>
+          <span className="icon">
+            <i className="fas fa-history"/>
+          </span>
+            <span className="is-hidden-mobile">
+            {t("sources.content.historyButton")}
+          </span>
+          </Button>
+      </ButtonGroup>
     );
   }
 }

From c5511af4480914aafdbea6bcb7b48f529c1a8295 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 09:30:30 +0100
Subject: [PATCH 04/10] use span for tooltip and added an option to change
 tooltip location

---
 .../packages/ui-components/src/Tooltip.js          | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/Tooltip.js b/scm-ui-components/packages/ui-components/src/Tooltip.js
index d935b323c7..50aecfc80c 100644
--- a/scm-ui-components/packages/ui-components/src/Tooltip.js
+++ b/scm-ui-components/packages/ui-components/src/Tooltip.js
@@ -5,20 +5,26 @@ import classNames from "classnames";
 type Props = {
   message: string,
   className: string,
+  location?: string,
   children: React.Node
 };
 
 class Tooltip extends React.Component<Props> {
+
+  static defaultProps = {
+    location: "right"
+  };
+
   render() {
-    const { className, message, children } = this.props;
+    const { className, message, location, children } = this.props;
     const multiline = message.length > 60 ? "is-tooltip-multiline" : "";
     return (
-      <div
-        className={classNames("tooltip", "is-tooltip-right", multiline, className)}
+      <span
+        className={classNames("tooltip", "is-tooltip-" + location, multiline, className)}
         data-tooltip={message}
       >
         {children}
-      </div>
+      </span>
     );
   }
 }

From d14837b03e6c821c25baf872e8ebd12e843b7dfd Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 09:32:24 +0100
Subject: [PATCH 05/10] fix small flow issues

---
 scm-ui-components/packages/ui-components/src/Tooltip.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/Tooltip.js b/scm-ui-components/packages/ui-components/src/Tooltip.js
index 50aecfc80c..cecb8d349b 100644
--- a/scm-ui-components/packages/ui-components/src/Tooltip.js
+++ b/scm-ui-components/packages/ui-components/src/Tooltip.js
@@ -4,8 +4,8 @@ import classNames from "classnames";
 
 type Props = {
   message: string,
-  className: string,
-  location?: string,
+  className?: string,
+  location: string,
   children: React.Node
 };
 

From 6ba90fb8dab287fc0cc9b41e99d2e1c388252b67 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 10:23:52 +0100
Subject: [PATCH 06/10] enabled nested rules for jss

---
 scm-ui/package.json | 1 +
 scm-ui/src/index.js | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/scm-ui/package.json b/scm-ui/package.json
index bf4e272fb0..2144e50e6c 100644
--- a/scm-ui/package.json
+++ b/scm-ui/package.json
@@ -17,6 +17,7 @@
     "i18next": "^11.4.0",
     "i18next-browser-languagedetector": "^2.2.2",
     "i18next-fetch-backend": "^0.1.0",
+    "jss-nested": "^6.0.1",
     "moment": "^2.22.2",
     "node-sass": "^4.9.3",
     "postcss-easy-import": "^3.0.0",
diff --git a/scm-ui/src/index.js b/scm-ui/src/index.js
index 08e3e8a58c..fd09a0b75f 100644
--- a/scm-ui/src/index.js
+++ b/scm-ui/src/index.js
@@ -17,6 +17,12 @@ import { ConnectedRouter } from "react-router-redux";
 
 import { urls } from "@scm-manager/ui-components";
 
+import jss from "jss";
+import jssNested from "jss-nested";
+
+// setup jss and install required plugins
+jss.setup(jssNested());
+
 // Create a history of your choosing (we're using a browser history in this case)
 const history: BrowserHistory = createHistory({
   basename: urls.contextPath

From 0bf7a6f168a1395bd38db74080b068ad1fb99499 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 10:27:11 +0100
Subject: [PATCH 07/10] redesign changeset list

---
 .../src/repos/changesets/ChangesetAuthor.js   |  56 +++----
 .../repos/changesets/ChangesetButtonGroup.js  |  45 ++++++
 .../src/repos/changesets/ChangesetId.js       |  11 +-
 .../src/repos/changesets/ChangesetRow.js      | 140 ++++++++++--------
 .../src/repos/changesets/ChangesetTag.js      |  25 +---
 .../src/repos/changesets/ChangesetTagBase.js  |  34 +++++
 .../src/repos/changesets/ChangesetTags.js     |  31 ++++
 .../changesets/ChangesetTagsCollapsed.js      |  27 ++++
 .../src/repos/changesets/changesets.js        |  10 ++
 .../src/repos/changesets/index.js             |   4 +
 scm-ui/public/locales/de/repos.json           |   8 +-
 scm-ui/public/locales/en/repos.json           |   8 +-
 12 files changed, 278 insertions(+), 121 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagBase.js
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTags.js
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagsCollapsed.js

diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js
index bba29a1da2..6ee76e3927 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetAuthor.js
@@ -2,9 +2,13 @@
 import React from "react";
 import type { Changeset } from "@scm-manager/ui-types";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import {translate} from "react-i18next";
 
 type Props = {
-  changeset: Changeset
+  changeset: Changeset,
+
+  // context props
+  t: (string) => string
 };
 
 class ChangesetAuthor extends React.Component<Props> {
@@ -14,39 +18,35 @@ class ChangesetAuthor extends React.Component<Props> {
       return null;
     }
 
-    const { name } = changeset.author;
+    const { name, mail } = changeset.author;
+    if (mail) {
+      return this.withExtensionPoint(this.renderWithMail(name, mail));
+    }
+    return this.withExtensionPoint(<>{name}</>);
+  }
+
+  renderWithMail(name: string, mail: string) {
+    const { t } = this.props;
     return (
-      <>
-        {name} {this.renderMail()} {this.renderAuthorMetadataExtensionPoint()}
-      </>
+      <a href={"mailto: " + mail} title={t("changesets.author.mailto") + " " + mail}>
+        {name}
+      </a>
     );
   }
 
-  renderAuthorMetadataExtensionPoint = () => {
-    const { changeset } = this.props;
+  withExtensionPoint(child: any) {
+    const { t } = this.props;
     return (
-      <ExtensionPoint
-        name="changesets.changeset.author.metadata"
-        props={{ changeset }}
-        renderAll={true}
-      >
-        asas
-      </ExtensionPoint>
+      <>
+        {t("changesets.author.prefix")} {child}
+        <ExtensionPoint
+          name="changesets.author.suffix"
+          props={{ changeset: this.props.changeset }}
+          renderAll={true}
+        />
+    </>
     );
-  };
-
-  renderMail() {
-    const { mail } = this.props.changeset.author;
-    if (mail) {
-      return (
-        <a className="is-hidden-mobile" href={"mailto:" + mail}>
-          &lt;
-          {mail}
-          &gt;
-        </a>
-      );
-    }
   }
 }
 
-export default ChangesetAuthor;
+export default translate("repos")(ChangesetAuthor);
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
new file mode 100644
index 0000000000..292d61b6cc
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
@@ -0,0 +1,45 @@
+//@flow
+import React from "react";
+import type { Changeset, Repository } from "@scm-manager/ui-types";
+import ButtonGroup from "../../buttons/ButtonGroup";
+import Button from "../../buttons/Button";
+import { createChangesetLink, createSourcesLink } from "./changesets";
+
+type Props = {
+  repository: Repository,
+  changeset: Changeset
+}
+
+class ChangesetButtonGroup extends React.Component<Props> {
+
+  render() {
+    const { repository, changeset } = this.props;
+
+    const changesetLink = createChangesetLink(repository, changeset);
+    const sourcesLink = createSourcesLink(repository, changeset);
+
+    return (
+      <ButtonGroup className="is-pulled-right">
+        <Button link={changesetLink}>
+          <span className="icon">
+            <i className="fas fa-code"></i>
+          </span>
+          <span className="is-hidden-mobile is-hidden-tablet-only">
+            Details
+          </span>
+        </Button>
+        <Button link={sourcesLink}>
+          <span className="icon">
+            <i className="fas fa-history"></i>
+          </span>
+          <span className="is-hidden-mobile is-hidden-tablet-only">
+            Sources
+          </span>
+        </Button>
+      </ButtonGroup>
+    );
+  }
+
+}
+
+export default ChangesetButtonGroup;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetId.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetId.js
index aec1029427..a3cc3c73b7 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetId.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetId.js
@@ -3,6 +3,7 @@
 import {Link} from "react-router-dom";
 import React from "react";
 import type {Changeset, Repository} from "@scm-manager/ui-types";
+import { createChangesetLink } from "./changesets";
 
 type Props = {
   repository: Repository,
@@ -20,13 +21,11 @@ export default class ChangesetId extends React.Component<Props> {
   };
 
   renderLink = () => {
-    const { changeset, repository } = this.props;
+    const { repository, changeset } = this.props;
+    const link = createChangesetLink(repository, changeset);
+
     return (
-      <Link
-        to={`/repo/${repository.namespace}/${repository.name}/changeset/${
-          changeset.id
-        }`}
-      >
+      <Link to={link}>
         {this.shortId(changeset)}
       </Link>
     );
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetRow.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetRow.js
index 7609bc2171..10287ec71f 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetRow.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetRow.js
@@ -8,21 +8,39 @@ import ChangesetId from "./ChangesetId";
 import injectSheet from "react-jss";
 import { DateFromNow } from "../..";
 import ChangesetAuthor from "./ChangesetAuthor";
-import ChangesetTag from "./ChangesetTag";
-
 import { parseDescription } from "./changesets";
 import { AvatarWrapper, AvatarImage } from "../../avatar";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import ChangesetTags from "./ChangesetTags";
+import ChangesetButtonGroup from "./ChangesetButtonGroup";
 
 const styles = {
-  pointer: {
-    cursor: "pointer"
+  changeset: {
+    // & references parent rule
+    // have a look at https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.9
+    "& + &": {
+      borderTop: "1px solid rgba(219, 219, 219, 0.5)",
+      marginTop: "1rem",
+      paddingTop: "1rem"
+    }
   },
-  changesetGroup: {
-    marginBottom: "1em"
+  avatarFigure: {
+    marginTop: ".25rem",
+    marginRight: ".5rem",
   },
-  withOverflow: {
-    overflow: "auto"
+  avatarImage: {
+    height: "35px",
+    width: "35px"
+  },
+  isVcentered: {
+    marginTop: "auto",
+    marginBottom: "auto"
+  },
+  metadata: {
+    marginLeft: 0
+  },
+  tag: {
+    marginTop: ".5rem"
   }
 };
 
@@ -34,74 +52,70 @@ type Props = {
 };
 
 class ChangesetRow extends React.Component<Props> {
-  createLink = (changeset: Changeset) => {
+  createChangesetId = (changeset: Changeset) => {
     const { repository } = this.props;
     return <ChangesetId changeset={changeset} repository={repository} />;
   };
 
-  getTags = () => {
-    const { changeset } = this.props;
-    return changeset._embedded.tags || [];
-  };
-
   render() {
-    const { changeset, classes } = this.props;
-    const changesetLink = this.createLink(changeset);
-    const dateFromNow = <DateFromNow date={changeset.date} />;
-    const authorLine = <ChangesetAuthor changeset={changeset} />;
+    const { repository, changeset, classes } = this.props;
     const description = parseDescription(changeset.description);
+    const changesetId = this.createChangesetId(changeset);
+    const dateFromNow = <DateFromNow date={changeset.date} />;
 
     return (
-      <article className={classNames("media", classes.inner)}>
-        <AvatarWrapper>
-          <div>
-            <figure className="media-left">
-              <p className="image is-64x64">
-                <AvatarImage person={changeset.author} />
-              </p>
-            </figure>
+      <div className={classes.changeset}>
+        <div className="columns">
+          <div className="column is-three-fifths">
+
+            <h4 className="has-text-weight-bold is-ellipsis-overflow">
+              <ExtensionPoint
+                name="changesets.changeset.description"
+                props={{ changeset, value: description.title }}
+                renderAll={false}
+              >
+                {description.title}
+              </ExtensionPoint>
+            </h4>
+
+            <div className="media">
+              <AvatarWrapper>
+                <figure className={classNames(classes.avatarFigure, "media-left")}>
+                  <div className={classNames("image", classes.avatarImage)}>
+                    <AvatarImage person={changeset.author} />
+                  </div>
+                </figure>
+              </AvatarWrapper>
+              <div className={classNames(classes.metadata, "media-right")}>
+                <p className="is-hidden-mobile is-hidden-tablet-only">
+                  <Interpolate
+                    i18nKey="changesets.changeset.summary"
+                    id={changesetId}
+                    time={dateFromNow}
+                  />
+                </p>
+                <p className="is-hidden-desktop">
+                  <Interpolate
+                    i18nKey="changesets.changeset.short-summary"
+                    id={changesetId}
+                    time={dateFromNow}
+                  />
+                </p>
+                <p className="is-size-7">
+                  <ChangesetAuthor changeset={changeset} />
+                </p>
+              </div>
+            </div>
+
           </div>
-        </AvatarWrapper>
-        <div className={classNames("media-content", classes.withOverflow)}>
-          <div className="content">
-            <p className="is-ellipsis-overflow">
-              <strong>
-                <ExtensionPoint
-                  name="changesets.changeset.description"
-                  props={{ changeset, value: description.title }}
-                  renderAll={false}
-                >
-                  {description.title}
-                </ExtensionPoint>
-              </strong>
-              <br />
-              <Interpolate
-                i18nKey="changesets.changeset.summary"
-                id={changesetLink}
-                time={dateFromNow}
-              />
-            </p>{" "}
-            <div className="is-size-7">{authorLine}</div>
+          <div className={classNames("column", classes.isVcentered)}>
+            <ChangesetTags changeset={changeset} />
+            <ChangesetButtonGroup repository={repository} changeset={changeset} />
           </div>
         </div>
-        {this.renderTags()}
-      </article>
+      </div>
     );
   }
-
-  renderTags = () => {
-    const tags = this.getTags();
-    if (tags.length > 0) {
-      return (
-        <div className="media-right">
-          {tags.map((tag: Tag) => {
-            return <ChangesetTag key={tag.name} tag={tag} />;
-          })}
-        </div>
-      );
-    }
-    return null;
-  };
 }
 
 export default injectSheet(styles)(translate("repos")(ChangesetRow));
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTag.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTag.js
index 6a87400d2e..03c73a8e9f 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTag.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTag.js
@@ -1,32 +1,17 @@
 //@flow
 import React from "react";
 import type { Tag } from "@scm-manager/ui-types";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-
-const styles = {
-  spacing: {
-    marginRight: "4px"
-  }
-};
+import ChangesetTagBase from "./ChangesetTagBase";
 
 type Props = {
-  tag: Tag,
-
-  // context props
-  classes: Object
+  tag: Tag
 };
 
 class ChangesetTag extends React.Component<Props> {
   render() {
-    const { tag, classes } = this.props;
-    return (
-      <span className="tag is-info">
-        <span className={classNames("fa", "fa-tag", classes.spacing)} />{" "}
-        {tag.name}
-      </span>
-    );
+    const { tag } = this.props;
+    return <ChangesetTagBase icon={"fa-tag"} label={tag.name} />;
   }
 }
 
-export default injectSheet(styles)(ChangesetTag);
+export default ChangesetTag;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagBase.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagBase.js
new file mode 100644
index 0000000000..7fc8dabcd2
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagBase.js
@@ -0,0 +1,34 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  tag: {
+    marginTop: ".5rem"
+  },
+  spacing: {
+    marginRight: ".25rem"
+  }
+};
+
+type Props = {
+  icon: string,
+  label: string,
+
+  // context props
+  classes: Object
+};
+
+class ChangesetTagBase extends React.Component<Props> {
+  render() {
+    const { icon, label, classes } = this.props;
+    return (
+      <span className={classNames(classes.tag, "tag", "is-info")}>
+        <span className={classNames("fa", icon, classes.spacing)} /> {label}
+      </span>
+    );
+  }
+}
+
+export default injectSheet(styles)(ChangesetTagBase);
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTags.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTags.js
new file mode 100644
index 0000000000..b8bff8ddd2
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTags.js
@@ -0,0 +1,31 @@
+//@flow
+import React from "react";
+import type { Changeset} from "@scm-manager/ui-types";
+import ChangesetTag from "./ChangesetTag";
+import ChangesetTagsCollapsed from "./ChangesetTagsCollapsed";
+
+type Props = {
+  changeset: Changeset
+};
+
+class ChangesetTags extends React.Component<Props> {
+
+  getTags = () => {
+    const { changeset } = this.props;
+    return changeset._embedded.tags || [];
+  };
+
+  render() {
+    const tags = this.getTags();
+
+    if (tags.length === 1) {
+      return <ChangesetTag tag={tags[0]} />;
+    } else if (tags.length > 1) {
+      return <ChangesetTagsCollapsed tags={tags} />;
+    } else {
+      return null;
+    }
+  }
+}
+
+export default ChangesetTags;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagsCollapsed.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagsCollapsed.js
new file mode 100644
index 0000000000..50fb36644d
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagsCollapsed.js
@@ -0,0 +1,27 @@
+//@flow
+import React from "react";
+import type { Tag } from "@scm-manager/ui-types";
+import ChangesetTagBase from "./ChangesetTagBase";
+import { translate } from "react-i18next";
+import Tooltip from "../../Tooltip";
+
+type Props = {
+  tags: Tag[],
+
+  // context props
+  t: (string) => string
+};
+
+class ChangesetTagsCollapsed extends React.Component<Props> {
+  render() {
+    const { tags, t } = this.props;
+    const message = tags.map((tag) => tag.name).join(", ");
+    return (
+      <Tooltip location="top" message={message}>
+        <ChangesetTagBase icon={"fa-tags"} label={ tags.length + " " + t("changesets.tags") } />
+      </Tooltip>
+    );
+  }
+}
+
+export default translate("repos")(ChangesetTagsCollapsed);
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/changesets.js b/scm-ui-components/packages/ui-components/src/repos/changesets/changesets.js
index f61a89c74b..69227ad75d 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/changesets.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/changesets.js
@@ -1,9 +1,19 @@
 // @flow
+import type { Changeset, Repository } from "@scm-manager/ui-types";
+
 export type Description = {
   title: string,
   message: string
 };
 
+export function createChangesetLink(repository: Repository, changeset: Changeset) {
+  return `/repo/${repository.namespace}/${repository.name}/changeset/${changeset.id}`;
+}
+
+export function createSourcesLink(repository: Repository, changeset: Changeset) {
+  return `/repo/${repository.namespace}/${repository.name}/sources/${changeset.id}`;
+}
+
 export function parseDescription(description?: string): Description {
   const desc = description ? description : "";
   const lineBreak = desc.indexOf("\n");
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/index.js b/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
index 0e7a5e533d..cede55ceca 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
@@ -3,8 +3,12 @@ import * as changesets from "./changesets";
 export { changesets };
 
 export { default as ChangesetAuthor } from "./ChangesetAuthor";
+export { default as ChangesetButtonGroup } from "./ChangesetButtonGroup";
+export { default as ChangesetDiff } from "./ChangesetDiff";
 export { default as ChangesetId } from "./ChangesetId";
 export { default as ChangesetList } from "./ChangesetList";
 export { default as ChangesetRow } from "./ChangesetRow";
 export { default as ChangesetTag } from "./ChangesetTag";
+export { default as ChangesetTags } from "./ChangesetTags";
+export { default as ChangesetTagsCollapsed } from "./ChangesetTagsCollapsed";
 export { default as ChangesetDiff } from "./ChangesetDiff";
diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index e82edf7512..2b6fe66bb5 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -76,11 +76,15 @@
       "description": "Beschreibung",
       "contact": "Kontakt",
       "date": "Datum",
-      "summary": "Changeset {{id}} wurde committet {{time}}"
+      "summary": "Changeset {{id}} wurde committet {{time}}",
+      "short-summary": "Committet {{id}} {{time}}"
     },
+    "tags": "Tags",
     "author": {
       "name": "Autor",
-      "mail": "Mail"
+      "mail": "Mail",
+      "prefix": "Verfasst von",
+      "mailto": "E-Mail senden an"
     }
   },
   "branch-selector": {
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index 727fe4f664..c829db54ad 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -76,11 +76,15 @@
       "description": "Description",
       "contact": "Contact",
       "date": "Date",
-      "summary": "Changeset {{id}} was committed {{time}}"
+      "summary": "Changeset {{id}} was committed {{time}}",
+      "short-summary": "Committed {{id}} {{time}}"
     },
+    "tags": "Tags",
     "author": {
       "name": "Author",
-      "mail": "Mail"
+      "mail": "Mail",
+      "prefix": "Authored by",
+      "mailto": "Send mail to"
     }
   },
   "branch-selector": {

From cbfa751a05e4b5e369b9f20e292953b04c6d94e4 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 10:33:58 +0100
Subject: [PATCH 08/10] fixed wrong icons and added missing translation

---
 .../repos/changesets/ChangesetButtonGroup.js   | 18 +++++++++++-------
 .../src/repos/changesets/index.js              |  1 -
 scm-ui/public/locales/de/repos.json            |  6 +++++-
 scm-ui/public/locales/en/repos.json            |  4 ++++
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
index 292d61b6cc..7958dfe804 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
@@ -4,16 +4,20 @@ import type { Changeset, Repository } from "@scm-manager/ui-types";
 import ButtonGroup from "../../buttons/ButtonGroup";
 import Button from "../../buttons/Button";
 import { createChangesetLink, createSourcesLink } from "./changesets";
+import { translate } from "react-i18next";
 
 type Props = {
   repository: Repository,
-  changeset: Changeset
+  changeset: Changeset,
+
+  // context props
+  t: (string) => string
 }
 
 class ChangesetButtonGroup extends React.Component<Props> {
 
   render() {
-    const { repository, changeset } = this.props;
+    const { repository, changeset, t } = this.props;
 
     const changesetLink = createChangesetLink(repository, changeset);
     const sourcesLink = createSourcesLink(repository, changeset);
@@ -22,18 +26,18 @@ class ChangesetButtonGroup extends React.Component<Props> {
       <ButtonGroup className="is-pulled-right">
         <Button link={changesetLink}>
           <span className="icon">
-            <i className="fas fa-code"></i>
+            <i className="fas fa-code-branch"></i>
           </span>
           <span className="is-hidden-mobile is-hidden-tablet-only">
-            Details
+            {t("changesets.buttons.details")}
           </span>
         </Button>
         <Button link={sourcesLink}>
           <span className="icon">
-            <i className="fas fa-history"></i>
+            <i className="fas fa-code"></i>
           </span>
           <span className="is-hidden-mobile is-hidden-tablet-only">
-            Sources
+            {t("changesets.buttons.sources")}
           </span>
         </Button>
       </ButtonGroup>
@@ -42,4 +46,4 @@ class ChangesetButtonGroup extends React.Component<Props> {
 
 }
 
-export default ChangesetButtonGroup;
+export default translate("repos")(ChangesetButtonGroup);
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/index.js b/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
index cede55ceca..7a07ad8f42 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
@@ -11,4 +11,3 @@ export { default as ChangesetRow } from "./ChangesetRow";
 export { default as ChangesetTag } from "./ChangesetTag";
 export { default as ChangesetTags } from "./ChangesetTags";
 export { default as ChangesetTagsCollapsed } from "./ChangesetTagsCollapsed";
-export { default as ChangesetDiff } from "./ChangesetDiff";
diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index 2b6fe66bb5..13c302aa67 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -84,7 +84,11 @@
       "name": "Autor",
       "mail": "Mail",
       "prefix": "Verfasst von",
-      "mailto": "E-Mail senden an"
+      "mailto": "Mail senden an"
+    },
+    "buttons": {
+      "details": "Details",
+      "sources": "Sources"
     }
   },
   "branch-selector": {
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index c829db54ad..94e6dd7fdb 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -85,6 +85,10 @@
       "mail": "Mail",
       "prefix": "Authored by",
       "mailto": "Send mail to"
+    },
+    "buttons": {
+      "details": "Details",
+      "sources": "Sources"
     }
   },
   "branch-selector": {

From fbaa5041a71b85e4cb682e674f5f00898eed7969 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 7 Feb 2019 10:43:16 +0100
Subject: [PATCH 09/10] added spacing between tags on changeset detail page

---
 .../src/repos/components/changesets/ChangesetDetails.js   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/scm-ui/src/repos/components/changesets/ChangesetDetails.js b/scm-ui/src/repos/components/changesets/ChangesetDetails.js
index 217b236122..fab976b797 100644
--- a/scm-ui/src/repos/components/changesets/ChangesetDetails.js
+++ b/scm-ui/src/repos/components/changesets/ChangesetDetails.js
@@ -22,6 +22,11 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 const styles = {
   spacing: {
     marginRight: "1em"
+  },
+  tags: {
+    "& .tag": {
+      marginLeft: ".25rem"
+    }
   }
 };
 
@@ -106,10 +111,11 @@ class ChangesetDetails extends React.Component<Props> {
   };
 
   renderTags = () => {
+    const { classes } = this.props;
     const tags = this.getTags();
     if (tags.length > 0) {
       return (
-        <div className="level-item">
+        <div className={classNames("level-item", classes.tags)}>
           {tags.map((tag: Tag) => {
             return <ChangesetTag key={tag.name} tag={tag} />;
           })}

From ecfe0979435691c8310cb43eaf02e0810ff01bd1 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Thu, 7 Feb 2019 11:04:13 +0000
Subject: [PATCH 10/10] Close branch
 feature/changeset_committer_extension_point