mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-18 11:46:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Make Toolbar icons use filled versions if active

Browse source
This commit is contained in:
Verbiturum 2024-12-14 07:00:31 +02:00
parent 00d5553bcb
commit 17bcd089d2
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/components/editor/Toolbar.tsx
View file

@ -58,6 +58,7 @@ type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
const editor = useSlate();
const disableInline = isBlockActive(editor, BlockType.CodeBlock);
const isActive = isMarkActive(editor, format);
if (disableInline) {
removeAllMark(editor);
@ -75,12 +76,12 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
ref={triggerRef}
variant="SurfaceVariant"
onClick={handleClick}
aria-pressed={isMarkActive(editor, format)}
aria-pressed={isActive}
size="400"
radii="300"
disabled={disableInline}
>
<Icon size="200" src={icon} />
<Icon size="200" src={icon} filled={isActive} />
</IconButton>
)}
</TooltipProvider>
@ -94,6 +95,7 @@ type BlockButtonProps = {
};
export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
const editor = useSlate();
const isActive = isBlockActive(editor, format);
const handleClick = () => {
toggleBlock(editor, format, { level: 1 });
@ -107,11 +109,11 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
ref={triggerRef}
variant="SurfaceVariant"
onClick={handleClick}
aria-pressed={isBlockActive(editor, format)}
aria-pressed={isActive}
size="400"
radii="300"
>
<Icon size="200" src={icon} />
<Icon size="200" src={icon} filled={isActive} />
</IconButton>
)}
</TooltipProvider>
@ -215,7 +217,11 @@ export function HeadingBlockButton() {
size="400"
radii="300"
>
<Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
<Icon
size="200"
src={level ? Icons[`Heading${level}`] : Icons.Heading1}
filled={isActive}
/>
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
</PopOut>