From 0089346d0485f756d430c8d0d594cfb0455d8dd8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 02:02:33 +0200 Subject: [PATCH 01/39] feat(electron): enable native window buttons on frameless --- src/public/app/layouts/desktop_layout.js | 2 -- src/services/window.ts | 14 ++++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 995654f4c..a0f7f167c 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -103,7 +103,6 @@ export default class DesktopLayout { .class("tab-row-container") .child(new LeftPaneToggleWidget(true)) .child(new TabRowWidget().class("full-width")) - .child(new TitleBarButtonsWidget()) .css('height', '40px') .css('background-color', 'var(--launcher-pane-background-color)') .setParent(appContext) @@ -122,7 +121,6 @@ export default class DesktopLayout { .css("flex-grow", "1") .optChild(!launcherPaneIsHorizontal, new FlexContainer('row') .child(new TabRowWidget()) - .child(new TitleBarButtonsWidget()) .css('height', '40px') ) .child(new FlexContainer('row') diff --git a/src/services/window.ts b/src/services/window.ts index d0c625a15..370df0e63 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -8,7 +8,7 @@ import sqlInit from "./sql_init.js"; import cls from "./cls.js"; import keyboardActionsService from "./keyboard_actions.js"; import remoteMain from "@electron/remote/main/index.js"; -import { App, BrowserWindow, WebContents, ipcMain } from 'electron'; +import { App, BrowserWindow, BrowserWindowConstructorOptions, WebContents, ipcMain } from 'electron'; import { fileURLToPath } from "url"; import { dirname } from "path"; @@ -71,6 +71,12 @@ async function createMainWindow(app: App) { const { BrowserWindow } = (await import('electron')); // should not be statically imported + const extraOpts: Partial = {}; + if (!optionService.getOptionBool('nativeTitleBarVisible')) { + extraOpts.titleBarStyle = "hidden"; + extraOpts.titleBarOverlay = (process.platform !== "darwin"); + } + mainWindow = new BrowserWindow({ x: mainWindowState.x, y: mainWindowState.y, @@ -82,9 +88,9 @@ async function createMainWindow(app: App) { contextIsolation: false, spellcheck: spellcheckEnabled, webviewTag: true - }, - frame: optionService.getOptionBool('nativeTitleBarVisible'), - icon: getIcon() + }, + icon: getIcon(), + ...extraOpts }); mainWindowState.manage(mainWindow); From 60192977c9e8a07a26170c4e47c02a25c63f7a00 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 02:18:35 +0200 Subject: [PATCH 02/39] feat(electron): set overlay information at runtime --- src/public/app/desktop.js | 18 ++++++++++++++++-- src/public/stylesheets/theme-next.css | 2 +- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index 835624d35..313bee034 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -30,8 +30,7 @@ bundleService.getWidgetBundlesByParent().then(async widgetBundles => { glob.setupGlobs(); if (utils.isElectron()) { - utils.dynamicRequire('electron').ipcRenderer.on('globalShortcut', - async (event, actionName) => appContext.triggerCommand(actionName)); + initOnElectron(); } macInit.init(); @@ -43,3 +42,18 @@ noteAutocompleteService.init(); if (utils.isElectron()) { electronContextMenu.setupContextMenu(); } + +function initOnElectron() { + const electron = utils.dynamicRequire('electron'); + electron.ipcRenderer.on('globalShortcut', async (event, actionName) => appContext.triggerCommand(actionName)); + + // Update the native title bar buttons. + const electronRemote = utils.dynamicRequire("@electron/remote"); + const currentWindow = electronRemote.getCurrentWindow(); + currentWindow.setTitleBarOverlay({ + color: "red", + symbolColor: "white" + }); + + console.log("Electron initialized."); +} \ No newline at end of file diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 22556aba9..8c3bf8536 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -20,7 +20,7 @@ :root { /* --main-font-family: "Noto Sans", sans-serif; */ - --main-font-family: "Ubuntu Sans", sans-serif; + --main-font-family: "Segoe UI", sans-serif; /* --main-font-family: "Ubuntu", sans-serif; */ /* --main-font-family: "Nunito", sans-serif; */ /* --main-font-family: "Inter", sans-serif; */ From 01512152ea5345d417b49c98c206a1cd851db615 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 02:36:00 +0200 Subject: [PATCH 03/39] feat(electron): load overlay information from CSS --- src/public/app/desktop.js | 7 ++++--- src/public/stylesheets/style.css | 2 ++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index 313bee034..aa9564c07 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -50,10 +50,11 @@ function initOnElectron() { // Update the native title bar buttons. const electronRemote = utils.dynamicRequire("@electron/remote"); const currentWindow = electronRemote.getCurrentWindow(); + const documentStyle = window.getComputedStyle(document.documentElement); currentWindow.setTitleBarOverlay({ - color: "red", - symbolColor: "white" + color: documentStyle.getPropertyValue("--native-titlebar-background"), + symbolColor: documentStyle.getPropertyValue("--native-titlebar-foreground") }); - + console.log("Electron initialized."); } \ No newline at end of file diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index cb8cdd1aa..87a2144d1 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -21,6 +21,8 @@ :root { --submenu-opening-delay: 300ms; + --native-titlebar-background: var(--left-pane-background-color); + --native-titlebar-foreground: var(--main-text-color); } html { From bd890c49d5a8df25113d4e3f5b825e436405a13a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 03:02:03 +0200 Subject: [PATCH 04/39] feat(electron): relocate pin to global menu --- src/public/app/widgets/buttons/global_menu.js | 22 ++++ src/public/app/widgets/title_bar_buttons.js | 112 ------------------ 2 files changed, 22 insertions(+), 112 deletions(-) delete mode 100644 src/public/app/widgets/title_bar_buttons.js diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js index 9ee235a45..6607c0182 100644 --- a/src/public/app/widgets/buttons/global_menu.js +++ b/src/public/app/widgets/buttons/global_menu.js @@ -143,6 +143,11 @@ const TPL = ` +
  • + + ${t('title_bar_buttons.window-on-top')} +
    • +
  • @@ -294,6 +299,23 @@ export default class GlobalMenuWidget extends BasicWidget { const isElectron = utils.isElectron(); + this.$widget.find(".toggle-pin").toggle(isElectron); + if (isElectron) { + this.$widget.on("click", ".toggle-pin", (e) => { + const $el = $(e.target); + const remote = utils.dynamicRequire('@electron/remote'); + const focusedWindow = remote.BrowserWindow.getFocusedWindow(); + const isAlwaysOnTop = focusedWindow.isAlwaysOnTop() + if (isAlwaysOnTop) { + focusedWindow.setAlwaysOnTop(false) + $el.removeClass('active'); + } else { + focusedWindow.setAlwaysOnTop(true); + $el.addClass('active'); + } + }); + } + this.$widget.find(".logout-button").toggle(!isElectron); this.$widget.find(".logout-button-separator").toggle(!isElectron); diff --git a/src/public/app/widgets/title_bar_buttons.js b/src/public/app/widgets/title_bar_buttons.js deleted file mode 100644 index edb270f77..000000000 --- a/src/public/app/widgets/title_bar_buttons.js +++ /dev/null @@ -1,112 +0,0 @@ -import BasicWidget from "./basic_widget.js"; -import options from "../services/options.js"; -import utils from "../services/utils.js"; -import { t } from "../services/i18n.js"; - -const TPL = ` -
    - - - -
    -
    -
    -
    -
    `; - -export default class TitleBarButtonsWidget extends BasicWidget { - doRender() { - if (!utils.isElectron() || options.is('nativeTitleBarVisible')) { - return this.$widget = $('
    '); - } - - this.$widget = $(TPL); - this.contentSized(); - - const $topBtn = this.$widget.find(".top-btn"); - const $minimizeBtn = this.$widget.find(".minimize-btn"); - const $maximizeBtn = this.$widget.find(".maximize-btn"); - const $closeBtn = this.$widget.find(".close-btn"); - - // When the window is restarted, the window will not be reset when it is set to the top, - // so get the window status and set the icon background - setTimeout(() => { - const remote = utils.dynamicRequire('@electron/remote'); - if (remote.BrowserWindow.getFocusedWindow()?.isAlwaysOnTop()) { - $topBtn.addClass('active'); - } - }, 1000); - - $topBtn.on('click', () => { - $topBtn.trigger('blur'); - const remote = utils.dynamicRequire('@electron/remote'); - const focusedWindow = remote.BrowserWindow.getFocusedWindow(); - const isAlwaysOnTop = focusedWindow.isAlwaysOnTop() - if (isAlwaysOnTop) { - focusedWindow.setAlwaysOnTop(false) - $topBtn.removeClass('active'); - } else { - focusedWindow.setAlwaysOnTop(true); - $topBtn.addClass('active'); - } - }); - - $minimizeBtn.on('click', () => { - $minimizeBtn.trigger('blur'); - const remote = utils.dynamicRequire('@electron/remote'); - remote.BrowserWindow.getFocusedWindow().minimize(); - }); - - $maximizeBtn.on('click', () => { - $maximizeBtn.trigger('blur'); - const remote = utils.dynamicRequire('@electron/remote'); - const focusedWindow = remote.BrowserWindow.getFocusedWindow(); - - if (focusedWindow.isMaximized()) { - focusedWindow.unmaximize(); - } else { - focusedWindow.maximize(); - } - }); - - $closeBtn.on('click', () => { - $closeBtn.trigger('blur'); - const remote = utils.dynamicRequire('@electron/remote'); - remote.BrowserWindow.getFocusedWindow().close(); - }); - } -} From d05c1deb075503ef8710a858fa141bd35e25fcb9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 10:37:45 +0200 Subject: [PATCH 05/39] fix(client): build error due to non-existing import --- src/public/app/layouts/desktop_layout.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index a0f7f167c..eaa3ba011 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -1,7 +1,6 @@ import FlexContainer from "../widgets/containers/flex_container.js"; import GlobalMenuWidget from "../widgets/buttons/global_menu.js"; import TabRowWidget from "../widgets/tab_row.js"; -import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js"; import LeftPaneContainer from "../widgets/containers/left_pane_container.js"; import NoteTreeWidget from "../widgets/note_tree.js"; import NoteTitleWidget from "../widgets/note_title.js"; From 45faa666bad96a1b63b847d664ddbe68def0378c Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 17:44:42 +0200 Subject: [PATCH 06/39] fix(native-buttons): enable buttons on other windows as well --- src/services/window.ts | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/services/window.ts b/src/services/window.ts index 370df0e63..f60c5f783 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -31,7 +31,7 @@ async function createExtraWindow(extraWindowHash: string) { contextIsolation: false, spellcheck: spellcheckEnabled }, - frame: optionService.getOptionBool('nativeTitleBarVisible'), + ...getWindowExtraOpts(), icon: getIcon() }); @@ -71,11 +71,7 @@ async function createMainWindow(app: App) { const { BrowserWindow } = (await import('electron')); // should not be statically imported - const extraOpts: Partial = {}; - if (!optionService.getOptionBool('nativeTitleBarVisible')) { - extraOpts.titleBarStyle = "hidden"; - extraOpts.titleBarOverlay = (process.platform !== "darwin"); - } + mainWindow = new BrowserWindow({ x: mainWindowState.x, @@ -90,7 +86,7 @@ async function createMainWindow(app: App) { webviewTag: true }, icon: getIcon(), - ...extraOpts + ...getWindowExtraOpts() }); mainWindowState.manage(mainWindow); @@ -116,6 +112,16 @@ async function createMainWindow(app: App) { }); } +function getWindowExtraOpts() { + const extraOpts: Partial = {}; + if (!optionService.getOptionBool('nativeTitleBarVisible')) { + extraOpts.titleBarStyle = "hidden"; + extraOpts.titleBarOverlay = (process.platform !== "darwin"); + } + + return extraOpts; +} + function configureWebContents(webContents: WebContents, spellcheckEnabled: boolean) { remoteMain.enable(webContents); From 57613207315fef25832b07b7fafd3401dd377a39 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 17:59:55 +0200 Subject: [PATCH 07/39] feat(native-buttons): watch for theme changes --- src/public/app/desktop.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index aa9564c07..0919c4476 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -48,13 +48,18 @@ function initOnElectron() { electron.ipcRenderer.on('globalShortcut', async (event, actionName) => appContext.triggerCommand(actionName)); // Update the native title bar buttons. - const electronRemote = utils.dynamicRequire("@electron/remote"); + applyTitleBarOverlaySettings(); + + // Register for changes to the native title bar colors. + window.matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", applyTitleBarOverlaySettings); +} + +function applyTitleBarOverlaySettings() { + const electronRemote = utils.dynamicRequire("@electron/remote"); const currentWindow = electronRemote.getCurrentWindow(); - const documentStyle = window.getComputedStyle(document.documentElement); - currentWindow.setTitleBarOverlay({ - color: documentStyle.getPropertyValue("--native-titlebar-background"), - symbolColor: documentStyle.getPropertyValue("--native-titlebar-foreground") - }); - - console.log("Electron initialized."); + const documentStyle = window.getComputedStyle(document.documentElement); + const color = documentStyle.getPropertyValue("--native-titlebar-background"); + const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground"); + currentWindow.setTitleBarOverlay({ color, symbolColor }); } \ No newline at end of file From 9e0546da27929752c599aafe2124cd8841bbda1d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 18:03:13 +0200 Subject: [PATCH 08/39] theme(next): make subtle border color less subtle on dark mode --- src/public/stylesheets/theme-next.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 65a7bc6d5..efce67b9d 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -195,6 +195,7 @@ --main-background-color: #333; --main-text-color: #ccc; --main-border-color: #454545; + --subtle-border-color: rgba(0, 0, 0, 0.3); --dropdown-border-color: #555; --dropdown-shadow-opacity: .6; --dropdown-item-icon-destructive-color: #de6e5b; From 28b27f04cd83463e8b0cfe65478b5df78c35759f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 18:18:53 +0200 Subject: [PATCH 09/39] fix(electron): fix regression when native title bar is on --- src/public/app/desktop.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index 0919c4476..e72471c86 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -8,6 +8,7 @@ import macInit from './services/mac_init.js'; import electronContextMenu from "./menus/electron_context_menu.js"; import glob from "./services/glob.js"; import { t } from "./services/i18n.js"; +import options from "./services/options.js"; await appContext.earlyInit(); @@ -47,19 +48,25 @@ function initOnElectron() { const electron = utils.dynamicRequire('electron'); electron.ipcRenderer.on('globalShortcut', async (event, actionName) => appContext.triggerCommand(actionName)); + if (options.get("nativeTitleBarVisible") !== "true") { + initTitleBarButtons(); + } +} + +function initTitleBarButtons() { + function applyTitleBarOverlaySettings() { + const electronRemote = utils.dynamicRequire("@electron/remote"); + const currentWindow = electronRemote.getCurrentWindow(); + const documentStyle = window.getComputedStyle(document.documentElement); + const color = documentStyle.getPropertyValue("--native-titlebar-background"); + const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground"); + currentWindow.setTitleBarOverlay({ color, symbolColor }); + } + // Update the native title bar buttons. applyTitleBarOverlaySettings(); - + // Register for changes to the native title bar colors. window.matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", applyTitleBarOverlaySettings); } - -function applyTitleBarOverlaySettings() { - const electronRemote = utils.dynamicRequire("@electron/remote"); - const currentWindow = electronRemote.getCurrentWindow(); - const documentStyle = window.getComputedStyle(document.documentElement); - const color = documentStyle.getPropertyValue("--native-titlebar-background"); - const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground"); - currentWindow.setTitleBarOverlay({ color, symbolColor }); -} \ No newline at end of file From c06ff4ec275a795372faa1e32143e556a805fe0b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 18:31:21 +0200 Subject: [PATCH 10/39] fix(native-buttons): right margin --- src/public/stylesheets/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 87a2144d1..19e6ae470 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1271,6 +1271,10 @@ textarea { color: var(--muted-text-color); } +.tab-row-container { + width: env(titlebar-area-width, 100%); +} + .tab-row-container .toggle-button { background: transparent; appearance: none; From 95664adb646a2b464d60db4b40780f8009e1e929 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 18:33:40 +0200 Subject: [PATCH 11/39] chore(i18n): remove period for menu item --- src/public/translations/de/translation.json | 2 +- src/public/translations/en/translation.json | 2 +- src/public/translations/es/translation.json | 2 +- src/public/translations/fr/translation.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/public/translations/de/translation.json b/src/public/translations/de/translation.json index 55df50b2d..74173a9a2 100644 --- a/src/public/translations/de/translation.json +++ b/src/public/translations/de/translation.json @@ -1407,7 +1407,7 @@ "saved-search-note-refreshed": "Gespeicherte Such-Notiz wurde aktualisiert." }, "title_bar_buttons": { - "window-on-top": "Dieses Fenster immer oben halten." + "window-on-top": "Dieses Fenster immer oben halten" }, "note_detail": { "could_not_find_typewidget": "Konnte typeWidget für Typ ‚{{type}}‘ nicht finden" diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json index d53061027..7b0c53409 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -1433,7 +1433,7 @@ "saved-search-note-refreshed": "Saved search note refreshed." }, "title_bar_buttons": { - "window-on-top": "Keep this window on top." + "window-on-top": "Keep this window on top" }, "note_detail": { "could_not_find_typewidget": "Could not find typeWidget for type '{{type}}'" diff --git a/src/public/translations/es/translation.json b/src/public/translations/es/translation.json index 00a0be60a..e2e278c88 100644 --- a/src/public/translations/es/translation.json +++ b/src/public/translations/es/translation.json @@ -1432,7 +1432,7 @@ "saved-search-note-refreshed": "La nota de búsqueda guardada fue recargada." }, "title_bar_buttons": { - "window-on-top": "Mantener esta ventana en la parte superior." + "window-on-top": "Mantener esta ventana en la parte superior" }, "note_detail": { "could_not_find_typewidget": "No se pudo encontrar typeWidget para el tipo '{{type}}'" diff --git a/src/public/translations/fr/translation.json b/src/public/translations/fr/translation.json index 276c6147b..6b21f7f97 100644 --- a/src/public/translations/fr/translation.json +++ b/src/public/translations/fr/translation.json @@ -1408,7 +1408,7 @@ "saved-search-note-refreshed": "Note de recherche enregistrée actualisée." }, "title_bar_buttons": { - "window-on-top": "Épingler cette fenêtre au premier plan." + "window-on-top": "Épingler cette fenêtre au premier plan" }, "note_detail": { "could_not_find_typewidget": "Impossible de trouver typeWidget pour le type '{{type}}'" From e933b8d5c8296aab2f9bffa7797053f1c0f492ef Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 18:34:15 +0200 Subject: [PATCH 12/39] chore(i18n): fix capitalization --- src/public/translations/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json index 7b0c53409..d122293e0 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -1433,7 +1433,7 @@ "saved-search-note-refreshed": "Saved search note refreshed." }, "title_bar_buttons": { - "window-on-top": "Keep this window on top" + "window-on-top": "Keep Window on Top" }, "note_detail": { "could_not_find_typewidget": "Could not find typeWidget for type '{{type}}'" From 8135fa09c35f7c83e0285f9fd02fae285a97d686 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 1 Dec 2024 21:06:01 +0200 Subject: [PATCH 13/39] feat(native-buttons): differentiate background based on layout --- src/public/app/desktop.js | 12 ++++++++---- src/public/stylesheets/style.css | 11 ++++++++--- src/public/stylesheets/theme-next.css | 12 ++++++------ src/routes/index.ts | 1 + src/views/desktop.ejs | 2 +- 5 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index e72471c86..6d558c55e 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -57,10 +57,14 @@ function initTitleBarButtons() { function applyTitleBarOverlaySettings() { const electronRemote = utils.dynamicRequire("@electron/remote"); const currentWindow = electronRemote.getCurrentWindow(); - const documentStyle = window.getComputedStyle(document.documentElement); - const color = documentStyle.getPropertyValue("--native-titlebar-background"); - const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground"); - currentWindow.setTitleBarOverlay({ color, symbolColor }); + + const style = window.getComputedStyle(document.body); + const color = style.getPropertyValue("--native-titlebar-background"); + const symbolColor = style.getPropertyValue("--native-titlebar-foreground"); + + if (color && symbolColor) { + currentWindow.setTitleBarOverlay({ color, symbolColor }); + } } // Update the native title bar buttons. diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 19e6ae470..f9b06ab77 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -20,9 +20,7 @@ } :root { - --submenu-opening-delay: 300ms; - --native-titlebar-background: var(--left-pane-background-color); - --native-titlebar-foreground: var(--main-text-color); + --submenu-opening-delay: 300ms; } html { @@ -40,6 +38,13 @@ body { color: var(--main-text-color); font-family: var(--main-font-family); font-size: var(--main-font-size); + + --native-titlebar-background: var(--main-background-color); + --native-titlebar-foreground: var(--main-text-color); +} + +body.layout-horizontal { + --native-titlebar-background: var(--left-pane-background-color); } body.mobile .desktop-only { diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index efce67b9d..79ccc59b2 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -347,7 +347,7 @@ background-color: var(--root-background); } -#root-widget.horizontal-layout { +body.layout-horizontal { --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color); --launcher-pane-size: var(--launcher-pane-horizontal-size); --active-tab-background-color: var(--launcher-pane-background-color); @@ -369,7 +369,7 @@ * Launcher pane */ #launcher-container, -#root-widget.horizontal-layout > .horizontal { +body.layout-horizontal > .horizontal { align-items: center; } @@ -687,7 +687,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover, position: relative; } -#root-widget.horizontal-layout .tab-row-container:after { +body.layout-horizontal .tab-row-container:after { content: ""; position: absolute; bottom: 0; @@ -702,11 +702,11 @@ html body #left-pane .quick-search:focus-within .search-button:hover, height: var(--tab-height) !important; } -#root-widget.horizontal-layout .tab-row-container { +body.layout-horizontal .tab-row-container { padding-top: calc((var(--tab-bar-height) - var(--tab-height))); } -#root-widget.horizontal-layout .tab-row-widget-container { +body.layout-horizontal .tab-row-widget-container { margin-top: 0; position: relative; overflow: hidden; @@ -722,7 +722,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover, transition: none; } -#root-widget.horizontal-layout .tab-row-widget .note-tab .note-tab-wrapper { +body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } diff --git a/src/routes/index.ts b/src/routes/index.ts index f5951d3c6..3590e6627 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -32,6 +32,7 @@ function index(req: Request, res: Response) { csrfToken: csrfToken, themeCssUrl: getThemeCssUrl(options.theme), headingStyle: options.headingStyle, + layoutOrientation: options.layoutOrientation, mainFontSize: parseInt(options.mainFontSize), treeFontSize: parseInt(options.treeFontSize), detailFontSize: parseInt(options.detailFontSize), diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 59a4b2b4f..a2c9aa401 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -6,7 +6,7 @@ TriliumNext Notes - + From 91a8460eeadaaf5a81db9270ed6d344ef6bbcbb2 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 6 Dec 2024 22:13:20 +0200 Subject: [PATCH 31/39] fix(native-buttons): regression on vertical layout on non-macOS --- src/public/app/layouts/desktop_layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index b2ebef90f..fff7b0fbc 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -98,7 +98,7 @@ export default class DesktopLayout { const isMac = (window.glob.platform === "darwin"); const isWindows = (window.glob.platform === "windows"); const hasNativeTitleBar = (window.glob.hasNativeTitleBar); - const fullWidthTabBar = true; + const fullWidthTabBar = (launcherPaneIsHorizontal && !isMac); const customTitleBarButtons = (hasNativeTitleBar && !isMac && !isWindows); return new RootContainer(true) From ef6410f25d62ef1fb6f143abaff93bd3a05004d1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 6 Dec 2024 22:18:26 +0200 Subject: [PATCH 32/39] fix(native-buttons): runtime errors due to missing functions --- src/public/app/desktop.js | 13 +++++++------ src/public/app/layouts/desktop_layout.js | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index cbd5b6f79..c07040a24 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -62,15 +62,16 @@ function initTitleBarButtons() { const color = style.getPropertyValue("--native-titlebar-background"); const symbolColor = style.getPropertyValue("--native-titlebar-foreground"); - if (color && symbolColor) { - // FIXME, do this only on windows - // currentWindow.setTitleBarOverlay({ color, symbolColor }); + if (window.glob.platform === "win32" && color && symbolColor) { + currentWindow.setTitleBarOverlay({ color, symbolColor }); } // FIXME: call only on darwin - const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10); - const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10); - currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset }); + if (window.glob.platform === "darwin") { + const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10); + const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10); + currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset }); + } } // Update the native title bar buttons. diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index fff7b0fbc..b9d20feae 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -96,7 +96,7 @@ export default class DesktopLayout { const launcherPaneIsHorizontal = (options.get("layoutOrientation") === "horizontal"); const launcherPane = this.#buildLauncherPane(launcherPaneIsHorizontal); const isMac = (window.glob.platform === "darwin"); - const isWindows = (window.glob.platform === "windows"); + const isWindows = (window.glob.platform === "win32"); const hasNativeTitleBar = (window.glob.hasNativeTitleBar); const fullWidthTabBar = (launcherPaneIsHorizontal && !isMac); const customTitleBarButtons = (hasNativeTitleBar && !isMac && !isWindows); From 50b69d26f6935f366ea57822c6118ab7caf457dd Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 6 Dec 2024 22:24:02 +0200 Subject: [PATCH 33/39] style(next): improve custom title bar buttons --- src/public/stylesheets/theme-next.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 6e9007714..07b078ce3 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -846,6 +846,10 @@ body.layout-horizontal .tab-row-widget-container { transition: none; } +.tab-row-container .title-bar-buttons { + margin-top: calc((var(--tab-bar-height) - var(--tab-height)) * -1); +} + body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper { border-bottom-left-radius: 0; border-bottom-right-radius: 0; From aad2f9384407ca681d3b9de201b54568c86a5b30 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 6 Dec 2024 22:30:55 +0200 Subject: [PATCH 34/39] feat(next): remove pin from custom title bar buttons --- src/public/app/widgets/title_bar_buttons.js | 35 ++------------------- 1 file changed, 3 insertions(+), 32 deletions(-) diff --git a/src/public/app/widgets/title_bar_buttons.js b/src/public/app/widgets/title_bar_buttons.js index edb270f77..6d14dca1a 100644 --- a/src/public/app/widgets/title_bar_buttons.js +++ b/src/public/app/widgets/title_bar_buttons.js @@ -30,19 +30,14 @@ const TPL = ` display: inline-block; height: 40px; width: 40px; - } - - .title-bar-buttons .top-btn.active{ - background-color:var(--accented-background-color); - } + } .title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus { box-shadow: none; } - -
    +
    @@ -56,35 +51,11 @@ export default class TitleBarButtonsWidget extends BasicWidget { this.$widget = $(TPL); this.contentSized(); - - const $topBtn = this.$widget.find(".top-btn"); + const $minimizeBtn = this.$widget.find(".minimize-btn"); const $maximizeBtn = this.$widget.find(".maximize-btn"); const $closeBtn = this.$widget.find(".close-btn"); - // When the window is restarted, the window will not be reset when it is set to the top, - // so get the window status and set the icon background - setTimeout(() => { - const remote = utils.dynamicRequire('@electron/remote'); - if (remote.BrowserWindow.getFocusedWindow()?.isAlwaysOnTop()) { - $topBtn.addClass('active'); - } - }, 1000); - - $topBtn.on('click', () => { - $topBtn.trigger('blur'); - const remote = utils.dynamicRequire('@electron/remote'); - const focusedWindow = remote.BrowserWindow.getFocusedWindow(); - const isAlwaysOnTop = focusedWindow.isAlwaysOnTop() - if (isAlwaysOnTop) { - focusedWindow.setAlwaysOnTop(false) - $topBtn.removeClass('active'); - } else { - focusedWindow.setAlwaysOnTop(true); - $topBtn.addClass('active'); - } - }); - $minimizeBtn.on('click', () => { $minimizeBtn.trigger('blur'); const remote = utils.dynamicRequire('@electron/remote'); From 88a93e3a7be6076151e497ddd581ace5617c06ee Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:14:05 +0200 Subject: [PATCH 35/39] fix(native-buttons): regressions on mac --- src/public/app/desktop.js | 1 - src/public/app/layouts/desktop_layout.js | 7 ++++++- src/views/desktop.ejs | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index c07040a24..a848366cc 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -66,7 +66,6 @@ function initTitleBarButtons() { currentWindow.setTitleBarOverlay({ color, symbolColor }); } - // FIXME: call only on darwin if (window.glob.platform === "darwin") { const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10); const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10); diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index b9d20feae..04c4cef73 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -98,7 +98,12 @@ export default class DesktopLayout { const isMac = (window.glob.platform === "darwin"); const isWindows = (window.glob.platform === "win32"); const hasNativeTitleBar = (window.glob.hasNativeTitleBar); - const fullWidthTabBar = (launcherPaneIsHorizontal && !isMac); + + /** + * If true, the tab bar is displayed above the launcher pane with full width; if false (default), the tab bar is displayed in the rest pane. + * On macOS we need to force the full-width tab bar on Electron in order to allow the semaphore (window controls) enough space. + */ + const fullWidthTabBar = (launcherPaneIsHorizontal || (!hasNativeTitleBar && isMac)); const customTitleBarButtons = (hasNativeTitleBar && !isMac && !isWindows); return new RootContainer(true) diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 3e1ce7229..29afdcfd3 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -37,7 +37,7 @@ assetPath: "<%= assetPath %>", appPath: "<%= appPath %>", platform: "<%= platform %>", - hasNativeTitleBar: "<%= hasNativeTitleBar %>", + hasNativeTitleBar: <%= hasNativeTitleBar %>, TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %> }; From 0f48ccd53c8a6c636a14a138517b9a174f19c822 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:20:02 +0200 Subject: [PATCH 36/39] fix(native-buttons): regressions on server --- src/public/app/layouts/desktop_layout.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 04c4cef73..8d0a667a1 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -84,6 +84,7 @@ import CopyImageReferenceButton from "../widgets/floating_buttons/copy_image_ref import ScrollPaddingWidget from "../widgets/scroll_padding.js"; import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js"; import options from "../services/options.js"; +import utils from "../services/utils.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -95,6 +96,7 @@ export default class DesktopLayout { const launcherPaneIsHorizontal = (options.get("layoutOrientation") === "horizontal"); const launcherPane = this.#buildLauncherPane(launcherPaneIsHorizontal); + const isElectron = (utils.isElectron()); const isMac = (window.glob.platform === "darwin"); const isWindows = (window.glob.platform === "win32"); const hasNativeTitleBar = (window.glob.hasNativeTitleBar); @@ -103,7 +105,7 @@ export default class DesktopLayout { * If true, the tab bar is displayed above the launcher pane with full width; if false (default), the tab bar is displayed in the rest pane. * On macOS we need to force the full-width tab bar on Electron in order to allow the semaphore (window controls) enough space. */ - const fullWidthTabBar = (launcherPaneIsHorizontal || (!hasNativeTitleBar && isMac)); + const fullWidthTabBar = (launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac)); const customTitleBarButtons = (hasNativeTitleBar && !isMac && !isWindows); return new RootContainer(true) From fc9d06f876bd74ae006a086ade83d535fd93e41e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:27:53 +0200 Subject: [PATCH 37/39] fix(native-buttons): regression on windows --- src/public/stylesheets/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 11c86a12c..2b288029f 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1282,7 +1282,7 @@ textarea { color: var(--muted-text-color); } -body.electron:not(.native-titlebar) .tab-row-container { +body.electron.platform-darwin:not(.native-titlebar) .tab-row-container { padding-left: 2em; } @@ -1292,7 +1292,7 @@ body.electron:not(.native-titlebar) .tab-row-container { } .tab-row-container { - margin-right: calc(100vw, env(titlebar-area-width, 100vw)); + margin-right: calc(100vw - env(titlebar-area-width, 100vw)); } .tab-row-container .toggle-button { From 04cbb7ea0753db8a0725501fdbf2accc7a34cf58 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:31:17 +0200 Subject: [PATCH 38/39] style(native-buttons): smaller padding for macos --- src/public/stylesheets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 2b288029f..43c4ca590 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1283,7 +1283,7 @@ textarea { } body.electron.platform-darwin:not(.native-titlebar) .tab-row-container { - padding-left: 2em; + padding-left: 1em; } #tab-row-left-spacer { From 2d0e88b50399fa51df3d15129cb6ea83b649cc97 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:41:17 +0200 Subject: [PATCH 39/39] fix(native-buttons): watching for changes on other platforms than win32 --- src/public/app/desktop.js | 44 +++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index a848366cc..bad74c698 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -54,29 +54,29 @@ function initOnElectron() { } function initTitleBarButtons() { - function applyTitleBarOverlaySettings() { - const electronRemote = utils.dynamicRequire("@electron/remote"); - const currentWindow = electronRemote.getCurrentWindow(); + const electronRemote = utils.dynamicRequire("@electron/remote"); + const currentWindow = electronRemote.getCurrentWindow(); + const style = window.getComputedStyle(document.body); + + if (window.glob.platform === "win32") { + const applyWindowsOverlay = () => { + const color = style.getPropertyValue("--native-titlebar-background"); + const symbolColor = style.getPropertyValue("--native-titlebar-foreground"); + if (color && symbolColor) { + currentWindow.setTitleBarOverlay({ color, symbolColor }); + } + }; - const style = window.getComputedStyle(document.body); - const color = style.getPropertyValue("--native-titlebar-background"); - const symbolColor = style.getPropertyValue("--native-titlebar-foreground"); + applyWindowsOverlay(); - if (window.glob.platform === "win32" && color && symbolColor) { - currentWindow.setTitleBarOverlay({ color, symbolColor }); - } - - if (window.glob.platform === "darwin") { - const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10); - const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10); - currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset }); - } + // Register for changes to the native title bar colors. + window.matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", applyWindowsOverlay); } - - // Update the native title bar buttons. - applyTitleBarOverlaySettings(); - - // Register for changes to the native title bar colors. - window.matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", applyTitleBarOverlaySettings); + + if (window.glob.platform === "darwin") { + const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10); + const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10); + currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset }); + } }