a tool for shared writing and social publishing
0
fork

Configure Feed

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

fixed issues with the turnaries that caused the global page bg optison to override the local ones

celine 268262c2 3496f2d8

+83 -38
+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
··· 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
··· 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
··· 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>