Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-24 13:37:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(native-buttons): differentiate background based on layout

Browse Source
This commit is contained in:
Elian Doran 2024-12-01 21:06:01 +02:00
parent e933b8d5c8
commit 8135fa09c3
No known key found for this signature in database
5 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/public/app/desktop.js
View File

@ -57,10 +57,14 @@ function initTitleBarButtons() {
function applyTitleBarOverlaySettings() { function applyTitleBarOverlaySettings() {
const electronRemote = utils.dynamicRequire("@electron/remote"); const electronRemote = utils.dynamicRequire("@electron/remote");
const currentWindow = electronRemote.getCurrentWindow(); const currentWindow = electronRemote.getCurrentWindow();
const documentStyle = window.getComputedStyle(document.documentElement);
const color = documentStyle.getPropertyValue("--native-titlebar-background"); const style = window.getComputedStyle(document.body);
const symbolColor = documentStyle.getPropertyValue("--native-titlebar-foreground"); const color = style.getPropertyValue("--native-titlebar-background");
currentWindow.setTitleBarOverlay({ color, symbolColor }); const symbolColor = style.getPropertyValue("--native-titlebar-foreground");
if (color && symbolColor) {
currentWindow.setTitleBarOverlay({ color, symbolColor });
}
} }
// Update the native title bar buttons. // Update the native title bar buttons.

11
src/public/stylesheets/style.css
View File

@ -20,9 +20,7 @@
} }
:root { :root {
--submenu-opening-delay: 300ms; --submenu-opening-delay: 300ms;
--native-titlebar-background: var(--left-pane-background-color);
--native-titlebar-foreground: var(--main-text-color);
} }
html { html {
@ -40,6 +38,13 @@ body {
color: var(--main-text-color); color: var(--main-text-color);
font-family: var(--main-font-family); font-family: var(--main-font-family);
font-size: var(--main-font-size); 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 { body.mobile .desktop-only {

12
src/public/stylesheets/theme-next.css
View File

@ -347,7 +347,7 @@
background-color: var(--root-background); background-color: var(--root-background);
} }
#root-widget.horizontal-layout { body.layout-horizontal {
--launcher-pane-background-color: var(--launcher-pane-horizontal-background-color); --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color);
--launcher-pane-size: var(--launcher-pane-horizontal-size); --launcher-pane-size: var(--launcher-pane-horizontal-size);
--active-tab-background-color: var(--launcher-pane-background-color); --active-tab-background-color: var(--launcher-pane-background-color);
@ -369,7 +369,7 @@
* Launcher pane * Launcher pane
*/ */
#launcher-container, #launcher-container,
#root-widget.horizontal-layout > .horizontal { body.layout-horizontal > .horizontal {
align-items: center; align-items: center;
} }
@ -687,7 +687,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
position: relative; position: relative;
} }
#root-widget.horizontal-layout .tab-row-container:after { body.layout-horizontal .tab-row-container:after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -702,11 +702,11 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
height: var(--tab-height) !important; 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))); 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; margin-top: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -722,7 +722,7 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
transition: none; 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-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }

1
src/routes/index.ts
View File

@ -32,6 +32,7 @@ function index(req: Request, res: Response) {
csrfToken: csrfToken, csrfToken: csrfToken,
themeCssUrl: getThemeCssUrl(options.theme), themeCssUrl: getThemeCssUrl(options.theme),
headingStyle: options.headingStyle, headingStyle: options.headingStyle,
layoutOrientation: options.layoutOrientation,
mainFontSize: parseInt(options.mainFontSize), mainFontSize: parseInt(options.mainFontSize),
treeFontSize: parseInt(options.treeFontSize), treeFontSize: parseInt(options.treeFontSize),
detailFontSize: parseInt(options.detailFontSize), detailFontSize: parseInt(options.detailFontSize),

2
src/views/desktop.ejs
View File

@ -6,7 +6,7 @@
<link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest"> <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
<title>TriliumNext Notes</title> <title>TriliumNext Notes</title>
</head> </head>
<body class="desktop heading-style-<%= headingStyle %>"> <body class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %>">
<noscript><%= t("javascript-required") %></noscript> <noscript><%= t("javascript-required") %></noscript>
<script> <script>