thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improve Confirmation Dialog

Browse source 
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
This commit is contained in:
Sam Lanning 2016-01-23 16:00:07 +00:00 committed by lilia
parent 6fb190e4b5
commit c4a9ac94b4
4 changed files with 78 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
background.html
View file

@ -74,10 +74,12 @@
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='confirmation-dialog'> <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
<div class='message'>{{ message }}</div> <div class="modal">
<div class='buttons'> <div class='message'>{{ message }}</div>
<button class='cancel'>{{ cancel }}</button> <div class='buttons'>
<button class='ok'>{{ ok }}</button> <button class='cancel'>{{ cancel }}</button>
<button class='ok'>{{ ok }}</button>
</div>
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='attachment-preview'> <script type='text/x-tmpl-mustache' id='attachment-preview'>

2
js/views/whisper_view.js
View file

@ -54,7 +54,7 @@
resolve: resolve, resolve: resolve,
reject: reject reject: reject
}); });
this.$el.append(dialog.el); this.$el.closest('body').append(dialog.el);
}.bind(this)); }.bind(this));
}, },
i18n_with_link: function(message, href){ i18n_with_link: function(message, href){

50
stylesheets/_conversation.scss
View file

@ -578,17 +578,47 @@
.confirmation-dialog { .confirmation-dialog {
position: absolute; position: absolute;
top: $header-height; top: 0;
padding: 1em; left: 0;
background: white; height: 100%;
border: solid 2px $blue; width: 100%;
background-color: rgba(0, 0, 0, 0.3);
padding: 0 20px;
.message { .modal {
text-align: center; 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 { .message {
float: right; text-align: center;
margin-left: 10px; }
.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%);
}
}
}
} }
} }

40
stylesheets/manifest.css
View file

@ -1010,14 +1010,36 @@ input.search {
.confirmation-dialog { .confirmation-dialog {
position: absolute; position: absolute;
top: 36px; top: 0;
padding: 1em; left: 0;
background: white; height: 100%;
border: solid 2px #2090ea; } width: 100%;
.confirmation-dialog .message { background-color: rgba(0, 0, 0, 0.3);
text-align: center; } padding: 0 20px; }
.confirmation-dialog button { .confirmation-dialog .modal {
float: right; max-width: 350px;
margin-left: 10px; } 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 */ /*# sourceMappingURL=manifest.css.map */