Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-15 17:55:52 +01:00
Code Issues Packages Projects Releases Activity

feat(react/widgets): port title bar buttons

Browse Source
This commit is contained in:
Elian Doran
2025-08-29 19:09:40 +03:00
parent 4074929c6b
commit 3fd7afbb57
4 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/client/src/widgets/title_bar_buttons.css Normal file
View File

@@ -0,0 +1,30 @@
.component.title-bar-buttons {
flex-shrink: 0;
contain: none;
}
.title-bar-buttons div button {
border: none !important;
border-radius: 0;
background: none !important;
font-size: 150%;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.title-bar-buttons div:hover button {
background-color: var(--accented-background-color) !important;
}
.title-bar-buttons div {
display: inline-block;
height: 40px;
width: 40px;
}
.title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus {
box-shadow: none;
}

82
apps/client/src/widgets/title_bar_buttons.ts
View File

@@ -1,82 +0,0 @@
import BasicWidget from "./basic_widget.js";
import options from "../services/options.js";
import utils from "../services/utils.js";
const TPL = /*html*/`
<div class="title-bar-buttons">
<style>
.title-bar-buttons {
flex-shrink: 0;
}
.title-bar-buttons div button {
border: none !important;
border-radius: 0;
background: none !important;
font-size: 150%;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.title-bar-buttons div:hover button {
background-color: var(--accented-background-color) !important;
}
.title-bar-buttons div {
display: inline-block;
height: 40px;
width: 40px;
}
.title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus {
box-shadow: none;
}
</style>
<!-- divs act as a hitbox for the buttons, making them clickable on corners -->
<div class="minimize-btn"><button class="btn bx bx-minus"></button></div>
<div class="maximize-btn"><button class="btn bx bx-checkbox"></button></div>
<div class="close-btn"><button class="btn bx bx-x"></button></div>
</div>`;
export default class TitleBarButtonsWidget extends BasicWidget {
doRender() {
if (!utils.isElectron() || options.is("nativeTitleBarVisible")) {
return (this.$widget = $("<div>"));
}
this.$widget = $(TPL);
this.contentSized();
const $minimizeBtn = this.$widget.find(".minimize-btn");
const $maximizeBtn = this.$widget.find(".maximize-btn");
const $closeBtn = this.$widget.find(".close-btn");
$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();
});
}
}

63
apps/client/src/widgets/title_bar_buttons.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { dynamicRequire, isElectron } from "../services/utils";
import { useTriliumOption } from "./react/hooks";
import "./title_bar_buttons.css";
import type { BrowserWindow } from "electron";
interface TitleBarButtonProps {
className: string;
icon: string;
onClick: (context: {
window: BrowserWindow
}) => void;
}
export default function TitleBarButtons() {
const [ nativeTitleBarVisible ] = useTriliumOption("nativeTitleBarVisible");
const isEnabled = (isElectron() && nativeTitleBarVisible);
return (
<div className="title-bar-buttons">
{isEnabled && (
<>
<TitleBarButton
className="minimize-btn"
icon="bx bx-minus"
onClick={({ window }) => window.minimize()}
/>
<TitleBarButton
className="maximize-btn"
icon="bx bx-checkbox"
onClick={({ window }) => {
if (window.isMaximized()) {
window.unmaximize();
} else {
window.maximize();
}
}}
/>
<TitleBarButton
className="close-btn"
icon="bx bx-x"
onClick={({ window }) => window.close()}
/>
</>
)}
</div>
)
}
function TitleBarButton({ className, icon, onClick }: TitleBarButtonProps) {
// divs act as a hitbox for the buttons, making them clickable on corners
return (
<div className={className}>
<button className={`btn ${icon}`} onClick={() => {
const remote = dynamicRequire("@electron/remote");
const focusedWindow = remote.BrowserWindow.getFocusedWindow();
if (!focusedWindow) return;
onClick({ window: focusedWindow });
}} />
</div>
);
}