mirror of
https://github.com/TriliumNext/Notes.git
synced 2026-05-03 18:59:09 -05:00
widgetizing tab pane
This commit is contained in:
zadam
@@ -106,16 +106,6 @@ $(document).on("click", "button[data-help-page]", e => {
|
||||
window.open(wikiBaseUrl + $button.attr("data-help-page"), '_blank');
|
||||
});
|
||||
|
||||
$("#logout-button").toggle(!utils.isElectron());
|
||||
|
||||
$("#logout-button").on('click', () => {
|
||||
const $logoutForm = $('<form action="logout" method="POST">')
|
||||
.append($(`<input type="hidden" name="_csrf" value="${glob.csrfToken}"/>`));
|
||||
|
||||
$("body").append($logoutForm);
|
||||
$logoutForm.trigger('submit');
|
||||
});
|
||||
|
||||
$("body").on("click", "a.external", function () {
|
||||
window.open($(this).attr("href"), '_blank');
|
||||
});
|
||||
@@ -193,36 +183,6 @@ if (utils.isElectron()) {
|
||||
import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
|
||||
}
|
||||
|
||||
optionService.waitForOptions().then(options => {
|
||||
if (utils.isElectron() && !options.is('nativeTitleBarVisible')) {
|
||||
$("#title-bar-buttons").show();
|
||||
|
||||
$("#minimize-btn").on('click', () => {
|
||||
$("#minimize-btn").trigger('blur');
|
||||
const {remote} = require('electron');
|
||||
remote.BrowserWindow.getFocusedWindow().minimize();
|
||||
});
|
||||
|
||||
$("#maximize-btn").on('click', () => {
|
||||
$("#maximize-btn").trigger('blur');
|
||||
const {remote} = require('electron');
|
||||
const focusedWindow = remote.BrowserWindow.getFocusedWindow();
|
||||
|
||||
if (focusedWindow.isMaximized()) {
|
||||
focusedWindow.unmaximize();
|
||||
} else {
|
||||
focusedWindow.maximize();
|
||||
}
|
||||
});
|
||||
|
||||
$("#close-btn").on('click', () => {
|
||||
$("#close-btn").trigger('blur');
|
||||
const {remote} = require('electron');
|
||||
remote.BrowserWindow.getFocusedWindow().close();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const rightPane = $("#right-pane");
|
||||
|
||||
const $showRightPaneButton = $("#show-right-pane-button");
|
||||
|
||||
@@ -18,6 +18,8 @@ import LinkMapWidget from "../widgets/link_map.js";
|
||||
import SimilarNotesWidget from "../widgets/similar_notes.js";
|
||||
import WhatLinksHereWidget from "../widgets/what_links_here.js";
|
||||
import AttributesWidget from "../widgets/attributes.js";
|
||||
import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
|
||||
import GlobalMenuWidget from "../widgets/global_menu.js";
|
||||
|
||||
class AppContext {
|
||||
constructor() {
|
||||
@@ -30,12 +32,21 @@ class AppContext {
|
||||
}
|
||||
|
||||
showWidgets() {
|
||||
const $leftPane = $("#left-pane");
|
||||
const $tabPane = $("#tab-pane");
|
||||
|
||||
this.tabRow = new TabRowWidget(this);
|
||||
const contents = this.tabRow.render();
|
||||
|
||||
$("#global-menu-wrapper").after(contents);
|
||||
const tabPaneWidgets = [
|
||||
new GlobalMenuWidget(this),
|
||||
this.tabRow,
|
||||
new TitleBarButtonsWidget(this)
|
||||
];
|
||||
|
||||
for (const widget of tabPaneWidgets) {
|
||||
widget.renderTo($tabPane);
|
||||
}
|
||||
|
||||
const $leftPane = $("#left-pane");
|
||||
|
||||
this.noteTreeWidget = new NoteTreeWidget(this);
|
||||
|
||||
|
||||
@@ -85,24 +85,6 @@ function registerEntrypoints() {
|
||||
$noteTabContainer.on("click", ".show-link-map-button", showLinkMapDialog);
|
||||
keyboardActionService.setGlobalActionHandler("ShowLinkMap", showLinkMapDialog);
|
||||
|
||||
const showOptionsDialog = () => import(OPTIONS).then(d => d.showDialog());
|
||||
$("#options-button").on('click', showOptionsDialog);
|
||||
keyboardActionService.setGlobalActionHandler("ShowOptions", showOptionsDialog);
|
||||
|
||||
const showHelpDialog = () => import(HELP).then(d => d.showDialog());
|
||||
$("#show-help-button").on('click', showHelpDialog);
|
||||
keyboardActionService.setGlobalActionHandler("ShowHelp", showHelpDialog);
|
||||
|
||||
const showSqlConsoleDialog = () => import(SQL_CONSOLE).then(d => d.showDialog());
|
||||
$("#open-sql-console-button").on('click', showSqlConsoleDialog);
|
||||
keyboardActionService.setGlobalActionHandler("ShowSQLConsole", showSqlConsoleDialog);
|
||||
|
||||
const showBackendLogDialog = () => import(BACKEND_LOG).then(d => d.showDialog());
|
||||
$("#show-backend-log-button").on('click', showBackendLogDialog);
|
||||
keyboardActionService.setGlobalActionHandler("ShowBackendLog", showBackendLogDialog);
|
||||
|
||||
$("#show-about-dialog-button").on('click', () => import(ABOUT).then(d => d.showDialog()));
|
||||
|
||||
if (utils.isElectron()) {
|
||||
$("#history-navigation").show();
|
||||
$("#history-back-button").on('click', window.history.back);
|
||||
@@ -112,26 +94,6 @@ function registerEntrypoints() {
|
||||
keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
$("#toggle-zen-mode-button").on('click', toggleZenMode);
|
||||
keyboardActionService.setGlobalActionHandler("ToggleZenMode", toggleZenMode);
|
||||
|
||||
keyboardActionService.setGlobalActionHandler("InsertDateTimeToText", () => {
|
||||
const date = new Date();
|
||||
const dateString = utils.formatDateTime(date);
|
||||
@@ -139,11 +101,6 @@ function registerEntrypoints() {
|
||||
linkService.addTextToEditor(dateString);
|
||||
});
|
||||
|
||||
$("#reload-frontend-button").on('click', utils.reloadApp);
|
||||
keyboardActionService.setGlobalActionHandler("ReloadFrontendApp", utils.reloadApp);
|
||||
|
||||
$("#open-dev-tools-button").toggle(utils.isElectron());
|
||||
|
||||
keyboardActionService.setGlobalActionHandler("PasteMarkdownIntoText", async () => {
|
||||
const dialog = await import("../dialogs/markdown_import.js");
|
||||
|
||||
@@ -187,26 +144,6 @@ function registerEntrypoints() {
|
||||
});
|
||||
}
|
||||
|
||||
if (utils.isElectron()) {
|
||||
const toggleFullscreen = () => {
|
||||
const win = require('electron').remote.getCurrentWindow();
|
||||
|
||||
if (win.isFullScreenable()) {
|
||||
win.setFullScreen(!win.isFullScreen());
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
$("#toggle-fullscreen-button").on('click', toggleFullscreen);
|
||||
|
||||
keyboardActionService.setGlobalActionHandler("ToggleFullscreen", toggleFullscreen);
|
||||
}
|
||||
else {
|
||||
// outside of electron this is handled by the browser
|
||||
$("#toggle-fullscreen-button").hide();
|
||||
}
|
||||
|
||||
if (utils.isElectron()) {
|
||||
keyboardActionService.setGlobalActionHandler("ZoomOut", zoomService.decreaseZoomFactor);
|
||||
keyboardActionService.setGlobalActionHandler("ZoomIn", zoomService.increaseZoomFactor);
|
||||
|
||||
@@ -16,8 +16,6 @@ async function syncNow() {
|
||||
}
|
||||
}
|
||||
|
||||
$("#sync-now-button").on('click', syncNow);
|
||||
|
||||
async function forceNoteSync(noteId) {
|
||||
await server.post('sync/force-note-sync/' + noteId);
|
||||
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
import BasicWidget from "./basic_widget.js";
|
||||
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>
|
||||
.global-menu-wrapper {
|
||||
height: 35px;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.global-menu button {
|
||||
margin-right: 10px;
|
||||
height: 33px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.global-menu .dropdown-menu {
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="dropdown global-menu">
|
||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
<span class="bx bx-menu"></span>
|
||||
Menu
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item options-button">
|
||||
<span class="bx bx-slider"></span>
|
||||
Options
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item sync-now-button" title="Trigger sync">
|
||||
<span class="bx bx-recycle"></span>
|
||||
Sync (<span id="outstanding-syncs-count">0</span>)
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item open-dev-tools-button">
|
||||
<span class="bx bx-terminal"></span>
|
||||
Open Dev Tools
|
||||
<kbd data-kb-action="OpenDevTools"></kbd>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item open-sql-console-button">
|
||||
<span class="bx bx-data"></span>
|
||||
Open SQL Console
|
||||
<kbd data-kb-action="ShowSQLConsole"></kbd>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item show-backend-log-button">
|
||||
<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.">
|
||||
<span class="bx bx-empty"></span>
|
||||
Reload frontend
|
||||
<kbd data-kb-action="ReloadFrontendApp"></kbd>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item toggle-zen-mode-button">
|
||||
<span class="bx bx-empty"></span>
|
||||
Toggle Zen mode
|
||||
<kbd data-kb-action="ToggleZenMode"></kbd>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item toggle-fullscreen-button">
|
||||
<span class="bx bx-empty"></span>
|
||||
Toggle fullscreen
|
||||
<kbd data-kb-action="ToggleFullscreen"></kbd>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item show-help-button">
|
||||
<span class="bx bx-info-circle"></span>
|
||||
Show Help
|
||||
<kbd data-kb-action="ShowHelp"></kbd>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item show-about-dialog-button">
|
||||
<span class="bx bx-empty"></span>
|
||||
About Trilium Notes
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item logout-button">
|
||||
<span class="bx bx-log-out"></span>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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(".sync-now-button").on('click', () => syncService.syncNow());
|
||||
|
||||
if (utils.isElectron()) {
|
||||
const toggleFullscreen = () => {
|
||||
const win = require('electron').remote.getCurrentWindow();
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
return this.$widget;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import BasicWidget from "./basic_widget.js";
|
||||
import optionService from "../services/options.js";
|
||||
import utils from "../services/utils.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="title-bar-buttons">
|
||||
<style>
|
||||
.title-bar-buttons {
|
||||
margin-top: 4px;
|
||||
min-width: 100px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="btn icon-action bx bx-minus minimize-btn"></button>
|
||||
<button class="btn icon-action bx bx-checkbox maximize-btn"></button>
|
||||
<button class="btn icon-action bx bx-x close-btn"></button>
|
||||
</div>`;
|
||||
|
||||
export default class TitleBarButtonsWidget extends BasicWidget {
|
||||
render() {
|
||||
if (!utils.isElectron()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$widget = $(TPL);
|
||||
|
||||
optionService.waitForOptions().then(options => {
|
||||
if (!options.is('nativeTitleBarVisible')) {
|
||||
this.$widget.show();
|
||||
|
||||
const $minimizeBtn = this.$widget.find(".minimize-btn");
|
||||
const $maximizeBtn = this.$widget.find(".maximize-btn");
|
||||
const $closeBtn = this.$widget.find(".close-btn");
|
||||
|
||||
$minimizeBtn.on('click', () => {
|
||||
$minimizeBtn.trigger('blur');
|
||||
const {remote} = require('electron');
|
||||
remote.BrowserWindow.getFocusedWindow().minimize();
|
||||
});
|
||||
|
||||
$maximizeBtn.on('click', () => {
|
||||
$maximizeBtn.trigger('blur');
|
||||
const {remote} = require('electron');
|
||||
const focusedWindow = remote.BrowserWindow.getFocusedWindow();
|
||||
|
||||
if (focusedWindow.isMaximized()) {
|
||||
focusedWindow.unmaximize();
|
||||
} else {
|
||||
focusedWindow.maximize();
|
||||
}
|
||||
});
|
||||
|
||||
$closeBtn.on('click', () => {
|
||||
$closeBtn.trigger('blur');
|
||||
const {remote} = require('electron');
|
||||
remote.BrowserWindow.getFocusedWindow().close();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return this.$widget;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user