From 0e8bf13d5dae676c3cbfb01096f23cc924d93960 Mon Sep 17 00:00:00 2001 From: djmaze Date: Wed, 2 Sep 2020 21:30:23 +0200 Subject: [PATCH] Bugfix: the new endShowHide failed in Edge and mobile browsers Cleanup bootstrap less files --- README.md | 22 +- dev/External/ko.js | 5 - dev/Knoin/Knoin.js | 25 +- dev/Styles/Animations.less | 28 +- dev/Styles/Contacts.less | 11 +- dev/Styles/MessageList.less | 12 +- dev/Styles/MessageView.less | 6 +- dev/Styles/Ui.less | 2 +- dev/Styles/_BootstrapFix.less | 2 +- dev/Styles/_CkeFix.less | 2 - dev/Styles/_End.less | 3 +- dev/Styles/_InputosaurusFix.less | 2 +- dev/View/Admin/Login.js | 2 +- dev/View/User/Login.js | 2 +- .../app/templates/Views/Admin/AdminLogin.html | 2 +- .../0.0.0/app/templates/Views/User/Login.html | 4 +- vendors/bootstrap/less/alerts.less | 2 +- vendors/bootstrap/less/button-groups.less | 61 +-- vendors/bootstrap/less/buttons.less | 42 +- vendors/bootstrap/less/close.less | 6 +- vendors/bootstrap/less/code.less | 12 +- .../bootstrap/less/component-animations.less | 3 +- vendors/bootstrap/less/dropdowns.less | 25 +- vendors/bootstrap/less/forms.less | 67 ++- vendors/bootstrap/less/labels-badges.less | 4 +- vendors/bootstrap/less/layouts.less | 6 +- vendors/bootstrap/less/mixins.less | 423 +----------------- vendors/bootstrap/less/modals.less | 4 +- vendors/bootstrap/less/navs.less | 26 +- vendors/bootstrap/less/tables.less | 3 +- vendors/bootstrap/less/type.less | 8 +- vendors/bootstrap/less/wells.less | 8 +- 32 files changed, 167 insertions(+), 663 deletions(-) diff --git a/README.md b/README.md index c6172908f..049f7b010 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.108 | -|app.js |4.184.455 |2.626.387 | +|admin.js |2.130.942 | 961.538 | +|app.js |4.184.455 |2.624.797 | |boot.js | 671.522 | 43.742 | |libs.js | 647.614 | 312.276 | |polyfills.js | 325.834 | 0 | -|TOTAL |7.960.367 |3.945.513 | +|TOTAL |7.960.367 |3.942.353 | |js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli | |--------------- |--------: |--------: |--------: |--------: |--------: | -|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 | +|admin.min.js | 252.147 | 130.359 | 73.657 | 37.825 | 32.456 | +|app.min.js | 511.202 | 354.068 |140.462 | 93.278 | 74.852 | |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 | 786.164 |424.718 |225.079 |190.196 | +|TOTAL |1.434.353 | 785.732 |424.718 |224.942 |190.147 | -648.189 bytes (199.639 gzip) is not much, but it feels faster. +648.621 bytes (199.776 gzip) is not much, but it feels faster. ### CSS changes @@ -123,10 +123,10 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill * Removed vendors/Progress.js/minified/progressjs.min.css -|css/* |1.14.0 |native | -|-------------- |--------: |--------: | -|app.css | 340.334 | 263.469 | -|app.min.css | 274.791 | 209.640 | +|css/* |1.14.0 |native |gzip 1.14 |gzip |brotli | +|-------------- |-------: |-------: |------: |------: |------: | +|app.css | 340.334 | 255.627 | 46,959 | 36.929 | 31.015 | +|app.min.css | 274.791 | 208.711 | 39,618 | 32.226 | 27.364 | ### PHP73 branch diff --git a/dev/External/ko.js b/dev/External/ko.js index 3920441ec..c84b7ab6f 100644 --- a/dev/External/ko.js +++ b/dev/External/ko.js @@ -33,11 +33,6 @@ ko.bindingHandlers.editor = { } }; -ko.bindingHandlers.visibleAnimated = { - init: (element, fValueAccessor) => element.hidden = !ko.unwrap(fValueAccessor()), - update: (element, fValueAccessor) => element.hidden = !ko.unwrap(fValueAccessor()) -}; - ko.bindingHandlers.tooltip = { init: (element, fValueAccessor) => { const fValue = fValueAccessor(), diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index 84c6c74f7..cfa463e5e 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -5,21 +5,19 @@ import { $htmlCL, VIEW_MODELS } from 'Common/Globals'; //import { bMobileDevice } from 'Common/Globals'; let currentScreen = null, - defaultScreenName = ''; + defaultScreenName = '', + popupVisibilityNames = []; const SCREENS = {}, qs = s => document.querySelector(s), isNonEmptyArray = values => Array.isArray(values) && values.length, - - popupVisibilityNames = ko.observableArray([]), - autofocus = dom => { // if (!bMobileDevice) { const af = dom.querySelector('[autofocus]'); af && af.focus(); }; -export const popupVisibility = ko.computed(() => 0 < popupVisibilityNames().length); +export const popupVisibility = ko.computed(() => 0 < popupVisibilityNames.length); export const ViewType = { Popup: 'Popups', @@ -165,7 +163,7 @@ function buildViewModel(ViewModelClass, vmScreen) { // show/hide popup/modal const endShowHide = e => { - if (e.target === vmDom && 'background-color' === e.propertyName) { + if (e.target === vmDom) { if (vmDom.classList.contains('show')) { autofocus(vmDom); vm.onShowWithDelay && vm.onShowWithDelay(); @@ -178,19 +176,19 @@ function buildViewModel(ViewModelClass, vmScreen) { vm.modalVisibility.subscribe(value => { if (value) { - vmDom.style.zIndex = 3000 + popupVisibilityNames().length + 10; + vmDom.style.zIndex = 3000 + popupVisibilityNames.length + 10; vmDom.hidden = false; vm.storeAndSetKeyScope(); popupVisibilityNames.push(vm.viewModelName); requestAnimationFrame(() => { // wait just before the next paint - document.body.offsetHeight; // force a reflow + vmDom.offsetHeight; // force a reflow vmDom.classList.add('show'); // trigger the transitions }); } else { vm.onHide && vm.onHide(); vmDom.classList.remove('show'); vm.restoreKeyScope(); - popupVisibilityNames.remove(vm.viewModelName); + popupVisibilityNames = popupVisibilityNames.filter(v=>v!==vm.viewModelName); } vmDom.setAttribute('aria-hidden', !value); }); @@ -419,8 +417,7 @@ export function startScreens(screensClasses) { * @returns {void} */ export function setHash(hash, silence = false, replace = false) { - hash = '#' === hash.substr(0, 1) ? hash.substr(1) : hash; - hash = '/' === hash.substr(0, 1) ? hash.substr(1) : hash; + hash = hash.replace(/^[#/]+/, ''); const cmd = replace ? 'replaceHash' : 'setHash'; @@ -509,15 +506,13 @@ function settingsMenuKeysHandler(items) { if (event && index) { while (index-- && !items[index].matches('.selected')); if (handler && 'up' === handler.shortcut) { - index && --index; + index && --index; } else if (index < items.length - 1) { ++index; } const resultHash = items[index].href; - if (resultHash) { - setHash(resultHash, false, true); - } + resultHash && setHash(resultHash, false, true); } }).throttle(200); } diff --git a/dev/Styles/Animations.less b/dev/Styles/Animations.less index 09d227f0f..61347e1b5 100644 --- a/dev/Styles/Animations.less +++ b/dev/Styles/Animations.less @@ -41,25 +41,25 @@ html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper { }*/ #rl-loading { - .transition(opacity 0.5s linear); + transition: opacity 0.5s linear; } html.rl-started-delay { #rl-left { - .transition(width 0.3s ease-out); + transition: width 0.3s ease-out; } #rl-right { - .transition(~'left 0.3s ease-out, right 0.3s ease-out'); + transition: left 0.3s ease-out, right 0.3s ease-out; } #rl-sub-left, #rl-sub-left .messageList .inputSearch { - .transition(width 0.3s ease-out); + transition: width 0.3s ease-out; } #rl-sub-right { - .transition(left 0.3s ease-out); + transition: left 0.3s ease-out; } } @@ -77,7 +77,7 @@ html.no-mobile { .alertError { display: block; opacity: 1; - .transition(opacity 0.5s linear); + transition: opacity 0.5s linear; } .alertError[hidden] { opacity: 0; @@ -102,11 +102,11 @@ html.no-mobile { } &.no-mobile .b-login-content .loginFormWrapper { - .transition(all 0.3s ease-out); + transition: all 0.3s ease-out; } & .button-delete-transitions { - .transition(all 0.2s linear); + transition: all 0.2s linear; } & .b-folders .e-item .anim-action-class { @@ -114,31 +114,31 @@ html.no-mobile { } & .b-folders .btn.buttonContacts { - .transition(margin 0.3s linear); + transition: margin 0.3s linear; } & .b-folders .b-content.opacity-on-panel-disabled { - .transition(opacity 0.3s linear); + transition: opacity 0.3s linear; } & .messageList { .messageListItem { - .transition(max-height 400ms ease); + transition: max-height 400ms ease; } .listDragOver { - .transition(all 400ms ease); + transition: all 400ms ease; } } & .b-list-content { .e-contact-item { - .transition(max-height 400ms ease); + transition: max-height 400ms ease; } } & .modal.b-domain-content { .modal-body { - .transition(left 500ms ease); + transition: left 500ms ease; } } diff --git a/dev/Styles/Contacts.less b/dev/Styles/Contacts.less index bfb421dae..59955afa9 100644 --- a/dev/Styles/Contacts.less +++ b/dev/Styles/Contacts.less @@ -341,16 +341,7 @@ border-color: #999; } - &::-webkit-input-placeholder { - color: #ddd; - } - &::-moz-placeholder { - color: #ddd; - } - &:-moz-placeholder { - color: #ddd; - } - &:-ms-input-placeholder { + &::placeholder { color: #ddd; } } diff --git a/dev/Styles/MessageList.less b/dev/Styles/MessageList.less index 0689650ef..bfae72e8f 100644 --- a/dev/Styles/MessageList.less +++ b/dev/Styles/MessageList.less @@ -30,8 +30,8 @@ html.rl-no-preview-pane { background-color: #eee; // #gradient > .vertical(#f4f4f4, #dfdfdf); - .border-bottom-right-radius(@rlMainBorderRadius); - .border-bottom-left-radius(@rlMainBorderRadius); + border-bottom-right-radius: @rlMainBorderRadius; + border-bottom-left-radius: @rlMainBorderRadius; .e-quota { display: inline-block; @@ -81,8 +81,8 @@ html.rl-no-preview-pane { background-color: #eee; // #gradient > .vertical(#f4f4f4, #dfdfdf); - .border-top-right-radius(@rlMainBorderRadius); - .border-top-left-radius(@rlMainBorderRadius); + border-top-right-radius: @rlMainBorderRadius; + border-top-left-radius: @rlMainBorderRadius; .checkboxCkeckAll { margin: 5px 0; @@ -242,7 +242,7 @@ html.rl-no-preview-pane { display: block; height: 1px; background-color: #999; - .opacity(20); + opacity: 0.2; } .wrapper { @@ -560,7 +560,7 @@ html.rl-no-preview-pane { .delimiter { background-color: #398CF2; - .opacity(20); + opacity: 0.2; } + .messageListItem .delimiter { diff --git a/dev/Styles/MessageView.less b/dev/Styles/MessageView.less index 4fc74e60a..18e3f3f2e 100644 --- a/dev/Styles/MessageView.less +++ b/dev/Styles/MessageView.less @@ -34,7 +34,7 @@ html.rl-no-preview-pane { /*overflow: hidden;*/ border: @rlLowBorderSize solid @rlMainDarkColor; - .border-radius(@rlLowBorderRadius); + border-radius: @rlLowBorderRadius; background-color: #fff; @@ -277,10 +277,10 @@ html.rl-no-preview-pane { z-index: 2; cursor: pointer; border-radius: 5px; - .opacity(50); + opacity: 0.5; &:hover { - .opacity(80); + opacity: 0.8; border-color: #666; background-color: #888; color: #fff; diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index 6c8164e10..910b7f22d 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -201,7 +201,7 @@ html { height: 15px; background-color: #ddd; margin: 0 5px; - .box-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); border-radius: 100%; display: inline-block; diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less index 031762dc4..5ee068fbc 100644 --- a/dev/Styles/_BootstrapFix.less +++ b/dev/Styles/_BootstrapFix.less @@ -60,7 +60,7 @@ button.close-custom { } .input-append input, .input-append select, .input-append .uneditable-input { - .border-radius(3px); + border-radius: 3px; } select { diff --git a/dev/Styles/_CkeFix.less b/dev/Styles/_CkeFix.less index 1e7ff9d25..2a901dc00 100644 --- a/dev/Styles/_CkeFix.less +++ b/dev/Styles/_CkeFix.less @@ -17,8 +17,6 @@ .cke_top { padding: 6px 4px 1px 6px !important; - -moz-box-shadow: none !important; - -webkit-box-shadow: none !important; box-shadow: none !important; border-bottom: 1px solid #b6b6b6 !important; background: #F0F0F0 !important; diff --git a/dev/Styles/_End.less b/dev/Styles/_End.less index 3e6d9752c..f9e1c47f5 100644 --- a/dev/Styles/_End.less +++ b/dev/Styles/_End.less @@ -113,7 +113,6 @@ html.glass { input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - -webkit-transition-delay: 9999s; - -webkit-transition: color 9999s ease-out, background-color 9999s ease-out; + transition: color 9999s ease-out, background-color 9999s ease-out; } } diff --git a/dev/Styles/_InputosaurusFix.less b/dev/Styles/_InputosaurusFix.less index 1978b5bea..e2be5d926 100644 --- a/dev/Styles/_InputosaurusFix.less +++ b/dev/Styles/_InputosaurusFix.less @@ -8,7 +8,7 @@ border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - .transition(~"border linear .2s, box-shadow linear .2s"); + transition: border linear .2s, box-shadow linear .2s; &.inputosaurus-focused { background-color: #fff; diff --git a/dev/View/Admin/Login.js b/dev/View/Admin/Login.js index 41cb50884..edfe398d2 100644 --- a/dev/View/Admin/Login.js +++ b/dev/View/Admin/Login.js @@ -24,7 +24,7 @@ class LoginAdminView extends AbstractViewNext { this.mobile = !!Settings.appSettingsGet('mobile'); this.mobileDevice = !!Settings.appSettingsGet('mobileDevice'); - this.hideSubmitButton = !!Settings.appSettingsGet('hideSubmitButton'); + this.hideSubmitButton = Settings.appSettingsGet('hideSubmitButton') ? '' : null; this.login = ko.observable(''); this.password = ko.observable(''); diff --git a/dev/View/User/Login.js b/dev/View/User/Login.js index 8df922182..adb07c5a8 100644 --- a/dev/View/User/Login.js +++ b/dev/View/User/Login.js @@ -34,7 +34,7 @@ class LoginUserView extends AbstractViewNext { constructor() { super(); - this.hideSubmitButton = !!Settings.appSettingsGet('hideSubmitButton'); + this.hideSubmitButton = Settings.appSettingsGet('hideSubmitButton') ? '' : null; this.welcome = ko.observable(!!Settings.settingsGet('UseLoginWelcomePage')); 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 8dd4f625d..55aeb5a6d 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/User/Login.html b/rainloop/v/0.0.0/app/templates/Views/User/Login.html index a703e9c2c..f203067ef 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/Login.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/Login.html @@ -12,7 +12,7 @@
{{INCLUDE/AfterLogo/PLACE}} -