converting more keyboard shortcuts

This commit is contained in:
zadam
2020-01-22 19:41:19 +01:00
parent d103b16d9a
commit 370c63986d
5 changed files with 88 additions and 103 deletions

View File

@@ -3,12 +3,6 @@ import keyboardActionService from "../services/keyboard_actions.js";
import utils from "../services/utils.js";
import syncService from "../services/sync.js";
const OPTIONS = "../dialogs/options.js";
const SQL_CONSOLE = "../dialogs/sql_console.js";
const BACKEND_LOG = "../dialogs/backend_log.js";
const HELP = "../dialogs/help.js";
const ABOUT = "../dialogs/about.js";
const TPL = `
<div class="global-menu-wrapper">
<style>
@@ -45,43 +39,44 @@ const TPL = `
Sync (<span id="outstanding-syncs-count">0</span>)
</a>
<a class="dropdown-item open-dev-tools-button">
<a class="dropdown-item open-dev-tools-button" data-trigger-event="openDevTools">
<span class="bx bx-terminal"></span>
Open Dev Tools
<kbd data-kb-action="OpenDevTools"></kbd>
</a>
<a class="dropdown-item open-sql-console-button">
<a class="dropdown-item open-sql-console-button" data-trigger-event="showSQLConsole">
<span class="bx bx-data"></span>
Open SQL Console
<kbd data-kb-action="ShowSQLConsole"></kbd>
</a>
<a class="dropdown-item show-backend-log-button">
<a class="dropdown-item show-backend-log-button" data-trigger-event="showBackendLog">
<span class="bx bx-empty"></span>
Show backend log
<kbd data-kb-action="ShowBackendLog"></kbd>
</a>
<a class="dropdown-item reload-frontend-button" title="Reload can help with some visual glitches without restarting the whole app.">
<a class="dropdown-item reload-frontend-button" data-trigger-event="reloadFrontendApp"
title="Reload can help with some visual glitches without restarting the whole app.">
<span class="bx bx-empty"></span>
Reload frontend
<kbd data-kb-action="ReloadFrontendApp"></kbd>
</a>
<a class="dropdown-item toggle-zen-mode-button">
<a class="dropdown-item toggle-zen-mode-button" data-trigger-event="toggleZenMode">
<span class="bx bx-empty"></span>
Toggle Zen mode
<kbd data-kb-action="ToggleZenMode"></kbd>
</a>
<a class="dropdown-item toggle-fullscreen-button">
<a class="dropdown-item toggle-fullscreen-button" data-trigger-event="toggleFullscreen">
<span class="bx bx-empty"></span>
Toggle fullscreen
<kbd data-kb-action="ToggleFullscreen"></kbd>
</a>
<a class="dropdown-item show-help-button">
<a class="dropdown-item show-help-button" data-trigger-event="showHelp">
<span class="bx bx-info-circle"></span>
Show Help
<kbd data-kb-action="ShowHelp"></kbd>
@@ -92,7 +87,7 @@ const TPL = `
About Trilium Notes
</a>
<a class="dropdown-item logout-button">
<a class="dropdown-item logout-button" data-trigger-event="logout">
<span class="bx bx-log-out"></span>
Logout
</a>
@@ -105,80 +100,14 @@ export default class GlobalMenuWidget extends BasicWidget {
render() {
this.$widget = $(TPL);
let zenModeActive = false;
// hide (toggle) everything except for the note content for zen mode
const toggleZenMode = () => {
if (!zenModeActive) {
$(".hide-in-zen-mode,.gutter").addClass("hidden-by-zen-mode");
$("#container").addClass("zen-mode");
zenModeActive = true;
}
else {
// not hiding / showing explicitly since element might be hidden also for other reasons
$(".hide-in-zen-mode,.gutter").removeClass("hidden-by-zen-mode");
$("#container").removeClass("zen-mode");
zenModeActive = false;
}
};
this.$widget.find(".toggle-zen-mode-button").on('click', toggleZenMode);
keyboardActionService.setGlobalActionHandler("ToggleZenMode", toggleZenMode);
this.$widget.find(".reload-frontend-button").on('click', utils.reloadApp);
keyboardActionService.setGlobalActionHandler("ReloadFrontendApp", utils.reloadApp);
this.$widget.find(".open-dev-tools-button").toggle(utils.isElectron());
const showOptionsDialog = () => import(OPTIONS).then(d => d.showDialog());
this.$widget.find(".options-button").on('click', showOptionsDialog);
keyboardActionService.setGlobalActionHandler("ShowOptions", showOptionsDialog);
const showHelpDialog = () => import(HELP).then(d => d.showDialog());
this.$widget.find(".show-help-button").on('click', showHelpDialog);
keyboardActionService.setGlobalActionHandler("ShowHelp", showHelpDialog);
const showSqlConsoleDialog = () => import(SQL_CONSOLE).then(d => d.showDialog());
this.$widget.find(".open-sql-console-button").on('click', showSqlConsoleDialog);
keyboardActionService.setGlobalActionHandler("ShowSQLConsole", showSqlConsoleDialog);
const showBackendLogDialog = () => import(BACKEND_LOG).then(d => d.showDialog());
this.$widget.find(".show-backend-log-button").on('click', showBackendLogDialog);
keyboardActionService.setGlobalActionHandler("ShowBackendLog", showBackendLogDialog);
this.$widget.find(".show-about-dialog-button").on('click', () => import(ABOUT).then(d => d.showDialog()));
this.$widget.find(".show-about-dialog-button").on('click',
() => import("../dialogs/about.js").then(d => d.showDialog()));
this.$widget.find(".sync-now-button").on('click', () => syncService.syncNow());
if (utils.isElectron()) {
const toggleFullscreen = () => {
const win = require('electron').remote.getCurrentWindow();
this.$widget.find(".logout-button").toggle(!utils.isElectron());
if (win.isFullScreenable()) {
win.setFullScreen(!win.isFullScreen());
}
return false;
};
this.$widget.find(".toggle-fullscreen-button").on('click', toggleFullscreen);
keyboardActionService.setGlobalActionHandler("ToggleFullscreen", toggleFullscreen);
}
else {
// outside of electron this is handled by the browser
this.$widget.find(".toggle-fullscreen-button").hide();
}
this.$widget.find(".logout-button")
.toggle(!utils.isElectron())
.on('click', () => {
const $logoutForm = $('<form action="logout" method="POST">')
.append($(`<input type="hidden" name="_csrf" value="${glob.csrfToken}"/>`));
$("body").append($logoutForm);
$logoutForm.trigger('submit');
});
this.$widget.find(".open-dev-tools-button").toggle(utils.isElectron());
return this.$widget;
}