gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-05 21:34:23 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

feat(mobile/tab_switcher): click to activate

Browse Source
This commit is contained in:
Elian Doran 2026-01-31 17:13:36 +02:00
parent 96fa6eac44
commit 4285fd7708
No known key found for this signature in database
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,8 @@
height: 180px;
overflow: hidden;
font-size: 0.5em;
user-select: none;
pointer-events: none;
&.type-text {
padding: 10px;

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

@ -2,7 +2,7 @@ import "./TabSwitcher.css";
import clsx from "clsx";
import { createPortal } from "preact/compat";
import { useEffect, useState } from "preact/hooks";
import { useCallback, useState } from "preact/hooks";
import appContext from "../../components/app_context";
import NoteContext from "../../components/note_context";
@ -31,6 +31,11 @@ function TabBarModal({ shown, setShown }: {
shown: boolean;
setShown: (newValue: boolean) => void;
}) {
const selectTab = useCallback((noteContextToActivate: NoteContext) => {
appContext.tabManager.activateNoteContext(noteContextToActivate.ntxId);
setShown(false);
}, [ setShown ]);
return (
<Modal
className="tab-bar-modal"
@ -39,30 +44,36 @@ function TabBarModal({ shown, setShown }: {
show={shown}
onHidden={() => setShown(false)}
>
<TabBarModelContent />
<TabBarModelContent selectTab={selectTab} />
</Modal>
);
}
function TabBarModelContent() {
function TabBarModelContent({ selectTab }: {
selectTab: (noteContextToActivate: NoteContext) => void;
}) {
const mainNoteContexts = useMainNoteContexts();
return (
<div className="tabs">
{mainNoteContexts.map((noteContext) => (
<Tab key={noteContext.ntxId} noteContext={noteContext} />
<Tab key={noteContext.ntxId} noteContext={noteContext} selectTab={selectTab} />
))}
</div>
);
}
function Tab({ noteContext }: {
function Tab({ noteContext, selectTab }: {
noteContext: NoteContext;
selectTab: (noteContextToActivate: NoteContext) => void;
}) {
const { note } = noteContext;
return (
<div class="tab-card">
<div
class="tab-card"
onClick={() => selectTab(noteContext)}
>
<header>
<span className="title">{noteContext.note?.title ?? t("tab_row.new_tab")}</span>
</header>