From cc803ec17e6d6c6a76d7726f9532319e2ff31f5c Mon Sep 17 00:00:00 2001
From: atrovato <1839717+atrovato@users.noreply.github.com>
Date: Sat, 9 May 2020 18:01:06 +0200
Subject: [PATCH] Fix #779 fixed bottom dashboard edition bar

---
 front/src/routes/dashboard/DashboardPage.jsx | 16 ++--------------
 front/src/routes/dashboard/EditActions.jsx   | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 front/src/routes/dashboard/EditActions.jsx

diff --git a/front/src/routes/dashboard/DashboardPage.jsx b/front/src/routes/dashboard/DashboardPage.jsx
index f8e99457d8..6af5bcfffc 100644
--- a/front/src/routes/dashboard/DashboardPage.jsx
+++ b/front/src/routes/dashboard/DashboardPage.jsx
@@ -2,6 +2,7 @@ import { Text } from 'preact-i18n';
 import BoxColumns from './BoxColumns';
 import EditBoxColumns from './EditBoxColumns';
 import EmptyState from './EmptyState';
+import EditActions from './EditActions';
 
 const DashboardPage = ({ children, ...props }) => (
   <div class="page">
@@ -20,20 +21,6 @@ const DashboardPage = ({ children, ...props }) => (
                   </span>
                 </button>
               )}
-              {props.dashboardEditMode && (
-                <button onClick={props.cancelDashboardEdit} class="btn btn-outline-danger btn-sm ml-2">
-                  <span>
-                    <Text id="dashboard.editDashboardCancelButton" /> <i class="fe fe-slash" />
-                  </span>
-                </button>
-              )}
-              {props.dashboardEditMode && (
-                <button onClick={props.saveDashboard} class="btn btn-outline-primary btn-sm ml-2">
-                  <span>
-                    <Text id="dashboard.editDashboardSaveButton" /> <i class="fe fe-check" />
-                  </span>
-                </button>
-              )}
             </div>
           </div>
           {props.gatewayInstanceNotFound && (
@@ -57,6 +44,7 @@ const DashboardPage = ({ children, ...props }) => (
               removeBox={props.removeBox}
             />
           )}
+          {props.dashboardEditMode && <EditActions {...props} />}
         </div>
       </div>
     </div>
diff --git a/front/src/routes/dashboard/EditActions.jsx b/front/src/routes/dashboard/EditActions.jsx
new file mode 100644
index 0000000000..e3851e8100
--- /dev/null
+++ b/front/src/routes/dashboard/EditActions.jsx
@@ -0,0 +1,20 @@
+import { Text } from 'preact-i18n';
+
+const EditActions = props => (
+  <div class="fixed-bottom footer">
+    <div class="container">
+      <div class="row align-items-center flex-row-reverse">
+        <div class="col-auto">
+          <button onClick={props.cancelDashboardEdit} class="btn btn-outline-danger btn-sm ml-2">
+            <Text id="dashboard.editDashboardCancelButton" /> <i class="fe fe-slash" />
+          </button>
+          <button onClick={props.saveDashboard} class="btn btn-outline-primary btn-sm ml-2">
+            <Text id="dashboard.editDashboardSaveButton" /> <i class="fe fe-check" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default EditActions;