leaflet.pub
a tool for shared writing and social publishing
minor fixes to button block, implement a full wdith mode
cozylittle.house
+24
-4
+24
-4
components/Blocks/ButtonBlock.tsx
+24
-4
components/Blocks/ButtonBlock.tsx
···
29
29
if (!permissions.write) return null;
30
30
return <ButtonBlockSettings {...props} />;
31
31
}
32
+
let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
32
33
33
34
return (
34
35
<a
35
36
href={url?.data.value}
36
37
target="_blank"
37
-
className={`hover:outline-accent-contrast rounded-md! ${isSelected ? "block-border-selected border-0!" : "block-border border-transparent! border-0!"}`}
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!"}`}
38
39
>
39
-
<ButtonPrimary role="link" type="submit">
40
+
<ButtonPrimary
41
+
role="link"
42
+
type="submit"
43
+
fullWidth={alignment === "justify"}
44
+
>
40
45
{text?.data.value}
41
46
</ButtonPrimary>
42
47
</a>
···
57
62
let [urlValue, setUrlValue] = useState("");
58
63
let text = textValue;
59
64
let url = urlValue;
65
+
let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
60
66
61
67
let submit = async () => {
62
68
let entity = props.entityID;
···
106
112
};
107
113
108
114
return (
109
-
<div className="buttonBlockSettingsWrapper flex flex-col gap-2 w-full ">
110
-
<ButtonPrimary className="mx-auto">
115
+
<div
116
+
className={`buttonBlockSettingsWrapper flex flex-col gap-2 w-full
117
+
`}
118
+
>
119
+
<ButtonPrimary
120
+
className={`relative ${
121
+
alignment === "center"
122
+
? "place-self-center"
123
+
: alignment === "left"
124
+
? "place-self-start"
125
+
: alignment === "right"
126
+
? "place-self-end"
127
+
: "place-self-center"
128
+
}`}
129
+
fullWidth={alignment === "justify"}
130
+
>
111
131
{text !== "" ? text : "Button"}
112
132
</ButtonPrimary>
113
133
<BlockLayout