Support stacking dialogs to prevent unmounting

Fixes https://github.com/vector-im/riot-web/issues/8371
This commit is contained in:
Travis Ralston 2019-02-28 15:55:58 -07:00
parent 8d7837829e
commit 0978ab3da0
4 changed files with 114 additions and 19 deletions

View file

@ -228,6 +228,17 @@ textarea {
color: $roomsublist-label-bg-color;
}
/* Expected z-indexes for dialogs:
4000 - Default wrapper index
4009 - Static dialog background
4010 - Static dialog itself
4011 - Standard dialog background
4012 - Standard dialog itself
These are set up such that the static dialog always appears
underneath the standard dialogs.
*/
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
@ -252,7 +263,7 @@ textarea {
.mx_Dialog {
background-color: $primary-bg-color;
color: $light-fg-color;
z-index: 4010;
z-index: 4012;
font-weight: 300;
font-size: 15px;
position: relative;
@ -264,6 +275,10 @@ textarea {
overflow-y: auto;
}
.mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010;
}
.mx_Dialog_background {
position: fixed;
top: 0;
@ -272,6 +287,17 @@ textarea {
height: 100%;
background-color: $dialog-backdrop-color;
opacity: 0.8;
z-index: 4011;
}
.mx_Dialog_background.mx_Dialog_staticBackground {
z-index: 4009;
}
.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
// Roughly half of what it would normally be - we don't want to black out
// the app, just make it clear that the dialogs are stacked.
opacity: 0.4;
}
.mx_Dialog_lightbox .mx_Dialog_background {