leaflet.pub
a tool for shared writing and social publishing
inital tweaking of the page and leaflet background logic
cozylittle.house
+371
-222
+4
-5
components/ThemeManager/PageThemeSetter.tsx
+4
-5
components/ThemeManager/PageThemeSetter.tsx
···
3
3
import { pickers, SectionArrow, setColorAttribute } from "./ThemeSetter";
4
4
5
5
import {
6
-
PageBackgroundPicker,
6
+
SubpageBackgroundPicker,
7
7
PageThemePickers,
8
8
} from "./Pickers/PageThemePickers";
9
9
import { useMemo, useState } from "react";
···
54
54
className="pageThemeBG flex flex-col gap-2 h-full text-primary bg-bg-leaflet p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]"
55
55
style={{ backgroundColor: "rgba(var(--bg-page), 0.6)" }}
56
56
>
57
-
<PageBackgroundPicker
57
+
<SubpageBackgroundPicker
58
58
entityID={props.entityID}
59
59
openPicker={openPicker}
60
-
setOpenPicker={(pickers) => setOpenPicker(pickers)}
61
-
setValue={set("theme/card-background")}
60
+
setOpenPicker={setOpenPicker}
62
61
/>
63
62
</div>
64
63
···
147
146
<div
148
147
className={
149
148
pageBorderHidden
150
-
? "py-2 px-0 border border-transparent"
149
+
? "relative py-2 px-0 border border-transparent"
151
150
: `relative rounded-t-lg p-2 shadow-md text-primary border border-border border-b-transparent`
152
151
}
153
152
style={
-162
components/ThemeManager/Pickers/LeafletBGPicker.tsx
-162
components/ThemeManager/Pickers/LeafletBGPicker.tsx
···
1
-
"use client";
2
-
3
-
import {
4
-
ColorPicker as SpectrumColorPicker,
5
-
parseColor,
6
-
Color,
7
-
ColorArea,
8
-
ColorThumb,
9
-
ColorSlider,
10
-
Input,
11
-
ColorField,
12
-
SliderTrack,
13
-
ColorSwatch,
14
-
} from "react-aria-components";
15
-
import { pickers, setColorAttribute } from "../ThemeSetter";
16
-
import { thumbStyle } from "./ColorPicker";
17
-
import { ImageInput, ImageSettings } from "./ImagePicker";
18
-
import { useEntity, useReplicache } from "src/replicache";
19
-
import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
20
-
import { Separator } from "components/Layout";
21
-
import { onMouseDown } from "src/utils/iosInputMouseDown";
22
-
import { BlockImageSmall } from "components/Icons/BlockImageSmall";
23
-
import { DeleteSmall } from "components/Icons/DeleteSmall";
24
-
25
-
export const LeafletBGPicker = (props: {
26
-
entityID: string;
27
-
openPicker: pickers;
28
-
thisPicker: pickers;
29
-
setOpenPicker: (thisPicker: pickers) => void;
30
-
closePicker: () => void;
31
-
setValue: (c: Color) => void;
32
-
}) => {
33
-
let bgImage = useEntity(props.entityID, "theme/background-image");
34
-
let bgRepeat = useEntity(props.entityID, "theme/background-image-repeat");
35
-
let bgColor = useColorAttribute(props.entityID, "theme/page-background");
36
-
let open = props.openPicker == props.thisPicker;
37
-
let { rep } = useReplicache();
38
-
39
-
return (
40
-
<>
41
-
<div className="bgPickerLabel flex justify-between place-items-center ">
42
-
<div className="bgPickerColorLabel flex gap-2 items-center">
43
-
<button
44
-
onClick={() => {
45
-
if (props.openPicker === props.thisPicker) {
46
-
props.setOpenPicker("null");
47
-
} else {
48
-
props.setOpenPicker(props.thisPicker);
49
-
}
50
-
}}
51
-
className="flex gap-2 items-center"
52
-
>
53
-
<ColorSwatch
54
-
color={bgColor}
55
-
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`}
56
-
style={{
57
-
backgroundImage: bgImage?.data.src
58
-
? `url(${bgImage.data.src})`
59
-
: undefined,
60
-
backgroundSize: "cover",
61
-
}}
62
-
/>
63
-
<strong className={` "text-[#595959]`}>{"Background"}</strong>
64
-
</button>
65
-
66
-
<div className="flex">
67
-
{bgImage ? (
68
-
<div className={`"text-[#969696]`}>Image</div>
69
-
) : (
70
-
<>
71
-
<ColorField className="w-fit gap-1" value={bgColor}>
72
-
<Input
73
-
onMouseDown={onMouseDown}
74
-
onFocus={(e) => {
75
-
e.currentTarget.setSelectionRange(
76
-
1,
77
-
e.currentTarget.value.length,
78
-
);
79
-
}}
80
-
onPaste={(e) => {
81
-
console.log(e);
82
-
}}
83
-
onKeyDown={(e) => {
84
-
if (e.key === "Enter") {
85
-
e.currentTarget.blur();
86
-
} else return;
87
-
}}
88
-
onBlur={(e) => {
89
-
props.setValue(parseColor(e.currentTarget.value));
90
-
}}
91
-
className={`w-[72px] bg-transparent outline-nonetext-[#595959]`}
92
-
/>
93
-
</ColorField>
94
-
</>
95
-
)}
96
-
</div>
97
-
</div>
98
-
<div className="flex gap-1 justify-end grow text-[#969696]">
99
-
{bgImage && (
100
-
<button
101
-
onClick={() => {
102
-
if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id });
103
-
if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id });
104
-
}}
105
-
>
106
-
<DeleteSmall />
107
-
</button>
108
-
)}
109
-
<label>
110
-
<BlockImageSmall />
111
-
<div className="hidden">
112
-
<ImageInput
113
-
{...props}
114
-
onChange={() => {
115
-
props.setOpenPicker(props.thisPicker);
116
-
}}
117
-
/>
118
-
</div>
119
-
</label>
120
-
</div>
121
-
</div>
122
-
{open && (
123
-
<div className="bgImageAndColorPicker w-full flex flex-col gap-2 ">
124
-
<SpectrumColorPicker
125
-
value={bgColor}
126
-
onChange={setColorAttribute(
127
-
rep,
128
-
props.entityID,
129
-
)("theme/page-background")}
130
-
>
131
-
{bgImage ? (
132
-
<ImageSettings
133
-
entityID={props.entityID}
134
-
setValue={props.setValue}
135
-
/>
136
-
) : (
137
-
<>
138
-
<ColorArea
139
-
className="w-full h-[128px] rounded-md"
140
-
colorSpace="hsb"
141
-
xChannel="saturation"
142
-
yChannel="brightness"
143
-
>
144
-
<ColorThumb className={thumbStyle} />
145
-
</ColorArea>
146
-
<ColorSlider
147
-
colorSpace="hsb"
148
-
className="w-full "
149
-
channel="hue"
150
-
>
151
-
<SliderTrack className="h-2 w-full rounded-md">
152
-
<ColorThumb className={`${thumbStyle} mt-[4px]`} />
153
-
</SliderTrack>
154
-
</ColorSlider>
155
-
</>
156
-
)}
157
-
</SpectrumColorPicker>
158
-
</div>
159
-
)}
160
-
</>
161
-
);
162
-
};
+333
-23
components/ThemeManager/Pickers/PageThemePickers.tsx
+333
-23
components/ThemeManager/Pickers/PageThemePickers.tsx
···
61
61
);
62
62
};
63
63
64
-
export const PageBackgroundPicker = (props: {
64
+
// Page background picker for subpages - shows Page/Containers color with optional background image
65
+
export const SubpageBackgroundPicker = (props: {
65
66
entityID: string;
66
-
setValue: (c: Color) => void;
67
67
openPicker: pickers;
68
68
setOpenPicker: (p: pickers) => void;
69
-
home?: boolean;
70
69
}) => {
70
+
let { rep, rootEntity } = useReplicache();
71
+
let set = useMemo(() => {
72
+
return setColorAttribute(rep, props.entityID);
73
+
}, [rep, props.entityID]);
74
+
71
75
let pageValue = useColorAttribute(props.entityID, "theme/card-background");
72
76
let pageBGImage = useEntity(props.entityID, "theme/card-background-image");
73
-
let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden");
77
+
let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
78
+
let entityPageBorderHidden = useEntity(
79
+
props.entityID,
80
+
"theme/card-border-hidden",
81
+
);
82
+
let pageBorderHidden =
83
+
(entityPageBorderHidden || rootPageBorderHidden)?.data.value || false;
84
+
let hasPageBackground = !pageBorderHidden;
85
+
86
+
// Label is "Page" when page background is visible, "Containers" when hidden
87
+
let label = hasPageBackground ? "Page" : "Containers";
88
+
89
+
// If root page border is hidden, only show color picker (no image support)
90
+
if (!hasPageBackground) {
91
+
return (
92
+
<div className="relative">
93
+
<ColorPicker
94
+
label={label}
95
+
value={pageValue}
96
+
setValue={set("theme/card-background")}
97
+
thisPicker="page"
98
+
openPicker={props.openPicker}
99
+
setOpenPicker={props.setOpenPicker}
100
+
closePicker={() => props.setOpenPicker("null")}
101
+
alpha
102
+
/>
103
+
</div>
104
+
);
105
+
}
74
106
75
107
return (
76
108
<>
77
-
{pageBGImage && pageBGImage !== null && (
78
-
<PageBackgroundImagePicker
79
-
disabled={pageBorderHidden?.data.value}
109
+
{pageBGImage && (
110
+
<SubpageBackgroundImagePicker
80
111
entityID={props.entityID}
81
-
thisPicker={"page-background-image"}
82
112
openPicker={props.openPicker}
83
113
setOpenPicker={props.setOpenPicker}
84
-
closePicker={() => props.setOpenPicker("null")}
85
-
setValue={props.setValue}
86
-
home={props.home}
114
+
setValue={set("theme/card-background")}
87
115
/>
88
116
)}
89
117
<div className="relative">
90
-
<PageBackgroundColorPicker
91
-
label={pageBorderHidden?.data.value ? "Menus" : "Page"}
118
+
<ColorPicker
119
+
label={label}
92
120
value={pageValue}
93
-
setValue={props.setValue}
94
-
thisPicker={"page"}
121
+
setValue={set("theme/card-background")}
122
+
thisPicker="page"
95
123
openPicker={props.openPicker}
96
124
setOpenPicker={props.setOpenPicker}
125
+
closePicker={() => props.setOpenPicker("null")}
97
126
alpha
98
127
/>
99
-
{(pageBGImage === null ||
100
-
(!pageBGImage && !pageBorderHidden?.data.value && !props.home)) && (
101
-
<label
102
-
className={`
103
-
hover:cursor-pointer text-[#969696] shrink-0
104
-
absolute top-0 right-0
105
-
`}
106
-
>
128
+
{!pageBGImage && (
129
+
<label className="text-[#969696] hover:cursor-pointer shrink-0 absolute top-0 right-0">
107
130
<BlockImageSmall />
108
131
<div className="hidden">
109
132
<ImageInput
···
115
138
</label>
116
139
)}
117
140
</div>
141
+
</>
142
+
);
143
+
};
144
+
145
+
const SubpageBackgroundImagePicker = (props: {
146
+
entityID: string;
147
+
openPicker: pickers;
148
+
setOpenPicker: (p: pickers) => void;
149
+
setValue: (c: Color) => void;
150
+
}) => {
151
+
let { rep } = useReplicache();
152
+
let bgImage = useEntity(props.entityID, "theme/card-background-image");
153
+
let bgRepeat = useEntity(
154
+
props.entityID,
155
+
"theme/card-background-image-repeat",
156
+
);
157
+
let bgColor = useColorAttribute(props.entityID, "theme/card-background");
158
+
let bgAlpha =
159
+
useEntity(props.entityID, "theme/card-background-image-opacity")?.data
160
+
.value || 1;
161
+
let alphaColor = useMemo(() => {
162
+
return parseColor(`rgba(0,0,0,${bgAlpha})`);
163
+
}, [bgAlpha]);
164
+
let open = props.openPicker === "page-background-image";
165
+
166
+
return (
167
+
<>
168
+
<div className="bgPickerColorLabel flex gap-2 items-center">
169
+
<button
170
+
onClick={() => {
171
+
props.setOpenPicker(open ? "null" : "page-background-image");
172
+
}}
173
+
className="flex gap-2 items-center grow"
174
+
>
175
+
<ColorSwatch
176
+
color={bgColor}
177
+
className="w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]"
178
+
style={{
179
+
backgroundImage: bgImage?.data.src
180
+
? `url(${bgImage.data.src})`
181
+
: undefined,
182
+
backgroundPosition: "center",
183
+
backgroundSize: "cover",
184
+
}}
185
+
/>
186
+
<strong className="text-[#595959]">Page</strong>
187
+
<div className="italic text-[#8C8C8C]">image</div>
188
+
</button>
189
+
190
+
<SpectrumColorPicker
191
+
value={alphaColor}
192
+
onChange={(c) => {
193
+
let alpha = c.getChannelValue("alpha");
194
+
rep?.mutate.assertFact({
195
+
entity: props.entityID,
196
+
attribute: "theme/card-background-image-opacity",
197
+
data: { type: "number", value: alpha },
198
+
});
199
+
}}
200
+
>
201
+
<Separator classname="h-4! my-1 border-[#C3C3C3]!" />
202
+
<ColorField className="w-fit pl-[6px]" channel="alpha">
203
+
<Input
204
+
onMouseDown={onMouseDown}
205
+
onFocus={(e) => {
206
+
e.currentTarget.setSelectionRange(
207
+
0,
208
+
e.currentTarget.value.length - 1,
209
+
);
210
+
}}
211
+
onKeyDown={(e) => {
212
+
if (e.key === "Enter") {
213
+
e.currentTarget.blur();
214
+
} else return;
215
+
}}
216
+
className="w-[48px] bg-transparent outline-hidden"
217
+
/>
218
+
</ColorField>
219
+
</SpectrumColorPicker>
220
+
221
+
<div className="flex gap-1 text-[#8C8C8C]">
222
+
<button
223
+
onClick={() => {
224
+
if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id });
225
+
if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id });
226
+
}}
227
+
>
228
+
<DeleteSmall />
229
+
</button>
230
+
<label className="hover:cursor-pointer">
231
+
<BlockImageSmall />
232
+
<div className="hidden">
233
+
<ImageInput
234
+
entityID={props.entityID}
235
+
onChange={() => props.setOpenPicker("page-background-image")}
236
+
card
237
+
/>
238
+
</div>
239
+
</label>
240
+
</div>
241
+
</div>
242
+
{open && (
243
+
<div className="pageImagePicker flex flex-col gap-2">
244
+
<ImageSettings
245
+
entityID={props.entityID}
246
+
card
247
+
setValue={props.setValue}
248
+
/>
249
+
<div className="flex flex-col gap-2 pr-2 pl-8 -mt-2 mb-2">
250
+
<hr className="border-[#DBDBDB]" />
251
+
<SpectrumColorPicker
252
+
value={alphaColor}
253
+
onChange={(c) => {
254
+
let alpha = c.getChannelValue("alpha");
255
+
rep?.mutate.assertFact({
256
+
entity: props.entityID,
257
+
attribute: "theme/card-background-image-opacity",
258
+
data: { type: "number", value: alpha },
259
+
});
260
+
}}
261
+
>
262
+
<ColorSlider
263
+
colorSpace="hsb"
264
+
className="w-full mt-1 rounded-full"
265
+
style={{
266
+
backgroundImage: `url(/transparent-bg.png)`,
267
+
backgroundRepeat: "repeat",
268
+
backgroundSize: "8px",
269
+
}}
270
+
channel="alpha"
271
+
>
272
+
<SliderTrack className="h-2 w-full rounded-md">
273
+
<ColorThumb className={`${thumbStyle} mt-[4px]`} />
274
+
</SliderTrack>
275
+
</ColorSlider>
276
+
</SpectrumColorPicker>
277
+
</div>
278
+
</div>
279
+
)}
280
+
</>
281
+
);
282
+
};
283
+
284
+
// Unified background picker for leaflets - matches structure of BackgroundPicker for publications
285
+
export const LeafletBackgroundPicker = (props: {
286
+
entityID: string;
287
+
openPicker: pickers;
288
+
setOpenPicker: (p: pickers) => void;
289
+
}) => {
290
+
let { rep } = useReplicache();
291
+
let set = useMemo(() => {
292
+
return setColorAttribute(rep, props.entityID);
293
+
}, [rep, props.entityID]);
294
+
295
+
let leafletBgValue = useColorAttribute(
296
+
props.entityID,
297
+
"theme/page-background",
298
+
);
299
+
let pageValue = useColorAttribute(props.entityID, "theme/card-background");
300
+
let leafletBGImage = useEntity(props.entityID, "theme/background-image");
301
+
let leafletBGRepeat = useEntity(
302
+
props.entityID,
303
+
"theme/background-image-repeat",
304
+
);
305
+
let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden");
306
+
let hasPageBackground = !pageBorderHidden?.data.value;
307
+
308
+
// When page background is hidden and no background image, only show the Background picker
309
+
let showPagePicker = hasPageBackground || !!leafletBGImage;
310
+
311
+
return (
312
+
<>
313
+
{/* Background color/image picker */}
314
+
{leafletBGImage ? (
315
+
<LeafletBackgroundImagePicker
316
+
entityID={props.entityID}
317
+
openPicker={props.openPicker}
318
+
setOpenPicker={props.setOpenPicker}
319
+
/>
320
+
) : (
321
+
<div className="relative">
322
+
<ColorPicker
323
+
label="Background"
324
+
value={leafletBgValue}
325
+
setValue={set("theme/page-background")}
326
+
thisPicker="leaflet"
327
+
openPicker={props.openPicker}
328
+
setOpenPicker={props.setOpenPicker}
329
+
closePicker={() => props.setOpenPicker("null")}
330
+
/>
331
+
<label className="text-[#969696] hover:cursor-pointer shrink-0 absolute top-0 right-0">
332
+
<BlockImageSmall />
333
+
<div className="hidden">
334
+
<ImageInput
335
+
entityID={props.entityID}
336
+
onChange={() => props.setOpenPicker("leaflet")}
337
+
/>
338
+
</div>
339
+
</label>
340
+
</div>
341
+
)}
342
+
343
+
{/* Page/Containers color picker - only shown when page background is visible OR there's a bg image */}
344
+
{showPagePicker && (
345
+
<ColorPicker
346
+
label={hasPageBackground ? "Page" : "Containers"}
347
+
value={pageValue}
348
+
setValue={set("theme/card-background")}
349
+
thisPicker="page"
350
+
openPicker={props.openPicker}
351
+
setOpenPicker={props.setOpenPicker}
352
+
closePicker={() => props.setOpenPicker("null")}
353
+
alpha
354
+
/>
355
+
)}
356
+
357
+
<hr className="border-[#CCCCCC]" />
358
+
359
+
{/* Page Background toggle */}
360
+
<PageBorderHider
361
+
entityID={props.entityID}
362
+
openPicker={props.openPicker}
363
+
setOpenPicker={props.setOpenPicker}
364
+
/>
365
+
</>
366
+
);
367
+
};
368
+
369
+
const LeafletBackgroundImagePicker = (props: {
370
+
entityID: string;
371
+
openPicker: pickers;
372
+
setOpenPicker: (p: pickers) => void;
373
+
}) => {
374
+
let { rep } = useReplicache();
375
+
let bgImage = useEntity(props.entityID, "theme/background-image");
376
+
let bgRepeat = useEntity(props.entityID, "theme/background-image-repeat");
377
+
let bgColor = useColorAttribute(props.entityID, "theme/page-background");
378
+
let open = props.openPicker === "leaflet";
379
+
380
+
return (
381
+
<>
382
+
<div className="bgPickerColorLabel flex gap-2 items-center">
383
+
<button
384
+
onClick={() => {
385
+
props.setOpenPicker(open ? "null" : "leaflet");
386
+
}}
387
+
className="flex gap-2 items-center grow"
388
+
>
389
+
<ColorSwatch
390
+
color={bgColor}
391
+
className="w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]"
392
+
style={{
393
+
backgroundImage: bgImage?.data.src
394
+
? `url(${bgImage.data.src})`
395
+
: undefined,
396
+
backgroundPosition: "center",
397
+
backgroundSize: "cover",
398
+
}}
399
+
/>
400
+
<strong className="text-[#595959]">Background</strong>
401
+
<div className="italic text-[#8C8C8C]">image</div>
402
+
</button>
403
+
<div className="flex gap-1 text-[#8C8C8C]">
404
+
<button
405
+
onClick={() => {
406
+
if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id });
407
+
if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id });
408
+
}}
409
+
>
410
+
<DeleteSmall />
411
+
</button>
412
+
<label className="hover:cursor-pointer">
413
+
<BlockImageSmall />
414
+
<div className="hidden">
415
+
<ImageInput
416
+
entityID={props.entityID}
417
+
onChange={() => props.setOpenPicker("leaflet")}
418
+
/>
419
+
</div>
420
+
</label>
421
+
</div>
422
+
</div>
423
+
{open && (
424
+
<div className="pageImagePicker flex flex-col gap-2">
425
+
<ImageSettings entityID={props.entityID} setValue={() => {}} />
426
+
</div>
427
+
)}
118
428
</>
119
429
);
120
430
};
+15
-9
components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
+15
-9
components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
···
24
24
hasPageBackground: boolean;
25
25
setHasPageBackground: (s: boolean) => void;
26
26
}) => {
27
+
// When showPageBackground is false (hasPageBackground=false) and no background image, show leafletBg picker
28
+
let showLeafletBgPicker = !props.hasPageBackground && !props.bgImage;
29
+
27
30
return (
28
31
<>
29
32
{props.bgImage && props.bgImage !== null ? (
···
83
86
)}
84
87
</div>
85
88
)}
86
-
<PageBackgroundColorPicker
87
-
label={"Containers"}
88
-
value={props.pageBackground}
89
-
setValue={props.setPageBackground}
90
-
thisPicker={"page"}
91
-
openPicker={props.openPicker}
92
-
setOpenPicker={props.setOpenPicker}
93
-
alpha={props.hasPageBackground ? true : false}
94
-
/>
89
+
{!showLeafletBgPicker && (
90
+
// When there's a background image and page background hidden, label should say "Containers"
91
+
<PageBackgroundColorPicker
92
+
label={props.hasPageBackground ? "Page" : "Containers"}
93
+
value={props.pageBackground}
94
+
setValue={props.setPageBackground}
95
+
thisPicker={"page"}
96
+
openPicker={props.openPicker}
97
+
setOpenPicker={props.setOpenPicker}
98
+
alpha={props.hasPageBackground ? true : false}
99
+
/>
100
+
)}
95
101
<hr className="border-border-light" />
96
102
<div className="flex gap-2 items-center">
97
103
<Toggle
+1
-1
components/ThemeManager/PubThemeSetter.tsx
+1
-1
components/ThemeManager/PubThemeSetter.tsx
+6
-1
components/ThemeManager/PublicationThemeProvider.tsx
+6
-1
components/ThemeManager/PublicationThemeProvider.tsx
···
104
104
}) {
105
105
let colors = usePubTheme(props.theme, props.isStandalone);
106
106
let cardBorderHidden = !colors.showPageBackground;
107
+
let hasBackgroundImage = !!props.theme?.backgroundImage?.image?.ref;
107
108
return (
108
109
<CardBorderHiddenContext.Provider value={cardBorderHidden}>
109
-
<BaseThemeProvider local={props.local} {...colors}>
110
+
<BaseThemeProvider
111
+
local={props.local}
112
+
{...colors}
113
+
hasBackgroundImage={hasBackgroundImage}
114
+
>
110
115
{props.children}
111
116
</BaseThemeProvider>
112
117
</CardBorderHiddenContext.Provider>
+10
-1
components/ThemeManager/ThemeProvider.tsx
+10
-1
components/ThemeManager/ThemeProvider.tsx
···
65
65
"theme/card-border-hidden",
66
66
)?.data.value;
67
67
let showPageBackground = !cardBorderHiddenValue;
68
+
let backgroundImage = useEntity(props.entityID, "theme/background-image");
69
+
let hasBackgroundImage = !!backgroundImage;
68
70
let primary = useColorAttribute(props.entityID, "theme/primary");
69
71
70
72
let highlight1 = useEntity(props.entityID, "theme/highlight-1");
···
87
89
accent1={accent1}
88
90
accent2={accent2}
89
91
showPageBackground={showPageBackground}
92
+
hasBackgroundImage={hasBackgroundImage}
90
93
>
91
94
{props.children}
92
95
</BaseThemeProvider>
···
98
101
export const BaseThemeProvider = ({
99
102
local,
100
103
bgLeaflet,
101
-
bgPage,
104
+
bgPage: bgPageProp,
102
105
primary,
103
106
accent1,
104
107
accent2,
···
106
109
highlight2,
107
110
highlight3,
108
111
showPageBackground,
112
+
hasBackgroundImage,
109
113
children,
110
114
}: {
111
115
local?: boolean;
112
116
showPageBackground?: boolean;
117
+
hasBackgroundImage?: boolean;
113
118
bgLeaflet: AriaColor;
114
119
bgPage: AriaColor;
115
120
primary: AriaColor;
···
120
125
highlight3: AriaColor;
121
126
children: React.ReactNode;
122
127
}) => {
128
+
// When showPageBackground is false and there's no background image,
129
+
// pageBg should inherit from leafletBg
130
+
const bgPage =
131
+
!showPageBackground && !hasBackgroundImage ? bgLeaflet : bgPageProp;
123
132
// set accent contrast to the accent color that has the highest contrast with the page background
124
133
let accentContrast;
125
134
+2
-20
components/ThemeManager/ThemeSetter.tsx
+2
-20
components/ThemeManager/ThemeSetter.tsx
···
4
4
5
5
import { Color } from "react-aria-components";
6
6
7
-
import { LeafletBGPicker } from "./Pickers/LeafletBGPicker";
8
7
import {
9
-
PageBackgroundPicker,
10
-
PageBorderHider,
8
+
LeafletBackgroundPicker,
11
9
PageThemePickers,
12
10
} from "./Pickers/PageThemePickers";
13
11
import { useMemo, useState } from "react";
···
117
115
<div className="themeBGLeaflet flex">
118
116
<div className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}>
119
117
<div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md">
120
-
<LeafletBGPicker
121
-
entityID={props.entityID}
122
-
thisPicker={"leaflet"}
123
-
openPicker={openPicker}
124
-
setOpenPicker={setOpenPicker}
125
-
closePicker={() => setOpenPicker("null")}
126
-
setValue={set("theme/page-background")}
127
-
/>
128
-
<PageBackgroundPicker
129
-
entityID={props.entityID}
130
-
setValue={set("theme/card-background")}
131
-
openPicker={openPicker}
132
-
setOpenPicker={setOpenPicker}
133
-
home={props.home}
134
-
/>
135
-
<hr className=" border-[#CCCCCC]" />
136
-
<PageBorderHider
118
+
<LeafletBackgroundPicker
137
119
entityID={props.entityID}
138
120
openPicker={openPicker}
139
121
setOpenPicker={setOpenPicker}