gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-04 14:34:24 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

refactor(react/launch_bar): extract dropdown & button style

Browse Source
This commit is contained in:
Elian Doran 2025-12-04 14:46:23 +02:00
parent cdab86bd83
commit a83f20e454
No known key found for this signature in database
3 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
View File

@ -1,16 +1,13 @@
import { useMemo } from "preact/hooks"; import { useMemo } from "preact/hooks";
import type { LaunchBarWidgetProps } from "./launch_bar_widget"; import { LaunchBarActionButton, LaunchBarDropdownButton, type LaunchBarWidgetProps } from "./launch_bar_widgets";
import { CSSProperties } from "preact"; import { CSSProperties } from "preact";
import type FNote from "../../entities/fnote"; import type FNote from "../../entities/fnote";
import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks"; import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
import ActionButton from "../react/ActionButton";
import appContext from "../../components/app_context"; import appContext from "../../components/app_context";
import { escapeHtml, isCtrlKey } from "../../services/utils"; import { escapeHtml, isCtrlKey } from "../../services/utils";
import link_context_menu from "../../menus/link_context_menu"; import link_context_menu from "../../menus/link_context_menu";
import "./BookmarkButtons.css"; import "./BookmarkButtons.css";
import Dropdown from "../react/Dropdown";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import NoteList from "../react/NoteList";
import NoteLink from "../react/NoteLink"; import NoteLink from "../react/NoteLink";
const PARENT_NOTE_ID = "_lbBookmarks"; const PARENT_NOTE_ID = "_lbBookmarks";
@ -57,12 +54,9 @@ function OpenNoteButtonWidget({ note }: { note: FNote }) {
} }
return title && iconClass && ( return title && iconClass && (
<ActionButton <LaunchBarActionButton
icon={iconClass} icon={iconClass}
text={escapeHtml(title)} text={escapeHtml(title)}
className="button-widget launcher-button"
noIconActionClass
titlePosition="right"
onClick={launch} onClick={launch}
onAuxClick={launch} onAuxClick={launch}
onContextMenu={evt => { onContextMenu={evt => {
@ -79,10 +73,7 @@ function BookmarkFolder({ note }: { note: FNote }) {
const childNotes = useChildNotes(note.noteId); const childNotes = useChildNotes(note.noteId);
return title && iconClass && ( return title && iconClass && (
<Dropdown <LaunchBarDropdownButton
className="right-dropdown-widget"
buttonClassName="right-dropdown-button launcher-button"
hideToggleArrow
title={escapeHtml(title)} title={escapeHtml(title)}
text={<Icon icon={iconClass} />} text={<Icon icon={iconClass} />}
> >
@ -99,7 +90,7 @@ function BookmarkFolder({ note }: { note: FNote }) {
))} ))}
</ul> </ul>
</div> </div>
</Dropdown> </LaunchBarDropdownButton>
) )
} }

3
apps/client/src/widgets/launch_bar/launch_bar_widget.ts
View File

@ -1,3 +0,0 @@
export interface LaunchBarWidgetProps {
isHorizontalLayout: boolean;
}

28
apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx Normal file
View File

@ -0,0 +1,28 @@
import ActionButton, { ActionButtonProps } from "../react/ActionButton";
import Dropdown, { DropdownProps } from "../react/Dropdown";
export interface LaunchBarWidgetProps {
isHorizontalLayout: boolean;
}
export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className" | "noIconActionClass" | "titlePosition">) {
return (
<ActionButton
className="button-widget launcher-button"
noIconActionClass
titlePosition="right"
{...props}
/>
)
}
export function LaunchBarDropdownButton({ children, ...props }: Pick<DropdownProps, "title" | "text" | "children">) {
return (
<Dropdown
className="right-dropdown-widget"
buttonClassName="right-dropdown-button launcher-button"
hideToggleArrow
{...props}
>{children}</Dropdown>
)
}