Fix #779 fixed bottom dashboard edition bar

GladysAssistant · May 21, 2020 · cc803ec · cc803ec
1 parent bec7bb5
commit cc803ec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git 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
@@ -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;