From ef6259da58351f6d167288740da3cdac9faea915 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 11:16:59 +0100
Subject: [PATCH 01/11] added pageactions for every page component

---
 .../packages/ui-components/src/layout/Page.js | 32 +++++++++++++++++--
 .../ui-components/src/layout/PageActions.js   | 28 ++++++++++++++++
 .../ui-components/src/layout/index.js         |  1 +
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/layout/PageActions.js

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index f0f2d5d971..6e25a86ac8 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -20,8 +20,15 @@ class Page extends React.Component<Props> {
     return (
       <section className="section">
         <div className="container">
-          <Title title={title} />
-          <Subtitle subtitle={subtitle} />
+          <div className="columns">
+            <div className="column">
+              <Title title={title} />
+              <Subtitle subtitle={subtitle} />
+            </div>
+            <div className="column is-two-fifths is-pulled-right">
+              {this.renderPageActions()}
+            </div>
+          </div>
           <ErrorNotification error={error} />
           {this.renderContent()}
         </div>
@@ -37,7 +44,26 @@ class Page extends React.Component<Props> {
     if (loading) {
       return <Loading />;
     }
-    return children;
+
+    let content = [];
+    React.Children.forEach(children, child => {
+      if (child.type.name !== "PageActions") {
+        content.push(child);
+      }
+    });
+    return content;
+  }
+
+  renderPageActions() {
+    const { children } = this.props;
+
+    let content = null;
+    React.Children.forEach(children, child => {
+      if (child.type.name === "PageActions") {
+        content = child;
+      }
+    });
+    return content;
   }
 }
 
diff --git a/scm-ui-components/packages/ui-components/src/layout/PageActions.js b/scm-ui-components/packages/ui-components/src/layout/PageActions.js
new file mode 100644
index 0000000000..eb055a5605
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/layout/PageActions.js
@@ -0,0 +1,28 @@
+//@flow
+import * as React from "react";
+import Loading from "./../Loading";
+
+type Props = {
+  loading?: boolean,
+  error?: Error,
+  children: React.Node
+};
+
+class PageActions extends React.Component<Props> {
+  render() {
+    return <>{this.renderContent()}</>;
+  }
+
+  renderContent() {
+    const { loading, children, error } = this.props;
+    if (error) {
+      return null;
+    }
+    if (loading) {
+      return <Loading />;
+    }
+    return children;
+  }
+}
+
+export default PageActions;
diff --git a/scm-ui-components/packages/ui-components/src/layout/index.js b/scm-ui-components/packages/ui-components/src/layout/index.js
index c93fe3b496..7708c45c99 100644
--- a/scm-ui-components/packages/ui-components/src/layout/index.js
+++ b/scm-ui-components/packages/ui-components/src/layout/index.js
@@ -3,6 +3,7 @@
 export { default as Footer } from "./Footer.js";
 export { default as Header } from "./Header.js";
 export { default as Page } from "./Page.js";
+export { default as PageActions } from "./PageActions.js";
 export { default as Subtitle } from "./Subtitle.js";
 export { default as Title } from "./Title.js";
 

From b8dd00fc099ce3e5a73b1b4a0aa0e7f3667d003d Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 11:53:38 +0100
Subject: [PATCH 02/11] caught uncaught child error and added PageAction Button
 to Repo Overview

---
 .../packages/ui-components/src/layout/Page.js | 27 ++++++++++---------
 scm-ui/src/repos/containers/Overview.js       | 20 ++++++++++----
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 6e25a86ac8..80f02139f4 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -36,8 +36,21 @@ class Page extends React.Component<Props> {
     );
   }
 
