use same components for plugin and repository overview

Created CardColumn and CardColumnGroup which encapsulate the layout for the two column card layout and use them for repository and plugin overview.

scm-ui/src/admin/plugins/components/PluginEntry.js

@@ -1,86 +1,44 @@
 //@flow
 import React from "react";
-import { Link } from "react-router-dom";
-import injectSheet from "react-jss";
-import classNames from "classnames";
 import type { Plugin } from "@scm-manager/ui-types";
+import { CardColumn } from "@scm-manager/ui-components";
 import PluginAvatar from "./PluginAvatar";
 
-const styles = {
-  inner: {
-    position: "relative",
-    pointerEvents: "none",
-    zIndex: 1
-  },
-  centerImage: {
-    marginTop: "0.8em",
-    marginLeft: "1em !important"
-  },
-  marginBottom: {
-    marginBottom: "0.75rem !important"
-  }
-};
-
 type Props = {
-  plugin: Plugin,
-  fullColumnWidth?: boolean,
-
-  // context props
-  classes: any
+  plugin: Plugin
 };
 
 class PluginEntry extends React.Component<Props> {
+  createAvatar = (plugin: Plugin) => {
+    return <PluginAvatar plugin={plugin} />;
+  };
+
+  createFooterLeft = (plugin: Plugin) => {
+    return <small className="level-item">{plugin.author}</small>;
+  };
+
+  createFooterRight = (plugin: Plugin) => {
+    return <p className="level-item">{plugin.version}</p>;
+  };
+
   render() {
-    const { plugin, classes, fullColumnWidth } = this.props;
-    const halfColumn = fullColumnWidth ? "is-full" : "is-half";
-    const overlayLinkClass = fullColumnWidth
-      ? "overlay-full-column"
-      : "overlay-half-column";
+    const { plugin } = this.props;
+    const avatar = this.createAvatar(plugin);
+    const footerLeft = this.createFooterLeft(plugin);
+    const footerRight = this.createFooterRight(plugin);
+
     // TODO: Add link to plugin page below
     return (
-      <div
-        className={classNames(
-          "box",
-          "box-link-shadow",
-          "column",
-          "is-clipped",
-          halfColumn
-        )}
-      >
-        <Link
-          className={classNames(overlayLinkClass, "is-plugin-page")}
-          to="#"
-        />
-        <article className={classNames("media", classes.inner)}>
-          <figure className={classNames(classes.centerImage, "media-left")}>
-            <PluginAvatar plugin={plugin} />
-          </figure>
-          <div className={classNames("media-content", "text-box")}>
-            <div className="content">
-              <nav
-                className={classNames(
-                  "level",
-                  "is-mobile",
-                  classes.marginBottom
-                )}
-              >
-                <div className="level-left">
-                  <strong>{plugin.name}</strong>
-                </div>
-                <div className="level-right is-hidden-mobile">
-                  {plugin.version}
-                </div>
-              </nav>
-              <p className="shorten-text is-marginless">{plugin.description}</p>
-              <p>
-                <small>{plugin.author}</small>
-              </p>
-            </div>
-          </div>
-        </article>
-      </div>
+      <CardColumn
+        link="#"
+        avatar={avatar}
+        title={plugin.name}
+        description={plugin.description}
+        footerLeft={footerLeft}
+        footerRight={footerRight}
+      />
     );
   }
 }
 
-export default injectSheet(styles)(PluginEntry);
+export default PluginEntry;