Change changeset list from table to simple divs

scm-ui/src/changesets/components/ChangesetAvatar.js

@@ -0,0 +1,28 @@
+//@flow
+import React from "react";
+import {ExtensionPoint} from "@scm-manager/ui-extensions";
+import type {Changeset} from "@scm-manager/ui-types";
+import {Image} from "@scm-manager/ui-components";
+
+type Props = {
+  changeset: Changeset
+};
+
+class ChangesetAvatar extends React.Component<Props> {
+  render() {
+    const { changeset } = this.props;
+    return (
+      <p className="image is-64x64">
+        <ExtensionPoint
+          name="repos.changeset-table.information"
+          renderAll={true}
+          props={{ changeset }}
+        >
+          <Image src="/images/blib.jpg" alt="Logo" />
+        </ExtensionPoint>
+      </p>
+    );
+  }
+}
+
+export default ChangesetAvatar;

scm-ui/src/changesets/components/ChangesetRow.js

@@ -1,28 +1,63 @@
-import React from "react"
-import type { Changeset } from "@scm-manager/ui-types"
-import {ExtensionPoint} from "@scm-manager/ui-extensions";
+//@flow
+import React from "react";
+import type { Changeset } from "@scm-manager/ui-types";
+import classNames from "classnames";
+import { Link } from "react-router-dom";
+import ChangesetAvatar from "./ChangesetAvatar";
+import injectSheet from "react-jss";
+
+const styles = {
+  pointer: {
+    cursor: "pointer"
+  },
+  changesetGroup: {
+    marginBottom: "1em"
+  }
+};
 
 type Props = {
-  changeset: Changeset
-}
+  changeset: Changeset,
+  classes: any
+};
 
 class ChangesetRow extends React.Component<Props> {
+  createLink = (changeset: Changeset) => {
+    return `/repo/${changeset.description}/changeset/${changeset.id}`;
+  };
 
   render() {
-    const { changeset } = this.props;
+    const { changeset, classes } = this.props;
+    const changesetLink = this.createLink(changeset);
     // todo: i18n
-    return <tr>
-      <td>
-        <ExtensionPoint
-          name="repos.changeset-table.information"
-          renderAll={true}
-          props={{ changeset }}
-        />
+    return (
+      <div className={classNames("box", "box-link-shadow", classes.outer)}>
+        <Link className={classes.overlay} to={changesetLink} />
+        <article className={classNames("media", classes.inner)}>
+          <figure className="media-left">
+            <ChangesetAvatar changeset={changeset} />
+          </figure>
+          <div className="media-content">
+            <div className="content">
+              <p>
+                <p className="is-size-7">
+                  Changeset {changeset.id} commited at {changeset.date}
+                </p>
+                <p className="is-size-7">
+                  {changeset.author.name}{" "}
+                  <a href={"mailto:" + changeset.author.mail}>
+                    &lt;
+                    {changeset.author.mail}
+                    &gt;
+                  </a>
+                </p>
                 <p>{changeset.description}</p>
-        <p className="is-size-7">Changeset { changeset.id } commited at { changeset.date }</p>
-        <p className="is-size-7">{changeset.author.name} <a href={"mailto:" + changeset.author.mail}>&lt;{changeset.author.mail}&gt;</a></p></td>
-    </tr>
+              </p>
+            </div>
+          </div>
+        </article>
+      </div>
+    );
   }
 }
 
-export default ChangesetRow;
+export default injectSheet(styles)(ChangesetRow);

scm-ui/src/changesets/components/ChangesetTable.js

@@ -1,29 +1,24 @@
 // @flow
 import ChangesetRow from "./ChangesetRow";
 import React from "react";
+import type {Changeset} from "@scm-manager/ui-types";
 
 type Props = {
   changesets: Changeset[]
-}
+};
 
 class ChangesetTable extends React.Component<Props> {
-
   render() {
-    const {changesets} = this.props;
-    return <div>
-      <table className="table is-hoverable is-fullwidth is-striped is-bordered">
-        <thead>
-        <tr>
-          <th>Changesets</th>
-        </tr>
-        </thead>
-        <tbody>
-        {changesets.map((changeset, index) => {
-          return <ChangesetRow key={index} changeset={changeset}/>;
-        })}
-        </tbody>
-      </table>
+    const { changesets } = this.props;
+    const content = changesets.map((changeset, index) => {
+      return <ChangesetRow key={index} changeset={changeset} />;
+    });
+    return (
+      <div>
+        <hr />
+        {content}
       </div>
+    );
   }
 }