+  renderPageActions() {
+    const { children } = this.props;
+
+    let content = null;
+    React.Children.forEach(children, child => {
+      if (child && child.type.name === "PageActions") {
+        content = child;
+      }
+    });
+    return content;
+  }
+
   renderContent() {
     const { loading, children, showContentOnError, error } = this.props;
+
     if (error && !showContentOnError) {
       return null;
     }
@@ -47,24 +60,12 @@ class Page extends React.Component<Props> {
 
     let content = [];
     React.Children.forEach(children, child => {
-      if (child.type.name !== "PageActions") {
+      if (child && child.type.name !== "PageActions") {
         content.push(child);
       }
     });
     return content;
   }
-
-  renderPageActions() {
-    const { children } = this.props;
-
-    let content = null;
-    React.Children.forEach(children, child => {
-      if (child.type.name === "PageActions") {
-        content = child;
-      }
-    });
-    return content;
-  }
 }
 
 export default Page;
diff --git a/scm-ui/src/repos/containers/Overview.js b/scm-ui/src/repos/containers/Overview.js
index 598b6c94f2..ac044b5225 100644
--- a/scm-ui/src/repos/containers/Overview.js
+++ b/scm-ui/src/repos/containers/Overview.js
@@ -14,7 +14,13 @@ import {
   isFetchReposPending
 } from "../modules/repos";
 import { translate } from "react-i18next";
-import { CreateButton, Page, Paginator } from "@scm-manager/ui-components";
+import {
+  Page,
+  PageActions,
+  Button,
+  CreateButton,
+  Paginator
+} from "@scm-manager/ui-components";
 import RepositoryList from "../components/list";
 import { withRouter } from "react-router-dom";
 import type { History } from "history";
@@ -67,6 +73,13 @@ class Overview extends React.Component<Props> {
         error={error}
       >
         {this.renderList()}
+        <PageActions>
+          <Button
+            label={t("overview.createButton")}
+            link="/repos/create"
+            color="primary"
+          />
+        </PageActions>
       </Page>
     );
   }
