From b5f392d73efe2cdfcadb6f296d7559091c91b8c5 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Fri, 1 Feb 2019 10:12:45 +0100
Subject: [PATCH] added sources overview

---
 .../src/repos/changesets/ChangesetList.js     | 17 ++----
 .../src/repos/sources/components/FileTree.js  | 54 ++++++++++---------
 .../src/repos/sources/containers/Content.js   |  4 --
 .../src/repos/sources/containers/Sources.js   |  8 +--
 .../repos/sources/containers/SourcesView.js   | 17 ++----
 scm-ui/styles/scm.scss                        | 39 +++++++-------
 6 files changed, 59 insertions(+), 80 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetList.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetList.js
index c50c8a2d50..e5fac920a2 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetList.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetList.js
@@ -1,26 +1,17 @@
 // @flow
 import ChangesetRow from "./ChangesetRow";
 import React from "react";
-import injectSheet from "react-jss";
-import classNames from "classnames";
 
 import type { Changeset, Repository } from "@scm-manager/ui-types";
 
 type Props = {
   repository: Repository,
-  changesets: Changeset[],
-  classes: any
-};
-
-const styles = {
-  toCenterContent: {
-    display: "block"
-  }
+  changesets: Changeset[]
 };
 
 class ChangesetList extends React.Component<Props> {
   render() {
-    const { repository, changesets, classes } = this.props;
+    const { repository, changesets } = this.props;
     const content = changesets.map(changeset => {
       return (
         <ChangesetRow
@@ -31,11 +22,11 @@ class ChangesetList extends React.Component<Props> {
       );
     });
     return (
-      <div className={classNames("panel-block", classes.toCenterContent)}>
+      <div className="panel-block">
         {content}
       </div>
     );
   }
 }
 
-export default injectSheet(styles)(ChangesetList);
+export default ChangesetList;
diff --git a/scm-ui/src/repos/sources/components/FileTree.js b/scm-ui/src/repos/sources/components/FileTree.js
index cbe03df62f..18ef1b01c5 100644
--- a/scm-ui/src/repos/sources/components/FileTree.js
+++ b/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>
     );
   }
 }
diff --git a/scm-ui/src/repos/sources/containers/Content.js b/scm-ui/src/repos/sources/containers/Content.js
index cc4aa32b5b..899e40b511 100644
--- a/scm-ui/src/repos/sources/containers/Content.js
+++ b/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
           )}
         >
diff --git a/scm-ui/src/repos/sources/containers/Sources.js b/scm-ui/src/repos/sources/containers/Sources.js
index 321c1faa16..7da024b450 100644
--- a/scm-ui/src/repos/sources/containers/Sources.js
+++ b/scm-ui/src/repos/sources/containers/Sources.js
@@ -93,15 +93,17 @@ class Sources extends React.Component<Props> {
 
     if (currentFileIsDirectory) {
       return (
-        <div className="has-border-around is-round">
-          {this.renderBranchSelector()}
+        <nav className="panel">
+          <article className="panel-heading">
+            {this.renderBranchSelector()}
+          </article>
           <FileTree
             repository={repository}
             revision={revision}
             path={path}
             baseUrl={baseUrl}
           />
-        </div>
+        </nav>
       );
     } else {
       return (
diff --git a/scm-ui/src/repos/sources/containers/SourcesView.js b/scm-ui/src/repos/sources/containers/SourcesView.js
index 220c6ecc27..0f729beb2e 100644
--- a/scm-ui/src/repos/sources/containers/SourcesView.js
+++ b/scm-ui/src/repos/sources/containers/SourcesView.js
@@ -8,15 +8,12 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { getContentType } from "./contentType";
 import type { File, Repository } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
-import injectSheet from "react-jss";
-import classNames from "classnames";
 
 type Props = {
   repository: Repository,
   file: File,
   revision: string,
-  path: string,
-  classes: any
+  path: string
 };
 
 type State = {
@@ -26,12 +23,6 @@ type State = {
   error?: Error
 };
 
-const styles = {
-  toCenterContent: {
-    display: "block"
-  }
-};
-
 class SourcesView extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -87,7 +78,7 @@ class SourcesView extends React.Component<Props, State> {
   }
 
   render() {
-    const { file, classes } = this.props;
+    const { file } = this.props;
     const { loaded, error } = this.state;
 
     if (!file || !loaded) {
@@ -99,8 +90,8 @@ class SourcesView extends React.Component<Props, State> {
 
     const sources = this.showSources();
 
-    return <div className={classNames("panel-block", classes.toCenterContent)}>{sources}</div>;
+    return <div className="panel-block">{sources}</div>;
   }
 }
 
-export default injectSheet(styles)(SourcesView);
+export default SourcesView;
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 59f1ca07a4..258c8a84a4 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -85,15 +85,6 @@ $fa-font-path: "webfonts";
   }
 }
 
-//border around options
-.has-border-around {
-  border: 1px solid #dbdbdb;
-
-  &.is-round {
-    border-radius: 4px;
-  }
-}
-
 // multiline Columns
 .columns.is-multiline {
   .column.is-half {
@@ -195,20 +186,26 @@ $fa-font-path: "webfonts";
 }
 
 //panels
-.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;
+nav.panel {
+  .panel-block {
+    display: block;
+  }
 
-  border-left: 1px solid #dbdbdb;
-  border-right: 1px solid #dbdbdb;
+  .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;
 
-  &:last-child {
-    border-bottom: 1px solid #dbdbdb;
+    border-left: 1px solid #dbdbdb;
+    border-right: 1px solid #dbdbdb;
+
+    &:last-child {
+      border-bottom: 1px solid #dbdbdb;
+    }
   }
 }