zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-11-11 01:23:57 +08:00
Code Issues Projects Releases Packages Wiki Activity

widgetized standard toolbar

Browse source
This commit is contained in:
zadam 2020-01-15 20:10:54 +01:00
parent 209b1610f6
commit f98a20928c
7 changed files with 161 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/public/javascripts/services/app_context.js
View file

@ -20,6 +20,8 @@ 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";
import HorizontalFlexContainer from "../widgets/horizontal_flex_container.js";
import StandardTopWidget from "../widgets/standard_top_widget.js";
class AppContext {
constructor() {
@ -32,18 +34,22 @@ class AppContext {
}
showWidgets() {
const $tabPane = $("#tab-pane");
this.tabRow = new TabRowWidget(this);
const tabPaneWidgets = [
const topPaneWidgets = [
new HorizontalFlexContainer(this, [
new GlobalMenuWidget(this),
this.tabRow,
new TitleBarButtonsWidget(this)
]),
new StandardTopWidget(this)
];
for (const widget of tabPaneWidgets) {
widget.renderTo($tabPane);
const $topPane = $("#top-pane");
for (const widget of topPaneWidgets) {
widget.renderTo($topPane);
}
const $leftPane = $("#left-pane");

20
src/public/javascripts/services/entrypoints.js
View file

@ -36,17 +36,6 @@ function registerEntrypoints() {
keyboardActionService.setGlobalActionHandler("AddLinkToText", () => import(ADD_LINK).then(d => d.showDialog()));
const showJumpToNoteDialog = () => import(JUMP_TO_NOTE).then(d => d.showDialog());
$("#jump-to-note-dialog-button").on('click', showJumpToNoteDialog);
keyboardActionService.setGlobalActionHandler("JumpToNote", showJumpToNoteDialog);
const showRecentChanges = () => import(RECENT_CHANGES).then(d => d.showDialog());
$("#recent-changes-button").on('click', showRecentChanges);
keyboardActionService.setGlobalActionHandler("ShowRecentChanges", showRecentChanges);
$("#enter-protected-session-button").on('click', protectedSessionService.enterProtectedSession);
$("#leave-protected-session-button").on('click', protectedSessionService.leaveProtectedSession);
keyboardActionService.setGlobalActionHandler('SearchNotes', searchNotesService.toggleSearch);
const $noteTabContainer = $("#note-tab-container");
@ -85,15 +74,6 @@ function registerEntrypoints() {
$noteTabContainer.on("click", ".show-link-map-button", showLinkMapDialog);
keyboardActionService.setGlobalActionHandler("ShowLinkMap", showLinkMapDialog);
if (utils.isElectron()) {
$("#history-navigation").show();
$("#history-back-button").on('click', window.history.back);
keyboardActionService.setGlobalActionHandler("BackInNoteHistory", window.history.back);
$("#history-forward-button").on('click', window.history.forward);
keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
}
keyboardActionService.setGlobalActionHandler("InsertDateTimeToText", () => {
const date = new Date();
const dateString = utils.formatDateTime(date);

36
src/public/javascripts/widgets/history_navigation.js Normal file
View file

@ -0,0 +1,36 @@
import BasicWidget from "./basic_widget.js";
import utils from "../services/utils.js";
import keyboardActionService from "../services/keyboard_actions.js";
const TPL = `
<div class="history-navigation">
<style>
.history-navigation {
margin: 0 15px 0 5px;
}
</style>
<a title="Go to previous note." class="history-back-button icon-action bx bx-left-arrow-circle"></a>
<a title="Go to next note." class="history-forward-button icon-action bx bx-right-arrow-circle"></a>
</div>
`;
export default class HistoryNavigationWidget extends BasicWidget {
render() {
if (!utils.isElectron()) {
return;
}
this.$widget = $(TPL);
this.$widget.find(".history-back-button").on('click', window.history.back);
this.$widget.find(".history-forward-button").on('click', window.history.forward);
// FIXME: does not belong here
keyboardActionService.setGlobalActionHandler("BackInNoteHistory", window.history.back);
keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
return this.$widget;
}
}

19
src/public/javascripts/widgets/horizontal_flex_container.js Normal file
View file

@ -0,0 +1,19 @@
import BasicWidget from "./basic_widget.js";
export default class HorizontalFlexContainer extends BasicWidget {
constructor(appContext, widgets) {
super(appContext);
this.childWidgets = widgets;
}
render() {
this.$widget = $(`<div style="display: flex; flex-direction: row;">`);
for (const widget of this.childWidgets) {
this.$widget.append(widget.render());
}
return this.$widget;
}
}

92
src/public/javascripts/widgets/standard_top_widget.js Normal file
View file

@ -0,0 +1,92 @@
import BasicWidget from "./basic_widget.js";
import HistoryNavigationWidget from "./history_navigation.js";
import keyboardActionService from "../services/keyboard_actions.js";
import protectedSessionService from "../services/protected_session.js";
const JUMP_TO_NOTE = "../dialogs/jump_to_note.js";
const RECENT_CHANGES = "../dialogs/recent_changes.js";
const TPL = `
<div class="standard-top-widget">
<style>
.standard-top-widget {
background-color: var(--header-background-color);
display: flex;
align-items: center;
padding-top: 4px;
}
.standard-top-widget button {
padding: 1px 5px 1px 5px;
font-size: smaller;
margin-bottom: 2px;
margin-top: 2px;
margin-right: 8px;
border-color: transparent !important;
}
.standard-top-widget button.btn-sm .bx {
position: relative;
top: 1px;
}
.standard-top-widget button:hover {
border-color: var(--button-border-color) !important;
}
</style>
<div style="flex-grow: 100; display: flex;">
<button class="btn btn-sm jump-to-note-dialog-button" data-kb-action="JumpToNote">
<span class="bx bx-crosshair"></span>
Jump to note
</button>
<button class="btn btn-sm recent-changes-button" data-kb-action="ShowRecentChanges">
<span class="bx bx-history"></span>
Recent changes
</button>
<button class="btn btn-sm enter-protected-session-button"
title="Enter protected session to be able to find and view protected notes">
<span class="bx bx-log-in"></span>
Enter protected session
</button>
<button class="btn btn-sm leave-protected-session-button"
title="Leave protected session so that protected notes are not accessible any more."
style="display: none;">
<span class="bx bx-log-out"></span>
Leave protected session
</button>
</div>
<div id="plugin-buttons"></div>
</div>`;
export default class StandardTopWidget extends BasicWidget {
render() {
this.$widget = $(TPL);
const historyNavigationWidget = new HistoryNavigationWidget(this.appContext);
this.$widget.prepend(historyNavigationWidget.render());
const showJumpToNoteDialog = () => import(JUMP_TO_NOTE).then(d => d.showDialog());
this.$widget.find(".jump-to-note-dialog-button").on('click', showJumpToNoteDialog);
const showRecentChanges = () => import(RECENT_CHANGES).then(d => d.showDialog());
this.$widget.find(".recent-changes-button").on('click', showRecentChanges);
// FIXME
keyboardActionService.setGlobalActionHandler("JumpToNote", showJumpToNoteDialog);
keyboardActionService.setGlobalActionHandler("ShowRecentChanges", showRecentChanges);
this.$widget.find(".enter-protected-session-button").on('click', protectedSessionService.enterProtectedSession);
this.$widget.find(".leave-protected-session-button").on('click', protectedSessionService.leaveProtectedSession);
return this.$widget
}
}

29
src/public/stylesheets/desktop.css
View file

@ -51,35 +51,6 @@ body {
flex-direction: column;
}
#top-pane {
background-color: var(--header-background-color);
display: flex;
align-items: center;
padding-top: 4px;
}
#top-pane button {
padding: 1px 5px 1px 5px;
font-size: smaller;
margin-bottom: 2px;
margin-top: 2px;
margin-right: 8px;
border-color: transparent !important;
}
#top-pane button.btn-sm .bx {
position: relative;
top: 1px;
}
#top-pane button:hover {
border-color: var(--button-border-color) !important;
}
#history-navigation {
margin: 0 15px 0 5px;
}
.dropdown-menu {
font-size: inherit;
}

43
src/views/desktop.ejs
View file

@ -11,48 +11,7 @@
<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
<div id="container" style="display: none;">
<div id="tab-pane"></div>
<div id="top-pane" class="hide-in-zen-mode">
<div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
<a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
</div>
<div style="flex-grow: 100; display: flex;">
<button class="btn btn-sm" id="jump-to-note-dialog-button" data-kb-action="JumpToNote">
<span class="bx bx-crosshair"></span>
Jump to note
</button>
<button class="btn btn-sm" id="recent-changes-button" data-kb-action="ShowRecentChanges">
<span class="bx bx-history"></span>
Recent changes
</button>
<button class="btn btn-sm"
id="enter-protected-session-button"
title="Enter protected session to be able to find and view protected notes">
<span class="bx bx-log-in"></span>
Enter protected session
</button>
<button class="btn btn-sm"
id="leave-protected-session-button"
title="Leave protected session so that protected notes are not accessible any more."
style="display: none;">
<span class="bx bx-log-out"></span>
Leave protected session
</button>
</div>
<div id="plugin-buttons">
</div>
</div>
<div id="top-pane" class="hide-in-zen-mode"></div>
<div style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
<div id="left-pane" class="hide-in-zen-mode"></div>