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

feat(mobile/tab_switcher): indicate active tab

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

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

@ -14,6 +14,15 @@
border-radius: 1em;
min-width: 0;
&.active {
outline: 4px solid var(--more-accented-background-color);
background: var(--card-background-hover-color);
.title {
font-weight: bold;
}
}
header {
padding: 0.5em 1em;
border-bottom: 1px solid var(--main-border-color);

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

@ -9,7 +9,7 @@ import NoteContext from "../../components/note_context";
import { t } from "../../services/i18n";
import { NoteContent } from "../collections/legacy/ListOrGridView";
import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
import { useTriliumEvent } from "../react/hooks";
import { useActiveNoteContext, useTriliumEvent } from "../react/hooks";
import Modal from "../react/Modal";
export default function TabSwitcher() {
@ -53,25 +53,34 @@ function TabBarModelContent({ selectTab }: {
selectTab: (noteContextToActivate: NoteContext) => void;
}) {
const mainNoteContexts = useMainNoteContexts();
const activeNoteContext = useActiveNoteContext();
return (
<div className="tabs">
{mainNoteContexts.map((noteContext) => (
<Tab key={noteContext.ntxId} noteContext={noteContext} selectTab={selectTab} />
<Tab
key={noteContext.ntxId}
noteContext={noteContext}
activeNtxId={activeNoteContext.ntxId}
selectTab={selectTab}
/>
))}
</div>
);
}
function Tab({ noteContext, selectTab }: {
function Tab({ noteContext, selectTab, activeNtxId }: {
noteContext: NoteContext;
selectTab: (noteContextToActivate: NoteContext) => void;
activeNtxId: string | null | undefined;
}) {
const { note } = noteContext;
return (
<div
class="tab-card"
class={clsx("tab-card", {
active: noteContext.ntxId === activeNtxId
})}
onClick={() => selectTab(noteContext)}
>
<header>