Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 07:37:24 +02:00
Code Issues Packages Projects Releases Activity

feat(markdown): improve display mode selector on mobile

Browse Source
This commit is contained in:
Elian Doran
2026-04-17 20:38:35 +03:00
parent 0335ece20b
commit 80aac52066
2 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/client/src/widgets/ribbon/NoteActionsCustom.css
View File

@@ -2,3 +2,30 @@ body.mobile .note-actions-custom:not(:empty) {
margin-bottom: calc(var(--bs-dropdown-divider-margin-y) * 2);
}
body.mobile .note-actions-custom-display-mode {
display: grid;
grid-template-columns: repeat(3, 1fr);
& > .dropdown-item {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.25em;
padding-inline: 0.25em;
font-size: 0.85em;
border-radius: 0 !important;
border: 0 !important;
}
& > .dropdown-item:first-child {
border-start-start-radius: var(--bs-border-radius) !important;
border-end-start-radius: var(--bs-border-radius) !important;
}
& > .dropdown-item:last-child {
border-start-end-radius: var(--bs-border-radius) !important;
border-end-end-radius: var(--bs-border-radius) !important;
}
}

24
apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
View File

@@ -218,17 +218,19 @@ function DisplayModeSwitcher({ note, isDefaultViewMode }: NoteActionsCustomInner
];
if (cachedIsMobile) {
return <>
{buttons.map(({ value, icon, text }) => (
<NoteAction
key={value}
icon={icon}
text={text}
active={mode === value}
onClick={() => setDisplayMode(value)}
/>
))}
</>;
return (
<div className="note-actions-custom-display-mode">
{buttons.map(({ value, icon, text }) => (
<NoteAction
key={value}
icon={icon}
text={text}
active={mode === value}
onClick={() => setDisplayMode(value)}
/>
))}
</div>
);
}
return (