From ef4d604f6d0c8d9980c6b3350a30cdf7dd3bb89c Mon Sep 17 00:00:00 2001 From: djmaze Date: Tue, 24 Aug 2021 18:23:17 +0200 Subject: [PATCH] Bugfixes and improvements for Folderlist --- dev/Common/EnumsUser.js | 16 +++++------ dev/Common/UtilsUser.js | 2 +- dev/Model/FolderCollection.js | 44 +++++++++++++---------------- dev/Settings/User/Folders.js | 2 +- dev/Stores/User/Folder.js | 1 + dev/Styles/User/Animations.less | 2 +- dev/Styles/User/FolderList.less | 6 +++- dev/View/User/MailBox/FolderList.js | 20 ++++++------- 8 files changed, 47 insertions(+), 46 deletions(-) diff --git a/dev/Common/EnumsUser.js b/dev/Common/EnumsUser.js index f2d7c29d6..33ba23bf9 100644 --- a/dev/Common/EnumsUser.js +++ b/dev/Common/EnumsUser.js @@ -4,14 +4,14 @@ * @enum {number} */ export const FolderType = { - Inbox: 10, - Sent: 11, - Drafts: 12, - Trash: 13, - Spam: 14, - Archive: 15, - NotSpam: 80, - User: 99 + User: 0, + Inbox: 1, + Sent: 2, + Drafts: 3, + Spam: 4, // JUNK + Trash: 5, + Archive: 6, + NotSpam: 80 }; /** diff --git a/dev/Common/UtilsUser.js b/dev/Common/UtilsUser.js index 03198fb7b..386a94356 100644 --- a/dev/Common/UtilsUser.js +++ b/dev/Common/UtilsUser.js @@ -198,7 +198,7 @@ export function folderListOptionsBuilder( foldersWalk = folders => { folders.forEach(oItem => { - if (showUnsubscribed || oItem.subscribed() || !oItem.exists || oItem.hasSubscribedSubfolders()) { + if (showUnsubscribed || oItem.hasSubscriptions() || !oItem.exists) { aResult.push({ id: oItem.fullNameRaw, name: diff --git a/dev/Model/FolderCollection.js b/dev/Model/FolderCollection.js index 4b702dc0c..bcc2b4967 100644 --- a/dev/Model/FolderCollection.js +++ b/dev/Model/FolderCollection.js @@ -39,7 +39,8 @@ normalizeFolder = sFolderFullNameRaw => ('' === sFolderFullNameRaw ? sFolderFullNameRaw : ''; -let SystemFolders = {}; +// index is FolderType value +let SystemFolders = []; export class FolderCollectionModel extends AbstractCollectionModel { @@ -62,7 +63,14 @@ export class FolderCollectionModel extends AbstractCollectionModel static reviveFromJson(object) { const expandedFolders = Local.get(ClientSideKeyName.ExpandedFolders); if (object && object.SystemFolders) { - SystemFolders = object.SystemFolders; + let sf = object.SystemFolders; + SystemFolders = [0,0, + SettingsGet('SentFolder') || sf[ServerFolderType.SENT], + SettingsGet('DraftFolder') || sf[ServerFolderType.DRAFTS], + SettingsGet('SpamFolder') || sf[ServerFolderType.SPAM], + SettingsGet('TrashFolder') || sf[ServerFolderType.TRASH], + SettingsGet('ArchiveFolder') || sf[ServerFolderType.ARCHIVE] + ]; } return super.reviveFromJson(object, oFolder => { @@ -82,23 +90,9 @@ export class FolderCollectionModel extends AbstractCollectionModel } if (oCacheFolder) { - switch (oFolder.FullNameRaw) - { - case (SettingsGet('SentFolder') || SystemFolders[ServerFolderType.SENT]): - oCacheFolder.type(FolderType.Sent); - break; - case (SettingsGet('DraftFolder') || SystemFolders[ServerFolderType.DRAFTS]): - oCacheFolder.type(FolderType.Drafts); - break; - case (SettingsGet('SpamFolder') || SystemFolders[ServerFolderType.SPAM]): - oCacheFolder.type(FolderType.Spam); - break; - case (SettingsGet('TrashFolder') || SystemFolders[ServerFolderType.TRASH]): - oCacheFolder.type(FolderType.Trash); - break; - case (SettingsGet('ArchiveFolder') || SystemFolders[ServerFolderType.ARCHIVE]): - oCacheFolder.type(FolderType.Archive); - break; + let type = SystemFolders.indexOf(oFolder.FullNameRaw); + if (1 < type) { + oCacheFolder.type(type); } oCacheFolder.collapsed(!expandedFolders @@ -269,15 +263,17 @@ export class FolderModel extends AbstractModel { hasSubscribedSubfolders: () => !!folder.subFolders().find( - oFolder => (oFolder.subscribed() || oFolder.hasSubscribedSubfolders()) && !oFolder.isSystemFolder() + oFolder => { + const subscribed = oFolder.hasSubscriptions(); + return !oFolder.isSystemFolder() && subscribed; + } ), + hasSubscriptions: () => folder.subscribed() | folder.hasSubscribedSubfolders(), + canBeEdited: () => FolderType.User === folder.type() && folder.exists/* && folder.selectable*/, - visible: () => { - const hasSubFolders = folder.hasSubscribedSubfolders(); - return folder.subscribed() || hasSubFolders; - }, + visible: () => folder.hasSubscriptions() | !SettingsUserStore.hideUnsubscribed(), isSystemFolder: () => FolderType.User !== folder.type(), diff --git a/dev/Settings/User/Folders.js b/dev/Settings/User/Folders.js index 57dceb5c9..54f7689b5 100644 --- a/dev/Settings/User/Folders.js +++ b/dev/Settings/User/Folders.js @@ -41,7 +41,7 @@ export class FoldersUserSettings { this.folderForEdit = ko.observable(null).extend({ toggleSubscribeProperty: [this, 'edited'] }); this.useImapSubscribe = Settings.app('useImapSubscribe'); - this.hideUnsubscribed.subscribe(value => Remote.saveSetting('HideUnsubscribed', value ? 1 : 0)); + SettingsUserStore.hideUnsubscribed.subscribe(value => Remote.saveSetting('HideUnsubscribed', value ? 1 : 0)); } folderEditOnEnter(folder) { diff --git a/dev/Stores/User/Folder.js b/dev/Stores/User/Folder.js index 3ac87bdba..721dd490d 100644 --- a/dev/Stores/User/Folder.js +++ b/dev/Stores/User/Folder.js @@ -5,6 +5,7 @@ import { UNUSED_OPTION_VALUE } from 'Common/Consts'; import { addObservablesTo, addSubscribablesTo } from 'Common/Utils'; import { getFolderInboxName, getFolderFromCacheList } from 'Common/Cache'; import { Settings, SettingsGet } from 'Common/Globals'; +//import Remote from 'Remote/User/Fetch'; Circular dependency export const FolderUserStore = new class { constructor() { diff --git a/dev/Styles/User/Animations.less b/dev/Styles/User/Animations.less index 911daae48..f2aa9039e 100644 --- a/dev/Styles/User/Animations.less +++ b/dev/Styles/User/Animations.less @@ -16,7 +16,7 @@ transition: all 0.2s linear; } - .b-folders .e-item .anim-action-class { + .b-folders li .anim-action-class { animation: highlight-folder-row 0.5s linear; } diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less index 19f5f1a99..9801cfdde 100644 --- a/dev/Styles/User/FolderList.less +++ b/dev/Styles/User/FolderList.less @@ -145,6 +145,9 @@ a[data-unread] { font-weight: bold; + padding-right: 2em; + overflow: hidden; + text-overflow: ellipsis; } ul.collapsed { @@ -161,7 +164,6 @@ background-color: @grayLight; border-radius: 9px; color: @white; - float: right; font-size: 80%; line-height: 19px; margin-top: 5px; @@ -169,6 +171,8 @@ padding: 1px 4px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); + position: absolute; + right: 0; } .inbox-star-icon { diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js index ed559037a..588fb40a7 100644 --- a/dev/View/User/MailBox/FolderList.js +++ b/dev/View/User/MailBox/FolderList.js @@ -70,7 +70,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { } } - el = eqs(event, '.b-folders .e-item a.selectable'); + el = eqs(event, '.b-folders li a.selectable'); if (el) { ThemeStore.isMobile() && leftPanelDisabled(true); event.preventDefault(); @@ -93,7 +93,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { setFolderHash(folder.fullNameRaw, ''); } - rl.route.setHash((eqs(event, '.b-folders .e-item a.selectable .inbox-star-icon') && !this.isInboxStarred()) + rl.route.setHash((eqs(event, '.b-folders li a.selectable .inbox-star-icon') && !this.isInboxStarred()) ? mailBox(folder.fullNameHash, 1, 'is:flagged') : mailBox(folder.fullNameHash) ); @@ -106,7 +106,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { shortcuts.add('arrowup,arrowdown', '', Scope.FolderList, event => { let items = [], index = 0; - dom.querySelectorAll('.b-folders .e-item a:not(.hidden)').forEach(node => { + dom.querySelectorAll('.b-folders li a:not(.hidden)').forEach(node => { if (node.offsetHeight || node.getClientRects().length) { items.push(node); if (node.matches('.focused')) { @@ -129,7 +129,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { }); shortcuts.add('enter,open', '', Scope.FolderList, () => { - const item = qs('.b-folders .e-item a:not(.hidden).focused'); + const item = qs('.b-folders li a:not(.hidden).focused'); if (item) { AppUserStore.focusedState(Scope.MessageList); item.click(); @@ -139,7 +139,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { }); shortcuts.add('space', '', Scope.FolderList, () => { - const item = qs('.b-folders .e-item a:not(.hidden).focused'), + const item = qs('.b-folders li a:not(.hidden).focused'), folder = item && ko.dataFor(item); if (folder) { const collapsed = folder.collapsed(); @@ -158,11 +158,11 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { }); AppUserStore.focusedState.subscribe(value => { - let el = qs('.b-folders .e-item a.focused'); - el && qs('.b-folders .e-item a.focused').classList.remove('focused'); + let el = qs('.b-folders li a.focused'); + el && el.classList.remove('focused'); if (Scope.FolderList === value) { - el = qs('.b-folders .e-item a.selected'); - el && qs('.b-folders .e-item a.selected').classList.add('focused'); + el = qs('.b-folders li a.selected'); + el && el.classList.add('focused'); } }); } @@ -170,7 +170,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft { scrollToFocused() { const scrollable = this.oContentScrollable; if (scrollable) { - let block, focused = scrollable.querySelector('.e-item a.focused'); + let block, focused = scrollable.querySelector('li a.focused'); if (focused) { const fRect = focused.getBoundingClientRect(), sRect = scrollable.getBoundingClientRect();