Merged in feature/unify_table (pull request #175)

Feature/unify table

scm-ui-components/packages/ui-components/src/BranchSelector.js

@@ -13,10 +13,11 @@ const styles = {
   minWidthOfLabel: {
     minWidth: "4.5rem"
   },
-  wrapper: {
-    padding: "1rem 1.5rem 0.25rem 1.5rem",
-    border: "1px solid #eee",
-    borderRadius: "5px 5px 0 0"
+  labelSizing: {
+    fontSize: "1rem !important"
+  },
+  noBottomMargin: {
+    marginBottom: "0 !important"
   }
 };
 
@@ -52,9 +53,9 @@ class BranchSelector extends React.Component<Props, State> {
       return (
         <div
           className={classNames(
-            "has-background-light field",
+            "field",
             "is-horizontal",
-            classes.wrapper
+            classes.noBottomMargin
           )}
         >
           <div
@@ -65,10 +66,14 @@ class BranchSelector extends React.Component<Props, State> {
               classes.minWidthOfLabel
             )}
           >
-            <label className="label">{label}</label>
+            <label className={classNames("label", classes.labelSizing)}>
+              {label}
+            </label>
           </div>
           <div className="field-body">
-            <div className="field is-narrow">
+            <div
+              className={classNames("field is-narrow", classes.noBottomMargin)}
+            >
               <div className="control">
                 <DropDown
                   className="is-fullwidth"

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetList.js

@@ -21,7 +21,7 @@ class ChangesetList extends React.Component<Props> {
         />
       );
     });
-    return <div className="box">{content}</div>;
+    return <>{content}</>;
   }
 }
 

scm-ui/src/repos/containers/Changesets.js

@@ -1,8 +1,13 @@
 // @flow
 
 import React from "react";
