a tool for shared writing and social publishing
default to hidden border in pub draft
+29
-22
+12
-22
components/Pages/index.tsx
+12
-22
components/Pages/index.tsx
···
35
35
import { PaintSmall } from "components/Icons/PaintSmall";
36
36
import { ShareSmall } from "components/Icons/ShareSmall";
37
37
import { PublicationMetadata } from "./PublicationMetadata";
38
+
import { useCardBorderHidden } from "./useCardBorderHidden";
38
39
39
40
export function Pages(props: { rootPage: string }) {
40
41
let rootPage = useEntity(props.rootPage, "root/page")[0];
···
89
90
return focusedPageID === props.entityID;
90
91
});
91
92
let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
92
-
let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
93
-
94
-
let cardBorderHidden =
95
-
useEntity(props.entityID, "theme/card-border-hidden") ||
96
-
rootCardBorderHidden;
93
+
let cardBorderHidden = useCardBorderHidden(props.entityID);
97
94
return (
98
95
<>
99
96
{!props.first && (
···
116
113
id={elementId.page(props.entityID).container}
117
114
style={{
118
115
width: pageType === "doc" ? "var(--page-width-units)" : undefined,
119
-
backgroundColor: cardBorderHidden?.data.value
116
+
backgroundColor: cardBorderHidden
120
117
? ""
121
118
: "rgba(var(--bg-page), var(--bg-page-alpha))",
122
119
}}
···
126
123
grow flex flex-col
127
124
overscroll-y-none
128
125
overflow-y-auto
129
-
${cardBorderHidden?.data.value ? "border-0 !shadow-none sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"}
126
+
${cardBorderHidden ? "border-0 !shadow-none sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"}
130
127
${isFocused ? "shadow-md border-border" : "border-border-light"}
131
128
`}
132
129
>
···
175
172
return focusedPageID === props.entityID;
176
173
});
177
174
178
-
let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
175
+
let cardBorderHidden = useCardBorderHidden(props.entityID);
179
176
let rootBackgroundImage = useEntity(
180
177
rootEntity,
181
178
"theme/card-background-image",
···
189
186
"theme/card-background-image-opacity",
190
187
);
191
188
192
-
let cardBorderHidden =
193
-
useEntity(props.entityID, "theme/card-border-hidden") ||
194
-
rootCardBorderHidden;
195
189
let cardBackgroundImage =
196
190
useEntity(props.entityID, "theme/card-background-image") ||
197
191
rootBackgroundImage;
···
206
200
207
201
return (
208
202
<>
209
-
{!cardBorderHidden?.data.value ? (
203
+
{!cardBorderHidden ? (
210
204
<div
211
205
className={`pageBackground
212
206
absolute top-0 left-0 right-0 bottom-0
···
231
225
}}
232
226
/>
233
227
) : null}
234
-
<PublicationMetadata cardBorderHidden={!!cardBorderHidden?.data.value} />
228
+
<PublicationMetadata cardBorderHidden={!!cardBorderHidden} />
235
229
<Blocks entityID={props.entityID} />
236
230
{/* we handle page bg in this sepate div so that
237
231
we can apply an opacity the background image
···
280
274
first: boolean | undefined;
281
275
}) => {
282
276
let { rootEntity } = useReplicache();
283
-
let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
284
-
285
-
let cardBorderHidden =
286
-
useEntity(props.entityID, "theme/card-border-hidden") ||
287
-
rootCardBorderHidden;
277
+
let cardBorderHidden = useCardBorderHidden(props.entityID);
288
278
289
279
return (
290
280
<div
291
-
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`}
281
+
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
282
>
293
283
{!props.first && (
294
284
<PageOptionButton
295
-
cardBorderHidden={cardBorderHidden?.data.value}
285
+
cardBorderHidden={cardBorderHidden}
296
286
secondary
297
287
onClick={() => {
298
288
useUIState.getState().closePage(props.entityID);
···
304
294
<OptionsMenu
305
295
entityID={props.entityID}
306
296
first={!!props.first}
307
-
cardBorderHidden={cardBorderHidden?.data.value}
297
+
cardBorderHidden={cardBorderHidden}
308
298
/>
309
-
<UndoButtons cardBorderHidden={cardBorderHidden?.data.value} />
299
+
<UndoButtons cardBorderHidden={cardBorderHidden} />
310
300
</div>
311
301
);
312
302
};
+17
components/Pages/useCardBorderHidden.ts
+17
components/Pages/useCardBorderHidden.ts
···
1
+
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
2
+
import { useEntity, useReplicache } from "src/replicache";
3
+
4
+
export function useCardBorderHidden(entityID: string) {
5
+
let { rootEntity } = useReplicache();
6
+
let { data } = useLeafletPublicationData();
7
+
let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
8
+
9
+
let cardBorderHidden =
10
+
useEntity(entityID, "theme/card-border-hidden") || rootCardBorderHidden;
11
+
console.log(cardBorderHidden, rootCardBorderHidden);
12
+
if (!cardBorderHidden && !rootCardBorderHidden) {
13
+
if (data?.[0]) return true;
14
+
return false;
15
+
}
16
+
return (cardBorderHidden || rootCardBorderHidden)?.data.value;
17
+
}