+19 -7

components/Blocks/PageLinkBlock.tsx

reviewed

··· 138 138 export function PagePreview(props: { entityID: string }) { 139 139 let blocks = useBlocks(props.entityID); 140 140 let previewRef = useRef<HTMLDivElement | null>(null); 141 141 + let { rootEntity } = useReplicache(); 141 142 142 142 - let cardBackgroundImage = useEntity( 143 143 - props.entityID, 143 143 + let rootBackgroundImage = useEntity( 144 144 + rootEntity, 144 145 "theme/card-background-image", 145 146 ); 146 146 - let cardBackgroundImageRepeat = useEntity( 147 147 - props.entityID, 147 147 + let rootBackgroundRepeat = useEntity( 148 148 + rootEntity, 148 149 "theme/card-background-image-repeat", 150 150 + ); 151 151 + let rootBackgroundOpacity = useEntity( 152 152 + rootEntity, 153 153 + "theme/card-background-image-opacity", 149 154 ); 150 155 156 156 + let cardBackgroundImage = 157 157 + useEntity(props.entityID, "theme/card-background-image") || 158 158 + rootBackgroundImage; 159 159 + let cardBackgroundImageRepeat = 160 160 + useEntity(props.entityID, "theme/card-background-image-repeat") || 161 161 + rootBackgroundRepeat; 151 162 let cardBackgroundImageOpacity = 152 163 useEntity(props.entityID, "theme/card-background-image-opacity")?.data 153 153 - .value || 1; 154 154 - 164 164 + .value || 165 165 + rootBackgroundOpacity?.data.value || 166 166 + 1; 155 167 let pageWidth = `var(--page-width-unitless)`; 156 168 return ( 157 169 <div ··· 168 180 }} 169 181 > 170 182 <div 171 171 - className={`pageBackground 183 183 + className={`pageLinkBlockBackground 172 184 absolute top-0 left-0 right-0 bottom-0 173 185 pointer-events-none 174 186 `}

+19 -5

components/Pages/index.tsx

reviewed

··· 161 161 }; 162 162 163 163 const DocContent = (props: { entityID: string }) => { 164 164 + let { rootEntity } = useReplicache(); 164 165 let isFocused = useUIState((s) => { 165 166 let focusedElement = s.focusedEntity; 166 167 let focusedPageID = ··· 169 170 : focusedElement?.parent; 170 171 return focusedPageID === props.entityID; 171 172 }); 172 172 - let cardBackgroundImage = useEntity( 173 173 - props.entityID, 173 173 + let rootBackgroundImage = useEntity( 174 174 + rootEntity, 174 175 "theme/card-background-image", 175 176 ); 176 176 - let cardBackgroundImageRepeat = useEntity( 177 177 - props.entityID, 177 177 + let rootBackgroundRepeat = useEntity( 178 178 + rootEntity, 178 179 "theme/card-background-image-repeat", 179 180 ); 181 181 + let rootBackgroundOpacity = useEntity( 182 182 + rootEntity, 183 183 + "theme/card-background-image-opacity", 184 184 + ); 185 185 + 186 186 + let cardBackgroundImage = 187 187 + useEntity(props.entityID, "theme/card-background-image") || 188 188 + rootBackgroundImage; 189 189 + let cardBackgroundImageRepeat = 190 190 + useEntity(props.entityID, "theme/card-background-image-repeat") || 191 191 + rootBackgroundRepeat; 180 192 let cardBackgroundImageOpacity = 181 193 useEntity(props.entityID, "theme/card-background-image-opacity")?.data 182 182 - .value || 1; 194 194 + .value || 195 195 + rootBackgroundOpacity?.data.value || 196 196 + 1; 183 197 return ( 184 198 <> 185 199 <div

+6 -3

components/Popover.tsx

reviewed

··· 16 16 open?: boolean; 17 17 onOpenChange?: (open: boolean) => void; 18 18 asChild?: boolean; 19 19 + arrowFill?: string; 19 20 }) => { 20 21 let [open, setOpen] = useState(props.open || false); 21 22 return ( ··· 55 56 > 56 57 <PopoverArrow 57 58 arrowFill={ 58 58 - props.background 59 59 - ? props.background 60 60 - : theme.colors["bg-page"] 59 59 + props.arrowFill 60 60 + ? props.arrowFill 61 61 + : props.background 62 62 + ? props.background 63 63 + : theme.colors["bg-page"] 61 64 } 62 65 arrowStroke={ 63 66 props.border ? props.border : theme.colors["border"]

+54

components/ThemeManager/AccentThemePickers.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import { useMemo } from "react"; 4 4 + import { pickers, setColorAttribute } from "./ThemeSetter"; 5 5 + import { ColorPicker } from "./ColorPicker"; 6 6 + import { useReplicache } from "src/replicache"; 7 7 + import { useColorAttribute } from "./useColorAttribute"; 8 8 + 9 9 + export const AccentThemePickers = (props: { 10 10 + entityID: string; 11 11 + openPicker: pickers; 12 12 + setOpenPicker: (thisPicker: pickers) => void; 13 13 + }) => { 14 14 + let { rep } = useReplicache(); 15 15 + let set = useMemo(() => { 16 16 + return setColorAttribute(rep, props.entityID); 17 17 + }, [rep, props.entityID]); 18 18 + 19 19 + let accent1Value = useColorAttribute( 20 20 + props.entityID, 21 21 + "theme/accent-background", 22 22 + ); 23 23 + let accent2Value = useColorAttribute(props.entityID, "theme/accent-text"); 24 24 + 25 25 + return ( 26 26 + <> 27 27 + <div 28 28 + className="themeLeafletControls text-accent-2 flex flex-col gap-2 h-full bg-bg-leaflet p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent-1))]" 29 29 + style={{ 30 30 + backgroundColor: "rgba(var(--accent-contrast), 0.5)", 31 31 + }} 32 32 + > 33 33 + <ColorPicker 34 34 + label="Accent" 35 35 + value={accent1Value} 36 36 + setValue={set("theme/accent-background")} 37 37 + thisPicker={"accent-1"} 38 38 + openPicker={props.openPicker} 39 39 + setOpenPicker={props.setOpenPicker} 40 40 + closePicker={() => props.setOpenPicker("null")} 41 41 + /> 42 42 + <ColorPicker 43 43 + label="Text on Accent" 44 44 + value={accent2Value} 45 45 + setValue={set("theme/accent-text")} 46 46 + thisPicker={"accent-2"} 47 47 + openPicker={props.openPicker} 48 48 + setOpenPicker={props.setOpenPicker} 49 49 + closePicker={() => props.setOpenPicker("null")} 50 50 + /> 51 51 + </div> 52 52 + </> 53 53 + ); 54 54 + };

+148

components/ThemeManager/ColorPicker.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import { 4 4 + ColorPicker as SpectrumColorPicker, 5 5 + parseColor, 6 6 + Color, 7 7 + ColorArea, 8 8 + ColorThumb, 9 9 + ColorSlider, 10 10 + Input, 11 11 + ColorField, 12 12 + SliderTrack, 13 13 + ColorSwatch, 14 14 + } from "react-aria-components"; 15 15 + import { pickers } from "./ThemeSetter"; 16 16 + import { Separator } from "components/Layout"; 17 17 + import { onMouseDown } from "src/utils/iosInputMouseDown"; 18 18 + 19 19 + export let thumbStyle = 20 20 + "w-4 h-4 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"; 21 21 + 22 22 + export const ColorPicker = (props: { 23 23 + label?: string; 24 24 + value: Color | undefined; 25 25 + alpha?: boolean; 26 26 + image?: boolean; 27 27 + setValue: (c: Color) => void; 28 28 + openPicker: pickers; 29 29 + thisPicker: pickers; 30 30 + setOpenPicker: (thisPicker: pickers) => void; 31 31 + closePicker: () => void; 32 32 + children?: React.ReactNode; 33 33 + }) => { 34 34 + return ( 35 35 + <SpectrumColorPicker value={props.value} onChange={props.setValue}> 36 36 + <div className="flex flex-col w-full gap-2"> 37 37 + <div className="colorPickerLabel flex gap-2 items-center "> 38 38 + <button 39 39 + className="flex gap-2 items-center " 40 40 + onClick={() => { 41 41 + if (props.openPicker === props.thisPicker) { 42 42 + props.setOpenPicker("null"); 43 43 + } else { 44 44 + props.setOpenPicker(props.thisPicker); 45 45 + } 46 46 + }} 47 47 + > 48 48 + <ColorSwatch 49 49 + color={props.value} 50 50 + className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 51 51 + style={{ 52 52 + backgroundSize: "cover", 53 53 + }} 54 54 + /> 55 55 + <strong className="">{props.label}</strong> 56 56 + </button> 57 57 + 58 58 + <div className="flex gap-1"> 59 59 + {props.value === undefined ? ( 60 60 + <div>default</div> 61 61 + ) : ( 62 62 + <ColorField className="w-fit gap-1"> 63 63 + <Input 64 64 + onMouseDown={onMouseDown} 65 65 + onFocus={(e) => { 66 66 + e.currentTarget.setSelectionRange( 67 67 + 1, 68 68 + e.currentTarget.value.length, 69 69 + ); 70 70 + }} 71 71 + onKeyDown={(e) => { 72 72 + if (e.key === "Enter") { 73 73 + e.currentTarget.blur(); 74 74 + } else return; 75 75 + }} 76 76 + onBlur={(e) => { 77 77 + props.setValue(parseColor(e.currentTarget.value)); 78 78 + }} 79 79 + className="w-[72px] bg-transparent outline-none" 80 80 + /> 81 81 + </ColorField> 82 82 + )} 83 83 + {props.alpha && ( 84 84 + <> 85 85 + <Separator classname="my-1" /> 86 86 + <ColorField className="w-fit pl-[6px]" channel="alpha"> 87 87 + <Input 88 88 + onMouseDown={onMouseDown} 89 89 + onFocus={(e) => { 90 90 + e.currentTarget.setSelectionRange( 91 91 + 0, 92 92 + e.currentTarget.value.length - 1, 93 93 + ); 94 94 + }} 95 95 + onKeyDown={(e) => { 96 96 + if (e.key === "Enter") { 97 97 + e.currentTarget.blur(); 98 98 + } else return; 99 99 + }} 100 100 + className="w-[72px] bg-transparent outline-none text-primary" 101 101 + /> 102 102 + </ColorField> 103 103 + </> 104 104 + )} 105 105 + </div> 106 106 + </div> 107 107 + {props.openPicker === props.thisPicker && ( 108 108 + <div className="w-full flex flex-col gap-2 px-1 pb-2"> 109 109 + { 110 110 + <> 111 111 + <ColorArea 112 112 + className="w-full h-[128px] rounded-md" 113 113 + colorSpace="hsb" 114 114 + xChannel="saturation" 115 115 + yChannel="brightness" 116 116 + > 117 117 + <ColorThumb className={thumbStyle} /> 118 118 + </ColorArea> 119 119 + <ColorSlider colorSpace="hsb" className="w-full" channel="hue"> 120 120 + <SliderTrack className="h-2 w-full rounded-md"> 121 121 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 122 122 + </SliderTrack> 123 123 + </ColorSlider> 124 124 + {props.alpha && ( 125 125 + <ColorSlider 126 126 + colorSpace="hsb" 127 127 + className="w-full mt-1 rounded-full" 128 128 + style={{ 129 129 + backgroundImage: `url(./transparent-bg.png)`, 130 130 + backgroundRepeat: "repeat", 131 131 + backgroundSize: "8px", 132 132 + }} 133 133 + channel="alpha" 134 134 + > 135 135 + <SliderTrack className="h-2 w-full rounded-md"> 136 136 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 137 137 + </SliderTrack> 138 138 + </ColorSlider> 139 139 + )} 140 140 + {props.children} 141 141 + </> 142 142 + } 143 143 + </div> 144 144 + )} 145 145 + </div> 146 146 + </SpectrumColorPicker> 147 147 + ); 148 148 + };

+176

components/ThemeManager/ImageSetters.tsx

reviewed

··· 1 1 + import * as Slider from "@radix-ui/react-slider"; 2 2 + import { theme } from "../../tailwind.config"; 3 3 + 4 4 + import { Color } from "react-aria-components"; 5 5 + 6 6 + import { useEntity, useReplicache } from "src/replicache"; 7 7 + import { addImage } from "src/utils/addImage"; 8 8 + import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 9 9 + import { CloseContrastSmall } from "components/Icons/CloseContrastSmall"; 10 10 + 11 11 + export const ImageSettings = (props: { 12 12 + entityID: string; 13 13 + card?: boolean; 14 14 + setValue: (c: Color) => void; 15 15 + }) => { 16 16 + let image = useEntity( 17 17 + props.entityID, 18 18 + props.card ? "theme/card-background-image" : "theme/background-image", 19 19 + ); 20 20 + let repeat = useEntity( 21 21 + props.entityID, 22 22 + props.card 23 23 + ? "theme/card-background-image-repeat" 24 24 + : "theme/background-image-repeat", 25 25 + ); 26 26 + let pageType = useEntity(props.entityID, "page/type")?.data.value; 27 27 + let { rep } = useReplicache(); 28 28 + return ( 29 29 + <> 30 30 + <div 31 31 + style={{ 32 32 + backgroundImage: image?.data.src 33 33 + ? `url(${image.data.src})` 34 34 + : undefined, 35 35 + backgroundPosition: "center", 36 36 + backgroundSize: "cover", 37 37 + }} 38 38 + className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px] bg-cover bg-center bg-no-repeat" 39 39 + > 40 40 + <label className="hover:cursor-pointer "> 41 41 + <div 42 42 + className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold" 43 43 + style={{ backgroundColor: "rgba(var(--bg-page), .8" }} 44 44 + > 45 45 + <BlockImageSmall /> Change Image 46 46 + </div> 47 47 + <div className="hidden"> 48 48 + <ImageInput {...props} /> 49 49 + </div> 50 50 + </label> 51 51 + <button 52 52 + onClick={() => { 53 53 + if (image) rep?.mutate.retractFact({ factID: image.id }); 54 54 + if (repeat) rep?.mutate.retractFact({ factID: repeat.id }); 55 55 + }} 56 56 + > 57 57 + <CloseContrastSmall 58 58 + fill={theme.colors["accent-1"]} 59 59 + stroke={theme.colors["accent-2"]} 60 60 + /> 61 61 + </button> 62 62 + </div> 63 63 + <div className="themeBGImageControls font-bold flex gap-2 items-center"> 64 64 + {pageType !== "canvas" && ( 65 65 + <label htmlFor="cover" className="flex shrink-0"> 66 66 + <input 67 67 + className="appearance-none" 68 68 + type="radio" 69 69 + id="cover" 70 70 + name="bg-image-options" 71 71 + value="cover" 72 72 + checked={!repeat} 73 73 + onChange={async (e) => { 74 74 + if (!e.currentTarget.checked) return; 75 75 + if (!repeat) return; 76 76 + if (repeat) 77 77 + await rep?.mutate.retractFact({ factID: repeat.id }); 78 78 + }} 79 79 + /> 80 80 + <div 81 81 + className={`shink-0 grow-0 w-fit border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`} 82 82 + > 83 83 + cover 84 84 + </div> 85 85 + </label> 86 86 + )} 87 87 + <label htmlFor="repeat" className="flex shrink-0"> 88 88 + <input 89 89 + className={`appearance-none `} 90 90 + type="radio" 91 91 + id="repeat" 92 92 + name="bg-image-options" 93 93 + value="repeat" 94 94 + checked={!!repeat} 95 95 + onChange={async (e) => { 96 96 + if (!e.currentTarget.checked) return; 97 97 + if (repeat) return; 98 98 + await rep?.mutate.assertFact({ 99 99 + entity: props.entityID, 100 100 + attribute: props.card 101 101 + ? "theme/card-background-image-repeat" 102 102 + : "theme/background-image-repeat", 103 103 + data: { type: "number", value: 500 }, 104 104 + }); 105 105 + }} 106 106 + /> 107 107 + <div 108 108 + className={`shink-0 grow-0 w-fit z-10 border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`} 109 109 + > 110 110 + repeat 111 111 + </div> 112 112 + </label> 113 113 + {(repeat || pageType === "canvas") && ( 114 114 + <Slider.Root 115 115 + className="relative grow flex items-center select-none touch-none w-full h-fit" 116 116 + value={[repeat?.data.value || 500]} 117 117 + max={3000} 118 118 + min={10} 119 119 + step={10} 120 120 + onValueChange={(value) => { 121 121 + rep?.mutate.assertFact({ 122 122 + entity: props.entityID, 123 123 + attribute: props.card 124 124 + ? "theme/card-background-image-repeat" 125 125 + : "theme/background-image-repeat", 126 126 + data: { type: "number", value: value[0] }, 127 127 + }); 128 128 + }} 129 129 + > 130 130 + <Slider.Track className="bg-accent-1 relative grow rounded-full h-[3px]"></Slider.Track> 131 131 + <Slider.Thumb 132 132 + className="flex w-4 h-4 rounded-full border-2 border-white bg-accent-1 shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C] cursor-pointer" 133 133 + aria-label="Volume" 134 134 + /> 135 135 + </Slider.Root> 136 136 + )} 137 137 + </div> 138 138 + </> 139 139 + ); 140 140 + }; 141 141 + 142 142 + export const ImageInput = (props: { 143 143 + entityID: string; 144 144 + onChange?: () => void; 145 145 + card?: boolean; 146 146 + }) => { 147 147 + let pageType = useEntity(props.entityID, "page/type")?.data.value; 148 148 + let { rep } = useReplicache(); 149 149 + return ( 150 150 + <input 151 151 + type="file" 152 152 + accept="image/*" 153 153 + onChange={async (e) => { 154 154 + let file = e.currentTarget.files?.[0]; 155 155 + if (!file || !rep) return; 156 156 + 157 157 + await addImage(file, rep, { 158 158 + entityID: props.entityID, 159 159 + attribute: props.card 160 160 + ? "theme/card-background-image" 161 161 + : "theme/background-image", 162 162 + }); 163 163 + props.onChange?.(); 164 164 + 165 165 + if (pageType === "canvas") { 166 166 + rep && 167 167 + rep.mutate.assertFact({ 168 168 + entity: props.entityID, 169 169 + attribute: "canvas/background-pattern", 170 170 + data: { type: "canvas-pattern-union", value: "plain" }, 171 171 + }); 172 172 + } 173 173 + }} 174 174 + /> 175 175 + ); 176 176 + };

+223

components/ThemeManager/LeafletBGPicker.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import { 4 4 + ColorPicker as SpectrumColorPicker, 5 5 + parseColor, 6 6 + Color, 7 7 + ColorArea, 8 8 + ColorThumb, 9 9 + ColorSlider, 10 10 + Input, 11 11 + ColorField, 12 12 + SliderTrack, 13 13 + ColorSwatch, 14 14 + } from "react-aria-components"; 15 15 + import { pickers, setColorAttribute } from "./ThemeSetter"; 16 16 + import { thumbStyle } from "./ColorPicker"; 17 17 + import { ImageInput, ImageSettings } from "./ImageSetters"; 18 18 + import { useEntity, useReplicache } from "src/replicache"; 19 19 + import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; 20 20 + import { Separator } from "components/Layout"; 21 21 + import { onMouseDown } from "src/utils/iosInputMouseDown"; 22 22 + import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 23 23 + 24 24 + export const LeafletBGPicker = (props: { 25 25 + entityID: string; 26 26 + openPicker: pickers; 27 27 + thisPicker: pickers; 28 28 + setOpenPicker: (thisPicker: pickers) => void; 29 29 + closePicker: () => void; 30 30 + setValue: (c: Color) => void; 31 31 + card?: boolean; 32 32 + }) => { 33 33 + let bgImage = useEntity( 34 34 + props.entityID, 35 35 + props.card ? "theme/card-background-image" : "theme/background-image", 36 36 + ); 37 37 + let bgColor = useColorAttribute( 38 38 + props.entityID, 39 39 + props.card ? "theme/card-background" : "theme/page-background", 40 40 + ); 41 41 + let open = props.openPicker == props.thisPicker; 42 42 + let { rep } = useReplicache(); 43 43 + 44 44 + return ( 45 45 + <> 46 46 + <div className="bgPickerLabel flex justify-between place-items-center "> 47 47 + <div className="bgPickerColorLabel flex gap-2 items-center"> 48 48 + <button 49 49 + onClick={() => { 50 50 + if (props.openPicker === props.thisPicker) { 51 51 + props.setOpenPicker("null"); 52 52 + } else { 53 53 + props.setOpenPicker(props.thisPicker); 54 54 + } 55 55 + }} 56 56 + className="flex gap-2 items-center" 57 57 + > 58 58 + <ColorSwatch 59 59 + color={bgColor} 60 60 + className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 61 61 + style={{ 62 62 + backgroundImage: bgImage?.data.src 63 63 + ? `url(${bgImage.data.src})` 64 64 + : undefined, 65 65 + backgroundSize: "cover", 66 66 + }} 67 67 + /> 68 68 + <strong 69 69 + className={`${props.card ? "text-primary" : "text-[#595959]"}`} 70 70 + > 71 71 + {props.card ? "Page" : "Background"} 72 72 + </strong> 73 73 + </button> 74 74 + 75 75 + <div className="flex"> 76 76 + {bgImage ? ( 77 77 + <div 78 78 + className={`${props.card ? "text-secondary" : "text-[#969696]"}`} 79 79 + > 80 80 + Image 81 81 + </div> 82 82 + ) : ( 83 83 + <> 84 84 + <ColorField className="w-fit gap-1" value={bgColor}> 85 85 + <Input 86 86 + onMouseDown={onMouseDown} 87 87 + onFocus={(e) => { 88 88 + e.currentTarget.setSelectionRange( 89 89 + 1, 90 90 + e.currentTarget.value.length, 91 91 + ); 92 92 + }} 93 93 + onPaste={(e) => { 94 94 + console.log(e); 95 95 + }} 96 96 + onKeyDown={(e) => { 97 97 + if (e.key === "Enter") { 98 98 + e.currentTarget.blur(); 99 99 + } else return; 100 100 + }} 101 101 + onBlur={(e) => { 102 102 + props.setValue(parseColor(e.currentTarget.value)); 103 103 + }} 104 104 + className={`w-[72px] bg-transparent outline-none ${props.card ? "text-primary" : "text-[#595959]"}`} 105 105 + /> 106 106 + </ColorField> 107 107 + {props.card && ( 108 108 + <> 109 109 + <Separator classname="my-1" /> 110 110 + 111 111 + <SpectrumColorPicker 112 112 + value={bgColor} 113 113 + onChange={setColorAttribute( 114 114 + rep, 115 115 + props.entityID, 116 116 + )( 117 117 + props.card 118 118 + ? "theme/card-background" 119 119 + : "theme/page-background", 120 120 + )} 121 121 + > 122 122 + <ColorField className="w-fit pl-[6px]" channel="alpha"> 123 123 + <Input 124 124 + onMouseDown={onMouseDown} 125 125 + onFocus={(e) => { 126 126 + e.currentTarget.setSelectionRange( 127 127 + 0, 128 128 + e.currentTarget.value.length - 1, 129 129 + ); 130 130 + }} 131 131 + onKeyDown={(e) => { 132 132 + if (e.key === "Enter") { 133 133 + e.currentTarget.blur(); 134 134 + } else return; 135 135 + }} 136 136 + className="w-[48px] bg-transparent outline-none text-primary" 137 137 + /> 138 138 + </ColorField> 139 139 + </SpectrumColorPicker> 140 140 + </> 141 141 + )} 142 142 + </> 143 143 + )} 144 144 + </div> 145 145 + </div> 146 146 + <label className="hover:cursor-pointer h-fit"> 147 147 + <div 148 148 + className={ 149 149 + props.card 150 150 + ? "text-tertiary hover:text-accent-contrast" 151 151 + : "text-[#8C8C8C] hover:text-[#0000FF]" 152 152 + } 153 153 + > 154 154 + <BlockImageSmall /> 155 155 + </div> 156 156 + <div className="hidden"> 157 157 + <ImageInput 158 158 + {...props} 159 159 + onChange={() => { 160 160 + props.setOpenPicker(props.thisPicker); 161 161 + }} 162 162 + /> 163 163 + </div> 164 164 + </label> 165 165 + </div> 166 166 + {open && ( 167 167 + <div className="bgImageAndColorPicker w-full flex flex-col gap-2 "> 168 168 + <SpectrumColorPicker 169 169 + value={bgColor} 170 170 + onChange={setColorAttribute( 171 171 + rep, 172 172 + props.entityID, 173 173 + )(props.card ? "theme/card-background" : "theme/page-background")} 174 174 + > 175 175 + {bgImage ? ( 176 176 + <ImageSettings 177 177 + entityID={props.entityID} 178 178 + card={props.card} 179 179 + setValue={props.setValue} 180 180 + /> 181 181 + ) : ( 182 182 + <> 183 183 + <ColorArea 184 184 + className="w-full h-[128px] rounded-md" 185 185 + colorSpace="hsb" 186 186 + xChannel="saturation" 187 187 + yChannel="brightness" 188 188 + > 189 189 + <ColorThumb className={thumbStyle} /> 190 190 + </ColorArea> 191 191 + <ColorSlider 192 192 + colorSpace="hsb" 193 193 + className="w-full " 194 194 + channel="hue" 195 195 + > 196 196 + <SliderTrack className="h-2 w-full rounded-md"> 197 197 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 198 198 + </SliderTrack> 199 199 + </ColorSlider> 200 200 + </> 201 201 + )} 202 202 + {props.card && ( 203 203 + <ColorSlider 204 204 + colorSpace="hsb" 205 205 + className="w-full mt-1 rounded-full" 206 206 + style={{ 207 207 + backgroundImage: `url(./transparent-bg.png)`, 208 208 + backgroundRepeat: "repeat", 209 209 + backgroundSize: "8px", 210 210 + }} 211 211 + channel="alpha" 212 212 + > 213 213 + <SliderTrack className="h-2 w-full rounded-md"> 214 214 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 215 215 + </SliderTrack> 216 216 + </ColorSlider> 217 217 + )} 218 218 + </SpectrumColorPicker> 219 219 + </div> 220 220 + )} 221 221 + </> 222 222 + ); 223 223 + };

+280

components/ThemeManager/PageThemePickers.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import { 4 4 + ColorPicker as SpectrumColorPicker, 5 5 + parseColor, 6 6 + Color, 7 7 + ColorThumb, 8 8 + ColorSlider, 9 9 + Input, 10 10 + ColorField, 11 11 + SliderTrack, 12 12 + ColorSwatch, 13 13 + } from "react-aria-components"; 14 14 + import { Checkbox } from "components/Checkbox"; 15 15 + import { useMemo } from "react"; 16 16 + import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 17 17 + import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; 18 18 + import { Separator } from "components/Layout"; 19 19 + import { onMouseDown } from "src/utils/iosInputMouseDown"; 20 20 + import { pickers, setColorAttribute } from "./ThemeSetter"; 21 21 + import { ImageInput, ImageSettings } from "./ImageSetters"; 22 22 + 23 23 + import { ColorPicker, thumbStyle } from "./ColorPicker"; 24 24 + import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 25 25 + import { Replicache } from "replicache"; 26 26 + import { CanvasBackgroundPattern } from "components/Canvas"; 27 27 + 28 28 + export const PageThemePickers = (props: { 29 29 + entityID: string; 30 30 + home?: boolean; 31 31 + openPicker: pickers; 32 32 + setOpenPicker: (thisPicker: pickers) => void; 33 33 + }) => { 34 34 + let { rep } = useReplicache(); 35 35 + let set = useMemo(() => { 36 36 + return setColorAttribute(rep, props.entityID); 37 37 + }, [rep, props.entityID]); 38 38 + 39 39 + let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 40 40 + let pageValue = useColorAttribute(props.entityID, "theme/card-background"); 41 41 + let primaryValue = useColorAttribute(props.entityID, "theme/primary"); 42 42 + let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 43 43 + 44 44 + return ( 45 45 + <div 46 46 + className="pageThemeBG flex flex-col gap-2 h-full text-primary bg-bg-leaflet p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]" 47 47 + style={{ backgroundColor: "rgba(var(--bg-page), 0.6)" }} 48 48 + > 49 49 + {pageType === "canvas" && ( 50 50 + <> 51 51 + <CanvasBGPatternPicker entityID={props.entityID} rep={rep} />{" "} 52 52 + <hr className="border-border-light w-full" /> 53 53 + </> 54 54 + )} 55 55 + <ColorPicker 56 56 + label="Page" 57 57 + value={pageValue} 58 58 + setValue={set("theme/card-background")} 59 59 + thisPicker={"page"} 60 60 + openPicker={props.openPicker} 61 61 + setOpenPicker={props.setOpenPicker} 62 62 + closePicker={() => props.setOpenPicker("null")} 63 63 + alpha 64 64 + > 65 65 + {(pageBGImage === null || !pageBGImage) && ( 66 66 + <label 67 67 + className={`m-0 h-max w-full py-0.5 px-1 68 68 + bg-accent-1 outline-transparent 69 69 + rounded-md text-base font-bold text-accent-2 70 70 + hover:cursor-pointer 71 71 + flex gap-2 items-center justify-center shrink-0 72 72 + transparent-outline hover:outline-accent-1 outline-offset-1 73 73 + `} 74 74 + > 75 75 + <BlockImageSmall /> Add Background Image 76 76 + <div className="hidden"> 77 77 + <ImageInput 78 78 + entityID={props.entityID} 79 79 + onChange={() => props.setOpenPicker("page-background-image")} 80 80 + card 81 81 + /> 82 82 + </div> 83 83 + </label> 84 84 + )} 85 85 + </ColorPicker> 86 86 + {pageBGImage && pageBGImage !== null && ( 87 87 + <PageBGPicker 88 88 + entityID={props.entityID} 89 89 + thisPicker={"page-background-image"} 90 90 + openPicker={props.openPicker} 91 91 + setOpenPicker={props.setOpenPicker} 92 92 + closePicker={() => props.setOpenPicker("null")} 93 93 + setValue={set("theme/card-background")} 94 94 + /> 95 95 + )} 96 96 + <ColorPicker 97 97 + label="Text" 98 98 + value={primaryValue} 99 99 + setValue={set("theme/primary")} 100 100 + thisPicker={"text"} 101 101 + openPicker={props.openPicker} 102 102 + setOpenPicker={props.setOpenPicker} 103 103 + closePicker={() => props.setOpenPicker("null")} 104 104 + /> 105 105 + <hr /> 106 106 + 107 107 + <Checkbox checked={true} onChange={(e) => {}}> 108 108 + Hide Page Borders 109 109 + </Checkbox> 110 110 + </div> 111 111 + ); 112 112 + }; 113 113 + 114 114 + export const PageBGPicker = (props: { 115 115 + entityID: string; 116 116 + openPicker: pickers; 117 117 + thisPicker: pickers; 118 118 + setOpenPicker: (thisPicker: pickers) => void; 119 119 + closePicker: () => void; 120 120 + setValue: (c: Color) => void; 121 121 + }) => { 122 122 + let bgImage = useEntity(props.entityID, "theme/card-background-image"); 123 123 + let bgColor = useColorAttribute(props.entityID, "theme/card-background"); 124 124 + let bgAlpha = 125 125 + useEntity(props.entityID, "theme/card-background-image-opacity")?.data 126 126 + .value || 1; 127 127 + let alphaColor = useMemo(() => { 128 128 + return parseColor(`rgba(0,0,0,${bgAlpha})`); 129 129 + }, [bgAlpha]); 130 130 + let open = props.openPicker == props.thisPicker; 131 131 + let { rep } = useReplicache(); 132 132 + 133 133 + return ( 134 134 + <> 135 135 + <div className="bgPickerColorLabel flex gap-2 items-center"> 136 136 + <button 137 137 + onClick={() => { 138 138 + if (props.openPicker === props.thisPicker) { 139 139 + props.setOpenPicker("null"); 140 140 + } else { 141 141 + props.setOpenPicker(props.thisPicker); 142 142 + } 143 143 + }} 144 144 + className="flex gap-2 items-center" 145 145 + > 146 146 + <ColorSwatch 147 147 + color={bgColor} 148 148 + className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 149 149 + style={{ 150 150 + backgroundImage: bgImage?.data.src 151 151 + ? `url(${bgImage.data.src})` 152 152 + : undefined, 153 153 + backgroundPosition: "center", 154 154 + backgroundSize: "cover", 155 155 + }} 156 156 + /> 157 157 + <strong className={`text-primary`}>BG Image</strong> 158 158 + </button> 159 159 + 160 160 + <SpectrumColorPicker 161 161 + value={alphaColor} 162 162 + onChange={(c) => { 163 163 + let alpha = c.getChannelValue("alpha"); 164 164 + rep?.mutate.assertFact({ 165 165 + entity: props.entityID, 166 166 + attribute: "theme/card-background-image-opacity", 167 167 + data: { type: "number", value: alpha }, 168 168 + }); 169 169 + }} 170 170 + > 171 171 + <Separator classname="h-5 my-1" /> 172 172 + <ColorField className="w-fit pl-[6px]" channel="alpha"> 173 173 + <Input 174 174 + onMouseDown={onMouseDown} 175 175 + onFocus={(e) => { 176 176 + e.currentTarget.setSelectionRange( 177 177 + 0, 178 178 + e.currentTarget.value.length - 1, 179 179 + ); 180 180 + }} 181 181 + onKeyDown={(e) => { 182 182 + if (e.key === "Enter") { 183 183 + e.currentTarget.blur(); 184 184 + } else return; 185 185 + }} 186 186 + className="w-[48px] bg-transparent outline-none text-primary" 187 187 + /> 188 188 + </ColorField> 189 189 + </SpectrumColorPicker> 190 190 + </div> 191 191 + {open && ( 192 192 + <div className="pageImagePicker flex flex-col gap-2"> 193 193 + <ImageSettings 194 194 + entityID={props.entityID} 195 195 + card 196 196 + setValue={props.setValue} 197 197 + /> 198 198 + 199 199 + <SpectrumColorPicker 200 200 + value={alphaColor} 201 201 + onChange={(c) => { 202 202 + let alpha = c.getChannelValue("alpha"); 203 203 + rep?.mutate.assertFact({ 204 204 + entity: props.entityID, 205 205 + attribute: "theme/card-background-image-opacity", 206 206 + data: { type: "number", value: alpha }, 207 207 + }); 208 208 + }} 209 209 + > 210 210 + <ColorSlider 211 211 + colorSpace="hsb" 212 212 + className="w-full mt-1 rounded-full" 213 213 + style={{ 214 214 + backgroundImage: `url(./transparent-bg.png)`, 215 215 + backgroundRepeat: "repeat", 216 216 + backgroundSize: "8px", 217 217 + }} 218 218 + channel="alpha" 219 219 + > 220 220 + <SliderTrack className="h-2 w-full rounded-md"> 221 221 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 222 222 + </SliderTrack> 223 223 + </ColorSlider> 224 224 + </SpectrumColorPicker> 225 225 + </div> 226 226 + )} 227 227 + </> 228 228 + ); 229 229 + }; 230 230 + 231 231 + const CanvasBGPatternPicker = (props: { 232 232 + entityID: string; 233 233 + rep: Replicache<ReplicacheMutators> | null; 234 234 + }) => { 235 235 + let selectedPattern = useEntity(props.entityID, "canvas/background-pattern") 236 236 + ?.data.value; 237 237 + return ( 238 238 + <div className="flex gap-2 h-8 "> 239 239 + <button 240 240 + className={`w-full rounded-md bg-bg-page border ${selectedPattern === "grid" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`} 241 241 + onMouseDown={() => { 242 242 + props.rep && 243 243 + props.rep.mutate.assertFact({ 244 244 + entity: props.entityID, 245 245 + attribute: "canvas/background-pattern", 246 246 + data: { type: "canvas-pattern-union", value: "grid" }, 247 247 + }); 248 248 + }} 249 249 + > 250 250 + <CanvasBackgroundPattern pattern="grid" scale={0.5} /> 251 251 + </button> 252 252 + <button 253 253 + className={`w-full rounded-md bg-bg-page border ${selectedPattern === "dot" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`} 254 254 + onMouseDown={() => { 255 255 + props.rep && 256 256 + props.rep.mutate.assertFact({ 257 257 + entity: props.entityID, 258 258 + attribute: "canvas/background-pattern", 259 259 + data: { type: "canvas-pattern-union", value: "dot" }, 260 260 + }); 261 261 + }} 262 262 + > 263 263 + <CanvasBackgroundPattern pattern="dot" scale={0.5} /> 264 264 + </button> 265 265 + <button 266 266 + className={`w-full rounded-md bg-bg-page border ${selectedPattern === "plain" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`} 267 267 + onMouseDown={() => { 268 268 + props.rep && 269 269 + props.rep.mutate.assertFact({ 270 270 + entity: props.entityID, 271 271 + attribute: "canvas/background-pattern", 272 272 + data: { type: "canvas-pattern-union", value: "plain" }, 273 273 + }); 274 274 + }} 275 275 + > 276 276 + <CanvasBackgroundPattern pattern="plain" /> 277 277 + </button> 278 278 + </div> 279 279 + ); 280 280 + };

+90 -225

components/ThemeManager/PageThemeSetter.tsx

reviewed

··· 1 1 - import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 2 2 - import { useColorAttribute } from "./useColorAttribute"; 1 1 + import { useEntity, useReplicache } from "src/replicache"; 3 2 import { useEntitySetContext } from "components/EntitySetProvider"; 4 4 - import { 5 5 - LeafletBGPicker, 6 6 - ColorPicker, 7 7 - pickers, 8 8 - SectionArrow, 9 9 - setColorAttribute, 10 10 - PageBGPicker, 11 11 - ImageInput, 12 12 - } from "./ThemeSetter"; 13 13 - import { useMemo, useState } from "react"; 14 14 - import { CanvasBackgroundPattern } from "components/Canvas"; 15 15 - import { Replicache } from "replicache"; 3 3 + import { pickers, SectionArrow } from "./ThemeSetter"; 4 4 + 5 5 + import { PageThemePickers } from "./PageThemePickers"; 6 6 + import { useState } from "react"; 16 7 import { theme } from "tailwind.config"; 17 8 import { ButtonPrimary } from "components/Buttons"; 18 18 - import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 19 9 import { PaintSmall } from "components/Icons/PaintSmall"; 10 10 + import { AccentThemePickers } from "./AccentThemePickers"; 20 11 21 12 export const PageThemeSetter = (props: { entityID: string }) => { 22 22 - let { rep, rootEntity } = useReplicache(); 13 13 + let { rootEntity } = useReplicache(); 23 14 let permission = useEntitySetContext().permissions.write; 24 15 let [openPicker, setOpenPicker] = useState<pickers>("null"); 25 16 26 26 - let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 27 27 - 28 28 - let accent1Value = useColorAttribute( 29 29 - props.entityID, 30 30 - "theme/accent-background", 31 31 - ); 32 32 - let accent2Value = useColorAttribute(props.entityID, "theme/accent-text"); 33 33 - let pageValue = useColorAttribute(props.entityID, "theme/card-background"); 34 34 - let primaryValue = useColorAttribute(props.entityID, "theme/primary"); 35 35 - 36 17 let leafletBGImage = useEntity(rootEntity, "theme/background-image"); 37 18 let leafletBGRepeat = useEntity(rootEntity, "theme/background-image-repeat"); 38 38 - let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 39 39 - let pageBGRepeat = useEntity( 40 40 - props.entityID, 41 41 - "theme/card-background-image-repeat", 42 42 - ); 43 43 - let pageBGOpacity = useEntity( 44 44 - props.entityID, 45 45 - "theme/card-background-image-opacity", 46 46 - ); 47 47 - 48 48 - let set = useMemo(() => { 49 49 - return setColorAttribute(rep, props.entityID); 50 50 - }, [rep, props.entityID]); 51 19 52 20 if (!permission) return null; 53 21 ··· 57 25 <div className="gap-2 flex font-bold "> 58 26 <PaintSmall /> Theme Page 59 27 </div> 60 60 - <ButtonPrimary 61 61 - compact 62 62 - onClick={() => { 63 63 - if (!rep) return; 64 64 - rep.mutate.retractAttribute({ 65 65 - entity: props.entityID, 66 66 - attribute: [ 67 67 - "theme/primary", 68 68 - "theme/card-background", 69 69 - "theme/accent-background", 70 70 - "theme/accent-text", 71 71 - "theme/card-background-image", 72 72 - "theme/card-background-image-repeat", 73 73 - "theme/card-background-image-opacity", 74 74 - "canvas/background-pattern", 75 75 - ], 76 76 - }); 77 77 - }} 78 78 - > 79 79 - reset 80 80 - </ButtonPrimary> 28 28 + <ResetButton entityID={props.entityID} /> 81 29 </div> 82 30 <div 83 31 className="pageThemeSetterContent bg-bg-leaflet w-80 p-3 pb-0 flex flex-col gap-2 rounded-md -mb-1" ··· 92 40 : `calc(${leafletBGRepeat.data.value}px / 2 )`, 93 41 }} 94 42 > 95 95 - <div 96 96 - className="pageAccentControls text-accent-2 flex flex-col gap-2 h-full bg-bg-leaflet mt-4 p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent-1))]" 97 97 - style={{ 98 98 - backgroundColor: "rgba(var(--accent-1), 0.6)", 99 99 - }} 100 100 - > 101 101 - <ColorPicker 102 102 - label="Accent" 103 103 - value={accent1Value} 104 104 - setValue={set("theme/accent-background")} 105 105 - thisPicker={"accent-1"} 106 106 - openPicker={openPicker} 107 107 - setOpenPicker={setOpenPicker} 108 108 - closePicker={() => setOpenPicker("null")} 109 109 - /> 110 110 - <ColorPicker 111 111 - label="Text on Accent" 112 112 - value={accent2Value} 113 113 - setValue={set("theme/accent-text")} 114 114 - thisPicker={"accent-2"} 43 43 + <AccentThemePickers 44 44 + entityID={props.entityID} 45 45 + openPicker={openPicker} 46 46 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 47 47 + /> 48 48 + <div className="flex flex-col -mb-[14px] mt-4 z-10"> 49 49 + <PageThemePickers 50 50 + entityID={props.entityID} 115 51 openPicker={openPicker} 116 116 - setOpenPicker={setOpenPicker} 117 117 - closePicker={() => setOpenPicker("null")} 52 52 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 118 53 /> 119 119 - </div> 120 120 - <div className="flex flex-col -mb-[14px] mt-4 z-10"> 121 121 - <div 122 122 - className="pageThemeBG flex flex-col gap-2 h-full text-primary bg-bg-leaflet p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]" 123 123 - style={{ backgroundColor: "rgba(var(--bg-page), 0.6)" }} 124 124 - > 125 125 - {pageType === "canvas" && ( 126 126 - <> 127 127 - <BackgroundPatternPicker entityID={props.entityID} rep={rep} />{" "} 128 128 - <hr className="border-border-light w-full" /> 129 129 - </> 130 130 - )} 131 131 - <ColorPicker 132 132 - label="Page" 133 133 - value={pageValue} 134 134 - setValue={set("theme/card-background")} 135 135 - thisPicker={"page"} 136 136 - openPicker={openPicker} 137 137 - setOpenPicker={setOpenPicker} 138 138 - closePicker={() => setOpenPicker("null")} 139 139 - alpha 140 140 - > 141 141 - {(pageBGImage === null || !pageBGImage) && ( 142 142 - <label 143 143 - className={`m-0 h-max w-full py-0.5 px-1 144 144 - bg-accent-1 outline-transparent 145 145 - rounded-md text-base font-bold text-accent-2 146 146 - hover:cursor-pointer 147 147 - flex gap-2 items-center justify-center shrink-0 148 148 - transparent-outline hover:outline-accent-1 outline-offset-1 149 149 - `} 150 150 - > 151 151 - <BlockImageSmall /> Add Background Image 152 152 - <div className="hidden"> 153 153 - <ImageInput 154 154 - entityID={props.entityID} 155 155 - onChange={() => setOpenPicker("page-background-image")} 156 156 - card 157 157 - /> 158 158 - </div> 159 159 - </label> 160 160 - )} 161 161 - </ColorPicker> 162 162 - {pageBGImage && pageBGImage !== null && ( 163 163 - <PageBGPicker 164 164 - entityID={props.entityID} 165 165 - thisPicker={"page-background-image"} 166 166 - openPicker={openPicker} 167 167 - setOpenPicker={setOpenPicker} 168 168 - closePicker={() => setOpenPicker("null")} 169 169 - setValue={set("theme/card-background")} 170 170 - /> 171 171 - )} 172 172 - <ColorPicker 173 173 - label="Text" 174 174 - value={primaryValue} 175 175 - setValue={set("theme/primary")} 176 176 - thisPicker={"text"} 177 177 - openPicker={openPicker} 178 178 - setOpenPicker={setOpenPicker} 179 179 - closePicker={() => setOpenPicker("null")} 180 180 - /> 181 181 - </div> 182 54 <SectionArrow 183 55 fill={theme.colors["primary"]} 184 56 stroke={theme.colors["bg-page"]} 185 57 className="ml-2" 186 58 /> 187 59 </div> 188 188 - <div 189 189 - className="relative rounded-t-lg p-2 shadow-md text-primary border border-border border-b-transparent" 190 190 - style={{ 191 191 - backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", 192 192 - }} 193 193 - > 194 194 - <div 195 195 - className="background absolute top-0 right-0 bottom-0 left-0 z-0 rounded-t-lg" 196 196 - style={{ 197 197 - backgroundImage: pageBGImage 198 198 - ? `url(${pageBGImage.data.src})` 199 199 - : undefined, 200 200 - 201 201 - backgroundRepeat: pageBGRepeat ? "repeat" : "no-repeat", 202 202 - opacity: pageBGOpacity?.data.value || 1, 203 203 - backgroundSize: !pageBGRepeat 204 204 - ? "cover" 205 205 - : `calc(${pageBGRepeat.data.value}px / 2 )`, 206 206 - }} 207 207 - /> 208 208 - <div className="relative"> 209 209 - <p className="font-bold">Theme Each Page!</p> 210 210 - <small className=""> 211 211 - OMG! You can theme each page individually in{" "} 212 212 - <span className="font-bold text-accent-contrast">Leaflet</span>! 213 213 - <br /> Buttons and sections appear like: 214 214 - </small> 215 215 - <div className="p-2 mt-2 border border-border bg-bg-page rounded-md text-sm flex justify-between items-center font-bold text-secondary"> 216 216 - Happy Theming! 217 217 - <div className="bg-accent-1 text-accent-2 py-0.5 px-2 w-fit text-center text-sm font-bold rounded-md"> 218 218 - Button 219 219 - </div> 220 220 - </div> 221 221 - </div> 222 222 - </div> 60 60 + <SamplePage entityID={props.entityID} /> 223 61 </div> 224 62 </> 225 63 ); 226 64 }; 227 65 228 228 - const BackgroundPatternPicker = (props: { 229 229 - entityID: string; 230 230 - rep: Replicache<ReplicacheMutators> | null; 231 231 - }) => { 232 232 - let selectedPattern = useEntity(props.entityID, "canvas/background-pattern") 233 233 - ?.data.value; 66 66 + const ResetButton = (props: { entityID: string }) => { 67 67 + let { rep } = useReplicache(); 68 68 + 69 69 + return ( 70 70 + <ButtonPrimary 71 71 + compact 72 72 + onClick={() => { 73 73 + if (!rep) return; 74 74 + rep.mutate.retractAttribute({ 75 75 + entity: props.entityID, 76 76 + attribute: [ 77 77 + "theme/primary", 78 78 + "theme/card-background", 79 79 + "theme/accent-background", 80 80 + "theme/accent-text", 81 81 + "theme/card-background-image", 82 82 + "theme/card-background-image-repeat", 83 83 + "theme/card-background-image-opacity", 84 84 + "canvas/background-pattern", 85 85 + ], 86 86 + }); 87 87 + }} 88 88 + > 89 89 + reset 90 90 + </ButtonPrimary> 91 91 + ); 92 92 + }; 93 93 + 94 94 + 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, 98 98 + "theme/card-background-image-repeat", 99 99 + ); 100 100 + let pageBGOpacity = useEntity( 101 101 + props.entityID, 102 102 + "theme/card-background-image-opacity", 103 103 + ); 104 104 + 234 105 return ( 235 235 - <div className="flex gap-2 h-8 "> 236 236 - <button 237 237 - className={`w-full rounded-md bg-bg-page border ${selectedPattern === "grid" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`} 238 238 - onMouseDown={() => { 239 239 - props.rep && 240 240 - props.rep.mutate.assertFact({ 241 241 - entity: props.entityID, 242 242 - attribute: "canvas/background-pattern", 243 243 - data: { type: "canvas-pattern-union", value: "grid" }, 244 244 - }); 245 245 - }} 246 246 - > 247 247 - <CanvasBackgroundPattern pattern="grid" scale={0.5} /> 248 248 - </button> 249 249 - <button 250 250 - className={`w-full rounded-md bg-bg-page border ${selectedPattern === "dot" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`} 251 251 - onMouseDown={() => { 252 252 - props.rep && 253 253 - props.rep.mutate.assertFact({ 254 254 - entity: props.entityID, 255 255 - attribute: "canvas/background-pattern", 256 256 - data: { type: "canvas-pattern-union", value: "dot" }, 257 257 - }); 258 258 - }} 259 259 - > 260 260 - <CanvasBackgroundPattern pattern="dot" scale={0.5} /> 261 261 - </button> 262 262 - <button 263 263 - className={`w-full rounded-md bg-bg-page border ${selectedPattern === "plain" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`} 264 264 - onMouseDown={() => { 265 265 - props.rep && 266 266 - props.rep.mutate.assertFact({ 267 267 - entity: props.entityID, 268 268 - attribute: "canvas/background-pattern", 269 269 - data: { type: "canvas-pattern-union", value: "plain" }, 270 270 - }); 106 106 + <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 + }} 111 111 + > 112 112 + <div 113 113 + 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, 118 118 + 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 )`, 271 124 }} 272 272 - > 273 273 - <CanvasBackgroundPattern pattern="plain" /> 274 274 - </button> 125 125 + /> 126 126 + <div className="relative"> 127 127 + <p className="font-bold">Theme Each Page!</p> 128 128 + <small className=""> 129 129 + OMG! You can theme each page individually in{" "} 130 130 + <span className="font-bold text-accent-contrast">Leaflet</span>! 131 131 + <br /> Buttons and sections appear like: 132 132 + </small> 133 133 + <div className="p-2 mt-2 border border-border bg-bg-page rounded-md text-sm flex justify-between items-center font-bold text-secondary"> 134 134 + Happy Theming! 135 135 + <div className="bg-accent-1 text-accent-2 py-0.5 px-2 w-fit text-center text-sm font-bold rounded-md"> 136 136 + Button 137 137 + </div> 138 138 + </div> 139 139 + </div> 275 140 </div> 276 141 ); 277 142 };

+82 -743

components/ThemeManager/ThemeSetter.tsx

reviewed

··· 1 1 "use client"; 2 2 import { Popover } from "components/Popover"; 3 3 - import * as Slider from "@radix-ui/react-slider"; 4 3 import { theme } from "../../tailwind.config"; 5 4 6 6 - import { 7 7 - ColorPicker as SpectrumColorPicker, 8 8 - parseColor, 9 9 - Color, 10 10 - ColorArea, 11 11 - ColorThumb, 12 12 - ColorSlider, 13 13 - Input, 14 14 - ColorField, 15 15 - SliderTrack, 16 16 - ColorSwatch, 17 17 - } from "react-aria-components"; 5 5 + import { Color } from "react-aria-components"; 18 6 19 19 - import { useEffect, useMemo, useState } from "react"; 7 7 + import { LeafletBGPicker } from "./LeafletBGPicker"; 8 8 + import { PageThemePickers } from "./PageThemePickers"; 9 9 + import { useMemo, useState } from "react"; 20 10 import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 21 11 import { Replicache } from "replicache"; 22 12 import { FilterAttributes } from "src/replicache/attributes"; 23 23 - import { 24 24 - colorToString, 25 25 - useColorAttribute, 26 26 - } from "components/ThemeManager/useColorAttribute"; 27 27 - import { addImage } from "src/utils/addImage"; 28 28 - import { Separator } from "components/Layout"; 13 13 + import { colorToString } from "components/ThemeManager/useColorAttribute"; 29 14 import { useEntitySetContext } from "components/EntitySetProvider"; 30 30 - import { isIOS, useViewportSize } from "@react-aria/utils"; 31 31 - import { onMouseDown } from "src/utils/iosInputMouseDown"; 32 15 import { ActionButton } from "components/ActionBar/ActionButton"; 33 33 - import { useInitialPageLoad } from "components/InitialPageLoadProvider"; 34 34 - import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 35 16 import { CheckboxChecked } from "components/Icons/CheckboxChecked"; 36 17 import { CheckboxEmpty } from "components/Icons/CheckboxEmpty"; 37 37 - import { CloseContrastSmall } from "components/Icons/CloseContrastSmall"; 38 18 import { PaintSmall } from "components/Icons/PaintSmall"; 19 19 + import { AccentThemePickers } from "./AccentThemePickers"; 39 20 40 21 export type pickers = 41 22 | "null" ··· 63 44 } 64 45 export const ThemePopover = (props: { entityID: string; home?: boolean }) => { 65 46 let { rep } = useReplicache(); 66 66 - let pageLoaded = useInitialPageLoad(); 67 67 - // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here. 68 68 - let leafletValue = useColorAttribute(props.entityID, "theme/page-background"); 69 69 - let pageValue = useColorAttribute(props.entityID, "theme/card-background"); 70 70 - let primaryValue = useColorAttribute(props.entityID, "theme/primary"); 71 71 - let accent1Value = useColorAttribute( 72 72 - props.entityID, 73 73 - "theme/accent-background", 74 74 - ); 75 75 - let accent2Value = useColorAttribute(props.entityID, "theme/accent-text"); 76 47 48 48 + // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here. 77 49 let permission = useEntitySetContext().permissions.write; 78 50 let leafletBGImage = useEntity(props.entityID, "theme/background-image"); 79 51 let leafletBGRepeat = useEntity( 80 52 props.entityID, 81 53 "theme/background-image-repeat", 82 54 ); 83 83 - let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 84 84 - let pageBGRepeat = useEntity( 85 85 - props.entityID, 86 86 - "theme/card-background-image-repeat", 87 87 - ); 88 55 89 56 let [openPicker, setOpenPicker] = useState<pickers>( 90 57 props.home === true ? "leaflet" : "null", ··· 93 60 return setColorAttribute(rep, props.entityID); 94 61 }, [rep, props.entityID]); 95 62 96 96 - let randomPositions = useMemo(() => { 97 97 - let values = [] as string[]; 98 98 - for (let i = 0; i < 3; i++) { 99 99 - if (!pageLoaded) values.push(`100% 100%`); 100 100 - else 101 101 - values.push( 102 102 - `${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%`, 103 103 - ); 104 104 - } 105 105 - return values; 106 106 - }, [pageLoaded]); 107 107 - 108 108 - let gradient = [ 109 109 - `radial-gradient(at ${randomPositions[0]}, ${accent1Value.toString("hex")}80 2px, transparent 70%)`, 110 110 - `radial-gradient(at ${randomPositions[1]}, ${pageValue.toString("hex")}66 2px, transparent 60%)`, 111 111 - `radial-gradient(at ${randomPositions[2]}, ${primaryValue.toString("hex")}B3 2px, transparent 100%)`, 112 112 - ].join(", "); 113 113 - let viewheight = useViewportSize().height; 114 63 if (!permission) return null; 115 64 116 65 return ( 117 66 <> 118 67 <Popover 119 119 - className="w-80" 68 68 + className="w-80 bg-white" 69 69 + arrowFill="#FFFFFF" 120 70 asChild 121 71 trigger={<ActionButton icon={<PaintSmall />} label="Theme" />} 122 72 > 123 73 <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar"> 124 74 <div className="themeBGLeaflet flex"> 125 75 <div 126 126 - className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full px-2 pt-3`} 76 76 + className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `} 127 77 > 128 128 - <div className="bgPickerBody w-full flex flex-col gap-2 p-2 border border-[#CCCCCC] rounded-md"> 78 78 + <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md"> 129 79 <LeafletBGPicker 130 80 entityID={props.entityID} 131 81 thisPicker={"leaflet"} ··· 158 108 ? "cover" 159 109 : `calc(${leafletBGRepeat.data.value}px / 2 )`, 160 110 }} 161 161 - className={`bg-bg-leaflet mx-2 p-3 mb-2 flex flex-col rounded-md border border-border pb-0`} 111 111 + className={`bg-bg-leaflet p-3 mb-2 flex flex-col rounded-md border border-border pb-0`} 162 112 > 163 113 <div className={`flex flex-col z-10 mt-4 -mb-[6px] `}> 164 164 - <div 165 165 - className="themeLeafletControls text-accent-2 flex flex-col gap-2 h-full bg-bg-leaflet p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent-1))]" 166 166 - style={{ 167 167 - backgroundColor: "rgba(var(--accent-1), 0.6)", 168 168 - }} 169 169 - > 170 170 - <ColorPicker 171 171 - label="Accent" 172 172 - value={accent1Value} 173 173 - setValue={set("theme/accent-background")} 174 174 - thisPicker={"accent-1"} 175 175 - openPicker={openPicker} 176 176 - setOpenPicker={setOpenPicker} 177 177 - closePicker={() => setOpenPicker("null")} 178 178 - /> 179 179 - <ColorPicker 180 180 - label="Text on Accent" 181 181 - value={accent2Value} 182 182 - setValue={set("theme/accent-text")} 183 183 - thisPicker={"accent-2"} 184 184 - openPicker={openPicker} 185 185 - setOpenPicker={setOpenPicker} 186 186 - closePicker={() => setOpenPicker("null")} 187 187 - /> 188 188 - </div> 114 114 + <AccentThemePickers 115 115 + entityID={props.entityID} 116 116 + openPicker={openPicker} 117 117 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 118 118 + /> 189 119 <SectionArrow 190 120 fill={theme.colors["accent-2"]} 191 121 stroke={theme.colors["accent-1"]} ··· 193 123 /> 194 124 </div> 195 125 196 196 - <div 197 197 - onClick={(e) => { 198 198 - e.target === e.currentTarget && setOpenPicker("accent-1"); 199 199 - }} 200 200 - className="pointer-cursor font-bold relative text-center text-lg py-2 rounded-md bg-accent-1 text-accent-2 shadow-md flex items-center justify-center" 201 201 - > 202 202 - <div 203 203 - className="cursor-pointer w-fit" 204 204 - onClick={() => { 205 205 - setOpenPicker("accent-2"); 206 206 - }} 207 207 - > 208 208 - Example Button 209 209 - </div> 210 210 - </div> 126 126 + <SampleButton 127 127 + entityID={props.entityID} 128 128 + setOpenPicker={setOpenPicker} 129 129 + /> 211 130 212 131 <div className="flex flex-col mt-8 -mb-[6px] z-10"> 213 213 - <div 214 214 - className="themeLeafletControls flex flex-col gap-2 h-full text-primary bg-bg-leaflet p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]" 215 215 - style={{ backgroundColor: "rgba(var(--bg-page, 0.6)" }} 216 216 - > 217 217 - <ColorPicker 218 218 - label={props.home ? "Menu" : "Page"} 219 219 - alpha 220 220 - value={pageValue} 221 221 - setValue={set("theme/card-background")} 222 222 - thisPicker={"page"} 223 223 - openPicker={openPicker} 224 224 - setOpenPicker={setOpenPicker} 225 225 - closePicker={() => setOpenPicker("null")} 226 226 - /> 227 227 - <ColorPicker 228 228 - label={props.home ? "Menu Text" : "Text"} 229 229 - value={primaryValue} 230 230 - setValue={set("theme/primary")} 231 231 - thisPicker={"text"} 232 232 - openPicker={openPicker} 233 233 - setOpenPicker={setOpenPicker} 234 234 - closePicker={() => setOpenPicker("null")} 235 235 - /> 236 236 - </div> 132 132 + <PageThemePickers 133 133 + home 134 134 + entityID={props.entityID} 135 135 + openPicker={openPicker} 136 136 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 137 137 + /> 237 138 <SectionArrow 238 139 fill={theme.colors["primary"]} 239 140 stroke={theme.colors["bg-page"]} ··· 241 142 /> 242 143 </div> 243 144 244 244 - <SamplePage setOpenPicker={setOpenPicker} home={props.home} /> 145 145 + <SamplePage 146 146 + setOpenPicker={setOpenPicker} 147 147 + home={props.home} 148 148 + entityID={props.entityID} 149 149 + /> 245 150 </div> 246 151 {!props.home && <WatermarkSetter entityID={props.entityID} />} 247 152 </div> ··· 249 154 </> 250 155 ); 251 156 }; 157 157 + 252 158 function WatermarkSetter(props: { entityID: string }) { 253 159 let { rep } = useReplicache(); 254 160 let checked = useEntity(props.entityID, "theme/page-leaflet-watermark"); ··· 283 189 ); 284 190 } 285 191 286 286 - const SamplePage = (props: { 287 287 - home: boolean | undefined; 288 288 - setOpenPicker: (picker: "page" | "text") => void; 192 192 + const SampleButton = (props: { 193 193 + entityID: string; 194 194 + setOpenPicker: (thisPicker: pickers) => void; 289 195 }) => { 290 196 return ( 291 197 <div 292 198 onClick={(e) => { 293 293 - e.currentTarget === e.target && props.setOpenPicker("page"); 294 294 - }} 295 295 - className={`${props.home ? "rounded-md " : "rounded-t-lg "} cursor-pointer p-2 border border-border border-b-transparent shadow-md text-primary`} 296 296 - style={{ 297 297 - backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", 199 199 + e.target === e.currentTarget && props.setOpenPicker("accent-1"); 298 200 }} 201 201 + className="pointer-cursor font-bold relative text-center text-lg py-2 rounded-md bg-accent-1 text-accent-2 shadow-md flex items-center justify-center" 299 202 > 300 300 - <p 203 203 + <div 204 204 + className="cursor-pointer w-fit" 301 205 onClick={() => { 302 302 - props.setOpenPicker("text"); 206 206 + props.setOpenPicker("accent-2"); 303 207 }} 304 304 - className=" cursor-pointer font-bold w-fit" 305 208 > 306 306 - Hello! 307 307 - </p> 308 308 - <small onClick={() => props.setOpenPicker("text")}> 309 309 - Welcome to{" "} 310 310 - <span className="font-bold text-accent-contrast">Leaflet</span>. 311 311 - It&apos;s a super easy and fun way to make, share, and collab on little 312 312 - bits of paper 313 313 - </small> 209 209 + Example Button 210 210 + </div> 314 211 </div> 315 212 ); 316 213 }; 317 317 - 318 318 - let thumbStyle = 319 319 - "w-4 h-4 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"; 320 320 - 321 321 - export const ColorPicker = (props: { 322 322 - label?: string; 323 323 - value: Color | undefined; 324 324 - alpha?: boolean; 325 325 - image?: boolean; 326 326 - setValue: (c: Color) => void; 327 327 - openPicker: pickers; 328 328 - thisPicker: pickers; 329 329 - setOpenPicker: (thisPicker: pickers) => void; 330 330 - closePicker: () => void; 331 331 - children?: React.ReactNode; 332 332 - }) => { 333 333 - return ( 334 334 - <SpectrumColorPicker value={props.value} onChange={props.setValue}> 335 335 - <div className="flex flex-col w-full gap-2"> 336 336 - <div className="colorPickerLabel flex gap-2 items-center "> 337 337 - <button 338 338 - className="flex gap-2 items-center " 339 339 - onClick={() => { 340 340 - if (props.openPicker === props.thisPicker) { 341 341 - props.setOpenPicker("null"); 342 342 - } else { 343 343 - props.setOpenPicker(props.thisPicker); 344 344 - } 345 345 - }} 346 346 - > 347 347 - <ColorSwatch 348 348 - color={props.value} 349 349 - className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 350 350 - style={{ 351 351 - backgroundSize: "cover", 352 352 - }} 353 353 - /> 354 354 - <strong className="">{props.label}</strong> 355 355 - </button> 356 356 - 357 357 - <div className="flex gap-1"> 358 358 - {props.value === undefined ? ( 359 359 - <div>default</div> 360 360 - ) : ( 361 361 - <ColorField className="w-fit gap-1"> 362 362 - <Input 363 363 - onMouseDown={onMouseDown} 364 364 - onFocus={(e) => { 365 365 - e.currentTarget.setSelectionRange( 366 366 - 1, 367 367 - e.currentTarget.value.length, 368 368 - ); 369 369 - }} 370 370 - onKeyDown={(e) => { 371 371 - if (e.key === "Enter") { 372 372 - e.currentTarget.blur(); 373 373 - } else return; 374 374 - }} 375 375 - onBlur={(e) => { 376 376 - props.setValue(parseColor(e.currentTarget.value)); 377 377 - }} 378 378 - className="w-[72px] bg-transparent outline-none" 379 379 - /> 380 380 - </ColorField> 381 381 - )} 382 382 - {props.alpha && ( 383 383 - <> 384 384 - <Separator classname="my-1" /> 385 385 - <ColorField className="w-fit pl-[6px]" channel="alpha"> 386 386 - <Input 387 387 - onMouseDown={onMouseDown} 388 388 - onFocus={(e) => { 389 389 - e.currentTarget.setSelectionRange( 390 390 - 0, 391 391 - e.currentTarget.value.length - 1, 392 392 - ); 393 393 - }} 394 394 - onKeyDown={(e) => { 395 395 - if (e.key === "Enter") { 396 396 - e.currentTarget.blur(); 397 397 - } else return; 398 398 - }} 399 399 - className="w-[72px] bg-transparent outline-none text-primary" 400 400 - /> 401 401 - </ColorField> 402 402 - </> 403 403 - )} 404 404 - </div> 405 405 - </div> 406 406 - {props.openPicker === props.thisPicker && ( 407 407 - <div className="w-full flex flex-col gap-2 px-1 pb-2"> 408 408 - { 409 409 - <> 410 410 - <ColorArea 411 411 - className="w-full h-[128px] rounded-md" 412 412 - colorSpace="hsb" 413 413 - xChannel="saturation" 414 414 - yChannel="brightness" 415 415 - > 416 416 - <ColorThumb className={thumbStyle} /> 417 417 - </ColorArea> 418 418 - <ColorSlider colorSpace="hsb" className="w-full" channel="hue"> 419 419 - <SliderTrack className="h-2 w-full rounded-md"> 420 420 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 421 421 - </SliderTrack> 422 422 - </ColorSlider> 423 423 - {props.alpha && ( 424 424 - <ColorSlider 425 425 - colorSpace="hsb" 426 426 - className="w-full mt-1 rounded-full" 427 427 - style={{ 428 428 - backgroundImage: `url(./transparent-bg.png)`, 429 429 - backgroundRepeat: "repeat", 430 430 - backgroundSize: "8px", 431 431 - }} 432 432 - channel="alpha" 433 433 - > 434 434 - <SliderTrack className="h-2 w-full rounded-md"> 435 435 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 436 436 - </SliderTrack> 437 437 - </ColorSlider> 438 438 - )} 439 439 - {props.children} 440 440 - </> 441 441 - } 442 442 - </div> 443 443 - )} 444 444 - </div> 445 445 - </SpectrumColorPicker> 446 446 - ); 447 447 - }; 448 448 - 449 449 - export const LeafletBGPicker = (props: { 214 214 + const SamplePage = (props: { 450 215 entityID: string; 451 451 - openPicker: pickers; 452 452 - thisPicker: pickers; 453 453 - setOpenPicker: (thisPicker: pickers) => void; 454 454 - closePicker: () => void; 455 455 - setValue: (c: Color) => void; 456 456 - card?: boolean; 216 216 + home: boolean | undefined; 217 217 + setOpenPicker: (picker: "page" | "text") => void; 457 218 }) => { 458 458 - let bgImage = useEntity( 219 219 + let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 220 220 + let pageBGRepeat = useEntity( 459 221 props.entityID, 460 460 - props.card ? "theme/card-background-image" : "theme/background-image", 222 222 + "theme/card-background-image-repeat", 461 223 ); 462 462 - let bgColor = useColorAttribute( 224 224 + let pageBGOpacity = useEntity( 463 225 props.entityID, 464 464 - props.card ? "theme/card-background" : "theme/page-background", 226 226 + "theme/card-background-image-opacity", 465 227 ); 466 466 - let open = props.openPicker == props.thisPicker; 467 467 - let { rep } = useReplicache(); 468 228 469 229 return ( 470 470 - <> 471 471 - <div className="bgPickerLabel flex justify-between place-items-center "> 472 472 - <div className="bgPickerColorLabel flex gap-2 items-center"> 473 473 - <button 474 474 - onClick={() => { 475 475 - if (props.openPicker === props.thisPicker) { 476 476 - props.setOpenPicker("null"); 477 477 - } else { 478 478 - props.setOpenPicker(props.thisPicker); 479 479 - } 480 480 - }} 481 481 - className="flex gap-2 items-center" 482 482 - > 483 483 - <ColorSwatch 484 484 - color={bgColor} 485 485 - className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 486 486 - style={{ 487 487 - backgroundImage: bgImage?.data.src 488 488 - ? `url(${bgImage.data.src})` 489 489 - : undefined, 490 490 - backgroundSize: "cover", 491 491 - }} 492 492 - /> 493 493 - <strong 494 494 - className={`${props.card ? "text-primary" : "text-[#595959]"}`} 495 495 - > 496 496 - {props.card ? "Page" : "Background"} 497 497 - </strong> 498 498 - </button> 499 499 - 500 500 - <div className="flex"> 501 501 - {bgImage ? ( 502 502 - <div 503 503 - className={`${props.card ? "text-secondary" : "text-[#969696]"}`} 504 504 - > 505 505 - Image 506 506 - </div> 507 507 - ) : ( 508 508 - <> 509 509 - <ColorField className="w-fit gap-1" value={bgColor}> 510 510 - <Input 511 511 - onMouseDown={onMouseDown} 512 512 - onFocus={(e) => { 513 513 - e.currentTarget.setSelectionRange( 514 514 - 1, 515 515 - e.currentTarget.value.length, 516 516 - ); 517 517 - }} 518 518 - onPaste={(e) => { 519 519 - console.log(e); 520 520 - }} 521 521 - onKeyDown={(e) => { 522 522 - if (e.key === "Enter") { 523 523 - e.currentTarget.blur(); 524 524 - } else return; 525 525 - }} 526 526 - onBlur={(e) => { 527 527 - props.setValue(parseColor(e.currentTarget.value)); 528 528 - }} 529 529 - className={`w-[72px] bg-transparent outline-none ${props.card ? "text-primary" : "text-[#595959]"}`} 530 530 - /> 531 531 - </ColorField> 532 532 - {props.card && ( 533 533 - <> 534 534 - <Separator classname="my-1" /> 535 535 - 536 536 - <SpectrumColorPicker 537 537 - value={bgColor} 538 538 - onChange={setColorAttribute( 539 539 - rep, 540 540 - props.entityID, 541 541 - )( 542 542 - props.card 543 543 - ? "theme/card-background" 544 544 - : "theme/page-background", 545 545 - )} 546 546 - > 547 547 - <ColorField className="w-fit pl-[6px]" channel="alpha"> 548 548 - <Input 549 549 - onMouseDown={onMouseDown} 550 550 - onFocus={(e) => { 551 551 - e.currentTarget.setSelectionRange( 552 552 - 0, 553 553 - e.currentTarget.value.length - 1, 554 554 - ); 555 555 - }} 556 556 - onKeyDown={(e) => { 557 557 - if (e.key === "Enter") { 558 558 - e.currentTarget.blur(); 559 559 - } else return; 560 560 - }} 561 561 - className="w-[48px] bg-transparent outline-none text-primary" 562 562 - /> 563 563 - </ColorField> 564 564 - </SpectrumColorPicker> 565 565 - </> 566 566 - )} 567 567 - </> 568 568 - )} 569 569 - </div> 570 570 - </div> 571 571 - <label className="hover:cursor-pointer h-fit"> 572 572 - <div 573 573 - className={ 574 574 - props.card 575 575 - ? "text-tertiary hover:text-accent-contrast" 576 576 - : "text-[#8C8C8C] hover:text-[#0000FF]" 577 577 - } 578 578 - > 579 579 - <BlockImageSmall /> 580 580 - </div> 581 581 - <div className="hidden"> 582 582 - <ImageInput 583 583 - {...props} 584 584 - onChange={() => { 585 585 - props.setOpenPicker(props.thisPicker); 586 586 - }} 587 587 - /> 588 588 - </div> 589 589 - </label> 590 590 - </div> 591 591 - {open && ( 592 592 - <div className="bgImageAndColorPicker w-full flex flex-col gap-2 "> 593 593 - <SpectrumColorPicker 594 594 - value={bgColor} 595 595 - onChange={setColorAttribute( 596 596 - rep, 597 597 - props.entityID, 598 598 - )(props.card ? "theme/card-background" : "theme/page-background")} 599 599 - > 600 600 - {bgImage ? ( 601 601 - <ImageSettings 602 602 - entityID={props.entityID} 603 603 - card={props.card} 604 604 - setValue={props.setValue} 605 605 - /> 606 606 - ) : ( 607 607 - <> 608 608 - <ColorArea 609 609 - className="w-full h-[128px] rounded-md" 610 610 - colorSpace="hsb" 611 611 - xChannel="saturation" 612 612 - yChannel="brightness" 613 613 - > 614 614 - <ColorThumb className={thumbStyle} /> 615 615 - </ColorArea> 616 616 - <ColorSlider 617 617 - colorSpace="hsb" 618 618 - className="w-full " 619 619 - channel="hue" 620 620 - > 621 621 - <SliderTrack className="h-2 w-full rounded-md"> 622 622 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 623 623 - </SliderTrack> 624 624 - </ColorSlider> 625 625 - </> 626 626 - )} 627 627 - {props.card && ( 628 628 - <ColorSlider 629 629 - colorSpace="hsb" 630 630 - className="w-full mt-1 rounded-full" 631 631 - style={{ 632 632 - backgroundImage: `url(./transparent-bg.png)`, 633 633 - backgroundRepeat: "repeat", 634 634 - backgroundSize: "8px", 635 635 - }} 636 636 - channel="alpha" 637 637 - > 638 638 - <SliderTrack className="h-2 w-full rounded-md"> 639 639 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 640 640 - </SliderTrack> 641 641 - </ColorSlider> 642 642 - )} 643 643 - </SpectrumColorPicker> 644 644 - </div> 645 645 - )} 646 646 - </> 647 647 - ); 648 648 - }; 649 649 - 650 650 - export const PageBGPicker = (props: { 651 651 - entityID: string; 652 652 - openPicker: pickers; 653 653 - thisPicker: pickers; 654 654 - setOpenPicker: (thisPicker: pickers) => void; 655 655 - closePicker: () => void; 656 656 - setValue: (c: Color) => void; 657 657 - }) => { 658 658 - let bgImage = useEntity(props.entityID, "theme/card-background-image"); 659 659 - let bgColor = useColorAttribute(props.entityID, "theme/card-background"); 660 660 - let bgAlpha = 661 661 - useEntity(props.entityID, "theme/card-background-image-opacity")?.data 662 662 - .value || 1; 663 663 - let alphaColor = useMemo(() => { 664 664 - return parseColor(`rgba(0,0,0,${bgAlpha})`); 665 665 - }, [bgAlpha]); 666 666 - let open = props.openPicker == props.thisPicker; 667 667 - let { rep } = useReplicache(); 668 668 - 669 669 - return ( 670 670 - <> 671 671 - <div className="bgPickerColorLabel flex gap-2 items-center"> 672 672 - <button 673 673 - onClick={() => { 674 674 - if (props.openPicker === props.thisPicker) { 675 675 - props.setOpenPicker("null"); 676 676 - } else { 677 677 - props.setOpenPicker(props.thisPicker); 678 678 - } 679 679 - }} 680 680 - className="flex gap-2 items-center" 681 681 - > 682 682 - <ColorSwatch 683 683 - color={bgColor} 684 684 - className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 685 685 - style={{ 686 686 - backgroundImage: bgImage?.data.src 687 687 - ? `url(${bgImage.data.src})` 688 688 - : undefined, 689 689 - backgroundPosition: "center", 690 690 - backgroundSize: "cover", 691 691 - }} 692 692 - /> 693 693 - <strong className={`text-primary`}>Background Image</strong> 694 694 - </button> 695 695 - 696 696 - <SpectrumColorPicker 697 697 - value={alphaColor} 698 698 - onChange={(c) => { 699 699 - let alpha = c.getChannelValue("alpha"); 700 700 - rep?.mutate.assertFact({ 701 701 - entity: props.entityID, 702 702 - attribute: "theme/card-background-image-opacity", 703 703 - data: { type: "number", value: alpha }, 704 704 - }); 705 705 - }} 706 706 - > 707 707 - <Separator classname="h-5 my-1" /> 708 708 - <ColorField className="w-fit pl-[6px]" channel="alpha"> 709 709 - <Input 710 710 - onMouseDown={onMouseDown} 711 711 - onFocus={(e) => { 712 712 - e.currentTarget.setSelectionRange( 713 713 - 0, 714 714 - e.currentTarget.value.length - 1, 715 715 - ); 716 716 - }} 717 717 - onKeyDown={(e) => { 718 718 - if (e.key === "Enter") { 719 719 - e.currentTarget.blur(); 720 720 - } else return; 721 721 - }} 722 722 - className="w-[48px] bg-transparent outline-none text-primary" 723 723 - /> 724 724 - </ColorField> 725 725 - </SpectrumColorPicker> 726 726 - </div> 727 727 - {open && ( 728 728 - <div className="pageImagePicker flex flex-col gap-2"> 729 729 - <ImageSettings 730 730 - entityID={props.entityID} 731 731 - card 732 732 - setValue={props.setValue} 733 733 - /> 734 734 - 735 735 - <SpectrumColorPicker 736 736 - value={alphaColor} 737 737 - onChange={(c) => { 738 738 - let alpha = c.getChannelValue("alpha"); 739 739 - rep?.mutate.assertFact({ 740 740 - entity: props.entityID, 741 741 - attribute: "theme/card-background-image-opacity", 742 742 - data: { type: "number", value: alpha }, 743 743 - }); 744 744 - }} 745 745 - > 746 746 - <ColorSlider 747 747 - colorSpace="hsb" 748 748 - className="w-full mt-1 rounded-full" 749 749 - style={{ 750 750 - backgroundImage: `url(./transparent-bg.png)`, 751 751 - backgroundRepeat: "repeat", 752 752 - backgroundSize: "8px", 753 753 - }} 754 754 - channel="alpha" 755 755 - > 756 756 - <SliderTrack className="h-2 w-full rounded-md"> 757 757 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 758 758 - </SliderTrack> 759 759 - </ColorSlider> 760 760 - </SpectrumColorPicker> 761 761 - </div> 762 762 - )} 763 763 - </> 764 764 - ); 765 765 - }; 766 766 - 767 767 - export const ImageInput = (props: { 768 768 - entityID: string; 769 769 - onChange?: () => void; 770 770 - card?: boolean; 771 771 - }) => { 772 772 - let pageType = useEntity(props.entityID, "page/type")?.data.value; 773 773 - let { rep } = useReplicache(); 774 774 - return ( 775 775 - <input 776 776 - type="file" 777 777 - accept="image/*" 778 778 - onChange={async (e) => { 779 779 - let file = e.currentTarget.files?.[0]; 780 780 - if (!file || !rep) return; 781 781 - 782 782 - await addImage(file, rep, { 783 783 - entityID: props.entityID, 784 784 - attribute: props.card 785 785 - ? "theme/card-background-image" 786 786 - : "theme/background-image", 787 787 - }); 788 788 - props.onChange?.(); 789 789 - 790 790 - if (pageType === "canvas") { 791 791 - rep && 792 792 - rep.mutate.assertFact({ 793 793 - entity: props.entityID, 794 794 - attribute: "canvas/background-pattern", 795 795 - data: { type: "canvas-pattern-union", value: "plain" }, 796 796 - }); 797 797 - } 230 230 + <div 231 231 + onClick={(e) => { 232 232 + e.currentTarget === e.target && props.setOpenPicker("page"); 233 233 + }} 234 234 + className={`${props.home ? "rounded-md " : "rounded-t-lg "} relative cursor-pointer p-2 border border-border border-b-transparent shadow-md text-primary`} 235 235 + style={{ 236 236 + backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", 798 237 }} 799 799 - /> 800 800 - ); 801 801 - }; 802 802 - 803 803 - export const ImageSettings = (props: { 804 804 - entityID: string; 805 805 - card?: boolean; 806 806 - setValue: (c: Color) => void; 807 807 - }) => { 808 808 - let image = useEntity( 809 809 - props.entityID, 810 810 - props.card ? "theme/card-background-image" : "theme/background-image", 811 811 - ); 812 812 - let repeat = useEntity( 813 813 - props.entityID, 814 814 - props.card 815 815 - ? "theme/card-background-image-repeat" 816 816 - : "theme/background-image-repeat", 817 817 - ); 818 818 - let pageType = useEntity(props.entityID, "page/type")?.data.value; 819 819 - let { rep } = useReplicache(); 820 820 - return ( 821 821 - <> 238 238 + > 822 239 <div 240 240 + className="background absolute top-0 right-0 bottom-0 left-0 z-0 rounded-t-lg" 823 241 style={{ 824 824 - backgroundImage: image?.data.src 825 825 - ? `url(${image.data.src})` 242 242 + backgroundImage: pageBGImage 243 243 + ? `url(${pageBGImage.data.src})` 826 244 : undefined, 827 827 - backgroundPosition: "center", 828 828 - backgroundSize: "cover", 245 245 + 246 246 + backgroundRepeat: pageBGRepeat ? "repeat" : "no-repeat", 247 247 + opacity: pageBGOpacity?.data.value || 1, 248 248 + backgroundSize: !pageBGRepeat 249 249 + ? "cover" 250 250 + : `calc(${pageBGRepeat.data.value}px / 2 )`, 829 251 }} 830 830 - className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px] bg-cover bg-center bg-no-repeat" 831 831 - > 832 832 - <label className="hover:cursor-pointer "> 833 833 - <div 834 834 - className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold" 835 835 - style={{ backgroundColor: "rgba(var(--bg-page), .6" }} 836 836 - > 837 837 - <BlockImageSmall /> Change Image 838 838 - </div> 839 839 - <div className="hidden"> 840 840 - <ImageInput {...props} /> 841 841 - </div> 842 842 - </label> 843 843 - <button 252 252 + /> 253 253 + <div> 254 254 + <p 844 255 onClick={() => { 845 845 - if (image) rep?.mutate.retractFact({ factID: image.id }); 846 846 - if (repeat) rep?.mutate.retractFact({ factID: repeat.id }); 256 256 + props.setOpenPicker("text"); 847 257 }} 258 258 + className=" cursor-pointer font-bold w-fit" 848 259 > 849 849 - <CloseContrastSmall 850 850 - fill={theme.colors["accent-1"]} 851 851 - stroke={theme.colors["accent-2"]} 852 852 - /> 853 853 - </button> 260 260 + Hello! 261 261 + </p> 262 262 + <small onClick={() => props.setOpenPicker("text")}> 263 263 + Welcome to{" "} 264 264 + <span className="font-bold text-accent-contrast">Leaflet</span>. 265 265 + It&apos;s a super easy and fun way to make, share, and collab on 266 266 + little bits of paper 267 267 + </small> 854 268 </div> 855 855 - <div className="themeBGImageControls font-bold flex gap-2 items-center"> 856 856 - {pageType !== "canvas" && ( 857 857 - <label htmlFor="cover" className="flex shrink-0"> 858 858 - <input 859 859 - className="appearance-none" 860 860 - type="radio" 861 861 - id="cover" 862 862 - name="bg-image-options" 863 863 - value="cover" 864 864 - checked={!repeat} 865 865 - onChange={async (e) => { 866 866 - if (!e.currentTarget.checked) return; 867 867 - if (!repeat) return; 868 868 - if (repeat) 869 869 - await rep?.mutate.retractFact({ factID: repeat.id }); 870 870 - }} 871 871 - /> 872 872 - <div 873 873 - className={`shink-0 grow-0 w-fit border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`} 874 874 - > 875 875 - cover 876 876 - </div> 877 877 - </label> 878 878 - )} 879 879 - <label htmlFor="repeat" className="flex shrink-0"> 880 880 - <input 881 881 - className={`appearance-none `} 882 882 - type="radio" 883 883 - id="repeat" 884 884 - name="bg-image-options" 885 885 - value="repeat" 886 886 - checked={!!repeat} 887 887 - onChange={async (e) => { 888 888 - if (!e.currentTarget.checked) return; 889 889 - if (repeat) return; 890 890 - await rep?.mutate.assertFact({ 891 891 - entity: props.entityID, 892 892 - attribute: props.card 893 893 - ? "theme/card-background-image-repeat" 894 894 - : "theme/background-image-repeat", 895 895 - data: { type: "number", value: 500 }, 896 896 - }); 897 897 - }} 898 898 - /> 899 899 - <div 900 900 - className={`shink-0 grow-0 w-fit z-10 border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`} 901 901 - > 902 902 - repeat 903 903 - </div> 904 904 - </label> 905 905 - {(repeat || pageType === "canvas") && ( 906 906 - <Slider.Root 907 907 - className="relative grow flex items-center select-none touch-none w-full h-fit" 908 908 - value={[repeat?.data.value || 500]} 909 909 - max={3000} 910 910 - min={10} 911 911 - step={10} 912 912 - onValueChange={(value) => { 913 913 - rep?.mutate.assertFact({ 914 914 - entity: props.entityID, 915 915 - attribute: props.card 916 916 - ? "theme/card-background-image-repeat" 917 917 - : "theme/background-image-repeat", 918 918 - data: { type: "number", value: value[0] }, 919 919 - }); 920 920 - }} 921 921 - > 922 922 - <Slider.Track className="bg-accent-1 relative grow rounded-full h-[3px]"></Slider.Track> 923 923 - <Slider.Thumb 924 924 - className="flex w-4 h-4 rounded-full border-2 border-white bg-accent-1 shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C] cursor-pointer" 925 925 - aria-label="Volume" 926 926 - /> 927 927 - </Slider.Root> 928 928 - )} 929 929 - </div> 930 930 - </> 269 269 + </div> 931 270 ); 932 271 }; 933 272