Bugfixes and improvements for Folderlist

dev/Common/EnumsUser.js

@@ -4,14 +4,14 @@
  * @enum {number}
  */
 export const FolderType = {
-	Inbox: 10,
+	User: 0,
-	Sent: 11,
+	Inbox: 1,
-	Drafts: 12,
+	Sent: 2,
-	Trash: 13,
+	Drafts: 3,
-	Spam: 14,
+	Spam: 4, // JUNK
-	Archive: 15,
+	Trash: 5,
-	NotSpam: 80,
+	Archive: 6,
-	User: 99
+	NotSpam: 80
 };
 
 /**

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:

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)
+				let type = SystemFolders.indexOf(oFolder.FullNameRaw);
-				{
+				if (1 < type) {
-				case (SettingsGet('SentFolder') || SystemFolders[ServerFolderType.SENT]):
+					oCacheFolder.type(type);
-					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;
 				}
 
 				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: () => {
+				visible: () => folder.hasSubscriptions() | !SettingsUserStore.hideUnsubscribed(),
-					const hasSubFolders = folder.hasSubscribedSubfolders();
-					return folder.subscribed() || hasSubFolders;
-				},
 
 				isSystemFolder: () => FolderType.User !== folder.type(),
 

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

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() {

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

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 {

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');
+			let el = qs('.b-folders li a.focused');
-			el && qs('.b-folders .e-item a.focused').classList.remove('focused');
+			el && el.classList.remove('focused');
 			if (Scope.FolderList === value) {
-				el = qs('.b-folders .e-item a.selected');
+				el = qs('.b-folders li a.selected');
-				el && qs('.b-folders .e-item a.selected').classList.add('focused');
+				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();