From eec595185c7d195c1f54dbca7a15010ff69fd74d Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 2 Feb 2018 16:40:17 +0200
Subject: [PATCH] Unsaved changes alert footer

---
 .../src/styles/partials/generic/modals.scss   | 49 ++++++++++++++++++-
 .../styles/partials/sidebarview/content.scss  |  1 -
 .../ui/components/bd/PluginSettingsModal.vue  | 13 ++---
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss
index 491b4b83..ba95ec3c 100644
--- a/client/src/styles/partials/generic/modals.scss
+++ b/client/src/styles/partials/generic/modals.scss
@@ -42,7 +42,12 @@
     display: -ms-flexbox;
     display: flex;
     flex-grow: 1;
-    border-radius: 8px;
+    border-radius: 4px;
+    max-height: 100%;
+}
+
+.bd-modal .bd-modal-body {
+    display: flex;
 }
 
 .bd-modal {
@@ -80,5 +85,47 @@
     }
 
     .bd-modal-footer {
+        .bd-footer-alert {
+            position: absolute;
+            bottom: 80px;
+            left: 70px;
+            right: 70px;
+            display: flex;
+            background-color: rgba(32, 34, 37, 0.9);
+            box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
+            padding: 10px 10px 10px 16px;
+            overflow: hidden;
+            border-radius: 5px;
+            transform: translateY(100%);
+            opacity: 0;
+            transition: all .2s ease-in-out;
+
+            &.bd-active {
+                opacity: 1;
+                transform: none;
+            }
+
+            .bd-footer-alert-text {
+                flex: 1 1 auto;
+                color: #FFF;
+                font-weight: 700;
+                line-height: 34px;
+            }
+
+            .bd-button {
+                height: 30px;
+                border-radius: 3px;
+                padding: 2px 16px;
+
+                &.bd-tp {
+                    background: transparent;
+
+                    &:hover {
+                        text-decoration: underline;
+                        background: transparent;
+                    }
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/client/src/styles/partials/sidebarview/content.scss b/client/src/styles/partials/sidebarview/content.scss
index adce9648..8a520ed3 100644
--- a/client/src/styles/partials/sidebarview/content.scss
+++ b/client/src/styles/partials/sidebarview/content.scss
@@ -18,7 +18,6 @@
 
         .bd-scroller-wrap {
             flex-grow: 1;
-            height: 100%;
         }
 
         .bd-settingsWrap-header {
diff --git a/client/src/ui/components/bd/PluginSettingsModal.vue b/client/src/ui/components/bd/PluginSettingsModal.vue
index 87fb8b8c..8cdb2e20 100644
--- a/client/src/ui/components/bd/PluginSettingsModal.vue
+++ b/client/src/ui/components/bd/PluginSettingsModal.vue
@@ -35,14 +35,11 @@
 
                 <div class="bd-form-divider"></div>
             </div>
-
-            <div slot="footer">
-                <div class="footer-alert" :class="{'bd-active': changed}">
-                    <div class="footer-alert-text">Unsaved changes</div>
-                    <div class="bd-reset-button">Reset</div>
-                    <div class="bd-button bd-ok">Save Changes</div>
-                </div>
-            </div>
+        </div>
+        <div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed}">
+            <div class="bd-footer-alert-text">Unsaved changes</div>
+            <div class="bd-button bd-reset-button bd-tp">Reset</div>
+            <div class="bd-button bd-ok">Save Changes</div>
         </div>
     </Modal>
 </template>