More UI changes

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

@@ -1,113 +1,108 @@
-//@flow
-import React from "react";
-import { Link } from "react-router-dom";
-import injectSheet from "react-jss";
-import type { Repository } from "@scm-manager/ui-types";
-import { DateFromNow } from "@scm-manager/ui-components";
-import RepositoryEntryLink from "./RepositoryEntryLink";
-import classNames from "classnames";
-import RepositoryAvatar from "./RepositoryAvatar";
-
-const styles = {
-  outer: {
-    position: "relative"
-  },
-  overlay: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0
-  },
-  inner: {
-    position: "relative",
-    pointerEvents: "none",
-    zIndex: 1
-  },
-  innerLink: {
-    pointerEvents: "all"
-  }
-};
-
-type Props = {
-  repository: Repository,
-  // context props
-  classes: any
-};
-
-class RepositoryEntry extends React.Component<Props> {
-  createLink = (repository: Repository) => {
-    return `/repo/${repository.namespace}/${repository.name}`;
-  };
-
-  renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
-    if (repository._links["changesets"]) {
-      return (
-        <RepositoryEntryLink
-          iconClass="fa-code-branch"
-          to={repositoryLink + "/changesets"}
-        />
-      );
-    }
-    return null;
-  };
-
-  renderSourcesLink = (repository: Repository, repositoryLink: string) => {
-    if (repository._links["sources"]) {
-      return (
-        <RepositoryEntryLink
-          iconClass="fa-code"
-          to={repositoryLink + "/sources"}
-        />
-      );
-    }
-    return null;
-  };
-
-  renderModifyLink = (repository: Repository, repositoryLink: string) => {
-    if (repository._links["update"]) {
-      return (
-        <RepositoryEntryLink iconClass="fa-cog" to={repositoryLink + "/edit"} />
-      );
-    }
-    return null;
-  };
-
-  render() {
-    const { repository, classes } = this.props;
-    const repositoryLink = this.createLink(repository);
-    return (
-      <div className={classNames("box", "box-link-shadow", classes.outer)}>
-        <Link className={classes.overlay} to={repositoryLink} />
-        <article className={classNames("media", classes.inner)}>
-          <figure className="media-left">
-            <RepositoryAvatar repository={repository} />
-          </figure>
-          <div className="media-content">
-            <div className="content">
-              <p>
-                <strong>{repository.name}</strong>
-                <br />
-                {repository.description}
-              </p>
-            </div>
-            <nav className="level is-mobile">
-              <div className="level-left">
-                {this.renderChangesetsLink(repository, repositoryLink)}
-                {this.renderSourcesLink(repository, repositoryLink)}
-                {this.renderModifyLink(repository, repositoryLink)}
-              </div>
-              <div className="level-right is-hidden-mobile">
-                <small className="level-item">
-                  <DateFromNow date={repository.creationDate} />
-                </small>
-              </div>
-            </nav>
-          </div>
-        </article>
-      </div>
-    );
-  }
-}
-
-export default injectSheet(styles)(RepositoryEntry);
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import type { Repository } from "@scm-manager/ui-types";
+import { DateFromNow } from "@scm-manager/ui-components";
+import RepositoryEntryLink from "./RepositoryEntryLink";
+import classNames from "classnames";
+import RepositoryAvatar from "./RepositoryAvatar";
+
+const styles = {
+  overlay: {
+    position: "absolute",
+    height: "calc(120px - 1.5rem)",
+    width: "calc(50% - 3rem)"
+  },
+  inner: {
+    position: "relative",
+    pointerEvents: "none",
+    zIndex: 1
+  },
+  innerLink: {
+    pointerEvents: "all"
+  }
+};
+
+type Props = {
+  repository: Repository,
+  // context props
+  classes: any
+};
+
+class RepositoryEntry extends React.Component<Props> {
+  createLink = (repository: Repository) => {
+    return `/repo/${repository.namespace}/${repository.name}`;
+  };
+
+  renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["changesets"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-code-branch fa-lg"
+          to={repositoryLink + "/changesets"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderSourcesLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["sources"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-code fa-lg"
+          to={repositoryLink + "/sources"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderModifyLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["update"]) {
+      return (
+        <RepositoryEntryLink iconClass="fa-cog fa-lg" to={repositoryLink + "/edit"} />
+      );
+    }
+    return null;
+  };
+
+  render() {
+    const { repository, classes } = this.props;
+    const repositoryLink = this.createLink(repository);
+    return (
+      <div className={classNames("box", "box-link-shadow", "column", "is-half")}>
+        <Link className={classNames(classes.overlay)} to={repositoryLink} />
+        <article className={classNames("media", classes.inner)}>
+          <figure className="media-left">
+            <RepositoryAvatar repository={repository} />
+          </figure>
+          <div className="media-content">
+            <div className="content">
+              <p>
+                <strong>{repository.name}</strong>
+                <br />
+                {repository.description}
+              </p>
+            </div>
+            <nav className="level is-mobile">
+              <div className="level-left">
+                {this.renderChangesetsLink(repository, repositoryLink)}
+                {this.renderSourcesLink(repository, repositoryLink)}
+                {this.renderModifyLink(repository, repositoryLink)}
+              </div>
+              <div className="level-right is-hidden-mobile">
+                <small className="level-item">
+                  <DateFromNow date={repository.creationDate} />
+                </small>
+              </div>
+            </nav>
+          </div>
+        </article>
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(RepositoryEntry);

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

@@ -12,6 +12,12 @@ const styles = {
   },
   repoGroup: {
     marginBottom: "1em"
+  },
+  wrapper: {
+    padding: "0 0.75rem"
+  },
+  clearfix: {
+    clear: "both"
   }
 };
 
@@ -59,7 +65,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
           </span>
         </h2>
         <hr />
+        <div className={classNames("columns","is-multiline", classes.wrapper)}>
             {content}
+        </div>
+        <div className={classes.clearfix}></div>
       </div>
     );
   }