diff --git a/dev/App/User.js b/dev/App/User.js index 0e7751210..3fc55806a 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -683,7 +683,7 @@ class AppUser extends AbstractApp { right = elementById('rl-right'), fToggle = () => setLayoutResizer(left, right, ClientSideKeyName.FolderListSize, - (ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width'); + (ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width'); if (left && right) { fToggle(); leftPanelDisabled.subscribe(fToggle); diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js index e7283858a..1a0b50df8 100644 --- a/dev/Common/Globals.js +++ b/dev/Common/Globals.js @@ -53,6 +53,7 @@ dropdownVisibility.subscribe(value => { } }); +leftPanelDisabled.toggle = () => leftPanelDisabled(!leftPanelDisabled()); leftPanelDisabled.subscribe(value => { value && moveAction() && moveAction(false); $htmlCL.toggle('rl-left-panel-disabled', value); diff --git a/dev/Common/UtilsUser.js b/dev/Common/UtilsUser.js index d9c10434d..237792465 100644 --- a/dev/Common/UtilsUser.js +++ b/dev/Common/UtilsUser.js @@ -407,15 +407,25 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) => target.removeAttribute('style'); source.removeAttribute('style'); } +// source.classList.toggle('resizable', mode); if (mode) { - source.classList.add('resizable'); + const length = Local.get(sClientSideKeyName+mode); if (!source.layoutResizer) { const resizer = createElement('div', {'class':'resizer'}), size = {}, + store = () => { + if ('Width' == resizer.mode) { + target.style.left = source.offsetWidth + 'px'; + Local.set(resizer.key+resizer.mode, source.offsetWidth); + } else { + target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px'; + Local.set(resizer.key+resizer.mode, source.offsetHeight); + } + }, cssint = s => { let value = getComputedStyle(source, null)[s].replace('px', ''); if (value.includes('%')) { - value = source.parentElement['width'==resizer.mode ? 'offsetWidth' : 'offsetHeight'] + value = source.parentElement['offset'+resizer.mode] * value.replace('%', '') / 100; } return parseFloat(value); @@ -425,17 +435,20 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) => resizer.addEventListener('mousedown', { handleEvent: function(e) { if ('mousedown' == e.type) { + const lmode = resizer.mode.toLowerCase(); e.preventDefault(); - size.pos = ('width' == resizer.mode) ? e.pageX : e.pageY; - size.min = cssint('min-'+resizer.mode); - size.max = cssint('max-'+resizer.mode); - size.org = cssint(resizer.mode); + size.pos = ('width' == lmode) ? e.pageX : e.pageY; + size.min = cssint('min-'+lmode); + size.max = cssint('max-'+lmode); + size.org = cssint(lmode); addEventListener('mousemove', this); addEventListener('mouseup', this); } else if ('mousemove' == e.type) { - const length = size.org + (('width' == resizer.mode ? e.pageX : e.pageY) - size.pos); + const lmode = resizer.mode.toLowerCase(), + length = size.org + (('width' == lmode ? e.pageX : e.pageY) - size.pos); if (length >= size.min && length <= size.max ) { - source.style[resizer.mode] = length + 'px'; + source.style[lmode] = length + 'px'; + source.observer || store(); } } else if ('mouseup' == e.type) { removeEventListener('mousemove', this); @@ -443,25 +456,16 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) => } } }); - source.observer = new ResizeObserver(() => { - if ('width' == resizer.mode) { - target.style.left = source.offsetWidth + 'px'; - Local.set(sClientSideKeyName, source.offsetWidth); - } else { - target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px'; - Local.set(sClientSideKeyName, source.offsetHeight); - } - }); + source.observer = window.ResizeObserver ? new ResizeObserver(store) : null; } source.layoutResizer.mode = mode; - source.observer.observe(source, { box: 'border-box' }); - const length = Local.get(sClientSideKeyName); + source.layoutResizer.key = sClientSideKeyName; + source.observer && source.observer.observe(source, { box: 'border-box' }); if (length) { source.style[mode] = length + 'px'; } } else { source.observer && source.observer.disconnect(); - source.classList.remove('resizable'); } }; diff --git a/dev/Screen/User/MailBox.js b/dev/Screen/User/MailBox.js index f9208a111..913933fff 100644 --- a/dev/Screen/User/MailBox.js +++ b/dev/Screen/User/MailBox.js @@ -110,8 +110,8 @@ export class MailBoxUserScreen extends AbstractScreen { let layout = SettingsUserStore.layout(); setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize, (ThemeStore.isMobile() || Layout.NoPreview === layout) - ? null - : (Layout.SidePreview === layout ? 'width' : 'height') + ? 0 + : (Layout.SidePreview === layout ? 'Width' : 'Height') ); }; if (top && bottom) { diff --git a/dev/Stores/User/App.js b/dev/Stores/User/App.js index 5600e6d61..22daad1a9 100644 --- a/dev/Stores/User/App.js +++ b/dev/Stores/User/App.js @@ -1,5 +1,5 @@ import { Scope } from 'Common/Enums'; -import { keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals'; +import { doc, keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals'; import { addObservablesTo } from 'Common/Utils'; import { ThemeStore } from 'Stores/Theme'; @@ -24,4 +24,8 @@ AppUserStore.focusedState.subscribe(value => { ThemeStore.isMobile() && leftPanelDisabled(Scope.FolderList !== value); break; } + ['FolderList','MessageList','MessageView'].forEach(name => { + let dom = doc.querySelector('.RL-Mail'+name); + dom && dom.classList.toggle('focused', name === value); + }); }); diff --git a/dev/Stores/User/Message.js b/dev/Stores/User/Message.js index 61553197a..74feb058b 100644 --- a/dev/Stores/User/Message.js +++ b/dev/Stores/User/Message.js @@ -212,7 +212,9 @@ export const MessageUserStore = new class { if (message && folder && folder !== message.folder) { this.message(null); } - } + }, + + isMessageSelected: value => elementById('rl-right').classList.toggle('message-selected', value) }); this.purgeMessageBodyCache = this.purgeMessageBodyCache.throttle(30000); diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index 106424510..a124ebbd2 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -17,6 +17,15 @@ z-index: 0; } +#rl-left { + width: @rlLeftWidth; +} + +#rl-right { + z-index: 1; + left: @rlLeftWidth; +} + html.rl-mobile { &:not(.rl-left-panel-disabled) #rl-right { @@ -28,10 +37,6 @@ html.rl-mobile { } } -#rl-left { - width: @rlLeftWidth; -} - /* .resizable::after { background-color: #aaa; @@ -50,7 +55,7 @@ html.rl-mobile { } */ -.resizable > .resizer { +.resizer { background: #aaa; background: rgba(255,255,255,0.5); display: none; @@ -58,11 +63,11 @@ html.rl-mobile { position: absolute; z-index: 102; } -.resizable > .resizer:hover { +.resizer:hover { opacity: 1; } -html:not(.rl-left-panel-disabled) #rl-left.resizable { +html:not(.rl-left-panel-disabled) #rl-left { resize: horizontal; overflow: hidden; min-width: 155px; @@ -78,6 +83,99 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable { width: 5px; } +.rl-side-preview-pane .RL-MailMessageList { + resize: horizontal; + min-width: 320px; + max-width: 60%; +} +.rl-bottom-preview-pane .RL-MailMessageList { + resize: vertical; + min-height: 200px; + max-height: 60%; +} +.rl-bottom-preview-pane .RL-MailMessageList > .resizer { + cursor: ns-resize; + height: 5px; + left: 0; + bottom: 0; + width: 100%; +} + +html:not(.rl-left-panel-disabled) #rl-left > .resizer, +.RL-MailMessageList > .resizer { + display: block; +} + +.RL-MailMessageList { + position: absolute; + top: 0; + bottom: @rlBottomMargin; + left: 0; + width: 50%; +} + +.RL-MailMessageView { + position: absolute; + top: 50px + @rlLowMargin; + bottom: 13px; + right: 0; + left: 0; + + .b-message-view-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, .4); + z-index: 10; + text-align: center; + + .backdrop-message { + position: relative; + display: inline-block; + color: white; + font-size: 20px; + line-height: 30px; + background: rgba(0, 0, 0, .6); + padding: 15px; + border-radius: 5px; + text-shadow: 0 1px 1px #000; + transform: translateY(-50%); + top: 50%; + } + } +} + +html.rl-side-preview-pane { + .RL-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; +} + .dropdown-menu { max-height: 60vh; max-width: 90vw; @@ -107,98 +205,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable { } } -.rl-side-preview-pane .RL-MailMessageList.resizable { - resize: horizontal; - min-width: 320px; - max-width: 60%; -} -.rl-bottom-preview-pane .RL-MailMessageList.resizable { - resize: vertical; - min-height: 200px; - max-height: 60%; -} -.rl-bottom-preview-pane .RL-MailMessageList > .resizer { - cursor: ns-resize; - height: 5px; - left: 0; - bottom: 0; - width: 100%; -} - -html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer, -.RL-MailMessageList > .resizer { - display: block; -} - -#rl-right { - z-index: 1; - left: @rlLeftWidth; -} - -.RL-MailMessageList { - position: absolute; - top: 50px; - bottom: @rlBottomMargin; - left: 0; - width: 50%; -} - -.RL-MailMessageView { - position: absolute; - top: 50px + @rlLowMargin; - bottom: 13px; - right: 0; - left: 50%; - - .b-message-view-backdrop { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, .4); - z-index: 10; - text-align: center; - - .backdrop-message { - position: relative; - display: inline-block; - color: white; - font-size: 20px; - line-height: 30px; - background: rgba(0, 0, 0, .6); - padding: 15px; - border-radius: 5px; - text-shadow: 0 1px 1px #000; - transform: translateY(-50%); - top: 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; -} - .dropdown-menu * + .dividerbar { margin-top: 9px; padding-top: 9px; @@ -254,8 +260,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer, width: 40%; } - .RL-MailMessageView { - left: 40%; + html.rl-side-preview-pane { + .RL-MailMessageView { + left: 40%; + } } } @@ -307,7 +315,6 @@ html.rl-left-panel-disabled { } } -html.rl-mobile, html.rl-no-preview-pane { .RL-MailMessageList { @@ -315,28 +322,24 @@ html.rl-no-preview-pane { width: inherit; } - .RL-MailMessageView { - left: 0 !important; - } } html.rl-mobile #rl-left > .resizer, -html.rl-no-preview-pane #rl-right .resizer, -html.rl-mobile #rl-right .resizer { +html.rl-no-preview-pane #rl-right .resizer { display: none !important; } -html.rl-bottom-preview-pane:not(.rl-mobile) { +html.rl-bottom-preview-pane { .RL-MailMessageList { - right: @rlBottomMargin !important; bottom: inherit; width: inherit; height: 300px; + right: 0; } .RL-MailMessageView { - left: 0 !important; + left: 0; top: 356px; } } diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less index f862e9386..908e4afa6 100644 --- a/dev/Styles/User/MessageList.less +++ b/dev/Styles/User/MessageList.less @@ -1,40 +1,34 @@ html.rl-mobile, html.rl-no-preview-pane { - .messageList.message-selected { + .message-selected .RL-MailMessageList { display: none; } } +.RL-MailMessageList.focused .messageList { + border-color: #9d9d9d; +} + #sort-list-dropdown-id { padding-left: 6px; padding-right: 6px; } +.RL-MailMessageList .btn-toolbar { + height: 30px; + padding: 10px 1px; + white-space: nowrap; +} + .messageList { - height: 100%; + height: calc(100% - 50px); background-color: #fff; border: 1px solid @rlMainDarkColor; border-radius: @rlMainBorderRadius; box-shadow: @rlMainShadow; - z-index: 101; - - .toolbar { - position: absolute; - top: -50px; - right: 0; - left: 0; - height: 30px; - padding: 10px 1px; - z-index: 102; - white-space: nowrap; - } - - .b-message-list-wrapper { - display: flex; - flex-direction: column; - height: 100%; - } + display: flex; + flex-direction: column; .b-footer { flex-shrink: 0; @@ -163,10 +157,6 @@ html.rl-no-preview-pane { text-align: center; } } - - &.focused { - border-color: #9d9d9d; - } } .hideMessageListCheckbox { @@ -414,7 +404,7 @@ html.rl-ctrl-key-pressed .messageListItem { } } - .b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent { + .messageList:not(.hideMessageListCheckbox) .subjectParent { margin-left: 30px; } } diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index f6b564428..9d76c4fe1 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -1,5 +1,13 @@ -.g-ui-min-height-300 { - min-height: 300px; + +html.rl-no-preview-pane { + #rl-right:not(.message-selected) .RL-MailMessageView { + display: none; + } +} + +.RL-MailMessageView.focused .messageView { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + border-color: darken(@rlMainDarkColor, 5%); } .messageView { @@ -204,7 +212,7 @@ text-align: center; font-size: 24px; color: grey; - padding-top: 50px; + padding: 50px 0; } .showImages, .readReceipt, .pgpSigned, .pgpEncrypted { @@ -446,11 +454,6 @@ } } - &.focused { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - border-color: darken(@rlMainDarkColor, 5%); - } - .thread-controls { .dropdown-toggle { padding-left: 10px; @@ -463,13 +466,8 @@ } } -html.rl-mobile .messageView, html.rl-no-preview-pane .messageView { - &:not(.message-selected) { - display: none; - } - .toolbar { padding-left: 1px; } @@ -490,7 +488,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView { } } -html.rl-bottom-preview-pane:not(.rl-mobile) .messageView { +html.rl-bottom-preview-pane .messageView { .b-content { bottom: @rlBottomMargin; } diff --git a/dev/Styles/User/SystemDropDown.less b/dev/Styles/User/SystemDropDown.less index 87dd29de9..012032ecc 100644 --- a/dev/Styles/User/SystemDropDown.less +++ b/dev/Styles/User/SystemDropDown.less @@ -10,16 +10,14 @@ top: 40px; } -.b-system-drop-down { +.RL-SystemDropDown { - .b-toolbar { - position: absolute; - top: 0; - right: 0; - height: 30px; - padding: 10px @rlLowMargin; - z-index: 103; - } + position: absolute; + top: 0; + right: 0; + height: 30px; + padding: 10px @rlLowMargin; + z-index: 103; .email-title { display: inline-block; diff --git a/dev/View/Admin/Settings/Pane.js b/dev/View/Admin/Settings/Pane.js index 9fd8be750..626d948aa 100644 --- a/dev/View/Admin/Settings/Pane.js +++ b/dev/View/Admin/Settings/Pane.js @@ -20,12 +20,6 @@ class PaneSettingsAdminView extends AbstractViewRight { .computed(() => PackageAdminStore.loading() ? 'visible' : 'hidden'); } - toggleLeft(item, event) { - event.preventDefault(); - event.stopPropagation(); - leftPanelDisabled(!leftPanelDisabled()); - } - logoutClick() { Remote.adminLogout(() => rl.logoutReload()); } diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js index cf45a762e..a8f825b63 100644 --- a/dev/View/User/MailBox/FolderList.js +++ b/dev/View/User/MailBox/FolderList.js @@ -10,7 +10,6 @@ import { AppUserStore } from 'Stores/User/App'; import { SettingsUserStore } from 'Stores/User/Settings'; import { FolderUserStore } from 'Stores/User/Folder'; import { MessageUserStore } from 'Stores/User/Message'; -import { ThemeStore } from 'Stores/Theme'; import { showScreenPopup } from 'Knoin/Knoin'; import { AbstractViewLeft } from 'Knoin/AbstractViews'; @@ -40,8 +39,6 @@ export class MailFolderList extends AbstractViewLeft { this.allowContacts = AppUserStore.allowContacts(); addComputablesTo(this, { - folderListFocused: () => Scope.FolderList === AppUserStore.focusedState(), - folderListVisible: () => { let multiple = false, inbox, visible, @@ -85,7 +82,6 @@ export class MailFolderList extends AbstractViewLeft { el = eqs(event, 'a'); if (el && el.matches('.selectable')) { - ThemeStore.isMobile() && leftPanelDisabled(true); event.preventDefault(); const folder = ko.dataFor(el); if (folder) { @@ -120,7 +116,7 @@ export class MailFolderList extends AbstractViewLeft { shortcuts.add('arrowup,arrowdown', '', Scope.FolderList, event => { let items = [], index = 0; - dom.querySelectorAll('.b-folders li a:not(.hidden)').forEach(node => { + dom.querySelectorAll('li a:not(.hidden)').forEach(node => { if (node.offsetHeight || node.getClientRects().length) { items.push(node); if (node.matches('.focused')) { @@ -143,7 +139,7 @@ export class MailFolderList extends AbstractViewLeft { }); shortcuts.add('enter,open', '', Scope.FolderList, () => { - const item = qs('.b-folders li a:not(.hidden).focused'); + const item = qs('li a:not(.hidden).focused'); if (item) { AppUserStore.focusedState(Scope.MessageList); item.click(); @@ -153,7 +149,7 @@ export class MailFolderList extends AbstractViewLeft { }); shortcuts.add('space', '', Scope.FolderList, () => { - const item = qs('.b-folders li a:not(.hidden).focused'), + const item = qs('li a:not(.hidden).focused'), folder = item && ko.dataFor(item); if (folder) { const collapsed = folder.collapsed(); @@ -172,10 +168,10 @@ export class MailFolderList extends AbstractViewLeft { }); AppUserStore.focusedState.subscribe(value => { - let el = qs('.b-folders li a.focused'); + let el = qs('li a.focused'); el && el.classList.remove('focused'); if (Scope.FolderList === value) { - el = qs('.b-folders li a.selected'); + el = qs('li a.selected'); el && el.classList.add('focused'); } }); diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index fefc128a0..6db0da53f 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -69,9 +69,10 @@ export class MailMessageList extends AbstractViewRight { ); this.composeInEdit = AppUserStore.composeInEdit; + + this.isMobile = ThemeStore.isMobile; this.leftPanelDisabled = leftPanelDisabled; - this.isMessageSelected = MessageUserStore.isMessageSelected; this.messageListSearch = MessageUserStore.listSearch; this.messageListError = MessageUserStore.listError; @@ -167,8 +168,6 @@ export class MailMessageList extends AbstractViewRight { mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessageUserStore.listChecked().length : true, - messageListFocused: () => Scope.MessageList === AppUserStore.focusedState(), - sortText: () => { let mode = FolderUserStore.sortMode(), desc = '' === mode || mode.includes('REVERSE'); @@ -338,20 +337,6 @@ export class MailMessageList extends AbstractViewRight { } } - hideLeft(item, event) { - event.preventDefault(); - event.stopPropagation(); - - leftPanelDisabled(true); - } - - showLeft(item, event) { - event.preventDefault(); - event.stopPropagation(); - - leftPanelDisabled(false); - } - composeClick() { showMessageComposer(); } @@ -683,14 +668,14 @@ export class MailMessageList extends AbstractViewRight { } onBuild(dom) { - const eqs = (ev, s) => ev.target.closestWithin('.messageList '+s, dom); + const eqs = (ev, s) => ev.target.closestWithin(s, dom); this.selector.init(dom.querySelector('.b-content'), Scope.MessageList); dom.addEventListener('click', event => { - ThemeStore.isMobile() && leftPanelDisabled(true); + ThemeStore.isMobile() && !eqs(event, '.toggleLeft') && leftPanelDisabled(true); - if (eqs(event, '.b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) { + if (eqs(event, '.messageList') && Scope.MessageView === AppUserStore.focusedState()) { AppUserStore.focusedState(Scope.MessageList); } diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js index d1c39cce3..819534f3a 100644 --- a/dev/View/User/MailBox/MessageView.js +++ b/dev/View/User/MailBox/MessageView.js @@ -81,7 +81,6 @@ export class MailMessageView extends AbstractViewRight { this.hasCheckedMessages = MessageUserStore.hasCheckedMessages; this.messageLoadingThrottle = MessageUserStore.messageLoading; this.messagesBodiesDom = MessageUserStore.messagesBodiesDom; - this.isMessageSelected = MessageUserStore.isMessageSelected; this.messageActiveDom = MessageUserStore.messageActiveDom; this.messageError = MessageUserStore.messageError; @@ -177,8 +176,6 @@ export class MailMessageView extends AbstractViewRight { return ''; }, - messageFocused: () => Scope.MessageView === AppUserStore.focusedState(), - messageListAndMessageViewLoading: () => MessageUserStore.listCompleteLoading() || MessageUserStore.messageLoading() }); diff --git a/dev/View/User/Settings/Menu.js b/dev/View/User/Settings/Menu.js index eca9192e1..cc7ee5865 100644 --- a/dev/View/User/Settings/Menu.js +++ b/dev/View/User/Settings/Menu.js @@ -4,8 +4,6 @@ import { getFolderInboxName } from 'Common/Cache'; import { AbstractViewLeft } from 'Knoin/AbstractViews'; -import { ThemeStore } from 'Stores/Theme'; - export class MenuSettingsUserView extends AbstractViewLeft { /** * @param {Object} screen @@ -18,14 +16,6 @@ export class MenuSettingsUserView extends AbstractViewLeft { this.menu = screen.menu; } - onBuild(dom) { - dom.addEventListener('click', event => - ThemeStore.isMobile() - && event.target.closestWithin('.b-settins-left nav a', dom) - && leftPanelDisabled(true) - ); - } - link(route) { return settings(route); } diff --git a/dev/View/User/Settings/Pane.js b/dev/View/User/Settings/Pane.js index b57daf911..10cb19763 100644 --- a/dev/View/User/Settings/Pane.js +++ b/dev/View/User/Settings/Pane.js @@ -11,6 +11,7 @@ export class PaneSettingsUserView extends AbstractViewRight { constructor() { super('SettingsPane'); + this.isMobile = ThemeStore.isMobile; this.leftPanelDisabled = leftPanelDisabled; } @@ -18,22 +19,10 @@ export class PaneSettingsUserView extends AbstractViewRight { MessageUserStore.message(null); } - hideLeft(item, event) { - event.preventDefault(); - event.stopPropagation(); - - leftPanelDisabled(true); - } - - showLeft(item, event) { - event.preventDefault(); - event.stopPropagation(); - - leftPanelDisabled(false); - } - onBuild(dom) { - dom.addEventListener('click', () => ThemeStore.isMobile() && leftPanelDisabled(true)); + dom.addEventListener('click', () => + ThemeStore.isMobile() && !event.target.closestWithin('.toggleLeft', dom) && leftPanelDisabled(true) + ); } backToMailBoxClick() { diff --git a/dev/polyfill.js b/dev/polyfill.js deleted file mode 100644 index 0b8389c5f..000000000 --- a/dev/polyfill.js +++ /dev/null @@ -1,20 +0,0 @@ -'use strict'; - -(w=>{ - -// Edge Legacy (pre chromium/webkit), Firefox < 69, Safari < 13.4 -w.ResizeObserver || (w.ResizeObserver = class { - constructor(callback) { - this.observer = new MutationObserver(callback.debounce(250)); - } - - disconnect() { - this.observer.disconnect(); - } - - observe(target) { - this.observer.observe(target, { attributes: true, subtree: true, attributeFilter: ['style'] }); - } -}); - -})(this); diff --git a/snappymail/v/0.0.0/app/templates/Index.html b/snappymail/v/0.0.0/app/templates/Index.html index 8dd65439d..2aafa5648 100644 --- a/snappymail/v/0.0.0/app/templates/Index.html +++ b/snappymail/v/0.0.0/app/templates/Index.html @@ -19,23 +19,21 @@ {{BaseAppFaviconTouchLinkTag}} - -
-
-
{{LoadingDescriptionEsc}}
- -
- -