feat(note_bars): add icons to view type switcher

This commit is contained in:
Elian Doran 2025-12-11 18:59:28 +02:00
parent 0eed72b888
commit b540111fa4
No known key found for this signature in database

View File

@ -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]} />&nbsp;
{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>