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

Remove bootstrap Modal feature for improved transition effects (in future might use <dialog>)

Browse source
This commit is contained in:
djmaze 2020-09-02 17:06:35 +02:00
parent 0309879d6b
commit 7135cc38fe
82 changed files with 1767 additions and 3990 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dev/Common/HtmlEditor.js
View file

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

15
dev/External/ko.js vendored
View file

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

60
dev/Knoin/Knoin.js
View file

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

1
dev/Screen/AbstractSettings.js
View file

@ -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(

2
dev/Styles/@Main.less
View file

@ -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";

2
dev/Styles/Account.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-account-add-content {
.modal-header {
background-color: #fff;

14
dev/Styles/Activate.less
View file

@ -1,14 +0,0 @@
.popups {
.b-activate-content {
width: 700px;
.modal-header {
background-color: #fff;
}
.help-inline {
padding-left: 0px;
}
}
}

2
dev/Styles/AdvancedSearch.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-advanced-search-content {
&.modal {
width: 750px;

29
dev/Styles/Animations.less
View file

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

2
dev/Styles/Ask.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-ask-content {
.modal-header {

1
dev/Styles/Contacts.less
View file

@ -22,7 +22,6 @@
width: 900px;
min-height: 300px;
max-height: 700px;
margin: auto;
.modal-body {
overflow: auto;

2
dev/Styles/Filter.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-filter-content {
width: 750px;

2
dev/Styles/FolderClear.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-folder-clear-content {
.modal-header {
background-color: #fff;

2
dev/Styles/FolderCreate.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-folder-create-content {
.modal-header {
background-color: #fff;

2
dev/Styles/FolderSystem.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-folder-system-content {
.modal-header {
background-color: #fff;

2
dev/Styles/Identity.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-identity-content {
&.modal {

4
dev/Styles/Languages.less
View file

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

20
dev/Styles/Layout.less
View file

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

4
dev/Styles/OpenPgpKey.less
View file

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

2
dev/Styles/Shortcuts.less
View file

@ -1,4 +1,4 @@
.popups {
.rl-view-model {
.b-shortcuts-content {
&.modal {
width: 700px;

2
dev/Styles/Template.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-template-add-content {
&.modal {

2
dev/Styles/TwoFactor.less
View file

@ -1,4 +1,4 @@
.popups {
#rl-popups {
.b-two-factor-content {

25
dev/Styles/Ui.less
View file

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

9
dev/Styles/WelcomPage.less
View file

@ -1,9 +0,0 @@
.popups {
.b-welcom-page-content {
.modal-header {
background-color: #fff;
}
}
}

43
dev/Styles/_BootstrapFix.less
View file

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

1
dev/boot.js
View file

@ -219,7 +219,6 @@ if (app) {
<div id="rl-top"></div>\
<div id="rl-left"></div>\
<div id="rl-right"></div>\
<div id="rl-bottom"></div>\
</div>\
</div>\
<div id="rl-templates"></div>\