improve contributor list in changeset detail view

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",

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",

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",

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} />}
     </>
   );
 };

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;