Merged in feature/ux (pull request #139)

Feature/ux

scm-ui/src/repos/components/RepositoryDetailTable.js

@@ -1,55 +1,55 @@
-//@flow
-import React from "react";
-import type { Repository } from "@scm-manager/ui-types";
-import { MailLink, DateFromNow } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
-
-type Props = {
-  repository: Repository,
-  // context props
-  t: string => string
-};
-
-class RepositoryDetailTable extends React.Component<Props> {
-  render() {
-    const { repository, t } = this.props;
-    return (
-      <table className="table">
-        <tbody>
-          <tr>
-            <td>{t("repository.name")}</td>
-            <td>{repository.name}</td>
-          </tr>
-          <tr>
-            <td>{t("repository.type")}</td>
-            <td>{repository.type}</td>
-          </tr>
-          <tr>
-            <td>{t("repository.contact")}</td>
-            <td>
-              <MailLink address={repository.contact} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("repository.description")}</td>
-            <td>{repository.description}</td>
-          </tr>
-          <tr>
-            <td>{t("repository.creationDate")}</td>
-            <td>
-              <DateFromNow date={repository.creationDate} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("repository.lastModified")}</td>
-            <td>
-              <DateFromNow date={repository.lastModified} />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("repos")(RepositoryDetailTable);
+//@flow
+import React from "react";
+import type { Repository } from "@scm-manager/ui-types";
+import { MailLink, DateFromNow } from "@scm-manager/ui-components";
+import { translate } from "react-i18next";
+
+type Props = {
+  repository: Repository,
+  // context props
+  t: string => string
+};
+
+class RepositoryDetailTable extends React.Component<Props> {
+  render() {
+    const { repository, t } = this.props;
+    return (
+      <table className="table">
+        <tbody>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.name")}</td>
+            <td>{repository.name}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.type")}</td>
+            <td>{repository.type}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.contact")}</td>
+            <td>
+              <MailLink address={repository.contact} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.description")}</td>
+            <td>{repository.description}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.creationDate")}</td>
+            <td>
+              <DateFromNow date={repository.creationDate} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.lastModified")}</td>
+            <td>
+              <DateFromNow date={repository.lastModified} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("repos")(RepositoryDetailTable);

scm-ui/src/repos/components/RepositoryDetails.js

@@ -1,29 +1,30 @@
-//@flow
-import React from "react";
-import type { Repository } from "@scm-manager/ui-types";
-import RepositoryDetailTable from "./RepositoryDetailTable";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-
-type Props = {
-  repository: Repository
-};
-
-class RepositoryDetails extends React.Component<Props> {
-  render() {
-    const { repository } = this.props;
-    return (
-      <div>
-        <RepositoryDetailTable repository={repository} />
-        <div className="content">
-          <ExtensionPoint
-            name="repos.repository-details.information"
-            renderAll={true}
-            props={{ repository }}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default RepositoryDetails;
+//@flow
+import React from "react";
+import type { Repository } from "@scm-manager/ui-types";
+import RepositoryDetailTable from "./RepositoryDetailTable";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+
+type Props = {
+  repository: Repository
+};
+
+class RepositoryDetails extends React.Component<Props> {
+  render() {
+    const { repository } = this.props;
+    return (
+      <div>
+        <RepositoryDetailTable repository={repository} />
+          <hr />
+        <div className="content">
+          <ExtensionPoint
+            name="repos.repository-details.information"
+            renderAll={true}
+            props={{ repository }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RepositoryDetails;

scm-ui/src/repos/components/list/RepositoryEntry.js

@@ -9,15 +9,10 @@ import classNames from "classnames";
 import RepositoryAvatar from "./RepositoryAvatar";
 
 const styles = {
-  outer: {
-    position: "relative"
-  },
   overlay: {
     position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0
+    height: "calc(120px - 1.5rem)",
+    width: "calc(50% - 3rem)"
   },
   inner: {
     position: "relative",
@@ -26,11 +21,16 @@ const styles = {
   },
   innerLink: {
     pointerEvents: "all"
+  },
+  centerImage: {
+    marginTop: "0.8em",
+    marginLeft: "1em !important"
   }
 };
 
 type Props = {
   repository: Repository,
+  fullColumnWidth?: boolean,
   // context props
   classes: any
 };
@@ -44,7 +44,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["changesets"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fa-code-branch"
+          iconClass="fa-code-branch fa-lg"
           to={repositoryLink + "/changesets"}
         />
       );
@@ -56,7 +56,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["sources"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fa-code"
+          iconClass="fa-code fa-lg"
           to={repositoryLink + "/sources"}
         />
       );
@@ -67,29 +67,40 @@ class RepositoryEntry extends React.Component<Props> {
   renderModifyLink = (repository: Repository, repositoryLink: string) => {
     if (repository._links["update"]) {
       return (
-        <RepositoryEntryLink iconClass="fa-cog" to={repositoryLink + "/edit"} />
+        <RepositoryEntryLink
+          iconClass="fa-cog fa-lg"
+          to={repositoryLink + "/edit"}
+        />
       );
     }
     return null;
   };
 
   render() {
-    const { repository, classes } = this.props;
+    const { repository, classes, fullColumnWidth } = this.props;
     const repositoryLink = this.createLink(repository);
+    const halfColumn = fullColumnWidth ? "is-full" : "is-half";
     return (
-      <div className={classNames("box", "box-link-shadow", classes.outer)}>
-        <Link className={classes.overlay} to={repositoryLink} />
+      <div
+        className={classNames(
+          "box",
+          "box-link-shadow",
+          "column",
+          "is-clipped",
+          halfColumn
+        )}
+      >
+        <Link className={classNames(classes.overlay)} to={repositoryLink} />
         <article className={classNames("media", classes.inner)}>
-          <figure className="media-left">
+          <figure className={classNames(classes.centerImage, "media-left")}>
             <RepositoryAvatar repository={repository} />
           </figure>
           <div className="media-content">
             <div className="content">
-              <p>
+              <p className="is-marginless">
                 <strong>{repository.name}</strong>
-                <br />
-                {repository.description}
               </p>
+              <p className={"shorten-text"}>{repository.description}</p>
             </div>
             <nav className="level is-mobile">
               <div className="level-left">

scm-ui/src/repos/components/list/RepositoryEntryLink.js

@@ -1,34 +1,35 @@
-//@flow
-import React from "react";
-import { Link } from "react-router-dom";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-
-const styles = {
-  link: {
-    pointerEvents: "all"
-  }
-};
-
-type Props = {
-  to: string,
-  iconClass: string,
-
-  // context props
-  classes: any
-};
-
-class RepositoryEntryLink extends React.Component<Props> {
-  render() {
-    const { to, iconClass, classes } = this.props;
-    return (
-      <Link className={classNames("level-item", classes.link)} to={to}>
-        <span className="icon is-small">
-          <i className={classNames("fa", iconClass)} />
-        </span>
-      </Link>
-    );
-  }
-}
-
-export default injectSheet(styles)(RepositoryEntryLink);
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  link: {
+    pointerEvents: "all",
+    marginRight: "1.25rem !important"
+  }
+};
+
+type Props = {
+  to: string,
+  iconClass: string,
+
+  // context props
+  classes: any
+};
+
+class RepositoryEntryLink extends React.Component<Props> {
+  render() {
+    const { to, iconClass, classes } = this.props;
+    return (
+      <Link className={classNames("level-item", classes.link)} to={to}>
+        <span className="icon is-small">
+          <i className={classNames("fa", iconClass)} />
+        </span>
+      </Link>
+    );
+  }
+}
+
+export default injectSheet(styles)(RepositoryEntryLink);

scm-ui/src/repos/components/list/RepositoryGroupEntry.js

@@ -1,16 +1,23 @@
 //@flow
 import React from "react";
-import type { RepositoryGroup } from "@scm-manager/ui-types";
+import type { RepositoryGroup, Repository } from "@scm-manager/ui-types";
 import injectSheet from "react-jss";
 import classNames from "classnames";
 import RepositoryEntry from "./RepositoryEntry";
 
 const styles = {
   pointer: {
-    cursor: "pointer"
+    cursor: "pointer",
+    fontSize: "1.5rem"
   },
   repoGroup: {
     marginBottom: "1em"
+  },
+  wrapper: {
+    padding: "0 0.75rem"
+  },
+  clearfix: {
+    clear: "both"
   }
 };
 
@@ -39,6 +46,18 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
     }));
   };
 
+  isLastEntry = (array: Repository[], index: number) => {
+    return index === array.length - 1;
+  };
+
+  isLengthOdd = (array: Repository[]) => {
+    return array.length % 2 !== 0;
+  };
+
+  isFullSize = (array: Repository[], index: number) => {
+    return this.isLastEntry(array, index) && this.isLengthOdd(array);
+  };
+
   render() {
     const { group, classes } = this.props;
     const { collapsed } = this.state;
@@ -47,7 +66,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
     let content = null;
     if (!collapsed) {
       content = group.repositories.map((repository, index) => {
-        return <RepositoryEntry repository={repository} key={index} />;
+        const fullColumnWidth = this.isFullSize(group.repositories, index);
+        return (
+          <RepositoryEntry repository={repository} fullColumnWidth={fullColumnWidth} key={index} />
+        );
       });
     }
     return (
@@ -58,7 +80,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
           </span>
         </h2>
         <hr />
-        {content}
+        <div className={classNames("columns", "is-multiline", classes.wrapper)}>
+          {content}
+        </div>
+        <div className={classes.clearfix} />
       </div>
     );
   }