leaflet.pub
a tool for shared writing and social publishing
fixed button block layout weirdness, added an ative state to text alignment toolbar
cozylittle.house
+28
-13
+2
-2
components/Blocks/Block.tsx
+2
-2
components/Blocks/Block.tsx
···
351
351
};
352
352
353
353
export const BlockLayout = (props: {
354
-
isSelected?: boolean;
354
+
isSelected: boolean;
355
355
children: React.ReactNode;
356
356
className?: string;
357
357
optionsClassName?: string;
···
368
368
>
369
369
<div
370
370
className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden
371
-
${props.hasAlignment ? "w-fit" : "w-full"}
371
+
${props.hasAlignment ? "w-fit" : "w-full"}
372
372
${props.isSelected ? "block-border-selected " : "block-border"}
373
373
${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`}
374
374
style={{
+18
-11
components/Blocks/ButtonBlock.tsx
+18
-11
components/Blocks/ButtonBlock.tsx
···
32
32
let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
33
33
34
34
return (
35
-
<a
36
-
href={url?.data.value}
37
-
target="_blank"
38
-
className={`relative hover:outline-accent-contrast rounded-md! ${alignment === "justify" && "w-full"} ${isSelected ? "block-border-selected border-0!" : "block-border border-transparent! border-0!"}`}
35
+
<BlockLayout
36
+
isSelected={!!isSelected}
37
+
borderOnHover
38
+
hasAlignment={alignment !== "justify"}
39
+
className={`p-0! rounded-md! border-none!`}
39
40
>
40
-
<ButtonPrimary
41
-
role="link"
42
-
type="submit"
43
-
fullWidth={alignment === "justify"}
41
+
<a
42
+
href={url?.data.value}
43
+
target="_blank"
44
+
className={` ${alignment === "justify" ? "w-full" : "w-fit"}`}
44
45
>
45
-
{text?.data.value}
46
-
</ButtonPrimary>
47
-
</a>
46
+
<ButtonPrimary
47
+
role="link"
48
+
type="submit"
49
+
fullWidth={alignment === "justify"}
50
+
>
51
+
{text?.data.value}
52
+
</ButtonPrimary>
53
+
</a>
54
+
</BlockLayout>
48
55
);
49
56
};
50
57
+8
components/Toolbar/TextAlignmentToolbar.tsx
+8
components/Toolbar/TextAlignmentToolbar.tsx
···
7
7
export function TextAlignmentToolbar() {
8
8
let focusedBlock = useUIState((s) => s.focusedEntity);
9
9
let { rep } = useReplicache();
10
+
let alignment = useEntity(
11
+
focusedBlock?.entityID || null,
12
+
"block/text-alignment",
13
+
)?.data.value;
10
14
let setAlignment = useCallback(
11
15
(alignment: Fact<"block/text-alignment">["data"]["value"]) => {
12
16
let blocks = useUIState.getState().selectedBlocks;
···
26
30
<ToolbarButton
27
31
onClick={() => setAlignment("left")}
28
32
tooltipContent="Align Left"
33
+
active={alignment === "left"}
29
34
>
30
35
<AlignLeftSmall />
31
36
</ToolbarButton>
32
37
<ToolbarButton
33
38
onClick={() => setAlignment("center")}
34
39
tooltipContent="Align Center"
40
+
active={alignment === "center"}
35
41
>
36
42
<AlignCenterSmall />
37
43
</ToolbarButton>
38
44
<ToolbarButton
39
45
onClick={() => setAlignment("right")}
40
46
tooltipContent="Align Right"
47
+
active={alignment === "right"}
41
48
>
42
49
<AlignRightSmall />
43
50
</ToolbarButton>
···
45
52
<ToolbarButton
46
53
onClick={() => setAlignment("justify")}
47
54
tooltipContent="Align Justified"
55
+
active={alignment === "justify"}
48
56
>
49
57
<AlignJustifiedSmall />
50
58
</ToolbarButton>