From 452b379a283a9a1e77fe00684397c7681df382df Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Wed, 10 Jun 2020 09:28:40 +0200
Subject: [PATCH] improve contributor list in changeset detail view

---
 scm-ui/ui-webapp/public/locales/de/repos.json |  3 +-
 scm-ui/ui-webapp/public/locales/en/repos.json |  1 +
 scm-ui/ui-webapp/public/locales/es/repos.json |  3 +-
 .../changesets/ChangesetDetails.tsx           | 30 ++++++++++++++++---
 .../changesets/ContributorTable.tsx           |  2 +-
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index b24089af5b..633ba03fe7 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -79,7 +79,8 @@
     "errorSubtitle": "Changesets konnten nicht abgerufen werden",
     "noChangesets": "Keine Changesets in diesem Branch gefunden. Die Commits könnten gelöscht worden sein.",
     "branchSelectorLabel": "Branches",
-    "collapseDiffs": "Auf-/Zuklappen"
+    "collapseDiffs": "Auf-/Zuklappen",
+    "contributors": "Liste der Mitwirkenden"
   },
   "changeset": {
     "description": "Beschreibung",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 621e3eafb8..c741a8a0d0 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -80,6 +80,7 @@
     "noChangesets": "No changesets found for this branch. The commits could have been removed.",
     "branchSelectorLabel": "Branches",
     "collapseDiffs": "Collapse",
+    "contributors": "List of contributors",
     "authors": {
       "and": "and",
       "authoredBy": "Authored by",
diff --git a/scm-ui/ui-webapp/public/locales/es/repos.json b/scm-ui/ui-webapp/public/locales/es/repos.json
index 6758a4841c..ddada3f8c3 100644
--- a/scm-ui/ui-webapp/public/locales/es/repos.json
+++ b/scm-ui/ui-webapp/public/locales/es/repos.json
@@ -79,7 +79,8 @@
     "errorSubtitle": "No se han podido recuperar los changesets",
     "noChangesets": "No se han encontrado changesets para esta rama branch. Los commits podrían haber sido eliminados.",
     "branchSelectorLabel": "Ramas",
-    "collapseDiffs": "Colapso"
+    "collapseDiffs": "Colapso",
+    "contributors": "Lista de contribuyentes"
   },
   "changeset": {
     "description": "Descripción",
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
index 70052f382b..98ae941bcf 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React, { FC, useState } from "react";
-import { Trans, WithTranslation, withTranslation } from "react-i18next";
+import {Trans, useTranslation, WithTranslation, withTranslation} from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -87,19 +87,41 @@ const CountColumn = styled.p`
   white-space: nowrap;
 `;
 
+const ContributorDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+`;
+
+const ContributorToggleLine = styled.p`
+  cursor: pointer;
+  /** maring-bottom is inherit from content p **/
+  margin-bottom: 0.5rem !important;
+`;
+
 const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
-  const [open, setOpen] = useState(false);
+  const [t] = useTranslation("repos");
+  const [open, setOpen] = useState(true);
+  if (open) {
+    return (
+      <ContributorDetails>
+        <ContributorToggleLine onClick={e => setOpen(!open)}>
+          <Icon name="angle-down" /> {t("changesets.contributors")}
+        </ContributorToggleLine>
+        <ContributorTable changeset={changeset} />
+      </ContributorDetails>
+    );
+  }
   return (
     <>
       <ContributorLine onClick={e => setOpen(!open)}>
         <ContributorColumn>
-          <Icon name={open ? "angle-down" : "angle-right"} /> <ChangesetAuthor changeset={changeset} />
+          <Icon name="angle-right" /> <ChangesetAuthor changeset={changeset} />
         </ContributorColumn>
         <CountColumn>
           (<span className="has-text-link">{countContributors(changeset)} Contributors</span>)
         </CountColumn>
       </ContributorLine>
-      {open && <ContributorTable changeset={changeset} />}
     </>
   );
 };
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
index 11d843428f..7f8596242c 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
@@ -45,7 +45,7 @@ type Person = {
 const ContributorAvatar = styled(Image)`
   width: 1em;
   height: 1em;
-  margin-right: 0.5em;
+  margin-right: 0.25em;
   vertical-align: middle;
   border-radius: 0.25em;
   margin-bottom: 0.2em;