a tool for shared writing and social publishing
fixed issues with the turnaries that caused the global page bg optison to override the local ones
+83
-38
+1
-1
components/Checkbox.tsx
+1
-1
components/Checkbox.tsx
···
11
11
}) {
12
12
return (
13
13
<label
14
-
className={`flex w-full gap-2 items-start cursor-pointer ${props.className} ${props.checked ? "text-primary font-bold " : " text-tertiary font-normal"}`}
14
+
className={`flex w-full gap-2 items-start cursor-pointer ${props.className} ${props.checked ? "text-primary font-bold " : " text-tertiary font-normal"} ${props.small && "text-sm"}`}
15
15
>
16
16
<input
17
17
type="checkbox"
+14
-14
components/Pages/index.tsx
+14
-14
components/Pages/index.tsx
···
94
94
let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
95
95
96
96
let cardBorderHidden =
97
-
useEntity(props.entityID, "theme/card-border-hidden")?.data.value ||
98
-
rootCardBorderHidden?.data.value;
97
+
useEntity(props.entityID, "theme/card-border-hidden") ||
98
+
rootCardBorderHidden;
99
99
return (
100
100
<>
101
101
{!props.first && (
···
118
118
id={elementId.page(props.entityID).container}
119
119
style={{
120
120
width: pageType === "doc" ? "var(--page-width-units)" : undefined,
121
-
backgroundColor: cardBorderHidden
121
+
backgroundColor: cardBorderHidden?.data.value
122
122
? ""
123
123
: "rgba(var(--bg-page), var(--bg-page-alpha))",
124
124
}}
···
128
128
grow flex flex-col
129
129
overscroll-y-none
130
130
overflow-y-auto
131
-
${cardBorderHidden ? "border-0 !shadow-none sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"}
131
+
${cardBorderHidden?.data.value ? "border-0 !shadow-none sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"}
132
132
${isFocused ? "shadow-md border-border" : "border-border-light"}
133
133
`}
134
134
>
···
192
192
);
193
193
194
194
let cardBorderHidden =
195
-
useEntity(props.entityID, "theme/card-border-hidden")?.data.value ||
196
-
rootCardBorderHidden?.data.value;
195
+
useEntity(props.entityID, "theme/card-border-hidden") ||
196
+
rootCardBorderHidden;
197
197
let cardBackgroundImage =
198
198
useEntity(props.entityID, "theme/card-background-image") ||
199
199
rootBackgroundImage;
···
208
208
209
209
return (
210
210
<>
211
-
{!cardBorderHidden && (
211
+
{!cardBorderHidden?.data.value ? (
212
212
<div
213
213
className={`pageBackground
214
214
absolute top-0 left-0 right-0 bottom-0
···
232
232
: 1,
233
233
}}
234
234
/>
235
-
)}
235
+
) : null}
236
236
<Blocks entityID={props.entityID} />
237
237
{/* we handle page bg in this sepate div so that
238
238
we can apply an opacity the background image
···
284
284
let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
285
285
286
286
let cardBorderHidden =
287
-
useEntity(props.entityID, "theme/card-border-hidden")?.data.value ||
288
-
rootCardBorderHidden?.data.value;
287
+
useEntity(props.entityID, "theme/card-border-hidden") ||
288
+
rootCardBorderHidden;
289
289
290
290
return (
291
291
<div
292
-
className={`z-10 w-fit absolute ${cardBorderHidden ? "top-1" : "sm:top-3"} sm:-right-[19px] top-0 right-3 flex sm:flex-col flex-row-reverse gap-1 items-start`}
292
+
className={`z-10 w-fit absolute ${cardBorderHidden?.data.value ? "top-1" : "sm:top-3"} sm:-right-[19px] top-0 right-3 flex sm:flex-col flex-row-reverse gap-1 items-start`}
293
293
>
294
294
{!props.first && (
295
295
<PageOptionButton
296
-
cardBorderHidden={cardBorderHidden}
296
+
cardBorderHidden={cardBorderHidden?.data.value}
297
297
secondary
298
298
onClick={() => {
299
299
useUIState.getState().closePage(props.entityID);
···
305
305
<OptionsMenu
306
306
entityID={props.entityID}
307
307
first={!!props.first}
308
-
cardBorderHidden={cardBorderHidden}
308
+
cardBorderHidden={cardBorderHidden?.data.value}
309
309
/>
310
-
<UndoButtons cardBorderHidden={cardBorderHidden} />
310
+
<UndoButtons cardBorderHidden={cardBorderHidden?.data.value} />
311
311
</div>
312
312
);
313
313
};
+10
-3
components/ThemeManager/PageThemePickers.tsx
+10
-3
components/ThemeManager/PageThemePickers.tsx
···
110
110
};
111
111
112
112
export const PageBorderHider = (props: { entityID: string }) => {
113
-
let { rep } = useReplicache();
113
+
let { rep, rootEntity } = useReplicache();
114
+
let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
115
+
let entityPageBorderHidden = useEntity(
116
+
props.entityID,
117
+
"theme/card-border-hidden",
118
+
);
114
119
let pageBorderHidden =
115
-
useEntity(props.entityID, "theme/card-border-hidden")?.data.value || false;
120
+
(entityPageBorderHidden || rootPageBorderHidden)?.data.value || false;
116
121
117
122
return (
118
123
<>
119
124
<Checkbox
125
+
small
126
+
className="pl-[6px] !gap-3"
120
127
checked={pageBorderHidden}
121
128
onChange={(e) => {
122
129
rep?.mutate.assertFact({
···
127
134
console.log(pageBorderHidden);
128
135
}}
129
136
>
130
-
Hide Page Borders
137
+
No Page Borders
131
138
</Checkbox>
132
139
</>
133
140
);
+58
-20
components/ThemeManager/PageThemeSetter.tsx
+58
-20
components/ThemeManager/PageThemeSetter.tsx
···
21
21
22
22
return (
23
23
<>
24
-
<div className="pageThemeSetter flex flex-row gap-2 px-3 py-1 ">
24
+
<div className="pageThemeSetter flex flex-row gap-2 px-3 py-1 z-10">
25
25
<div className="gap-2 flex font-bold ">
26
26
<PaintSmall /> Theme Page
27
27
</div>
···
81
81
"theme/card-background-image",
82
82
"theme/card-background-image-repeat",
83
83
"theme/card-background-image-opacity",
84
+
"theme/card-border-hidden",
84
85
"canvas/background-pattern",
85
86
],
86
87
});
···
92
93
};
93
94
94
95
const SamplePage = (props: { entityID: string }) => {
95
-
let pageBGImage = useEntity(props.entityID, "theme/card-background-image");
96
-
let pageBGRepeat = useEntity(
97
-
props.entityID,
96
+
let { rootEntity } = useReplicache();
97
+
98
+
let rootBackgroundImage = useEntity(
99
+
rootEntity,
100
+
"theme/card-background-image",
101
+
);
102
+
let rootBackgroundRepeat = useEntity(
103
+
rootEntity,
98
104
"theme/card-background-image-repeat",
99
105
);
100
-
let pageBGOpacity = useEntity(
106
+
let rootBackgroundOpacity = useEntity(
107
+
rootEntity,
108
+
"theme/card-background-image-opacity",
109
+
);
110
+
111
+
let pageBackgroundImage =
112
+
useEntity(props.entityID, "theme/card-background-image") ||
113
+
rootBackgroundImage;
114
+
let pageBackgroundImageRepeat =
115
+
useEntity(props.entityID, "theme/card-background-image-repeat") ||
116
+
rootBackgroundRepeat;
117
+
let pageBackgroundImageOpacity =
118
+
useEntity(props.entityID, "theme/card-background-image-opacity") ||
119
+
rootBackgroundOpacity;
120
+
121
+
let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
122
+
let entityPageBorderHidden = useEntity(
101
123
props.entityID,
102
-
"theme/card-background-image-opacity",
124
+
"theme/card-border-hidden",
103
125
);
126
+
let pageBorderHidden = (entityPageBorderHidden || rootPageBorderHidden)?.data
127
+
.value;
104
128
105
129
return (
106
130
<div
107
-
className="relative rounded-t-lg p-2 shadow-md text-primary border border-border border-b-transparent"
108
-
style={{
109
-
backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))",
110
-
}}
131
+
className={
132
+
pageBorderHidden
133
+
? "py-2 px-0 border border-transparent"
134
+
: `relative rounded-t-lg p-2 shadow-md text-primary border border-border border-b-transparent`
135
+
}
136
+
style={
137
+
pageBorderHidden
138
+
? undefined
139
+
: {
140
+
backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))",
141
+
}
142
+
}
111
143
>
112
144
<div
113
145
className="background absolute top-0 right-0 bottom-0 left-0 z-0 rounded-t-lg"
114
-
style={{
115
-
backgroundImage: pageBGImage
116
-
? `url(${pageBGImage.data.src})`
117
-
: undefined,
146
+
style={
147
+
pageBorderHidden
148
+
? undefined
149
+
: {
150
+
backgroundImage: pageBackgroundImage
151
+
? `url(${pageBackgroundImage.data.src})`
152
+
: undefined,
118
153
119
-
backgroundRepeat: pageBGRepeat ? "repeat" : "no-repeat",
120
-
opacity: pageBGOpacity?.data.value || 1,
121
-
backgroundSize: !pageBGRepeat
122
-
? "cover"
123
-
: `calc(${pageBGRepeat.data.value}px / 2 )`,
124
-
}}
154
+
backgroundRepeat: pageBackgroundImageRepeat
155
+
? "repeat"
156
+
: "no-repeat",
157
+
opacity: pageBackgroundImageOpacity?.data.value || 1,
158
+
backgroundSize: !pageBackgroundImageRepeat?.data.value
159
+
? "cover"
160
+
: `calc(${pageBackgroundImageRepeat.data.value}px / 2 )`,
161
+
}
162
+
}
125
163
/>
126
164
<div className="relative">
127
165
<p className="font-bold">Theme Each Page!</p>