hide contributor table behind toggle

scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx

@@ -50,6 +50,9 @@ const AvatarImage = styled(Image)`
   width: 1em;
   height: 1em;
   margin-right: 0.25em;
+  vertical-align: middle !important;
+  margin-bottom: 0.2em;
+  border-radius: 0.25em;
 `;
 
 type PersonAvatarProps = {
@@ -134,7 +137,7 @@ const ChangesetAuthor: FC<Props> = ({ changeset }) => {
     return filterTrailersByType("Co-authored-by");
   };
 
-  const getCommiters = () => {
+  const getCommitters = () => {
     return filterTrailersByType("Committed-by");
   };
 
@@ -153,25 +156,24 @@ const ChangesetAuthor: FC<Props> = ({ changeset }) => {
     );
   }
 
-  const commiters = getCommiters();
+  const commiters = getCommitters();
   if (commiters.length > 0) {
     authorLine.push(<Persons persons={commiters} label={"changesets.authors.committedBy"} />);
-
   }
+
   const coAuthors = getCoAuthors();
   if (coAuthors.length > 0) {
     authorLine.push(<Persons persons={coAuthors} label={"changesets.authors.coAuthoredBy"} />);
-
   }
+
   // extensions
   const extensions = binder.getExtensions("changesets.author.suffix", { changeset });
   if (extensions) {
     coAuthors.push(...extensions);
-
   }
 
   return (
-    <span style={{ verticalAlign: "middle" }}>
+    <>
       {authorLine.map((p, i) => {
         if (i === 0) {
           return <>{p}</>;
@@ -186,7 +188,7 @@ const ChangesetAuthor: FC<Props> = ({ changeset }) => {
           return <>, {p}</>;
         }
       })}
-    </span>
+    </>
   );
 };
 

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { Trans, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -31,12 +31,14 @@ import {
   AvatarImage,
   AvatarWrapper,
   Button,
+  ChangesetAuthor,
   ChangesetDiff,
   ChangesetId,
   changesets,
   ChangesetTag,
   DateFromNow,
-  Level
+  Level,
+  Icon
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 
@@ -63,6 +65,31 @@ const BottomMarginLevel = styled(Level)`
   margin-bottom: 1rem !important;
 `;
 
+const countContributors = (changeset: Changeset) => {
+  return changeset.trailers.length + 1;
+};
+
+const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <div className="level has-cursor-pointer" onClick={e => setOpen(!open)}>
+        <div className="level-left">
+          <p>
+            <Icon name={open ? "angle-down" : "angle-right"} /> <ChangesetAuthor changeset={changeset} />
+          </p>
+        </div>
+        <div className="level-right">
+          <p>
+            (<span className="has-text-link">{countContributors(changeset)} Contributors</span>)
+          </p>
+        </div>
+      </div>
+      {open && <ContributorTable changeset={changeset} />}
+    </>
+  );
+};
+
 class ChangesetDetails extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -101,14 +128,13 @@ class ChangesetDetails extends React.Component<Props, State> {
               </RightMarginP>
             </AvatarWrapper>
             <div className="media-content">
-              <ContributorTable changeset={changeset} />
+              <Contributors changeset={changeset} />
               <p>
                 <Trans i18nKey="repos:changeset.summary" components={[id, date]} />
               </p>
             </div>
             <div className="media-right">{this.renderTags()}</div>
           </article>
-
           <p>
             {description.message.split("\n").map((item, key) => {
               return (