Added Ctrl/Meta + F to open advanced search screen

Cleanup search field onEnter
This commit is contained in:
the-djmaze 2022-03-09 15:08:22 +01:00
parent e0498895bc
commit 6f2f5bce86
11 changed files with 73 additions and 71 deletions

View file

@ -16,7 +16,8 @@ import {
Settings,
SettingsGet,
leftPanelDisabled,
addEventsListener
addEventsListener,
addShortcut
} from 'Common/Globals';
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
@ -88,7 +89,7 @@ class AppUser extends AbstractApp {
const fn = (ev=>$htmlCL.toggle('rl-ctrl-key-pressed', ev.ctrlKey)).debounce(500);
addEventsListener(doc, ['keydown','keyup'], fn);
shortcuts.add('escape,enter', '', dropdownsDetectVisibility);
addShortcut('escape,enter', '', dropdownsDetectVisibility);
addEventListener('click', dropdownsDetectVisibility);
}

View file

@ -34,8 +34,10 @@ export const
formFieldFocused = () => doc.activeElement && doc.activeElement.matches('input,textarea'),
addShortcut = (...args) => shortcuts.add(...args),
registerShortcut = (keys, modifiers, scopes, method) =>
shortcuts.add(keys, modifiers, scopes, event => formFieldFocused() ? true : method(event)),
addShortcut(keys, modifiers, scopes, event => formFieldFocused() ? true : method(event)),
addEventsListener = (element, events, fn, options) =>
events.forEach(event => element.addEventListener(event, fn, options)),

View file

