Get sorting working for #67

dev/Styles/MessageList.less

@@ -6,6 +6,11 @@ html.rl-no-preview-pane {
 	}
 }
 
+#sort-list-dropdown-id {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
 .messageList {
 
 	.toolbar {

dev/View/User/MailBox/MessageList.js

@@ -74,6 +74,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 		this.messageListDisableAutoSelect = MessageUserStore.listDisableAutoSelect;
 
 		this.folderList = FolderUserStore.folderList;
+		this.sortSupported = FolderUserStore.sortSupported;
 
 		this.composeInEdit = AppUserStore.composeInEdit;
 		this.leftPanelDisabled = leftPanelDisabled;
@@ -106,6 +107,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 		this.addObservables({
 			moveDropdownTrigger: false,
 			moreDropdownTrigger: false,
+			sortDropdownTrigger: false,
 
 			dragOverArea: null,
 			dragOverBodyArea: null,
@@ -174,7 +176,18 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 
 			mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessageUserStore.listChecked().length : true,
 
-			messageListFocused: () => Scope.MessageList === AppUserStore.focusedState()
+			messageListFocused: () => Scope.MessageList === AppUserStore.focusedState(),
+
+			sortText: () => {
+				let mode = FolderUserStore.sortMode().split(/\s+/);
+				if ('' === mode[0]) {
+					return '📅⬇';
+				}
+				return (mode.includes('SIZE') ? '✉'
+					 : (mode.includes('FROM') ? '@'
+					 : (mode.includes('SUBJECT') ? '𝐒' : '📅')))
+					+ (mode.includes('REVERSE') ? '⬇' : '⬆');
+			}
 		});
 
 		this.hasCheckedOrSelectedLines = MessageUserStore.hasCheckedOrSelected,
@@ -246,6 +259,11 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 		});
 	}
 
+	changeSort(self, event) {
+		FolderUserStore.sortMode(event.target.closest('li').dataset.sort);
+		this.reloadCommand();
+	}
+
 	clearCommand() {
 		if (Settings.capa(Capa.DangerousActions)) {
 			showScreenPopup(FolderClearPopupView, [FolderUserStore.currentFolder()]);

snappymail/v/0.0.0/app/localization/webmail/_source.en.yml

@@ -101,6 +101,14 @@ en:
     YESTERDAY_AT: "yesterday at %TIME%"
     NEW_MESSAGE_NOTIFICATION: "You have %COUNT% new messages!"
     QUOTA_SIZE: "Using <strong>%SIZE% (%PROC%%)</strong> of your <strong>%LIMIT%</strong>"
+    SORT_DATE_DESC: "Date descending"
+    SORT_DATE_ASC: "Date ascending"
+    SORT_SIZE_DESC: "Size descending"
+    SORT_SIZE_ASC: "Size ascending"
+    SORT_SUBJECT_DESC: "Subject descending"
+    SORT_SUBJECT_ASC: "Subject ascending"
+    SORT_FROM_DESC: "From descending"
+    SORT_FROM_ASC: "From ascending"
   MESSAGE:
     BUTTON_EDIT: "Edit"
     BUTTON_UNSUBSCRIBE: "Unsubscribe from this list"

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -101,6 +101,59 @@
 						</li>
 					</ul>
 				</div>
+				<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported, registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
+					<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-toggle="dropdown" data-i18n="[title]GLOBAL/SORT" data-bind="text: sortText">⬇</a>
+					<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
+						<li class="e-item" role="presentation" data-sort="DATE" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">📅⬆</i>
+								<span data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></span>
+							</a>
+						</li>
+						<li class="e-item" role="presentation" data-sort="" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">📅⬇</i>
+								<span data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></span>
+							</a>
+						</li>
+						<li class="e-item dividerbar" role="presentation" data-sort="SIZE" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">✉⬆</i>
+								<span data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></span>
+							</a>
+						</li>
+						<li class="e-item" role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">✉⬇</i>
+								<span data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></span>
+							</a>
+						</li>
+						<li class="e-item dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">S⬆</i>
+								<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></span>
+							</a>
+						</li>
+						<li class="e-item" role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">S⬇</i>
+								<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></span>
+							</a>
+						</li>
+						<li class="e-item dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">@⬆</i>
+								<span data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></span>
+							</a>
+						</li>
+						<li class="e-item" role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
+							<a class="e-link menuitem" href="#" tabindex="-1">
+								<i class="fontastic">@⬇</i>
+								<span data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></span>
+							</a>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</div>
 		<div class="b-message-list-wrapper">