Improve Confirmation Dialog

Some basic modifications to the Confirmation Dialog: * Always attached to <body> regardless of view that called it. * Always centered horizontally on screen. * A black semi-transparent overlay is now displayed over everything, and under the dialog. * Various other style changes. fixes #389 // FREEBIE
9 years ago · c4a9ac94b4
parent 6fb190e4b5
commit c4a9ac94b4
4 changed files with 78 additions and 24 deletions
--- a/background.html
+++ b/background.html
@ -74,10 +74,12 @@
    </div>
  </script>
  <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
-    <div class='message'>{{ message }}</div>
-    <div class='buttons'>
-      <button class='cancel'>{{ cancel }}</button>
-      <button class='ok'>{{ ok }}</button>
+    <div class="modal">
+      <div class='message'>{{ message }}</div>
+      <div class='buttons'>
+        <button class='cancel'>{{ cancel }}</button>
+        <button class='ok'>{{ ok }}</button>
+      </div>
    </div>
  </script>
  <script type='text/x-tmpl-mustache' id='attachment-preview'>
--- a/js/views/whisper_view.js
+++ b/js/views/whisper_view.js
@ -54,7 +54,7 @@
                    resolve: resolve,
                    reject: reject
                });
-                this.$el.append(dialog.el);
+                this.$el.closest('body').append(dialog.el);
            }.bind(this));
        },
        i18n_with_link: function(message, href){
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@ -578,17 +578,47 @@

 .confirmation-dialog {
  position: absolute;
-  top: $header-height;
-  padding: 1em;
-  background: white;
-  border: solid 2px $blue;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 0 20px;

-  .message {
-    text-align: center;
-  }
+  .modal {
+    max-width: 350px;
+    margin: 100px auto;
+    padding: 1em;
+    background: white;
+    border-radius: 10px;
+    overflow: auto;
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);

-  button {
-    float: right;
-    margin-left: 10px;
+    .message {
+      text-align: center;
+    }
+
+    .buttons {
+      margin-top: 10px;
+
+      button {
+        float: right;
+        margin-left: 10px;
+        background-color: $grey_l;
+        border-radius: 5px;
+        outline: none;
+        padding: 5px 8px;
+        border: 1px solid darken($grey_l, 10%);
+
+        &:focus {
+          border-color: darken($grey_l, 40%);
+        }
+
+        &:hover {
+          background-color: darken($grey_l, 10%);
+          border-color: darken($grey_l, 20%);
+        }
+      }
+    }
  }
 }
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@ -1010,14 +1010,36 @@ input.search {

 .confirmation-dialog {
  position: absolute;
-  top: 36px;
-  padding: 1em;
-  background: white;
-  border: solid 2px #2090ea; }
-  .confirmation-dialog .message {
-    text-align: center; }
-  .confirmation-dialog button {
-    float: right;
-    margin-left: 10px; }
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 0 20px; }
+  .confirmation-dialog .modal {
+    max-width: 350px;
+    margin: 100px auto;
+    padding: 1em;
+    background: white;
+    border-radius: 10px;
+    overflow: auto;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
+    .confirmation-dialog .modal .message {
+      text-align: center; }
+    .confirmation-dialog .modal .buttons {
+      margin-top: 10px; }
+      .confirmation-dialog .modal .buttons button {
+        float: right;
+        margin-left: 10px;
+        background-color: #f3f3f3;
+        border-radius: 5px;
+        outline: none;
+        padding: 5px 8px;
+        border: 1px solid #dadada; }
+        .confirmation-dialog .modal .buttons button:focus {
+          border-color: #8d8d8d; }
+        .confirmation-dialog .modal .buttons button:hover {
+          background-color: #dadada;
+          border-color: silver; }

 /*# sourceMappingURL=manifest.css.map */