gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-06 15:26:08 +01:00
Code Issues Actions 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; border-radius: 1em;
min-width: 0; min-width: 0;
&.active {
outline: 4px solid var(--more-accented-background-color);
background: var(--card-background-hover-color);
.title {
font-weight: bold;
}
}
header { header {
padding: 0.5em 1em; padding: 0.5em 1em;
border-bottom: 1px solid var(--main-border-color); 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 { t } from "../../services/i18n";
import { NoteContent } from "../collections/legacy/ListOrGridView"; import { NoteContent } from "../collections/legacy/ListOrGridView";
import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets"; import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
import { useTriliumEvent } from "../react/hooks"; import { useActiveNoteContext, useTriliumEvent } from "../react/hooks";
import Modal from "../react/Modal"; import Modal from "../react/Modal";
export default function TabSwitcher() { export default function TabSwitcher() {
@ -53,25 +53,34 @@ function TabBarModelContent({ selectTab }: {
selectTab: (noteContextToActivate: NoteContext) => void; selectTab: (noteContextToActivate: NoteContext) => void;
}) { }) {
const mainNoteContexts = useMainNoteContexts(); const mainNoteContexts = useMainNoteContexts();
const activeNoteContext = useActiveNoteContext();
return ( return (
<div className="tabs"> <div className="tabs">
{mainNoteContexts.map((noteContext) => ( {mainNoteContexts.map((noteContext) => (
<Tab key={noteContext.ntxId} noteContext={noteContext} selectTab={selectTab} /> <Tab
key={noteContext.ntxId}
noteContext={noteContext}
activeNtxId={activeNoteContext.ntxId}
selectTab={selectTab}
/>
))} ))}
</div> </div>
); );
} }
function Tab({ noteContext, selectTab }: { function Tab({ noteContext, selectTab, activeNtxId }: {
noteContext: NoteContext; noteContext: NoteContext;
selectTab: (noteContextToActivate: NoteContext) => void; selectTab: (noteContextToActivate: NoteContext) => void;
activeNtxId: string | null | undefined;
}) { }) {
const { note } = noteContext; const { note } = noteContext;
return ( return (
<div <div
class="tab-card" class={clsx("tab-card", {
active: noteContext.ntxId === activeNtxId
})}
onClick={() => selectTab(noteContext)} onClick={() => selectTab(noteContext)}
> >
<header> <header>