Get sorting working for #67

This commit is contained in:
djmaze
2021-03-27 00:57:04 +01:00
parent 883bf6b026
commit 7eeed62b09
4 changed files with 85 additions and 1 deletions

View File

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

View File

@@ -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()]);

View File

@@ -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"

View File

@@ -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">