Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Display <dialog> as flex so that <header> is always top on scroll

Browse source
This commit is contained in:
djmaze 2021-11-08 20:41:38 +01:00
parent e4e86d0347
commit 3950ff049c
3 changed files with 10 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dev/Knoin/Knoin.js
View file

@ -77,7 +77,7 @@ const
// show/hide popup/modal // show/hide popup/modal
const endShowHide = e => { const endShowHide = e => {
if (e.target === vmDom) { if (e.target === vmDom) {
if (vmDom.classList.contains('show')) { if (vmDom.classList.contains('animate')) {
autofocus(vmDom); autofocus(vmDom);
vm.onShowWithDelay && vm.onShowWithDelay(); vm.onShowWithDelay && vm.onShowWithDelay();
} else { } else {
@ -98,13 +98,13 @@ const
vm.keyScope.set(); vm.keyScope.set();
requestAnimationFrame(() => { // wait just before the next paint requestAnimationFrame(() => { // wait just before the next paint
vmDom.offsetHeight; // force a reflow vmDom.offsetHeight; // force a reflow
vmDom.classList.add('show'); // trigger the transitions vmDom.classList.add('animate'); // trigger the transitions
}); });
} else { } else {
visiblePopups.delete(vm); visiblePopups.delete(vm);
vm.onHide && vm.onHide(); vm.onHide && vm.onHide();
vm.keyScope.unset(); vm.keyScope.unset();
vmDom.classList.remove('show'); // trigger the transitions vmDom.classList.remove('animate'); // trigger the transitions
} }
arePopupsVisible(0 < visiblePopups.size); arePopupsVisible(0 < visiblePopups.size);
/* /*

31
dev/Styles/Main.less
View file

@ -58,25 +58,6 @@ dialog::backdrop {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1;
/*
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 1000000000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
*/
} }
dialog { dialog {
@ -85,6 +66,8 @@ dialog {
border: 1px solid rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 5px 80px rgba(0,0,0,0.3); box-shadow: 0 5px 80px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
margin: 10px auto; margin: 10px auto;
max-height: calc(100vh - 20px); max-height: calc(100vh - 20px);
max-width: 560px; max-width: 560px;
@ -97,16 +80,16 @@ dialog {
dialog:not([open]) { dialog:not([open]) {
display: none !important; display: none !important;
} }
dialog.show { dialog.animate {
opacity: 1; opacity: 1;
} }
dialog:not(.show) { dialog:not(.animate) {
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
opacity: 0; opacity: 0;
top: -25%; top: -25%;
} }
dialog header { dialog > header {
padding: 9px 15px; padding: 9px 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
// Close icon // Close icon
@ -120,12 +103,12 @@ dialog header {
// Body (where all modal content resides) // Body (where all modal content resides)
dialog .modal-body { dialog .modal-body {
overflow-y: auto; overflow: auto;
padding: 15px; padding: 15px;
} }
// Footer (for actions) // Footer (for actions)
dialog footer { dialog > footer {
padding: 14px 15px 15px; padding: 14px 15px 15px;
margin-bottom: 0; margin-bottom: 0;
text-align: right; // right align buttons text-align: right; // right align buttons

1
dev/Styles/Ui.less
View file

@ -141,4 +141,3 @@ tr:hover .drag-handle {
.tabs [id^="tab"]:checked + label + .tab-content { .tabs [id^="tab"]:checked + label + .tab-content {
visibility: visible; visibility: visible;
} }