From f3b72617489e2c0ade4aa8dffd960de8f2a543e9 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Mon, 2 Sep 2024 19:37:02 +0200 Subject: [PATCH] fix all launcher bar components --- src/public/app/services/toast.js | 21 +++-- src/public/app/widgets/buttons/calendar.js | 1 - src/public/app/widgets/buttons/global_menu.js | 16 ++-- .../widgets/buttons/right_dropdown_button.js | 24 +++--- src/public/app/widgets/dialogs/about.js | 6 +- src/public/app/widgets/dialogs/help.js | 6 +- .../app/widgets/dialogs/jump_to_note.js | 8 +- .../app/widgets/dialogs/recent_changes.js | 10 +-- src/public/app/widgets/dialogs/revisions.js | 10 +-- src/public/stylesheets/style.css | 82 +++++++++++++------ 10 files changed, 110 insertions(+), 74 deletions(-) diff --git a/src/public/app/services/toast.js b/src/public/app/services/toast.js index 09c17ce7f..369a50e9d 100644 --- a/src/public/app/services/toast.js +++ b/src/public/app/services/toast.js @@ -2,15 +2,18 @@ import ws from "./ws.js"; import utils from "./utils.js"; function toast(options) { - const $toast = $(``); + const $toast = $( + `` + ); $toast.find('.toast-title').text(options.title); $toast.find('.toast-body').text(options.message); diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.js index 388f8cb61..a6021f308 100644 --- a/src/public/app/widgets/buttons/calendar.js +++ b/src/public/app/widgets/buttons/calendar.js @@ -123,7 +123,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget { if (note) { appContext.tabManager.getActiveContext().setNote(note.noteId); - this.hideDropdown(); } else { toastService.showError(t("calendar.cannot_find_day_note")); diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js index 3865e605b..3d6be72eb 100644 --- a/src/public/app/widgets/buttons/global_menu.js +++ b/src/public/app/widgets/buttons/global_menu.js @@ -258,9 +258,9 @@ export default class GlobalMenuWidget extends BasicWidget { doRender() { this.$widget = $(TPL); - this.$dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); + this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); - this.$tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" }); + this.tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" }); this.$widget.find(".show-about-dialog-button").on('click', () => this.triggerCommand("openAboutDialog")); @@ -276,7 +276,7 @@ export default class GlobalMenuWidget extends BasicWidget { return; } - this.$dropdown.toggle(); + this.dropdown.toggle(); }); this.$widget.on('click', '.dropdown-submenu', e => { e.stopPropagation(); @@ -295,10 +295,10 @@ export default class GlobalMenuWidget extends BasicWidget { this.$zoomState = this.$widget.find(".zoom-state"); this.$widget.on('show.bs.dropdown', () => { this.updateZoomState(); - this.$tooltip.hide(); - this.$tooltip.disable(); + this.tooltip.hide(); + this.tooltip.disable(); }); - this.$widget.on('hide.bs.dropdown', () => this.$tooltip.enable()); + this.$widget.on('hide.bs.dropdown', () => this.tooltip.enable()); this.$widget.find(".zoom-buttons").on("click", // delay to wait for the actual zoom change @@ -348,10 +348,10 @@ export default class GlobalMenuWidget extends BasicWidget { } activeContextChangedEvent() { - this.$dropdown.hide(); + this.dropdown.hide(); } noteSwitchedEvent() { - this.$dropdown.hide(); + this.dropdown.hide(); } } diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.js index d3b20a40e..236b1f0be 100644 --- a/src/public/app/widgets/buttons/right_dropdown_button.js +++ b/src/public/app/widgets/buttons/right_dropdown_button.js @@ -1,17 +1,19 @@ import BasicWidget from "../basic_widget.js"; const TPL = ` -
+
- +
+
`; @@ -29,11 +31,14 @@ export default class RightDropdownButtonWidget extends BasicWidget { this.$widget = $(TPL); this.$dropdownMenu = this.$widget.find(".dropdown-menu"); - const $button = this.$widget.find(".right-dropdown-button") + this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title); + this.tooltip = new bootstrap.Tooltip(this.$tooltip); + + this.$widget.find(".right-dropdown-button") .addClass(this.iconClass) - .attr("title", this.title) - .tooltip({ trigger: "hover" }) - .on("click", () => $button.tooltip("hide")); + .on("click", () => this.tooltip.hide()) + .on('mouseenter', () => this.tooltip.show()) + .on('mouseleave', () => this.tooltip.hide()); this.$widget.on('show.bs.dropdown', async () => { await this.dropdownShown(); @@ -51,10 +56,5 @@ export default class RightDropdownButtonWidget extends BasicWidget { } // to be overridden - async dropdownShow() {} - - hideDropdown() { - this.$widget.dropdown("hide"); - this.$dropdownMenu.removeClass("show"); - } + async dropdownShow() { } } diff --git a/src/public/app/widgets/dialogs/about.js b/src/public/app/widgets/dialogs/about.js index 456fa24ef..29cfee82b 100644 --- a/src/public/app/widgets/dialogs/about.js +++ b/src/public/app/widgets/dialogs/about.js @@ -4,12 +4,12 @@ import { t } from "../../services/i18n.js"; import BasicWidget from "../basic_widget.js"; const TPL = ` -
-
+