From 258e11025a61894606b69b336fd2f3b8dd06e769 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 29 Jan 2019 17:12:18 +0100
Subject: [PATCH] changed panel usage + added pannel-footer

---
 .../src/repos/changesets/ChangesetList.js     | 21 +++++++++++++++----
 scm-ui/src/repos/containers/Changesets.js     |  2 +-
 .../src/repos/sources/containers/Content.js   |  6 ++----
 .../repos/sources/containers/HistoryView.js   | 12 ++++++-----
 .../repos/sources/containers/SourcesView.js   | 17 +++++++++++----
 scm-ui/styles/scm.scss                        | 18 ++++++++++++++++
 6 files changed, 58 insertions(+), 18 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 74ec816369..c50c8a2d50 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,17 +1,26 @@
 // @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[]
+  changesets: Changeset[],
+  classes: any
+};
+
+const styles = {
+  toCenterContent: {
+    display: "block"
+  }
 };
 
 class ChangesetList extends React.Component<Props> {
   render() {
-    const { repository, changesets } = this.props;
+    const { repository, changesets, classes } = this.props;
     const content = changesets.map(changeset => {
       return (
         <ChangesetRow
@@ -21,8 +30,12 @@ class ChangesetList extends React.Component<Props> {
         />
       );
     });
-    return <div className="box">{content}</div>;
+    return (
+      <div className={classNames("panel-block", classes.toCenterContent)}>
+        {content}
+      </div>
+    );
   }
 }
 
-export default ChangesetList;
+export default injectSheet(styles)(ChangesetList);
diff --git a/scm-ui/src/repos/containers/Changesets.js b/scm-ui/src/repos/containers/Changesets.js
index 95bf0459a6..69dc41da2d 100644
--- a/scm-ui/src/repos/containers/Changesets.js
+++ b/scm-ui/src/repos/containers/Changesets.js
@@ -70,7 +70,7 @@ class Changesets extends React.Component<Props> {
   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;
   };
diff --git a/scm-ui/src/repos/sources/containers/Content.js b/scm-ui/src/repos/sources/containers/Content.js
index 6339c49a3d..cc4aa32b5b 100644
--- a/scm-ui/src/repos/sources/containers/Content.js
+++ b/scm-ui/src/repos/sources/containers/Content.js
@@ -161,7 +161,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();
@@ -183,9 +183,7 @@ class Content extends React.Component<Props, State> {
         <nav className="panel">
           <article className="panel-heading">{header}</article>
           {moreInformation}
-          <div className={classNames("panel-block", classes.toCenterContent)}>
-            {content}
-          </div>
+          {content}
         </nav>
       </div>
     );
diff --git a/scm-ui/src/repos/sources/containers/HistoryView.js b/scm-ui/src/repos/sources/containers/HistoryView.js
index 98400248d9..c118ef9cea 100644
--- a/scm-ui/src/repos/sources/containers/HistoryView.js
+++ b/scm-ui/src/repos/sources/containers/HistoryView.js
@@ -80,11 +80,13 @@ class HistoryView extends React.Component<Props, State> {
     return (
       <>
         <ChangesetList repository={repository} changesets={changesets} />
-        <StatePaginator
-          page={currentPage}
-          collection={pageCollection}
-          updatePage={(newPage: number) => this.updatePage(newPage)}
-        />
+        <div className="panel-footer">
+          <StatePaginator
+            page={currentPage}
+            collection={pageCollection}
+            updatePage={(newPage: number) => this.updatePage(newPage)}
+          />
+        </div>
       </>
     );
   }
diff --git a/scm-ui/src/repos/sources/containers/SourcesView.js b/scm-ui/src/repos/sources/containers/SourcesView.js
index 1e76c6d6bf..220c6ecc27 100644
--- a/scm-ui/src/repos/sources/containers/SourcesView.js
+++ b/scm-ui/src/repos/sources/containers/SourcesView.js
@@ -8,12 +8,15 @@ 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
+  path: string,
+  classes: any
 };
 
 type State = {
@@ -23,6 +26,12 @@ type State = {
   error?: Error
 };
 
+const styles = {
+  toCenterContent: {
+    display: "block"
+  }
+};
+
 class SourcesView extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -78,7 +87,7 @@ class SourcesView extends React.Component<Props, State> {
   }
 
   render() {
-    const { file } = this.props;
+    const { file, classes } = this.props;
     const { loaded, error } = this.state;
 
     if (!file || !loaded) {
@@ -90,8 +99,8 @@ class SourcesView extends React.Component<Props, State> {
 
     const sources = this.showSources();
 
-    return <>{sources}</>;
+    return <div className={classNames("panel-block", classes.toCenterContent)}>{sources}</div>;
   }
 }
 
-export default SourcesView;
+export default injectSheet(styles)(SourcesView);
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 620410bd48..59f1ca07a4 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -194,6 +194,24 @@ $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;
+
+  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;