diff --git a/dev/Knoin/AbstractViews.js b/dev/Knoin/AbstractViews.js index 027cd573c..4f0d0e658 100644 --- a/dev/Knoin/AbstractViews.js +++ b/dev/Knoin/AbstractViews.js @@ -2,7 +2,7 @@ import ko from 'ko'; import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils'; import { Scope } from 'Common/Enums'; -import { keyScope } from 'Common/Globals'; +import { keyScope, Settings } from 'Common/Globals'; import { ViewType } from 'Knoin/Knoin'; class AbstractView { @@ -12,6 +12,7 @@ class AbstractView { this.viewModelTemplateID = templateID; this.viewType = type; this.viewModelDom = null; + this.viewNoUserSelect = false; this.keyScope = { scope: Scope.None, @@ -122,3 +123,23 @@ export class AbstractViewSettings viewModelDom } */ + +export class AbstractViewLogin extends AbstractViewCenter { + constructor(templateID) { + super(templateID); + this.hideSubmitButton = Settings.app('hideSubmitButton'); + this.formError = ko.observable(false).extend({ falseTimeout: 500 }); + } + + onBuild(dom) { + dom.classList.add('LoginView'); + } + + onShow() { + rl.route.off(); + } + + submitForm() { +// return false; + } +} diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index 10d616390..a4749c491 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -32,21 +32,48 @@ const let vmDom = null; const vm = new ViewModelClass(vmScreen), position = vm.viewType || '', + dialog = ViewType.Popup === position, vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null; ViewModelClass.__builded = true; ViewModelClass.__vm = vm; if (vmPlace) { - vmDom = Element.fromHTML(''); + vmDom = dialog + ? Element.fromHTML('') + : Element.fromHTML(''); vmPlace.append(vmDom); vm.viewModelDom = vmDom; ViewModelClass.__dom = vmDom; + if (vm.viewNoUserSelect) { + vmDom.classList.add('g-ui-user-select-none'); + } + if (ViewType.Popup === position) { vm.cancelCommand = vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass)); + // Firefox / Safari HTMLDialogElement not defined + if (!vmDom.showModal) { + vmDom.classList.add('polyfill'); + vmDom.showModal = () => { + if (!vmDom.backdrop) { + vmDom.before(vmDom.backdrop = Element.fromHTML('
')); + } + vmDom.setAttribute('open',''); + vmDom.open = true; + vmDom.returnValue = null; + vmDom.backdrop.hidden = false; + }; + vmDom.close = v => { + vmDom.backdrop.hidden = true; + vmDom.returnValue = v; + vmDom.removeAttribute('open', null); + vmDom.open = false; + }; + } + // show/hide popup/modal const endShowHide = e => { if (e.target === vmDom) { @@ -54,7 +81,7 @@ const autofocus(vmDom); vm.onShowWithDelay && vm.onShowWithDelay(); } else { - vmDom.hidden = true; + vmDom.close(); vm.onHideWithDelay && vm.onHideWithDelay(); } } @@ -63,10 +90,12 @@ const vm.modalVisibility.subscribe(value => { if (value) { visiblePopups.add(vm); - vmDom.style.zIndex = 3000 + visiblePopups.size + 10; - vmDom.hidden = false; + vmDom.style.zIndex = 3000 + (visiblePopups.size * 2); + vmDom.showModal(); + if (vmDom.backdrop) { + vmDom.backdrop.style.zIndex = 3000 + visiblePopups.size; + } vm.keyScope.set(); - arePopupsVisible(true); requestAnimationFrame(() => { // wait just before the next paint vmDom.offsetHeight; // force a reflow vmDom.classList.add('show'); // trigger the transitions @@ -74,11 +103,10 @@ const } else { visiblePopups.delete(vm); vm.onHide && vm.onHide(); - vmDom.classList.remove('show'); vm.keyScope.unset(); - arePopupsVisible(0 < visiblePopups.size); + vmDom.classList.remove('show'); // trigger the transitions } - vmDom.setAttribute('aria-hidden', !value); + arePopupsVisible(0 < visiblePopups.size); /* // the old ko.bindingHandlers.modal const close = vmDom.querySelector('.close'), diff --git a/dev/Screen/User/MailBox.js b/dev/Screen/User/MailBox.js index 913933fff..f965a655b 100644 --- a/dev/Screen/User/MailBox.js +++ b/dev/Screen/User/MailBox.js @@ -1,6 +1,6 @@ import { Scope } from 'Common/Enums'; import { Layout, ClientSideKeyName } from 'Common/EnumsUser'; -import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals'; +import { doc, leftPanelDisabled, moveAction, Settings, elementById } from 'Common/Globals'; import { pString, pInt } from 'Common/Utils'; import { setLayoutResizer } from 'Common/UtilsUser'; import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache'; @@ -104,8 +104,8 @@ export class MailBoxUserScreen extends AbstractScreen { onBuild() { setTimeout(() => { // initMailboxLayoutResizer - const top = doc.querySelector('.RL-MailMessageList'), - bottom = doc.querySelector('.RL-MailMessageView'), + const top = elementById('V-MailMessageList'), + bottom = elementById('V-MailMessageView'), fToggle = () => { let layout = SettingsUserStore.layout(); setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize, diff --git a/dev/Stores/User/App.js b/dev/Stores/User/App.js index 22daad1a9..43304b23d 100644 --- a/dev/Stores/User/App.js +++ b/dev/Stores/User/App.js @@ -1,5 +1,5 @@ import { Scope } from 'Common/Enums'; -import { doc, keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals'; +import { keyScope, leftPanelDisabled, SettingsGet, elementById } from 'Common/Globals'; import { addObservablesTo } from 'Common/Utils'; import { ThemeStore } from 'Stores/Theme'; @@ -25,7 +25,7 @@ AppUserStore.focusedState.subscribe(value => { break; } ['FolderList','MessageList','MessageView'].forEach(name => { - let dom = doc.querySelector('.RL-Mail'+name); + let dom = elementById('V-Mail'+name); dom && dom.classList.toggle('focused', name === value); }); }); diff --git a/dev/Styles/@Admin.less b/dev/Styles/@Admin.less index 83cab6e63..712aa9d44 100644 --- a/dev/Styles/@Admin.less +++ b/dev/Styles/@Admin.less @@ -14,7 +14,6 @@ @import "../../vendors/bootstrap/less/buttons.less"; @import "../../vendors/bootstrap/less/button-groups.less"; @import "../../vendors/bootstrap/less/alerts.less"; -@import "../../vendors/bootstrap/less/modals.less"; @import "../../vendors/bootstrap/less/utilities.less"; @import "../../vendors/bootstrap/less/wells.less"; diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less index 5f5b5ffe7..3f81b870e 100644 --- a/dev/Styles/@Main.less +++ b/dev/Styles/@Main.less @@ -14,7 +14,6 @@ @import "../../vendors/bootstrap/less/buttons.less"; @import "../../vendors/bootstrap/less/button-groups.less"; @import "../../vendors/bootstrap/less/alerts.less"; -@import "../../vendors/bootstrap/less/modals.less"; @import "../../vendors/bootstrap/less/utilities.less"; @import "../../vendors/bootstrap/less/navs.less"; diff --git a/dev/Styles/Admin/Domain.less b/dev/Styles/Admin/Domain.less index 963cf4362..ada1b177f 100644 --- a/dev/Styles/Admin/Domain.less +++ b/dev/Styles/Admin/Domain.less @@ -1,18 +1,14 @@ -.b-domain-alias-content { - &.modal { - max-width: 330px; - } +#V-PopupsDomainAlias { + max-width: 330px; .error-desc { color: red; } } -.b-domain-content { +#V-PopupsDomain { - &.modal { - max-width: 810px; - } + max-width: 810px; .domain-desc { color: #666; diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less index 59da0863c..d2d9e359d 100644 --- a/dev/Styles/Admin/Layout.less +++ b/dev/Styles/Admin/Layout.less @@ -91,17 +91,6 @@ padding-right: 12px; } -#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); -} - #rl-settings-subscreen { padding: 20px; } diff --git a/dev/Styles/Admin/Plugin.less b/dev/Styles/Admin/Plugin.less index 8e4210aee..52b1a8cd5 100644 --- a/dev/Styles/Admin/Plugin.less +++ b/dev/Styles/Admin/Plugin.less @@ -1,8 +1,6 @@ -.b-plugin-content { +#V-PopupsPlugin { - &.modal { - max-width: 660px; - } + max-width: 660px; .modal-body { overflow: auto; diff --git a/dev/Styles/Animations.less b/dev/Styles/Animations.less index fb74d5c88..c94920d64 100644 --- a/dev/Styles/Animations.less +++ b/dev/Styles/Animations.less @@ -18,22 +18,22 @@ @media screen and (min-width: 1000px) { - html.rl-started-trigger .b-login-content { + html.rl-started-trigger .LoginView { /*transform: scale(1.1);*/ transform: translateY(-20px); opacity: 0.5; } - .b-login-content .errorAnimated { + .LoginView .errorAnimated { animation: login-form-shake 400ms ease-in-out; } - .b-login-content .errorAnimated .buttonLogin { + .LoginView .errorAnimated .buttonLogin { color: #b94a48; font-weight: bold; } - .b-login-content { + .LoginView { transition: all 0.3s ease-out; } @@ -41,23 +41,4 @@ transition: all 0.2s linear; } - #rl-popups > .rl-view-model .modal { - transition: all .2s ease-out; - } - #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; - } -} - -#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); } diff --git a/dev/Styles/Ask.less b/dev/Styles/Ask.less index e0d362a67..7f7d569bc 100644 --- a/dev/Styles/Ask.less +++ b/dev/Styles/Ask.less @@ -1,4 +1,4 @@ -.b-ask-content { +#V-PopupsAsk { .modal-body { font-size: 18px; diff --git a/dev/Styles/Languages.less b/dev/Styles/Languages.less index 25dd109c9..8111bec7e 100644 --- a/dev/Styles/Languages.less +++ b/dev/Styles/Languages.less @@ -1,8 +1,6 @@ -.b-languages-content { +#V-PopupsLanguages { - &.modal { - max-width: 700px; - } + max-width: 710px; label { display: inline-block; @@ -37,7 +35,7 @@ } @media screen and (max-width: 999px) { - .b-languages-content label { + #V-PopupsLanguages label { width: calc(100% - 40px); } } diff --git a/dev/Styles/Login.less b/dev/Styles/Login.less index 405d130a9..93b936591 100644 --- a/dev/Styles/Login.less +++ b/dev/Styles/Login.less @@ -1,4 +1,4 @@ -.RL-Login, .RL-AdminLogin { +#V-Login, #V-AdminLogin { position: fixed; left: 50%; top: 50%; @@ -13,7 +13,7 @@ @glass-error-color: #f76260; @glass-m-color: rgba(255, 255, 255, .8); -.b-login-content { +.LoginView { position: relative; @@ -163,7 +163,7 @@ } @media screen and (max-width: 480px) { - .b-login-content { + .LoginView { form { padding: 30px 4vw 10px; } diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index 1adea447f..d698d59c6 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -124,3 +124,96 @@ textarea + .settings-save-trigger { .tabs [id^="tab"]:checked + label + .tab-content { visibility: visible; } + +.dialog-backdrop { + background: rgba(0,0,0,0.5); + position: fixed; + top: 0; + right: 0; + bottom: 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 { + border: 0; + background-color: @white; + border: 1px solid rgba(0,0,0,.3); + border-radius: 6px; + box-shadow: 0 5px 80px rgba(0,0,0,0.3); + margin: 10px auto; + max-height: calc(100vh - 20px); + max-width: 560px; + overflow: auto; + padding: 0; + transition: all .2s ease-out; + top: 0; + width: calc(100% - 20px); +} +dialog:not([open]) { + display: none !important; +} +dialog.show { + opacity: 1; +} +dialog:not(.show) { + background-color: rgba(0,0,0,0); + opacity: 0; + top: -25%; +} + +dialog header { + padding: 9px 15px; + border-bottom: 1px solid #eee; + // Close icon + .close { margin-top: 2px; } + // Heading + h3 { + margin: 0; + line-height: 30px; + } +} + +// Body (where all modal content resides) +dialog .modal-body { + overflow-y: auto; + padding: 15px; +} + +// Footer (for actions) +dialog footer { + padding: 14px 15px 15px; + margin-bottom: 0; + text-align: right; // right align buttons + border-top: 1px solid #ddd; + border-radius: 0 0 6px 6px; + .clearfix(); // clear it in case folks use .pull-* classes on buttons + + // Properly space out buttons + .btn + .btn { + margin-left: 5px; + margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } +} diff --git a/dev/Styles/User/AdvancedSearch.less b/dev/Styles/User/AdvancedSearch.less index b32ac75d0..f2b3ada47 100644 --- a/dev/Styles/User/AdvancedSearch.less +++ b/dev/Styles/User/AdvancedSearch.less @@ -1,7 +1,7 @@ -.b-advanced-search-content { - &.modal { - max-width: 780px; - } +#V-PopupsAdvancedSearch { + + max-width: 780px; + .control-label { width: 110px; } diff --git a/dev/Styles/User/Animations.less b/dev/Styles/User/Animations.less index f2aa9039e..eb366ed8a 100644 --- a/dev/Styles/User/Animations.less +++ b/dev/Styles/User/Animations.less @@ -34,7 +34,7 @@ } } - .b-compose.loading .b-header-toolbar { + #V-PopupsCompose header.loading { background-size: 60px 60px; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, diff --git a/dev/Styles/User/Compose.less b/dev/Styles/User/Compose.less index ab56e47c7..7e3579f0b 100644 --- a/dev/Styles/User/Compose.less +++ b/dev/Styles/User/Compose.less @@ -1,13 +1,10 @@ -.b-compose { - - &.modal { - display: flex; - flex-direction: column; - height: calc(100% - 52px); - max-width: 1000px; - width: 98%; - } +#V-PopupsCompose { + display: flex; + flex-direction: column; + height: calc(100% - 52px); + max-width: 1000px; + width: 98%; .modal-body { padding: 0; @@ -32,22 +29,23 @@ border-top: 1px solid #ccc; overflow-y: auto; padding: 10px; - - .no-attachments-desc { - padding-top: 50px; - text-align: center; - font-size: 24px; - color: #666; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - } - - .attachmentList { - margin: 0; - padding: 10px; - } } - .b-header-toolbar { + .attachmentName { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .no-attachments-desc { + padding-top: 50px; + text-align: center; + font-size: 24px; + color: #666; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + } + + header { background-color: rgba(0,0,0,0.8); @@ -160,7 +158,7 @@ } @media screen and (max-width: 999px) { - .b-compose.modal { + #V-PopupsCompose { border: 0; width: 100%; } diff --git a/dev/Styles/User/Contacts.less b/dev/Styles/User/Contacts.less index 7c8f1c4c1..9c4b8aa9f 100644 --- a/dev/Styles/User/Contacts.less +++ b/dev/Styles/User/Contacts.less @@ -1,7 +1,14 @@ @contacts-popup-left-width: 25%; -.RL-PopupsContacts { +#V-PopupsContacts { + + bottom: 0; + width: auto; + min-width: 550px; + max-width: 900px; + min-height: 300px; + max-height: 700px; .control-group { .control-label { @@ -10,15 +17,6 @@ } } - .modal { - bottom: 0; - width: auto; - min-width: 550px; - max-width: 900px; - min-height: 300px; - max-height: 700px; - } - .modal-body { height: calc(100% - 49px); padding: 0; diff --git a/dev/Styles/User/Filter.less b/dev/Styles/User/Filter.less index 0839819fe..f36d45368 100644 --- a/dev/Styles/User/Filter.less +++ b/dev/Styles/User/Filter.less @@ -1,4 +1,4 @@ -.b-filter-content { +#V-PopupsFilter { max-width: 750px; diff --git a/dev/Styles/User/Identity.less b/dev/Styles/User/Identity.less index 416f324df..055bb92b3 100644 --- a/dev/Styles/User/Identity.less +++ b/dev/Styles/User/Identity.less @@ -1,8 +1,6 @@ -.b-identity-content { +#V-PopupsIdentity { - &.modal { - max-width: 770px; - } + max-width: 770px; .modal-body { overflow: hidden; diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index a124ebbd2..f93631f5c 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -75,7 +75,7 @@ html:not(.rl-left-panel-disabled) #rl-left { } #rl-left > .resizer, -.rl-side-preview-pane .RL-MailMessageList > .resizer { +.rl-side-preview-pane #V-MailMessageList > .resizer { cursor: ew-resize; height: 100%; right: 0; @@ -83,17 +83,17 @@ html:not(.rl-left-panel-disabled) #rl-left { width: 5px; } -.rl-side-preview-pane .RL-MailMessageList { +.rl-side-preview-pane #V-MailMessageList { resize: horizontal; min-width: 320px; max-width: 60%; } -.rl-bottom-preview-pane .RL-MailMessageList { +.rl-bottom-preview-pane #V-MailMessageList { resize: vertical; min-height: 200px; max-height: 60%; } -.rl-bottom-preview-pane .RL-MailMessageList > .resizer { +.rl-bottom-preview-pane #V-MailMessageList > .resizer { cursor: ns-resize; height: 5px; left: 0; @@ -102,11 +102,11 @@ html:not(.rl-left-panel-disabled) #rl-left { } html:not(.rl-left-panel-disabled) #rl-left > .resizer, -.RL-MailMessageList > .resizer { +#V-MailMessageList > .resizer { display: block; } -.RL-MailMessageList { +#V-MailMessageList { position: absolute; top: 0; bottom: @rlBottomMargin; @@ -114,7 +114,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer, width: 50%; } -.RL-MailMessageView { +#V-MailMessageView { position: absolute; top: 50px + @rlLowMargin; bottom: 13px; @@ -148,30 +148,11 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer, } html.rl-side-preview-pane { - .RL-MailMessageView { + #V-MailMessageView { left: 50%; } } -/* - #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); -} - #rl-settings-subscreen { padding:20px; } @@ -256,12 +237,12 @@ html.rl-side-preview-pane { left: @rlLeftWidth + 20; } - .RL-MailMessageList { + #V-MailMessageList { width: 40%; } html.rl-side-preview-pane { - .RL-MailMessageView { + #V-MailMessageView { left: 40%; } } @@ -317,7 +298,7 @@ html.rl-left-panel-disabled { html.rl-no-preview-pane { - .RL-MailMessageList { + #V-MailMessageList { right: @rlBottomMargin !important; width: inherit; } @@ -331,14 +312,14 @@ html.rl-no-preview-pane #rl-right .resizer { html.rl-bottom-preview-pane { - .RL-MailMessageList { + #V-MailMessageList { bottom: inherit; width: inherit; height: 300px; right: 0; } - .RL-MailMessageView { + #V-MailMessageView { left: 0; top: 356px; } diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less index 908e4afa6..149912df6 100644 --- a/dev/Styles/User/MessageList.less +++ b/dev/Styles/User/MessageList.less @@ -1,12 +1,12 @@ html.rl-mobile, html.rl-no-preview-pane { - .message-selected .RL-MailMessageList { + .message-selected #V-MailMessageList { display: none; } } -.RL-MailMessageList.focused .messageList { +#V-MailMessageList.focused .messageList { border-color: #9d9d9d; } @@ -15,7 +15,7 @@ html.rl-no-preview-pane { padding-right: 6px; } -.RL-MailMessageList .btn-toolbar { +#V-MailMessageList .btn-toolbar { height: 30px; padding: 10px 1px; white-space: nowrap; @@ -42,15 +42,13 @@ html.rl-no-preview-pane { border-top: 1px solid #bbb; .e-quota { + border-bottom: 1px dashed #333; display: inline-block; margin-top: 5px; margin-left: 5px; font-size: 18px; cursor: help; } - .e-quota:hover { - border-bottom: 1px dashed #333; - } } .btn.buttonMoreSearch { diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index 9d76c4fe1..fe992b752 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -1,11 +1,11 @@ html.rl-no-preview-pane { - #rl-right:not(.message-selected) .RL-MailMessageView { + #rl-right:not(.message-selected) #V-MailMessageView { display: none; } } -.RL-MailMessageView.focused .messageView { +#V-MailMessageView.focused .messageView { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); border-color: darken(@rlMainDarkColor, 5%); } @@ -501,10 +501,10 @@ html.rl-message-fullscreen { } #rl-right { - .RL-MailMessageList, - .RL-SettingsPane, - .RL-SystemDropDown, - .RL-MailMessageView .messageView .toolbar { + #V-MailMessageList, + #V-SettingsPane, + #V-SystemDropDown, + #V-MailMessageView .messageView .toolbar { display: none !important; } } diff --git a/dev/Styles/User/OpenPgpKey.less b/dev/Styles/User/OpenPgpKey.less index 3145dff6e..6d1e39373 100644 --- a/dev/Styles/User/OpenPgpKey.less +++ b/dev/Styles/User/OpenPgpKey.less @@ -1,20 +1,16 @@ -.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content { - &.modal { - max-width: 570px; - } +#V-PopupsViewOpenPgpKey, #V-PopupsNewOpenPgpKey { + max-width: 570px; } -.b-open-pgp-key-view-content { +#V-PopupsViewOpenPgpKey { .key-viewer { max-height: 500px; overflow: auto; } } -.b-compose-open-pgp-content { - &.modal { - max-width: 800px; - } +#V-PopupsComposeOpenPgp { + max-width: 800px; .key-list { @@ -95,10 +91,8 @@ } } -.b-message-open-pgp-content { - &.modal { - max-width: 700px; - } +#V-PopupsMessageOpenPgp { + max-width: 700px; .key-list { @@ -132,10 +126,9 @@ } } -.b-open-pgp-key-add-content { - &.modal { - max-width: 645px; - } +#V-PopupsAddOpenPgpKey { + max-width: 645px; + .inputKey { font-family: var(--fontMono); width: 600px; diff --git a/dev/Styles/User/SettingsFilters.less b/dev/Styles/User/SettingsFilters.less index 10473ecae..dcd0b85c7 100644 --- a/dev/Styles/User/SettingsFilters.less +++ b/dev/Styles/User/SettingsFilters.less @@ -1,10 +1,10 @@ -.b-filter-script { +#V-PopupsSieveScript { width: auto; max-width: 720px; } -.b-filter-script .filter-item, +#V-PopupsSieveScript .filter-item, .b-settings-filters .script-item { white-space: nowrap; } @@ -30,7 +30,7 @@ color: #aaa; } -.b-filter-script textarea { +#V-PopupsSieveScript textarea { height: 300px; font-family: var(--fontMono); } diff --git a/dev/Styles/User/Shortcuts.less b/dev/Styles/User/Shortcuts.less index 682ced1d3..1605d89c6 100644 --- a/dev/Styles/User/Shortcuts.less +++ b/dev/Styles/User/Shortcuts.less @@ -1,7 +1,5 @@ -.b-shortcuts-content { - &.modal { - max-width: 700px; - } +#V-PopupsKeyboardShortcutsHelp { + max-width: 700px; td[class^="icon-"] { display: table-cell; diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less index df865ca8d..f181f205f 100644 --- a/dev/Styles/User/SquireUI.less +++ b/dev/Styles/User/SquireUI.less @@ -175,14 +175,14 @@ Secondly, we can't rely on MUA's what to do with :empty } } -.rl-mobile .b-compose.modal, -.rl-mobile .b-identity-content.modal { +.rl-mobile #V-PopupsCompose, +.rl-mobile #V-PopupsIdentity { margin-bottom: 50px; } -.rl-mobile .b-compose.modal { +.rl-mobile #V-PopupsCompose { min-height: calc(100% - 62px); } -.RL-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode { +#V-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode { display: none; } diff --git a/dev/Styles/User/SystemDropDown.less b/dev/Styles/User/SystemDropDown.less index 012032ecc..84f03337f 100644 --- a/dev/Styles/User/SystemDropDown.less +++ b/dev/Styles/User/SystemDropDown.less @@ -10,7 +10,7 @@ top: 40px; } -.RL-SystemDropDown { +#V-SystemDropDown { position: absolute; top: 0; diff --git a/dev/View/Admin/Login.js b/dev/View/Admin/Login.js index 42986b9ba..b6ad9a43c 100644 --- a/dev/View/Admin/Login.js +++ b/dev/View/Admin/Login.js @@ -1,19 +1,14 @@ -import ko from 'ko'; - -import { Settings } from 'Common/Globals'; import { getNotification } from 'Common/Translator'; import Remote from 'Remote/Admin/Fetch'; import { decorateKoCommands } from 'Knoin/Knoin'; -import { AbstractViewCenter } from 'Knoin/AbstractViews'; +import { AbstractViewLogin } from 'Knoin/AbstractViews'; -class LoginAdminView extends AbstractViewCenter { +class LoginAdminView extends AbstractViewLogin { constructor() { super('AdminLogin'); - this.hideSubmitButton = Settings.app('hideSubmitButton'); - this.addObservables({ login: '', password: '', @@ -26,8 +21,6 @@ class LoginAdminView extends AbstractViewCenter { submitError: '' }); - this.formError = ko.observable(false).extend({ falseTimeout: 500 }); - this.addSubscribables({ login: () => this.loginError(false), password: () => this.passwordError(false) @@ -67,14 +60,6 @@ class LoginAdminView extends AbstractViewCenter { return valid; } - - onShow() { - rl.route.off(); - } - - submitForm() { -// return false; - } } export { LoginAdminView }; diff --git a/dev/View/Popup/Account.js b/dev/View/Popup/Account.js index f9fd501dc..99a811375 100644 --- a/dev/View/Popup/Account.js +++ b/dev/View/Popup/Account.js @@ -8,6 +8,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class AccountPopupView extends AbstractViewPopup { constructor() { super('Account'); + this.viewNoUserSelect = true; this.addObservables({ isNew: true, diff --git a/dev/View/Popup/AddOpenPgpKey.js b/dev/View/Popup/AddOpenPgpKey.js index 3855df629..9697c9d37 100644 --- a/dev/View/Popup/AddOpenPgpKey.js +++ b/dev/View/Popup/AddOpenPgpKey.js @@ -6,6 +6,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class AddOpenPgpKeyPopupView extends AbstractViewPopup { constructor() { super('AddOpenPgpKey'); + this.viewNoUserSelect = true; this.addObservables({ key: '', diff --git a/dev/View/Popup/AdvancedSearch.js b/dev/View/Popup/AdvancedSearch.js index 4f2eae169..9fcd70b0b 100644 --- a/dev/View/Popup/AdvancedSearch.js +++ b/dev/View/Popup/AdvancedSearch.js @@ -11,6 +11,7 @@ import { FolderUserStore } from 'Stores/User/Folder'; class AdvancedSearchPopupView extends AbstractViewPopup { constructor() { super('AdvancedSearch'); + this.viewNoUserSelect = true; this.addObservables({ from: '', diff --git a/dev/View/Popup/Ask.js b/dev/View/Popup/Ask.js index 87b7e64e5..2472e9451 100644 --- a/dev/View/Popup/Ask.js +++ b/dev/View/Popup/Ask.js @@ -7,6 +7,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class AskPopupView extends AbstractViewPopup { constructor() { super('Ask'); + this.viewNoUserSelect = true; this.addObservables({ askDesc: '', diff --git a/dev/View/Popup/ComposeOpenPgp.js b/dev/View/Popup/ComposeOpenPgp.js index 749bdfefc..4b655df02 100644 --- a/dev/View/Popup/ComposeOpenPgp.js +++ b/dev/View/Popup/ComposeOpenPgp.js @@ -18,6 +18,7 @@ const KEY_NAME_SUBSTR = -8, class ComposeOpenPgpPopupView extends AbstractViewPopup { constructor() { super('ComposeOpenPgp'); + this.viewNoUserSelect = true; this.publicKeysOptionsCaption = i18nPGP('ADD_A_PUBLICK_KEY'); this.privateKeysOptionsCaption = i18nPGP('SELECT_A_PRIVATE_KEY'); diff --git a/dev/View/Popup/Domain.js b/dev/View/Popup/Domain.js index 80037bd44..dce54a20c 100644 --- a/dev/View/Popup/Domain.js +++ b/dev/View/Popup/Domain.js @@ -11,6 +11,7 @@ import { DomainAdminStore } from 'Stores/Admin/Domain'; class DomainPopupView extends AbstractViewPopup { constructor() { super('Domain'); + this.viewNoUserSelect = true; this.addObservables(this.getDefaults()); this.addObservables({ diff --git a/dev/View/Popup/Filter.js b/dev/View/Popup/Filter.js index 6d9c31d28..1b86c043b 100644 --- a/dev/View/Popup/Filter.js +++ b/dev/View/Popup/Filter.js @@ -16,6 +16,7 @@ import { folderListOptionsBuilder } from 'Common/UtilsUser'; class FilterPopupView extends AbstractViewPopup { constructor() { super('Filter'); + this.viewNoUserSelect = true; this.addObservables({ isNew: true, diff --git a/dev/View/Popup/FolderClear.js b/dev/View/Popup/FolderClear.js index 058b8b328..1db705213 100644 --- a/dev/View/Popup/FolderClear.js +++ b/dev/View/Popup/FolderClear.js @@ -11,6 +11,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class FolderClearPopupView extends AbstractViewPopup { constructor() { super('FolderClear'); + this.viewNoUserSelect = true; this.addObservables({ selectedFolder: null, diff --git a/dev/View/Popup/FolderCreate.js b/dev/View/Popup/FolderCreate.js index a3c2ec337..91df1cc3f 100644 --- a/dev/View/Popup/FolderCreate.js +++ b/dev/View/Popup/FolderCreate.js @@ -15,6 +15,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class FolderCreatePopupView extends AbstractViewPopup { constructor() { super('FolderCreate'); + this.viewNoUserSelect = true; this.addObservables({ folderName: '', diff --git a/dev/View/Popup/FolderSystem.js b/dev/View/Popup/FolderSystem.js index 77f5e1ed7..b073f23f6 100644 --- a/dev/View/Popup/FolderSystem.js +++ b/dev/View/Popup/FolderSystem.js @@ -13,6 +13,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class FolderSystemPopupView extends AbstractViewPopup { constructor() { super('FolderSystem'); + this.viewNoUserSelect = true; this.sChooseOnText = ''; this.sUnuseText = ''; diff --git a/dev/View/Popup/Languages.js b/dev/View/Popup/Languages.js index 051c3e775..a7e476ce8 100644 --- a/dev/View/Popup/Languages.js +++ b/dev/View/Popup/Languages.js @@ -7,6 +7,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class LanguagesPopupView extends AbstractViewPopup { constructor() { super('Languages'); + this.viewNoUserSelect = true; this.fLang = null; this.userLanguage = ko.observable(''); diff --git a/dev/View/Popup/MessageOpenPgp.js b/dev/View/Popup/MessageOpenPgp.js index 3218c8c18..71d0a1731 100644 --- a/dev/View/Popup/MessageOpenPgp.js +++ b/dev/View/Popup/MessageOpenPgp.js @@ -9,6 +9,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class MessageOpenPgpPopupView extends AbstractViewPopup { constructor() { super('MessageOpenPgp'); + this.viewNoUserSelect = true; this.addObservables({ notification: '', diff --git a/dev/View/Popup/NewOpenPgpKey.js b/dev/View/Popup/NewOpenPgpKey.js index e12748652..69a807e2f 100644 --- a/dev/View/Popup/NewOpenPgpKey.js +++ b/dev/View/Popup/NewOpenPgpKey.js @@ -8,6 +8,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; class NewOpenPgpKeyPopupView extends AbstractViewPopup { constructor() { super('NewOpenPgpKey'); + this.viewNoUserSelect = true; this.addObservables({ email: '', diff --git a/dev/View/Popup/SieveScript.js b/dev/View/Popup/SieveScript.js index 2fee6b533..9e40da570 100644 --- a/dev/View/Popup/SieveScript.js +++ b/dev/View/Popup/SieveScript.js @@ -16,6 +16,7 @@ import { FilterPopupView } from 'View/Popup/Filter'; class SieveScriptPopupView extends AbstractViewPopup { constructor() { super('SieveScript'); + this.viewNoUserSelect = true; addObservablesTo(this, { saveError: false, diff --git a/dev/View/User/Login.js b/dev/View/User/Login.js index d71a309d7..94c30ab86 100644 --- a/dev/View/User/Login.js +++ b/dev/View/User/Login.js @@ -1,8 +1,6 @@ -import ko from 'ko'; - import { Notification } from 'Common/Enums'; import { ClientSideKeyName } from 'Common/EnumsUser'; -import { Settings, SettingsGet } from 'Common/Globals'; +import { SettingsGet } from 'Common/Globals'; import { getNotification, translatorReload, convertLangName } from 'Common/Translator'; import { LanguageStore } from 'Stores/Language'; @@ -12,7 +10,7 @@ import * as Local from 'Storage/Client'; import Remote from 'Remote/User/Fetch'; import { decorateKoCommands, showScreenPopup } from 'Knoin/Knoin'; -import { AbstractViewCenter } from 'Knoin/AbstractViews'; +import { AbstractViewLogin } from 'Knoin/AbstractViews'; import { LanguagesPopupView } from 'View/Popup/Languages'; @@ -21,12 +19,10 @@ const SignMeOff = 0, SignMeUnused = 2; -class LoginUserView extends AbstractViewCenter { +class LoginUserView extends AbstractViewLogin { constructor() { super('Login'); - this.hideSubmitButton = Settings.app('hideSubmitButton'); - this.addObservables({ loadingDesc: SettingsGet('LoadingDescription'), @@ -46,8 +42,6 @@ class LoginUserView extends AbstractViewCenter { signMeType: SignMeUnused }); - this.formError = ko.observable(false).extend({ falseTimeout: 500 }); - this.allowLanguagesOnLogin = !!SettingsGet('AllowLanguagesOnLogin'); this.language = LanguageStore.language; @@ -129,11 +123,9 @@ class LoginUserView extends AbstractViewCenter { return valid; } - onShow() { - rl.route.off(); - } + onBuild(dom) { + super.onBuild(dom); - onBuild() { const signMeLocal = Local.get(ClientSideKeyName.LastSignMe), signMe = (SettingsGet('SignMe') || '').toLowerCase(); @@ -161,10 +153,6 @@ class LoginUserView extends AbstractViewCenter { } } - submitForm() { -// return false; - } - selectLanguage() { showScreenPopup(LanguagesPopupView, [this.language, this.languages(), LanguageStore.userLanguage()]); } diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html index c47208831..e8e4cff60 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html +++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html @@ -1,41 +1,39 @@ -
-
- - +
+ + +
+
+
+
+ + 👤 +
- -
-
- - 👤 -
+
+
+ + 🔑
-
-
- - 🔑 -
+
+
+
+ +
-
-
- - -
-
-
-
- -
- -
+
+
+
+ +
+ diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html index c62a42d7b..6d4c6347e 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html +++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html @@ -1,9 +1,8 @@ -
-
+
+

-
+
@@ -187,7 +186,7 @@
-
+
+
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html index 753376859..2bd7f6934 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html +++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html @@ -1,47 +1,45 @@ -
-
- -

-
-
-
- -
-
-
- -
-
-
-
- -
× +

+ +
+
+ +
+
+
+ +
-
- - ✖ - - - - ✚ - - - +
+ +
+ diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html index d2bff06e4..4a79d26d0 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html +++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html @@ -1,33 +1,31 @@ -
-
- -

- -   - "" -

- -
-
-
-
-
- - -
-
-
-
-
-
-
- - ✖ - - - - ✔ - - -
+
+ +

+ +   + "" +

+ +
+
+
+
+
+ + +
+
+
+
+
+ diff --git a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html index b58748e9e..9192a53ef 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html +++ b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html @@ -1,13 +1,11 @@ -
-
-
- - -
-
+
+
+ + +
diff --git a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html index 09faad57c..5076bf408 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html +++ b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html @@ -1,12 +1,10 @@ -
-
- -

-
-
- -
+
+ +

+
+
+
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/Login.html b/snappymail/v/0.0.0/app/templates/Views/User/Login.html index 7635440e1..52ab7356c 100644 --- a/snappymail/v/0.0.0/app/templates/Views/User/Login.html +++ b/snappymail/v/0.0.0/app/templates/Views/User/Login.html @@ -1,57 +1,55 @@ -