diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index 677f01f0d..53e366076 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -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 = [ - new GlobalMenuWidget(this), - this.tabRow, - new TitleBarButtonsWidget(this) + 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"); diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js index dafd75fa8..90323ddcf 100644 --- a/src/public/javascripts/services/entrypoints.js +++ b/src/public/javascripts/services/entrypoints.js @@ -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); diff --git a/src/public/javascripts/widgets/history_navigation.js b/src/public/javascripts/widgets/history_navigation.js new file mode 100644 index 000000000..01aafe46f --- /dev/null +++ b/src/public/javascripts/widgets/history_navigation.js @@ -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 = ` +
+ + + + + +
+`; + +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; + } +} \ No newline at end of file diff --git a/src/public/javascripts/widgets/horizontal_flex_container.js b/src/public/javascripts/widgets/horizontal_flex_container.js new file mode 100644 index 000000000..3914a9a61 --- /dev/null +++ b/src/public/javascripts/widgets/horizontal_flex_container.js @@ -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 = $(`
`); + + for (const widget of this.childWidgets) { + this.$widget.append(widget.render()); + } + + return this.$widget; + } +} \ No newline at end of file diff --git a/src/public/javascripts/widgets/standard_top_widget.js b/src/public/javascripts/widgets/standard_top_widget.js new file mode 100644 index 000000000..2ac4bebec --- /dev/null +++ b/src/public/javascripts/widgets/standard_top_widget.js @@ -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 = ` +
+ + +
+ + + + + + + +
+ +
+
`; + +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 + } +} \ No newline at end of file diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 2b9e71263..f2fc34cd5 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -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; } diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 545742ead..d8b11b7b1 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -11,48 +11,7 @@