gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki 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
No known key found for this signature in database
4 changed files with 96 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/layouts/desktop_layout.tsx
View File

@ -1,6 +1,5 @@
import FlexContainer from "../widgets/containers/flex_container.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.jsx";
@ -42,6 +41,7 @@ import SearchResult from "../widgets/search_result.jsx";
import GlobalMenu from "../widgets/buttons/global_menu.jsx";
import SqlResults from "../widgets/sql_result.js";
import SqlTableSchemas from "../widgets/sql_table_schemas.js";
import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
export default class DesktopLayout {
@ -78,7 +78,7 @@ export default class DesktopLayout {
.child(new FlexContainer("row").id("tab-row-left-spacer"))
.optChild(launcherPaneIsHorizontal, new LeftPaneToggleWidget(true))
.child(new TabRowWidget().class("full-width"))
.optChild(customTitleBarButtons, new TitleBarButtonsWidget())
.optChild(customTitleBarButtons, <TitleBarButtons />)
.css("height", "40px")
.css("background-color", "var(--launcher-pane-background-color)")
.setParent(appContext)
@ -99,7 +99,7 @@ export default class DesktopLayout {
new FlexContainer("column")
.id("rest-pane")
.css("flex-grow", "1")
.optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, new TitleBarButtonsWidget()).css("height", "40px"))
.optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, <TitleBarButtons />).css("height", "40px"))
.child(
new FlexContainer("row")
.filling()

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