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>
</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'>

2
js/views/whisper_view.js
View file

@ -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){

50
stylesheets/_conversation.scss
View file

@ -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%);
}
}
}
}
}

40
stylesheets/manifest.css
View file

@ -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 */