keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects 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
pull/749/head
Sam Lanning 9 years ago committed by lilia
parent 6fb190e4b5
commit c4a9ac94b4
4 changed files with 78 additions and 24 deletions
Show Stats Download Patch File Download Diff File

2
background.html
Unescape Escape View File

@ -74,11 +74,13 @@
</div>
</script>
<script type='text/x-tmpl-mustache' id='confirmation-dialog'>
<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'>
<img src='{{ source }}' class='preview' />

2
js/views/whisper_view.js
Unescape Escape 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){

34
stylesheets/_conversation.scss
Unescape Escape View File

@ -578,17 +578,47 @@
.confirmation-dialog {
position: absolute;
top: $header-height;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
padding: 0 20px;
.modal {
max-width: 350px;
margin: 100px auto;
padding: 1em;
background: white;
border: solid 2px $blue;
border-radius: 10px;
overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
.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%);
}
}
}
}
}

32
stylesheets/manifest.css
Unescape Escape View File

@ -1010,14 +1010,36 @@ input.search {
.confirmation-dialog {
position: absolute;
top: 36px;
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: solid 2px #2090ea; }
.confirmation-dialog .message {
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 button {
.confirmation-dialog .modal .buttons {
margin-top: 10px; }
.confirmation-dialog .modal .buttons button {
float: right;
margin-left: 10px; }
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 */

Write Preview
Loading…
Cancel
Save