diff --git a/README.md b/README.md index 832c364e4..c6172908f 100644 --- a/README.md +++ b/README.md @@ -84,23 +84,23 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill |js/* |1.14.0 |native | |----------- |--------: |--------: | -|admin.js |2.130.942 | 963.418 | -|app.js |4.184.455 |2.626.441 | -|boot.js | 671.522 | 43.824 | -|libs.js | 647.614 | 313.017 | +|admin.js |2.130.942 | 963.108 | +|app.js |4.184.455 |2.626.387 | +|boot.js | 671.522 | 43.742 | +|libs.js | 647.614 | 312.276 | |polyfills.js | 325.834 | 0 | -|TOTAL |7.960.367 |3.946.700 | +|TOTAL |7.960.367 |3.945.513 | |js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli | |--------------- |--------: |--------: |--------: |--------: |--------: | -|admin.min.js | 252.147 | 130.790 | 73.657 | 37.900 | 32.527 | -|app.min.js | 511.202 | 354.459 |140.462 | 93.370 | 74.823 | -|boot.min.js | 66.007 | 5.564 | 22.567 | 2.327 | 1.989 | -|libs.min.js | 572.545 | 296.508 |176.720 | 91.754 | 81.012 | +|admin.min.js | 252.147 | 130.575 | 73.657 | 37.877 | 32.469 | +|app.min.js | 511.202 | 354.284 |140.462 | 93.363 | 74.888 | +|boot.min.js | 66.007 | 5.534 | 22.567 | 2.319 | 1.988 | +|libs.min.js | 572.545 | 295.771 |176.720 | 91.520 | 80.851 | |polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 | -|TOTAL |1.434.353 | 788.018 |424.718 |225.351 |190.351 | +|TOTAL |1.434.353 | 786.164 |424.718 |225.079 |190.196 | -646.335 bytes (199.367 gzip) is not much, but it feels faster. +648.189 bytes (199.639 gzip) is not much, but it feels faster. ### CSS changes @@ -125,8 +125,8 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill |css/* |1.14.0 |native | |-------------- |--------: |--------: | -|app.css | 340.334 | 265.090 | -|app.min.css | 274.791 | 210.876 | +|app.css | 340.334 | 263.469 | +|app.min.css | 274.791 | 209.640 | ### PHP73 branch diff --git a/dev/Common/HtmlEditor.js b/dev/Common/HtmlEditor.js index 49ce273e6..29d1c4e3c 100644 --- a/dev/Common/HtmlEditor.js +++ b/dev/Common/HtmlEditor.js @@ -211,7 +211,7 @@ class HtmlEditor { return (this.isHtml() ? ':HTML:' : '') + this.getData(wrapIsHtml); } - modeToggle(plain, resize) { + modeToggle(plain) { if (this.editor) { try { if (plain) { @@ -222,10 +222,6 @@ class HtmlEditor { this.editor.setMode('plain'); } } catch (e) {} // eslint-disable-line no-empty - - if (resize) { - this.resize(); - } } } diff --git a/dev/External/ko.js b/dev/External/ko.js index ff77be497..3920441ec 100644 --- a/dev/External/ko.js +++ b/dev/External/ko.js @@ -173,26 +173,13 @@ ko.bindingHandlers.modal = { const Globals = require('Common/Globals'); element.classList.toggle('fade', !Globals.bMobileDevice); - new BSN.Modal(element, { - 'keyboard': false, - 'show': ko.unwrap(fValueAccessor()) - }); + const close = element.querySelector('.close'), click = () => fValueAccessor()(false); close && close.addEventListener('click.koModal', click); ko.utils.domNodeDisposal.addDisposeCallback(element, () => close.removeEventListener('click.koModal', click) ); - }, - update: (element, fValueAccessor) => { - const htmlCL = doc.documentElement.classList; - - element.Modal[ko.unwrap(fValueAccessor()) ? 'show' : 'hide'](); - - if (htmlCL.contains('no-mobile')) { - htmlCL.add('rl-modal-animation'); - setTimeout(() => htmlCL.remove('rl-modal-animation'), 500); - } } }; diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index fad4d0519..84c6c74f7 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -11,14 +11,16 @@ const SCREENS = {}, qs = s => document.querySelector(s), isNonEmptyArray = values => Array.isArray(values) && values.length, - popupVisibilityNames = ko.observableArray([]); + popupVisibilityNames = ko.observableArray([]), + + autofocus = dom => { +// if (!bMobileDevice) { + const af = dom.querySelector('[autofocus]'); + af && af.focus(); + }; export const popupVisibility = ko.computed(() => 0 < popupVisibilityNames().length); -popupVisibility.subscribe((bValue) => { - $htmlCL.toggle('rl-modal', bValue); -}); - export const ViewType = { Popup: 'Popups', Left: 'Left', @@ -161,27 +163,43 @@ function buildViewModel(ViewModelClass, vmScreen) { hideScreenPopup(ViewModelClass); }); - vm.modalVisibility.subscribe((value) => { + // show/hide popup/modal + const endShowHide = e => { + if (e.target === vmDom && 'background-color' === e.propertyName) { + if (vmDom.classList.contains('show')) { + autofocus(vmDom); + vm.onShowWithDelay && vm.onShowWithDelay(); + } else { + vmDom.hidden = true; + vm.onHideWithDelay && vm.onHideWithDelay(); + } + } + }; + + vm.modalVisibility.subscribe(value => { if (value) { - vm.viewModelDom.hidden = false; + vmDom.style.zIndex = 3000 + popupVisibilityNames().length + 10; + vmDom.hidden = false; vm.storeAndSetKeyScope(); - popupVisibilityNames.push(vm.viewModelName); - vm.viewModelDom.style.zIndex = 3000 + popupVisibilityNames().length + 10; - - vm.onShowWithDelay && setTimeout(()=>vm.onShowWithDelay, 500); + requestAnimationFrame(() => { // wait just before the next paint + document.body.offsetHeight; // force a reflow + vmDom.classList.add('show'); // trigger the transitions + }); } else { vm.onHide && vm.onHide(); - vm.onHideWithDelay && setTimeout(()=>vm.onHideWithDelay, 500); - + vmDom.classList.remove('show'); vm.restoreKeyScope(); - popupVisibilityNames.remove(vm.viewModelName); - vm.viewModelDom.style.zIndex = 2000; - - setTimeout(() => vm.viewModelDom.hidden = true, 300); } + vmDom.setAttribute('aria-hidden', !value); }); + if ('ontransitionend' in vmDom) { + vmDom.addEventListener('transitionend', endShowHide); + } else { + // For Edge < 79 and mobile browsers + vm.modalVisibility.subscribe(() => ()=>setTimeout(endShowHide({target:vmDom}), 500)); + } } ko.applyBindingAccessorsToNode( @@ -223,10 +241,6 @@ export function showScreenPopup(ViewModelClassToShow, params = []) { ModalView.__vm.modalVisibility(true); ModalView.__vm.onShow && ModalView.__vm.onShow(...params); - -// if (!bMobileDevice) { - const af = ModalView.__dom.querySelector('[autofocus]'); - af && af.focus(); } } } @@ -338,9 +352,7 @@ function screenOnRoute(screenName, subPart) { ViewModelClass.__vm.onShow && ViewModelClass.__vm.onShow(); -// if (!bMobileDevice) { - const af = ViewModelClass.__dom.querySelector('[autofocus]'); - af && af.focus(); + autofocus(ViewModelClass.__dom); ViewModelClass.__vm.onShowWithDelay && setTimeout(()=>ViewModelClass.__vm.onShowWithDelay, 200); } diff --git a/dev/Screen/AbstractSettings.js b/dev/Screen/AbstractSettings.js index c3d577c3f..71ea24db0 100644 --- a/dev/Screen/AbstractSettings.js +++ b/dev/Screen/AbstractSettings.js @@ -113,7 +113,6 @@ class AbstractSettingsScreen extends AbstractScreen { o.oCurrentSubScreen.onBeforeShow && o.oCurrentSubScreen.onBeforeShow(); o.oCurrentSubScreen.viewModelDom.hidden = false; o.oCurrentSubScreen.onShow && o.oCurrentSubScreen.onShow(); - o.oCurrentSubScreen.onShowWithDelay && setTimeout(() => o.oCurrentSubScreen.onShowWithDelay(), 200); o.menu().forEach(item => { item.selected( diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less index 47763eb9a..b987e393e 100644 --- a/dev/Styles/@Main.less +++ b/dev/Styles/@Main.less @@ -40,7 +40,6 @@ @import "Components.less"; @import "SystemDropDown.less"; @import "Login.less"; -@import "WelcomPage.less"; @import "Ask.less"; @import "Shortcuts.less"; @import "FolderList.less"; @@ -70,7 +69,6 @@ @import "AdminPlugins.less"; @import "AdminPlugin.less"; @import "AdminAbout.less"; -@import "Activate.less"; @import "Settings.less"; @import "SettingsGeneral.less"; diff --git a/dev/Styles/Account.less b/dev/Styles/Account.less index c556708ac..7fd45160c 100644 --- a/dev/Styles/Account.less +++ b/dev/Styles/Account.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-account-add-content { .modal-header { background-color: #fff; diff --git a/dev/Styles/Activate.less b/dev/Styles/Activate.less deleted file mode 100644 index b007df5c5..000000000 --- a/dev/Styles/Activate.less +++ /dev/null @@ -1,14 +0,0 @@ -.popups { - .b-activate-content { - - width: 700px; - - .modal-header { - background-color: #fff; - } - - .help-inline { - padding-left: 0px; - } - } -} diff --git a/dev/Styles/AdvancedSearch.less b/dev/Styles/AdvancedSearch.less index 6d9cf916b..37ce719d6 100644 --- a/dev/Styles/AdvancedSearch.less +++ b/dev/Styles/AdvancedSearch.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-advanced-search-content { &.modal { width: 750px; diff --git a/dev/Styles/Animations.less b/dev/Styles/Animations.less index 0b3c5a42e..09d227f0f 100644 --- a/dev/Styles/Animations.less +++ b/dev/Styles/Animations.less @@ -142,19 +142,17 @@ html.no-mobile { } } - &.rl-modal.rl-modal-animation .popups { - overflow: hidden; + #rl-popups > .rl-view-model .modal { + transition: all .2s ease-out; } - - & .modal.fade { - - .transition(all 200ms ease-out); - /*transform: scale(0.95);*/ - transform: translateY(-20px); - - &.show { - transform: none; - } + #rl-popups > .rl-view-model:not(.show) .modal { + top: -25%; + } + #rl-popups > .rl-view-model .modal.fade { + opacity: 1; + } + #rl-popups > .rl-view-model:not(.show) .modal.fade { + opacity: 0; } & .b-compose.loading .b-header-toolbar { @@ -164,6 +162,13 @@ html.no-mobile { } } +#rl-popups > .rl-view-model { + transition: background-color 0.2s linear; +} +#rl-popups > .rl-view-model:not(.show) { + background-color: rgba(0,0,0,0); +} + .textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 { animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; } diff --git a/dev/Styles/Ask.less b/dev/Styles/Ask.less index 8c46a3f98..4d3635982 100644 --- a/dev/Styles/Ask.less +++ b/dev/Styles/Ask.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-ask-content { .modal-header { diff --git a/dev/Styles/Contacts.less b/dev/Styles/Contacts.less index 8b849aa81..bfb421dae 100644 --- a/dev/Styles/Contacts.less +++ b/dev/Styles/Contacts.less @@ -22,7 +22,6 @@ width: 900px; min-height: 300px; max-height: 700px; - margin: auto; .modal-body { overflow: auto; diff --git a/dev/Styles/Filter.less b/dev/Styles/Filter.less index 3bbdd8af6..2cb887a76 100644 --- a/dev/Styles/Filter.less +++ b/dev/Styles/Filter.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-filter-content { width: 750px; diff --git a/dev/Styles/FolderClear.less b/dev/Styles/FolderClear.less index 6ba8cc34a..889356a33 100644 --- a/dev/Styles/FolderClear.less +++ b/dev/Styles/FolderClear.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-folder-clear-content { .modal-header { background-color: #fff; diff --git a/dev/Styles/FolderCreate.less b/dev/Styles/FolderCreate.less index daa3ac132..21cd6b408 100644 --- a/dev/Styles/FolderCreate.less +++ b/dev/Styles/FolderCreate.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-folder-create-content { .modal-header { background-color: #fff; diff --git a/dev/Styles/FolderSystem.less b/dev/Styles/FolderSystem.less index b4735ba26..92a13d9fa 100644 --- a/dev/Styles/FolderSystem.less +++ b/dev/Styles/FolderSystem.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-folder-system-content { .modal-header { background-color: #fff; diff --git a/dev/Styles/Identity.less b/dev/Styles/Identity.less index 325f46864..f9f43908c 100644 --- a/dev/Styles/Identity.less +++ b/dev/Styles/Identity.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-identity-content { &.modal { diff --git a/dev/Styles/Languages.less b/dev/Styles/Languages.less index c7434fd77..366391b62 100644 --- a/dev/Styles/Languages.less +++ b/dev/Styles/Languages.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-languages-content { &.modal { @@ -43,4 +43,4 @@ html.rl-mobile { .b-languages-content .lang-item { width: calc(~'100% - 40px'); } -} \ No newline at end of file +} diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index 9667e6c3e..ed370345c 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -168,6 +168,26 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer, } } +/* + #rl-popups > dialog { + top: 0; + margin: 10px auto; + padding: 0; + border: 0; + } +*/ +#rl-popups > .rl-view-model { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1100; + overflow: auto; + background-color: rgba(0,0,0,0.3); +// -webkit-overflow-scrolling: touch; +} + html.ssm-state-desktop-large { #rl-left { diff --git a/dev/Styles/OpenPgpKey.less b/dev/Styles/OpenPgpKey.less index 52abb24aa..73fbe9152 100644 --- a/dev/Styles/OpenPgpKey.less +++ b/dev/Styles/OpenPgpKey.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-open-pgp-key-view-content, .b-open-pgp-key-generate-content, .b-open-pgp-key-add-content, .b-compose-open-pgp-content, .b-message-open-pgp-content { .modal-header { @@ -137,9 +137,7 @@ } } } -} -.popups { .b-open-pgp-key-add-content { &.modal { diff --git a/dev/Styles/Shortcuts.less b/dev/Styles/Shortcuts.less index 1b5429659..d101e04dc 100644 --- a/dev/Styles/Shortcuts.less +++ b/dev/Styles/Shortcuts.less @@ -1,4 +1,4 @@ -.popups { +.rl-view-model { .b-shortcuts-content { &.modal { width: 700px; diff --git a/dev/Styles/Template.less b/dev/Styles/Template.less index 5da4d9f1e..529ad5e65 100644 --- a/dev/Styles/Template.less +++ b/dev/Styles/Template.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-template-add-content { &.modal { diff --git a/dev/Styles/TwoFactor.less b/dev/Styles/TwoFactor.less index 4cb3e23bb..ae86bd83f 100644 --- a/dev/Styles/TwoFactor.less +++ b/dev/Styles/TwoFactor.less @@ -1,4 +1,4 @@ -.popups { +#rl-popups { .b-two-factor-content { diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index 0270bdb2e..6c8164e10 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -6,17 +6,6 @@ // touch-callout: none; } -.g-ui-user-select-allow { - webkit-touch-callout: inherit; - user-select: inherit; - standard-user-select: inherit; - touch-callout: inherit; -} - -.g-ui-clearfix { - .clearfix(); -} - .g-ui-link { color: #336699; text-decoration: underline; @@ -33,10 +22,6 @@ min-height: 300px; } -.g-ui-100-proc-height { - height: 100%; -} - .g-ui-absolute-reset { position: absolute; top: 0; @@ -99,10 +84,6 @@ } } -.g-ui-height-100proc { - height: 100%; -} - .e-pagenator { .e-page { @@ -171,15 +152,11 @@ } } -.display-none { - display: none; -} - .e-spinner { display: none; } -.e-powered, .e-mobile-switcher { +.e-mobile-switcher { margin-top: 8px; color: #333; a { diff --git a/dev/Styles/WelcomPage.less b/dev/Styles/WelcomPage.less deleted file mode 100644 index 731faab8b..000000000 --- a/dev/Styles/WelcomPage.less +++ /dev/null @@ -1,9 +0,0 @@ -.popups { - .b-welcom-page-content { - - .modal-header { - background-color: #fff; - } - - } -} diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less index 1598b57b0..031762dc4 100644 --- a/dev/Styles/_BootstrapFix.less +++ b/dev/Styles/_BootstrapFix.less @@ -287,47 +287,6 @@ html.no-rgba .modal { border-width: 0px !important; } -.modal-backdrop, .modal-backdrop.fade.show { - .opacity(20); - transform: none; -} - -.popups { - - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1100; - overflow: auto; - background-color: rgba(0,0,0,0.3); -// -webkit-overflow-scrolling: touch; - - .modal { - position: static; - z-index: 1101; - margin: 5% auto; - background-color: transparent; - overflow: hidden; - - .modal-body { - background-color: #fff; - max-height: none; - } - - box-shadow: 0 5px 80px rgba(0,0,0,0.3); - } -} - -.modal.fade { - transition: none; -} - -.modal-backdrop { - .g-ui-user-select-none(); -} - .modal.loginContent .modal-body, .modal.loginAdminContent .modal-body { background-color: transparent !important; } @@ -355,7 +314,7 @@ html.no-rgba .modal { html.rl-mobile { - .popups .modal { + #rl-popups .modal { width: 100% !important; width: calc(~'100% - 20px') !important; } diff --git a/dev/boot.js b/dev/boot.js index 7cf230af1..5e121a50b 100644 --- a/dev/boot.js +++ b/dev/boot.js @@ -219,7 +219,6 @@ if (app) {
\
\
\ -
\ \ \
\ diff --git a/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html b/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html index a189c25fe..8dd4f625d 100644 --- a/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html +++ b/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html @@ -33,7 +33,7 @@ -
+
diff --git a/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html b/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html index 43c9343a2..d6fe78cc4 100644 --- a/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html +++ b/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html @@ -1,271 +1,269 @@ -
-