-import {withRouter} from "react-router-dom";
-import type {Branch, Changeset, PagedCollection, Repository} from "@scm-manager/ui-types";
+import { withRouter } from "react-router-dom";
+import type {
+  Branch,
+  Changeset,
+  PagedCollection,
+  Repository
+} from "@scm-manager/ui-types";
 import {
   fetchChangesets,
   getChangesets,
@@ -11,9 +16,15 @@ import {
   selectListAsCollection
 } from "../modules/changesets";
 
-import {connect} from "react-redux";
-import {ErrorNotification, getPageFromMatch, LinkPaginator, ChangesetList, Loading} from "@scm-manager/ui-components";
-import {compose} from "redux";
+import { connect } from "react-redux";
+import {
+  ErrorNotification,
+  getPageFromMatch,
+  LinkPaginator,
+  ChangesetList,
+  Loading
+} from "@scm-manager/ui-components";
+import { compose } from "redux";
 
 type Props = {
   repository: Repository,
@@ -64,13 +75,21 @@ class Changesets extends React.Component<Props> {
 
   renderList = () => {
     const { repository, changesets } = this.props;
-    return <ChangesetList repository={repository} changesets={changesets} />;
+    return (
+      <div className="panel-block">
+        <ChangesetList repository={repository} changesets={changesets} />
+      </div>
+    );
   };
 
   renderPaginator = () => {
     const { page, list } = this.props;
     if (list) {
-      return <LinkPaginator page={page} collection={list} />;
+      return (
+        <div className="panel-footer">
+          <LinkPaginator page={page} collection={list} />
+        </div>
+      );
     }
     return null;
   };

scm-ui/src/repos/containers/ChangesetsRoot.js

@@ -89,10 +89,12 @@ class BranchRoot extends React.Component<Props> {
     const changesets = <Changesets repository={repository} branch={branch} />;
 
     return (
-      <>
+      <div className="panel">
+        <div className="panel-heading">
         {this.renderBranchSelector()}
+        </div>
         <Route path={`${url}/:page?`} component={() => changesets} />
-      </>
+      </div>
     );
   }
 

scm-ui/src/repos/sources/components/FileTree.js

@@ -108,32 +108,34 @@ class FileTree extends React.Component<Props> {
     }
 
     return (
-      <table className="table table-hover table-sm is-fullwidth">
-        <thead>
-          <tr>
-            <th className={classes.iconColumn} />
-            <th>{t("sources.file-tree.name")}</th>
-            <th className="is-hidden-mobile">
-              {t("sources.file-tree.length")}
-            </th>
-            <th className="is-hidden-mobile">
-              {t("sources.file-tree.lastModified")}
-            </th>
-            <th className="is-hidden-mobile">
-              {t("sources.file-tree.description")}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {files.map(file => (
-            <FileTreeLeaf
-              key={file.name}
-              file={file}
-              baseUrl={baseUrlWithRevision}
-            />
-          ))}
-        </tbody>
-      </table>
+      <div className="panel-block">
+        <table className="table table-hover table-sm is-fullwidth">
+          <thead>
+            <tr>
+              <th className={classes.iconColumn} />
+              <th>{t("sources.file-tree.name")}</th>
+              <th className="is-hidden-mobile">
+                {t("sources.file-tree.length")}
+              </th>
+              <th className="is-hidden-mobile">
+                {t("sources.file-tree.lastModified")}
+              </th>
+              <th className="is-hidden-mobile">
+                {t("sources.file-tree.description")}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {files.map(file => (
+              <FileTreeLeaf
+                key={file.name}
+                file={file}
+                baseUrl={baseUrlWithRevision}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }

scm-ui/src/repos/sources/containers/Content.js

@@ -29,9 +29,6 @@ type State = {
 };
 
 const styles = {
-  toCenterContent: {
-    display: "block"
-  },
   pointer: {
     cursor: "pointer"
   },
@@ -126,7 +123,6 @@ class Content extends React.Component<Props, State> {
         <div
           className={classNames(
             "panel-block",
-            classes.toCenterContent,
             classes.hasBackground
           )}
         >
@@ -161,7 +157,7 @@ class Content extends React.Component<Props, State> {
   }
 
   render() {
-    const { file, revision, repository, path, classes } = this.props;
+    const { file, revision, repository, path } = this.props;
     const { showHistory } = this.state;
 
     const header = this.showHeader();
@@ -180,13 +176,11 @@ class Content extends React.Component<Props, State> {
 
     return (
       <div>
-        <nav className="panel">
-          <article className="panel-heading">{header}</article>
+        <div className="panel">
+          <div className="panel-heading">{header}</div>
           {moreInformation}
-          <div className={classNames("panel-block", classes.toCenterContent)}>
-            {content}
-          </div>
-        </nav>
+          {content}
+        </div>
       </div>
     );
   }

scm-ui/src/repos/sources/containers/HistoryView.js

@@ -79,12 +79,16 @@ class HistoryView extends React.Component<Props, State> {
     const currentPage = page + 1;
     return (
       <>
-        <ChangesetList repository={repository} changesets={changesets} />
-        <StatePaginator
-          page={currentPage}
-          collection={pageCollection}
-          updatePage={(newPage: number) => this.updatePage(newPage)}
-        />
+        <div className="panel-block">
+          <ChangesetList repository={repository} changesets={changesets} />
+        </div>
+        <div className="panel-footer">
+          <StatePaginator
+            page={currentPage}
+            collection={pageCollection}
+            updatePage={(newPage: number) => this.updatePage(newPage)}
+          />
+        </div>
       </>
     );
   }

scm-ui/src/repos/sources/containers/Sources.js

@@ -93,8 +93,10 @@ class Sources extends React.Component<Props> {
 
     if (currentFileIsDirectory) {
       return (
-        <div className={"has-border-around"}>
-          {this.renderBranchSelector()}
+        <div className="panel">
+          <div className="panel-heading">
+            {this.renderBranchSelector()}
+          </div>
           <FileTree
             repository={repository}
             revision={revision}

scm-ui/src/repos/sources/containers/SourcesView.js

@@ -90,7 +90,7 @@ class SourcesView extends React.Component<Props, State> {
 
     const sources = this.showSources();
 
-    return <>{sources}</>;
+    return <div className="panel-block">{sources}</div>;
   }
 }
 

scm-ui/styles/scm.scss

@@ -94,14 +94,6 @@ $fa-font-path: "webfonts";
   }
 }
 
-//border around options
-.has-border-around {
-  border-top: 1px solid #eee;
-  border-left: 1px solid #eee;
-  border-right: 1px solid #eee;
-  border-bottom: 1px solid #eee;
-}
-
 // multiline Columns
 .columns.is-multiline {
   .column.is-half {
@@ -201,6 +193,33 @@ $fa-font-path: "webfonts";
   }
 }
 
+// panels
+.panel {
+  .panel-heading > .field {
+    margin-bottom: 0; // replace selector margin
+  }
+  .panel-block {
+    display: block;
+  }
+
+  .panel-footer {
+    background-color: whitesmoke;
+    border-radius: 0 0 4px 4px;
+    color: #363636;
+    font-size: 1.25em;
+    font-weight: 300;
+    line-height: 1.25;
+    padding: 0.5em 0.75em;
+
+    border-left: 1px solid #dbdbdb;
+    border-right: 1px solid #dbdbdb;
+
+    &:last-child {
+      border-bottom: 1px solid #dbdbdb;
+    }
+  }
+}
+
 // forms
 .field:not(.is-grouped) {
   margin-bottom: 1rem;