a tool for shared writing and social publishing
disable page and bgimage theme options when page borders are hidden
+21
-8
+8
-4
components/ThemeManager/ColorPicker.tsx
+8
-4
components/ThemeManager/ColorPicker.tsx
···
29
29
thisPicker: pickers;
30
30
setOpenPicker: (thisPicker: pickers) => void;
31
31
closePicker: () => void;
32
+
disabled?: boolean;
32
33
children?: React.ReactNode;
33
34
}) => {
34
35
return (
···
36
37
<div className="flex flex-col w-full gap-2">
37
38
<div className="colorPickerLabel flex gap-2 items-center ">
38
39
<button
39
-
className="flex gap-2 items-center "
40
+
disabled={props.disabled}
41
+
className="flex gap-2 items-center disabled:text-tertiary"
40
42
onClick={() => {
41
43
if (props.openPicker === props.thisPicker) {
42
44
props.setOpenPicker("null");
···
47
49
>
48
50
<ColorSwatch
49
51
color={props.value}
50
-
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`}
52
+
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C] ${props.disabled ? "opacity-50" : ""}`}
51
53
style={{
52
54
backgroundSize: "cover",
53
55
}}
···
61
63
) : (
62
64
<ColorField className="w-fit gap-1">
63
65
<Input
66
+
disabled={props.disabled}
64
67
onMouseDown={onMouseDown}
65
68
onFocus={(e) => {
66
69
e.currentTarget.setSelectionRange(
···
76
79
onBlur={(e) => {
77
80
props.setValue(parseColor(e.currentTarget.value));
78
81
}}
79
-
className="w-[72px] bg-transparent outline-none"
82
+
className="w-[72px] bg-transparent outline-none disabled:text-tertiary"
80
83
/>
81
84
</ColorField>
82
85
)}
···
85
88
<Separator classname="my-1" />
86
89
<ColorField className="w-fit pl-[6px]" channel="alpha">
87
90
<Input
91
+
disabled={props.disabled}
88
92
onMouseDown={onMouseDown}
89
93
onFocus={(e) => {
90
94
e.currentTarget.setSelectionRange(
···
97
101
e.currentTarget.blur();
98
102
} else return;
99
103
}}
100
-
className="w-[72px] bg-transparent outline-none text-primary"
104
+
className="w-[72px] bg-transparent outline-none text-primary disabled:text-tertiary"
101
105
/>
102
106
</ColorField>
103
107
</>
+13
-4
components/ThemeManager/PageThemePickers.tsx
+13
-4
components/ThemeManager/PageThemePickers.tsx
···
54
54
</>
55
55
)}
56
56
<ColorPicker
57
+
disabled={pageBorderHidden?.data.value}
57
58
label="Page"
58
59
value={pageValue}
59
60
setValue={set("theme/card-background")}
···
86
87
</ColorPicker>
87
88
{pageBGImage && pageBGImage !== null && (
88
89
<PageBGPicker
90
+
disabled={pageBorderHidden?.data.value}
89
91
entityID={props.entityID}
90
92
thisPicker={"page-background-image"}
91
93
openPicker={props.openPicker}
···
141
143
};
142
144
143
145
export const PageBGPicker = (props: {
146
+
disabled?: boolean;
144
147
entityID: string;
145
148
openPicker: pickers;
146
149
thisPicker: pickers;
···
163
166
<>
164
167
<div className="bgPickerColorLabel flex gap-2 items-center">
165
168
<button
169
+
disabled={props.disabled}
166
170
onClick={() => {
167
171
if (props.openPicker === props.thisPicker) {
168
172
props.setOpenPicker("null");
···
170
174
props.setOpenPicker(props.thisPicker);
171
175
}
172
176
}}
173
-
className="flex gap-2 items-center"
177
+
className="flex gap-2 items-center disabled:text-tertiary"
174
178
>
175
179
<ColorSwatch
176
180
color={bgColor}
177
-
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`}
181
+
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C] ${props.disabled ? "opacity-50" : ""}`}
178
182
style={{
179
183
backgroundImage: bgImage?.data.src
180
184
? `url(${bgImage.data.src})`
···
183
187
backgroundSize: "cover",
184
188
}}
185
189
/>
186
-
<strong className={`text-primary`}>BG Image</strong>
190
+
<strong
191
+
className={`${props.disabled ? "text-tertiary" : "text-primary "}`}
192
+
>
193
+
BG Image
194
+
</strong>
187
195
</button>
188
196
189
197
<SpectrumColorPicker
···
200
208
<Separator classname="h-5 my-1" />
201
209
<ColorField className="w-fit pl-[6px]" channel="alpha">
202
210
<Input
211
+
disabled={props.disabled}
203
212
onMouseDown={onMouseDown}
204
213
onFocus={(e) => {
205
214
e.currentTarget.setSelectionRange(
···
212
221
e.currentTarget.blur();
213
222
} else return;
214
223
}}
215
-
className="w-[48px] bg-transparent outline-none text-primary"
224
+
className={`w-[48px] bg-transparent outline-none disabled:text-tertiary`}
216
225
/>
217
226
</ColorField>
218
227
</SpectrumColorPicker>