@@ -89,10 +102,7 @@ class Overview extends React.Component<Props> {
     const { showCreateButton, t } = this.props;
     if (showCreateButton) {
       return (
-        <CreateButton
-          label={t("overview.createButton")}
-          link="/repos/create"
-        />
+        <CreateButton label={t("overview.createButton")} link="/repos/create" />
       );
     }
     return null;

From 33b331b9a0a4d68ec601b5898317f6bcf1b7a300 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 11:58:22 +0100
Subject: [PATCH 03/11] fixed right pulling of actionbutton and changed
 subtitle headline for validator purpose

---
 scm-ui-components/packages/ui-components/src/layout/Page.js   | 4 +++-
 .../packages/ui-components/src/layout/Subtitle.js             | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 80f02139f4..718280053b 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -25,8 +25,10 @@ class Page extends React.Component<Props> {
               <Title title={title} />
               <Subtitle subtitle={subtitle} />
             </div>
-            <div className="column is-two-fifths is-pulled-right">
+            <div className="column is-two-fifths">
+              <div className="is-pulled-right">
               {this.renderPageActions()}
+              </div>
             </div>
           </div>
           <ErrorNotification error={error} />
diff --git a/scm-ui-components/packages/ui-components/src/layout/Subtitle.js b/scm-ui-components/packages/ui-components/src/layout/Subtitle.js
index 249c34023f..4558faeb30 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Subtitle.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Subtitle.js
@@ -9,7 +9,7 @@ class Subtitle extends React.Component<Props> {
   render() {
     const { subtitle } = this.props;
     if (subtitle) {
-      return <h1 className="subtitle">{subtitle}</h1>;
+      return <h2 className="subtitle">{subtitle}</h2>;
     }
     return null;
   }

From 1e0bb779ff5408b85d350bf7aa38e0237a96b278 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 12:57:47 +0100
Subject: [PATCH 04/11] added pageactions to groups and users overview

---
 scm-ui/src/groups/containers/Groups.js | 14 +++++++++++++-
 scm-ui/src/users/containers/Users.js   | 15 ++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/scm-ui/src/groups/containers/Groups.js b/scm-ui/src/groups/containers/Groups.js
index 984055c60f..7bc31a8b79 100644
--- a/scm-ui/src/groups/containers/Groups.js
+++ b/scm-ui/src/groups/containers/Groups.js
@@ -5,7 +5,12 @@ import { translate } from "react-i18next";
 import type { Group } from "@scm-manager/ui-types";
 import type { PagedCollection } from "@scm-manager/ui-types";
 import type { History } from "history";
-import { Page, Paginator } from "@scm-manager/ui-components";
+import {
+  Page,
+  PageActions,
+  Button,
+  Paginator
+} from "@scm-manager/ui-components";
 import { GroupTable } from "./../components/table";
 import CreateGroupButton from "../components/buttons/CreateGroupButton";
 
@@ -73,6 +78,13 @@ class Groups extends React.Component<Props> {
         <GroupTable groups={groups} />
         {this.renderPaginator()}
         {this.renderCreateButton()}
+        <PageActions>
+          <Button
+            label={t("create-group-button.label")}
+            link="/groups/add"
+            color="primary"
+          />
+        </PageActions>
       </Page>
     );
   }
diff --git a/scm-ui/src/users/containers/Users.js b/scm-ui/src/users/containers/Users.js
index 041ac226b4..10dedde32d 100644
--- a/scm-ui/src/users/containers/Users.js
+++ b/scm-ui/src/users/containers/Users.js
@@ -14,7 +14,13 @@ import {
   getFetchUsersFailure
 } from "../modules/users";
 
-import { Page, CreateButton, Paginator } from "@scm-manager/ui-components";
+import {
+  Page,
+  PageActions,
+  Button,
+  CreateButton,
+  Paginator
+} from "@scm-manager/ui-components";
 import { UserTable } from "./../components/table";
 import type { User, PagedCollection } from "@scm-manager/ui-types";
 import { getUsersLink } from "../../modules/indexResource";
@@ -72,6 +78,13 @@ class Users extends React.Component<Props> {
         <UserTable users={users} />
         {this.renderPaginator()}
         {this.renderCreateButton()}
+        <PageActions>
+          <Button
+            label={t("users.createButton")}
+            link="/users/add"
+            color="primary"
+          />
+        </PageActions>
       </Page>
     );
   }

From 93176d811782bee19bb8222067fe346ff0c7e624 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 13:47:17 +0100
Subject: [PATCH 05/11] added underline to header part of page when
 buttonactions set

---
 .../packages/ui-components/src/layout/Page.js | 37 +++++++++++--------
 scm-ui/styles/scm.scss                        |  9 ++++-
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 718280053b..c796b145bc 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -16,21 +16,11 @@ type Props = {
 
 class Page extends React.Component<Props> {
   render() {
-    const { title, error, subtitle } = this.props;
+    const { error } = this.props;
     return (
       <section className="section">
         <div className="container">
-          <div className="columns">
-            <div className="column">
-              <Title title={title} />
-              <Subtitle subtitle={subtitle} />
-            </div>
-            <div className="column is-two-fifths">
-              <div className="is-pulled-right">
-              {this.renderPageActions()}
-              </div>
-            </div>
-          </div>
+          {this.renderPageHeader()}
           <ErrorNotification error={error} />
           {this.renderContent()}
         </div>
@@ -38,16 +28,33 @@ class Page extends React.Component<Props> {
     );
   }
 
-  renderPageActions() {
-    const { children } = this.props;
+  renderPageHeader() {
+    const { title, subtitle, children } = this.props;
 
     let content = null;
+    let pageActionsExists = false;
     React.Children.forEach(children, child => {
       if (child && child.type.name === "PageActions") {
         content = child;
+        pageActionsExists = true;
       }
     });
-    return content;
+
+    return (
+      <div
+        className={
+          pageActionsExists ? "columns page-header-with-actions" : "columns"
+        }
+      >
+        <div className="column">
+          <Title title={title} />
+          <Subtitle subtitle={subtitle} />
+        </div>
+        <div className="column is-two-fifths">
+          <div className="is-pulled-right">{content}</div>
+        </div>
+      </div>
+    );
   }
 
   renderContent() {
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 0e7b0fc420..64c72f7d06 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -3,6 +3,7 @@
 
 $blue: #33b2e8;
 $mint: #11dfd0;
+$primary: #00d1df;
 
 $info: $blue;
 
@@ -40,6 +41,12 @@ $info: $blue;
 .main {
   min-height: calc(100vh - 260px);
 }
+
+// top section when pageactions set
+.page-header-with-actions {
+  border-bottom: 1px solid $primary;
+}
+
 .footer {
   height: 50px;
 }
@@ -81,7 +88,7 @@ $fa-font-path: "webfonts";
   height: 2.5rem;
 
   &.is-primary {
-    background-color: #00d1df;
+    background-color: $primary;
   }
   &.is-primary:hover, &.is-primary.is-hovered {
     background-color: #00b9c6;

From fe9f97f6c9bc9c9f2a36ec6386514c1e5614753c Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 14:13:38 +0100
Subject: [PATCH 06/11] added underline to header part of page when
 buttonactions set

---
 .../packages/ui-components/src/layout/Page.js | 24 +++++++++----------
 scm-ui/styles/scm.scss                        |  8 ++++---
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index c796b145bc..9a912f6780 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -39,21 +39,21 @@ class Page extends React.Component<Props> {
         pageActionsExists = true;
       }
     });
+    let underline = pageActionsExists ? <hr className="header-with-actions" /> : null;
 
     return (
-      <div
-        className={
-          pageActionsExists ? "columns page-header-with-actions" : "columns"
-        }
-      >
-        <div className="column">
-          <Title title={title} />
-          <Subtitle subtitle={subtitle} />
+      <>
+        <div className="columns">
+          <div className="column">
+            <Title title={title} />
+            <Subtitle subtitle={subtitle} />
+          </div>
+          <div className="column is-two-fifths">
+            <div className="is-pulled-right">{content}</div>
+          </div>
         </div>
-        <div className="column is-two-fifths">
-          <div className="is-pulled-right">{content}</div>
-        </div>
-      </div>
+        {underline}
+      </>
     );
   }
 
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 64c72f7d06..b02c95ce3d 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -42,9 +42,11 @@ $info: $blue;
   min-height: calc(100vh - 260px);
 }
 
-// top section when pageactions set
-.page-header-with-actions {
-  border-bottom: 1px solid $primary;
+// shown in top section when pageactions set
+hr.header-with-actions {
+  height: 1px;
+  margin-top: -10px;
+  background-color: $primary;
 }
 
 .footer {

From 095ae81f80b49a59abc031c274f0b3e37ffcf3e1 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 14:21:01 +0100
Subject: [PATCH 07/11] added small top spacing for page actions

---
 .../packages/ui-components/src/layout/Page.js | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 9a912f6780..86620d6ec3 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -4,6 +4,8 @@ import Loading from "./../Loading";
 import ErrorNotification from "./../ErrorNotification";
 import Title from "./Title";
 import Subtitle from "./Subtitle";
+import injectSheet from "react-jss";
+import classNames from "classnames";
 
 type Props = {
   title?: string,
@@ -11,7 +13,16 @@ type Props = {
   loading?: boolean,
   error?: Error,
   showContentOnError?: boolean,
-  children: React.Node
+  children: React.Node,
+
+  // context props
+  classes: Object
+};
+
+const styles = {
+  spacing: {
+    marginTop: "1.25rem"
+  }
 };
 
 class Page extends React.Component<Props> {
@@ -29,7 +40,7 @@ class Page extends React.Component<Props> {
   }
 
   renderPageHeader() {
-    const { title, subtitle, children } = this.props;
+    const { title, subtitle, children, classes } = this.props;
 
     let content = null;
     let pageActionsExists = false;
@@ -39,7 +50,9 @@ class Page extends React.Component<Props> {
         pageActionsExists = true;
       }
     });
-    let underline = pageActionsExists ? <hr className="header-with-actions" /> : null;
+    let underline = pageActionsExists ? (
+      <hr className="header-with-actions" />
+    ) : null;
 
     return (
       <>
@@ -49,7 +62,7 @@ class Page extends React.Component<Props> {
             <Subtitle subtitle={subtitle} />
           </div>
           <div className="column is-two-fifths">
-            <div className="is-pulled-right">{content}</div>
+            <div className={classNames(classes.spacing, "is-pulled-right")}>{content}</div>
           </div>
         </div>
         {underline}
@@ -77,4 +90,4 @@ class Page extends React.Component<Props> {
   }
 }
 
-export default Page;
+export default injectSheet(styles)(Page);

From 4b43456b279f2c7a0ba061085f29953c5f269dba Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 21 Feb 2019 09:39:05 +0100
Subject: [PATCH 08/11] display button like other create buttons on mobile
 sites

---
 .../packages/ui-components/src/layout/Page.js       |  5 +++--
 scm-ui/styles/scm.scss                              | 13 +++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 86620d6ec3..a034b4afbb 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -21,7 +21,8 @@ type Props = {
 
 const styles = {
   spacing: {
-    marginTop: "1.25rem"
+    marginTop: "1.25rem",
+    textAlign: "right"
   }
 };
 
@@ -62,7 +63,7 @@ class Page extends React.Component<Props> {
             <Subtitle subtitle={subtitle} />
           </div>
           <div className="column is-two-fifths">
-            <div className={classNames(classes.spacing, "is-pulled-right")}>{content}</div>
+            <div className={classNames(classes.spacing, "is-mobile-create-button-spacing")}>{content}</div>
           </div>
         </div>
         {underline}
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index b02c95ce3d..fc3ad5b3dd 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -47,6 +47,19 @@ hr.header-with-actions {
   height: 1px;
   margin-top: -10px;
   background-color: $primary;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+}
+.is-mobile-create-button-spacing {
+  @media screen and (max-width: 768px) {
+    border: 2px solid #e9f7fd;
+    padding: 1em 1em;
+    margin-top: 0 !important;
+    width: 100%;
+    text-align: center !important;
+  }
 }
 
 .footer {

From 1de5a934167929852dd324fc11e08b87ce17d82d Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 21 Feb 2019 09:40:42 +0100
Subject: [PATCH 09/11] dividing line was too concise

---
 scm-ui/styles/scm.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index fc3ad5b3dd..a1f740a38f 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -44,9 +44,7 @@ $info: $blue;
 
 // shown in top section when pageactions set
 hr.header-with-actions {
-  height: 1px;
   margin-top: -10px;
-  background-color: $primary;
 
   @media screen and (max-width: 768px) {
     display: none;

From 5987abda019097f05bda5145b18450beb46f51ad Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 21 Feb 2019 09:50:13 +0100
Subject: [PATCH 10/11] changed back outsourcing of primary color cause its
 only used once

---
 scm-ui/styles/scm.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index a1f740a38f..df42781c64 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -3,7 +3,6 @@
 
 $blue: #33b2e8;
 $mint: #11dfd0;
-$primary: #00d1df;
 
 $info: $blue;
 
@@ -101,7 +100,7 @@ $fa-font-path: "webfonts";
   height: 2.5rem;
 
   &.is-primary {
-    background-color: $primary;
+    background-color: #00d1df;
   }
   &.is-primary:hover, &.is-primary.is-hovered {
     background-color: #00b9c6;

From cb48a0bd2b3ae9ff4d8568a627ea5bdfade24186 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Thu, 21 Feb 2019 10:31:32 +0000
Subject: [PATCH 11/11] Close branch feature/page_actions