+1 -1

components/Checkbox.tsx

··· 11 11 }) { 12 12 return ( 13 13 <label 14 14 - className={`flex w-full gap-2 items-start cursor-pointer ${props.className} ${props.checked ? "text-primary font-bold " : " text-tertiary font-normal"}`} 14 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

··· 94 94 let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 95 95 96 96 let cardBorderHidden = 97 97 - useEntity(props.entityID, "theme/card-border-hidden")?.data.value || 98 98 - rootCardBorderHidden?.data.value; 97 97 + useEntity(props.entityID, "theme/card-border-hidden") || 98 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 121 - backgroundColor: cardBorderHidden 121 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 131 - ${cardBorderHidden ? "border-0 !shadow-none sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"} 131 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 195 - useEntity(props.entityID, "theme/card-border-hidden")?.data.value || 196 196 - rootCardBorderHidden?.data.value; 195 195 + useEntity(props.entityID, "theme/card-border-hidden") || 196 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 211 - {!cardBorderHidden && ( 211 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 - )} 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 287 - useEntity(props.entityID, "theme/card-border-hidden")?.data.value || 288 288 - rootCardBorderHidden?.data.value; 287 287 + useEntity(props.entityID, "theme/card-border-hidden") || 288 288 + rootCardBorderHidden; 289 289 290 290 return ( 291 291 <div 292 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 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 296 - cardBorderHidden={cardBorderHidden} 296 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 308 - cardBorderHidden={cardBorderHidden} 308 308 + cardBorderHidden={cardBorderHidden?.data.value} 309 309 /> 310 310 - <UndoButtons cardBorderHidden={cardBorderHidden} /> 310 310 + <UndoButtons cardBorderHidden={cardBorderHidden?.data.value} /> 311 311 </div> 312 312 ); 313 313 };

+10 -3

components/ThemeManager/PageThemePickers.tsx

··· 110 110 }; 111 111 112 112 export const PageBorderHider = (props: { entityID: string }) => { 113 113 - let { rep } = useReplicache(); 113 113 + let { rep, rootEntity } = useReplicache(); 114 114 + let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 115 115 + let entityPageBorderHidden = useEntity( 116 116 + props.entityID, 117 117 + "theme/card-border-hidden", 118 118 + ); 114 119 let pageBorderHidden = 115 115 - useEntity(props.entityID, "theme/card-border-hidden")?.data.value || false; 120 120 + (entityPageBorderHidden || rootPageBorderHidden)?.data.value || false; 116 121 117 122 return ( 118 123 <> 119 124 <Checkbox 125 125 + small 126 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 130 - Hide Page Borders 137 137 + No Page Borders 131 138 </Checkbox> 132 139 </> 133 140 );

+58 -20

components/ThemeManager/PageThemeSetter.tsx

··· 21 21 22 22 return ( 23 23 <> 24 24 - <div className="pageThemeSetter flex flex-row gap-2 px-3 py-1 "> 24 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 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 95 - let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 96 96 - let pageBGRepeat = useEntity( 97 97 - props.entityID, 96 96 + let { rootEntity } = useReplicache(); 97 97 + 98 98 + let rootBackgroundImage = useEntity( 99 99 + rootEntity, 100 100 + "theme/card-background-image", 101 101 + ); 102 102 + let rootBackgroundRepeat = useEntity( 103 103 + rootEntity, 98 104 "theme/card-background-image-repeat", 99 105 ); 100 100 - let pageBGOpacity = useEntity( 106 106 + let rootBackgroundOpacity = useEntity( 107 107 + rootEntity, 108 108 + "theme/card-background-image-opacity", 109 109 + ); 110 110 + 111 111 + let pageBackgroundImage = 112 112 + useEntity(props.entityID, "theme/card-background-image") || 113 113 + rootBackgroundImage; 114 114 + let pageBackgroundImageRepeat = 115 115 + useEntity(props.entityID, "theme/card-background-image-repeat") || 116 116 + rootBackgroundRepeat; 117 117 + let pageBackgroundImageOpacity = 118 118 + useEntity(props.entityID, "theme/card-background-image-opacity") || 119 119 + rootBackgroundOpacity; 120 120 + 121 121 + let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 122 122 + let entityPageBorderHidden = useEntity( 101 123 props.entityID, 102 102 - "theme/card-background-image-opacity", 124 124 + "theme/card-border-hidden", 103 125 ); 126 126 + let pageBorderHidden = (entityPageBorderHidden || rootPageBorderHidden)?.data 127 127 + .value; 104 128 105 129 return ( 106 130 <div 107 107 - className="relative rounded-t-lg p-2 shadow-md text-primary border border-border border-b-transparent" 108 108 - style={{ 109 109 - backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", 110 110 - }} 131 131 + className={ 132 132 + pageBorderHidden 133 133 + ? "py-2 px-0 border border-transparent" 134 134 + : `relative rounded-t-lg p-2 shadow-md text-primary border border-border border-b-transparent` 135 135 + } 136 136 + style={ 137 137 + pageBorderHidden 138 138 + ? undefined 139 139 + : { 140 140 + backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", 141 141 + } 142 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 114 - style={{ 115 115 - backgroundImage: pageBGImage 116 116 - ? `url(${pageBGImage.data.src})` 117 117 - : undefined, 146 146 + style={ 147 147 + pageBorderHidden 148 148 + ? undefined 149 149 + : { 150 150 + backgroundImage: pageBackgroundImage 151 151 + ? `url(${pageBackgroundImage.data.src})` 152 152 + : undefined, 118 153 119 119 - backgroundRepeat: pageBGRepeat ? "repeat" : "no-repeat", 120 120 - opacity: pageBGOpacity?.data.value || 1, 121 121 - backgroundSize: !pageBGRepeat 122 122 - ? "cover" 123 123 - : `calc(${pageBGRepeat.data.value}px / 2 )`, 124 124 - }} 154 154 + backgroundRepeat: pageBackgroundImageRepeat 155 155 + ? "repeat" 156 156 + : "no-repeat", 157 157 + opacity: pageBackgroundImageOpacity?.data.value || 1, 158 158 + backgroundSize: !pageBackgroundImageRepeat?.data.value 159 159 + ? "cover" 160 160 + : `calc(${pageBackgroundImageRepeat.data.value}px / 2 )`, 161 161 + } 162 162 + } 125 163 /> 126 164 <div className="relative"> 127 165 <p className="font-bold">Theme Each Page!</p>