@ -1,5 +1,5 @@
import ko from 'ko';
import { addEventsListeners } from 'Common/Globals';
import { addEventsListeners, addShortcut } from 'Common/Globals';
import { isArray } from 'Common/Utils';
import { koComputable } from 'External/ko';
@ -266,7 +266,7 @@ export class Selector {
}
});
shortcuts.add('enter,open', '', keyScope, () => {
addShortcut('enter,open', '', keyScope, () => {
const focused = this.focusedItem();
if (focused && !focused.selected()) {
this.actionClick(focused);
@ -274,13 +274,13 @@ export class Selector {
}
});
shortcuts.add('arrowup,arrowdown', 'meta', keyScope, () => false);
addShortcut('arrowup,arrowdown', 'meta', keyScope, () => false);
shortcuts.add('arrowup,arrowdown', 'shift', keyScope, event => {
addShortcut('arrowup,arrowdown', 'shift', keyScope, event => {
this.newSelectPosition(event.key, true);
return false;
});
shortcuts.add('arrowup,arrowdown,home,end,pageup,pagedown,space', '', keyScope, event => {
addShortcut('arrowup,arrowdown,home,end,pageup,pagedown,space', '', keyScope, event => {
this.newSelectPosition(event.key, false);
return false;
});

View file

@ -41,6 +41,10 @@ export const MessageUserStore = new class {
this.purgeMessageBodyCache = this.purgeMessageBodyCache.throttle(30000);
}
toggleFullScreen() {
MessageUserStore.fullScreen(!MessageUserStore.fullScreen());
}
purgeMessageBodyCache() {
const messagesDom = this.bodiesDom(),
children = messagesDom && messagesDom.children;

View file

@ -21,7 +21,7 @@ import { messagesDeleteHelper } from 'Common/Folders';
import { serverRequest } from 'Common/Links';
import { i18n, getNotification, getUploadErrorDescByCode, timestampToString } from 'Common/Translator';
import { MessageFlagsCache, setFolderHash } from 'Common/Cache';
import { doc, Settings, SettingsGet, getFullscreenElement, exitFullscreen, elementById } from 'Common/Globals';
import { doc, Settings, SettingsGet, getFullscreenElement, exitFullscreen, elementById, addShortcut } from 'Common/Globals';
import { AppUserStore } from 'Stores/User/App';
import { SettingsUserStore } from 'Stores/User/Settings';
@ -1311,40 +1311,40 @@ export class ComposePopupView extends AbstractViewPopup {
this.addAttachmentEnabled(true);
shortcuts.add('q', 'meta', ScopeCompose, ()=>false);
shortcuts.add('w', 'meta', ScopeCompose, ()=>false);
addShortcut('q', 'meta', ScopeCompose, ()=>false);
addShortcut('w', 'meta', ScopeCompose, ()=>false);
shortcuts.add('m', 'meta', ScopeCompose, () => {
addShortcut('m', 'meta', ScopeCompose, () => {
this.identitiesDropdownTrigger(true);
return false;
});
shortcuts.add('arrowdown', 'meta', ScopeCompose, () => {
addShortcut('arrowdown', 'meta', ScopeCompose, () => {
this.skipCommand();
return false;
});
shortcuts.add('s', 'meta', ScopeCompose, () => {
addShortcut('s', 'meta', ScopeCompose, () => {
this.saveCommand();
return false;
});
shortcuts.add('save', '', ScopeCompose, () => {
addShortcut('save', '', ScopeCompose, () => {
this.saveCommand();
return false;
});
if (Settings.app('allowCtrlEnterOnCompose')) {
shortcuts.add('enter', 'meta', ScopeCompose, () => {
addShortcut('enter', 'meta', ScopeCompose, () => {
this.sendCommand();
return false;
});
}
shortcuts.add('mailsend', '', ScopeCompose, () => {
addShortcut('mailsend', '', ScopeCompose, () => {
this.sendCommand();
return false;
});
shortcuts.add('escape,close', 'shift', ScopeCompose, () => {
addShortcut('escape,close', 'shift', ScopeCompose, () => {
this.tryToClosePopup();
return false;
});

View file

@ -1,3 +1,4 @@
import { addShortcut } from 'Common/Globals';
import { AbstractViewPopup } from 'Knoin/AbstractViews';
export class KeyboardShortcutsHelpPopupView extends AbstractViewPopup {
@ -10,8 +11,8 @@ export class KeyboardShortcutsHelpPopupView extends AbstractViewPopup {
const tabs = dom.querySelectorAll('.tabs input'),
last = tabs.length - 1;
// shortcuts.add('tab', 'shift',
shortcuts.add('tab,arrowleft,arrowright', '',
// addShortcut('tab', 'shift',
addShortcut('tab,arrowleft,arrowright', '',
'KeyboardShortcutsHelp',
event => {
let next = 0;

View file

@ -1,4 +1,4 @@
import { doc } from 'Common/Globals';
import { doc, addShortcut } from 'Common/Globals';
import { AbstractViewPopup } from 'Knoin/AbstractViews';
export class OpenPgpKeyPopupView extends AbstractViewPopup {
@ -118,7 +118,7 @@ export class OpenPgpKeyPopupView extends AbstractViewPopup {
}
onBuild() {
shortcuts.add('a', 'meta', 'OpenPgpKey', () => {
addShortcut('a', 'meta', 'OpenPgpKey', () => {
this.selectKey();
return false;
});

View file

@ -1,7 +1,7 @@
import ko from 'ko';
import { Scope } from 'Common/Enums';
import { moveAction } from 'Common/Globals';
import { moveAction, addShortcut } from 'Common/Globals';
import { mailBox, settings } from 'Common/Links';
import { setFolderHash } from 'Common/Cache';
import { addComputablesTo } from 'External/ko';
@ -117,7 +117,7 @@ export class MailFolderList extends AbstractViewLeft {
}
});
shortcuts.add('arrowup,arrowdown', '', Scope.FolderList, event => {
addShortcut('arrowup,arrowdown', '', Scope.FolderList, event => {
let items = [], index = 0;
dom.querySelectorAll('li a:not(.hidden)').forEach(node => {
if (node.offsetHeight || node.getClientRects().length) {
@ -141,7 +141,7 @@ export class MailFolderList extends AbstractViewLeft {
return false;
});
shortcuts.add('enter,open', '', Scope.FolderList, () => {
addShortcut('enter,open', '', Scope.FolderList, () => {
const item = qs('li a:not(.hidden).focused');
if (item) {
AppUserStore.focusedState(Scope.MessageList);
@ -151,7 +151,7 @@ export class MailFolderList extends AbstractViewLeft {
return false;
});
shortcuts.add('space', '', Scope.FolderList, () => {
addShortcut('space', '', Scope.FolderList, () => {
const item = qs('li a:not(.hidden).focused'),
folder = item && ko.dataFor(item);
if (folder) {
@ -163,8 +163,8 @@ export class MailFolderList extends AbstractViewLeft {
return false;
});
// shortcuts.add('tab', 'shift', Scope.FolderList, () => {
shortcuts.add('escape,tab,arrowright', '', Scope.FolderList, () => {
// addShortcut('tab', 'shift', Scope.FolderList, () => {
addShortcut('escape,tab,arrowright', '', Scope.FolderList, () => {
AppUserStore.focusedState(Scope.MessageList);
moveAction(false);
return false;

View file

@ -8,8 +8,8 @@ import { UNUSED_OPTION_VALUE } from 'Common/Consts';
import { doc, leftPanelDisabled, moveAction,
Settings, SettingsCapa, SettingsGet,
fireEvent, addEventsListeners,
registerShortcut
addEventsListeners,
addShortcut, registerShortcut, formFieldFocused
} from 'Common/Globals';
import { computedPaginatorHelper, showMessageComposer, populateMessageBody } from 'Common/UtilsUser';
@ -412,10 +412,6 @@ export class MailMessageList extends AbstractViewRight {
&& SettingsUserStore.usePreviewPane();
}
searchEnterAction() {
MessagelistUserStore.mainSearch(this.sLastSearchValue);
}
cancelSearch() {
MessagelistUserStore.mainSearch('');
this.inputMessageListSearchFocus(false);
@ -697,9 +693,13 @@ export class MailMessageList extends AbstractViewRight {
// initShortcuts
registerShortcut('enter,open', '', Scope.MessageList, () => {
addShortcut('enter,open', '', Scope.MessageList, () => {
if (formFieldFocused()) {
MessagelistUserStore.mainSearch(this.sLastSearchValue);
return false;
}
if (MessageUserStore.message() && this.useAutoSelect()) {
fireEvent('mailbox.message-view.toggle-full-screen');
MessageUserStore.toggleFullScreen();
return false;
}
});
@ -722,7 +722,7 @@ export class MailMessageList extends AbstractViewRight {
});
// check mail
shortcuts.add('r', 'meta', [Scope.FolderList, Scope.MessageList, Scope.MessageView], () => {
addShortcut('r', 'meta', [Scope.FolderList, Scope.MessageList, Scope.MessageView], () => {
this.reload();
return false;
});
@ -781,21 +781,21 @@ export class MailMessageList extends AbstractViewRight {
return false;
});
shortcuts.add('f,mailforward', 'shift', [Scope.MessageList, Scope.MessageView], () => {
addShortcut('f,mailforward', 'shift', [Scope.MessageList, Scope.MessageView], () => {
this.multyForwardCommand();
return false;
});
if (SettingsCapa('Search')) {
// search input focus
shortcuts.add('/', '', [Scope.MessageList, Scope.MessageView], () => {
addShortcut('/', '', [Scope.MessageList, Scope.MessageView], () => {
this.inputMessageListSearchFocus(true);
return false;
});
}
// cancel search
shortcuts.add('escape', '', Scope.MessageList, () => {
addShortcut('escape', '', Scope.MessageList, () => {
if (this.messageListSearchDesc()) {
this.cancelSearch();
return false;
@ -806,23 +806,25 @@ export class MailMessageList extends AbstractViewRight {
});
// change focused state
shortcuts.add('tab', 'shift', Scope.MessageList, () => {
addShortcut('tab', 'shift', Scope.MessageList, () => {
AppUserStore.focusedState(Scope.FolderList);
return false;
});
shortcuts.add('arrowleft', '', Scope.MessageList, () => {
addShortcut('arrowleft', '', Scope.MessageList, () => {
AppUserStore.focusedState(Scope.FolderList);
return false;
});
shortcuts.add('tab,arrowright', '', Scope.MessageList, () => {
addShortcut('tab,arrowright', '', Scope.MessageList, () => {
if (MessageUserStore.message()){
AppUserStore.focusedState(Scope.MessageView);
return false;
}
});
shortcuts.add('arrowleft', 'meta', Scope.MessageView, ()=>false);
shortcuts.add('arrowright', 'meta', Scope.MessageView, ()=>false);
addShortcut('arrowleft', 'meta', Scope.MessageView, ()=>false);
addShortcut('arrowright', 'meta', Scope.MessageView, ()=>false);
addShortcut('f', 'meta', Scope.MessageList, ()=>this.advancedSearchClick());
if (!ThemeStore.isMobile() && SettingsCapa('Prefetch')) {
ifvisible.idle(this.prefetchNextTick.bind(this));

View file

@ -23,6 +23,7 @@ import {
getFullscreenElement,
exitFullscreen,
fireEvent,
addShortcut,
registerShortcut
} from 'Common/Globals';
@ -118,6 +119,7 @@ export class MailMessageView extends AbstractViewRight {
this.messageError = MessageUserStore.error;
this.fullScreenMode = MessageUserStore.fullScreen;
this.toggleFullScreen = MessageUserStore.toggleFullScreen;
this.messageListOfThreadsLoading = ko.observable(false).extend({ rateLimit: 1 });
this.highlightUnselectedAttachments = ko.observable(false).extend({ falseTimeout: 2000 });
@ -225,8 +227,6 @@ export class MailMessageView extends AbstractViewRight {
this.lastReplyAction(Local.get(ClientSideKeyName.LastReplyAction) || ComposeType.Reply);
addEventListener('mailbox.message-view.toggle-full-screen', () => this.toggleFullScreen());
// commands
this.replyCommand = createCommandReplyHelper(ComposeType.Reply);
this.replyAllCommand = createCommandReplyHelper(ComposeType.ReplyAll);
@ -269,14 +269,6 @@ export class MailMessageView extends AbstractViewRight {
);
}
toggleFullScreen() {
try {
getSelection().removeAllRanges();
} catch (e) {} // eslint-disable-line no-empty
this.fullScreenMode(!this.fullScreenMode());
}
/**
* @param {string} sType
* @returns {void}
@ -288,7 +280,7 @@ export class MailMessageView extends AbstractViewRight {
onBuild(dom) {
const el = dom.querySelector('.b-content');
this.oContent = initFullscreen(el, () => this.fullScreenMode(getFullscreenElement() === el));
this.oContent = initFullscreen(el, () => MessageUserStore.fullScreen(getFullscreenElement() === el));
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
dom.addEventListener('click', event => {
@ -354,11 +346,11 @@ export class MailMessageView extends AbstractViewRight {
// initShortcuts
// exit fullscreen, back
shortcuts.add('escape', '', Scope.MessageView, () => {
addShortcut('escape', '', Scope.MessageView, () => {
if (!this.viewModelDom.hidden && currentMessage()) {
const preview = SettingsUserStore.usePreviewPane();
if (this.fullScreenMode()) {
this.fullScreenMode(false);
if (MessageUserStore.fullScreen()) {
MessageUserStore.fullScreen(false);
if (preview) {
AppUserStore.focusedState(Scope.MessageList);
@ -374,8 +366,8 @@ export class MailMessageView extends AbstractViewRight {
});
// fullscreen
shortcuts.add('enter,open', '', Scope.MessageView, () => {
this.toggleFullScreen();
addShortcut('enter,open', '', Scope.MessageView, () => {
MessageUserStore.toggleFullScreen();
return false;
});
@ -427,42 +419,42 @@ export class MailMessageView extends AbstractViewRight {
}
});
shortcuts.add('arrowup,arrowleft', 'meta', [Scope.MessageList, Scope.MessageView], () => {
addShortcut('arrowup,arrowleft', 'meta', [Scope.MessageList, Scope.MessageView], () => {
this.goUpCommand();
return false;
});
shortcuts.add('arrowdown,arrowright', 'meta', [Scope.MessageList, Scope.MessageView], () => {
addShortcut('arrowdown,arrowright', 'meta', [Scope.MessageList, Scope.MessageView], () => {
this.goDownCommand();
return false;
});
// print
shortcuts.add('p,printscreen', 'meta', [Scope.MessageView, Scope.MessageList], () => {
addShortcut('p,printscreen', 'meta', [Scope.MessageView, Scope.MessageList], () => {
currentMessage() && currentMessage().printMessage();
return false;
});
// delete
shortcuts.add('delete', '', Scope.MessageView, () => {
addShortcut('delete', '', Scope.MessageView, () => {
this.deleteCommand();
return false;
});
shortcuts.add('delete', 'shift', Scope.MessageView, () => {
addShortcut('delete', 'shift', Scope.MessageView, () => {
this.deleteWithoutMoveCommand();
return false;
});
// change focused state
shortcuts.add('arrowleft', '', Scope.MessageView, () => {
if (!this.fullScreenMode() && currentMessage() && SettingsUserStore.usePreviewPane()
addShortcut('arrowleft', '', Scope.MessageView, () => {
if (!MessageUserStore.fullScreen() && currentMessage() && SettingsUserStore.usePreviewPane()
&& !oMessageScrollerDom().scrollLeft) {
AppUserStore.focusedState(Scope.MessageList);
return false;
}
});
shortcuts.add('tab', 'shift', Scope.MessageView, () => {
if (!this.fullScreenMode() && currentMessage() && SettingsUserStore.usePreviewPane()) {
addShortcut('tab', 'shift', Scope.MessageView, () => {
if (!MessageUserStore.fullScreen() && currentMessage() && SettingsUserStore.usePreviewPane()) {
AppUserStore.focusedState(Scope.MessageList);
}
return false;

View file

@ -103,7 +103,7 @@
<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
<!-- ko if: allowSearch -->
<div class="search-input-wrp">
<input type="search" class="inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus">
<input type="search" class="inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="textInput: inputProxyMessageListSearch, hasfocus: inputMessageListSearchFocus">
<a class="closeSearch" data-bind="click: cancelSearch, visible: messageListSearchDesc()">×</a>
</div>
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick"></a>