mirror of
https://github.com/zadam/trilium.git
synced 2025-12-12 18:34:24 +01:00
feat(note_bars): add icons to view type switcher
This commit is contained in:
parent
0eed72b888
commit
b540111fa4
@ -2,8 +2,19 @@ import FNote from "../../entities/fnote";
|
|||||||
import { ViewTypeOptions } from "../collections/interface";
|
import { ViewTypeOptions } from "../collections/interface";
|
||||||
import Dropdown from "../react/Dropdown";
|
import Dropdown from "../react/Dropdown";
|
||||||
import { FormListItem } from "../react/FormList";
|
import { FormListItem } from "../react/FormList";
|
||||||
|
import Icon from "../react/Icon";
|
||||||
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
|
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
|
||||||
|
|
||||||
|
const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
|
||||||
|
grid: "bx bxs-grid",
|
||||||
|
list: "bx bx-list-ul",
|
||||||
|
calendar: "bx bx-calendar",
|
||||||
|
table: "bx bx-table",
|
||||||
|
geoMap: "bx bx-map-alt",
|
||||||
|
board: "bx bx-columns",
|
||||||
|
presentation: "bx bx-rectangle"
|
||||||
|
};
|
||||||
|
|
||||||
export default function CollectionProperties({ note }: { note: FNote }) {
|
export default function CollectionProperties({ note }: { note: FNote }) {
|
||||||
return (
|
return (
|
||||||
<ViewTypeSwitcher note={note} />
|
<ViewTypeSwitcher note={note} />
|
||||||
@ -15,13 +26,18 @@ function ViewTypeSwitcher({ note }: { note: FNote }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
text={VIEW_TYPE_MAPPINGS[viewType as ViewTypeOptions ?? "grid"]}
|
text={<>
|
||||||
|
<Icon icon={ICON_MAPPINGS[viewType]} />
|
||||||
|
{VIEW_TYPE_MAPPINGS[viewType]}
|
||||||
|
</>}
|
||||||
>
|
>
|
||||||
{Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => (
|
{Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => (
|
||||||
<FormListItem
|
<FormListItem
|
||||||
key={key}
|
key={key}
|
||||||
onClick={() => setViewType(key)}
|
onClick={() => setViewType(key)}
|
||||||
checked={viewType === key}
|
selected={viewType === key}
|
||||||
|
disabled={viewType === key}
|
||||||
|
icon={ICON_MAPPINGS[key as ViewTypeOptions]}
|
||||||
>{label}</FormListItem>
|
>{label}</FormListItem>
|
||||||
))}
|
))}
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user