gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-03 20:34:24 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

feat(mobile/tab_switcher): display number of tabs in launch bar

Browse Source
This commit is contained in:
Elian Doran 2026-01-31 19:19:39 +02:00
parent b6f107b85b
commit e8158aadec
No known key found for this signature in database
4 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
View File

@ -1,3 +1,4 @@
import clsx from "clsx";
import { createContext } from "preact";
import { useContext } from "preact/hooks";
@ -18,12 +19,12 @@ export interface LauncherNoteProps {
launcherNote: FNote;
}
export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className" | "noIconActionClass" | "titlePosition">) {
export function LaunchBarActionButton({ className, ...props }: Omit<ActionButtonProps, "noIconActionClass" | "titlePosition">) {
const { isHorizontalLayout } = useContext(LaunchBarContext);
return (
<ActionButton
className="button-widget launcher-button"
className={clsx("button-widget launcher-button", className)}
noIconActionClass
titlePosition={isHorizontalLayout ? "bottom" : "right"}
{...props}

14
apps/client/src/widgets/mobile_widgets/TabSwitcher.css
View File

@ -1,3 +1,17 @@
#launcher-container .mobile-tab-switcher {
position: relative;
&::after {
content: attr(data-tab-count);
font-family: var(--main-font-family);
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.modal.tab-bar-modal {
.modal-dialog {
height: 100%;

9
apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
View File

@ -18,25 +18,28 @@ import Modal from "../react/Modal";
export default function TabSwitcher() {
const [ shown, setShown ] = useState(true);
const mainNoteContexts = useMainNoteContexts();
return (
<>
<LaunchBarActionButton
className="mobile-tab-switcher"
icon="bx bx-rectangle"
text="Tabs"
onClick={() => setShown(true)}
data-tab-count={mainNoteContexts.length > 99 ? "∞" : mainNoteContexts.length}
/>
{createPortal(<TabBarModal shown={shown} setShown={setShown} />, document.body)}
{createPortal(<TabBarModal mainNoteContexts={mainNoteContexts} shown={shown} setShown={setShown} />, document.body)}
</>
);
}
function TabBarModal({ shown, setShown }: {
function TabBarModal({ mainNoteContexts, shown, setShown }: {
mainNoteContexts: NoteContext[];
shown: boolean;
setShown: (newValue: boolean) => void;
}) {
const [ fullyShown, setFullyShown ] = useState(false);
const mainNoteContexts = useMainNoteContexts();
const selectTab = useCallback((noteContextToActivate: NoteContext) => {
appContext.tabManager.activateNoteContext(noteContextToActivate.ntxId);
setShown(false);

11
apps/client/src/widgets/react/ActionButton.tsx
View File

@ -1,10 +1,11 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks";
import keyboard_actions from "../../services/keyboard_actions";
import { HTMLAttributes } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu"> {
import { CommandNames } from "../../components/app_context";
import keyboard_actions from "../../services/keyboard_actions";
import { useStaticTooltip } from "./hooks";
export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu" | "style"> {
text: string;
titlePosition?: "top" | "right" | "bottom" | "left";
icon: string;