a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

default to hidden border in pub draft

+29 -22
+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
··· 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 + }