Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-23 21:17:11 +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() {
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.

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

@ -21,8 +21,6 @@
:root {
--submenu-opening-delay: 300ms;
--native-titlebar-background: var(--left-pane-background-color);
--native-titlebar-foreground: var(--main-text-color);
}
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 {

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

@ -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;
}

1
src/routes/index.ts
View File

@ -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),

2
src/views/desktop.ejs
View File

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