+34 -19

components/Blocks/ImageBlock.tsx

··· 19 19 import { ImageAltSmall } from "components/Icons/ImageAlt"; 20 20 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 21 21 import { useSubscribe } from "src/replicache/useSubscribe"; 22 22 - import { ImageCoverImage } from "components/Icons/ImageCoverImage"; 22 22 + import { 23 23 + ImageCoverImage, 24 24 + ImageCoverImageRemove, 25 25 + } from "components/Icons/ImageCoverImage"; 26 26 + import { 27 27 + ButtonPrimary, 28 28 + ButtonSecondary, 29 29 + ButtonTertiary, 30 30 + } from "components/Buttons"; 31 31 + import { CheckTiny } from "components/Icons/CheckTiny"; 23 32 24 33 export function ImageBlock(props: BlockProps & { preview?: boolean }) { 25 34 let { rep } = useReplicache(); ··· 198 207 ); 199 208 200 209 // Only show if focused, in a publication, has write permissions, and no cover image is set 201 201 - if ( 202 202 - !isFocused || 203 203 - !pubData?.publications || 204 204 - !entity_set.permissions.write || 205 205 - coverImage 206 206 - ) 210 210 + if (!isFocused || !pubData?.publications || !entity_set.permissions.write) 207 211 return null; 208 208 - 209 209 - return ( 210 210 - <div className="absolute top-2 left-2"> 211 211 - <button 212 212 - className="flex items-center gap-1 text-xs bg-bg-page/80 hover:bg-bg-page text-secondary hover:text-primary px-2 py-1 rounded-md border border-border hover:border-primary transition-colors" 212 212 + if (coverImage) 213 213 + return ( 214 214 + <ButtonSecondary 215 215 + className="absolute top-2 right-2" 213 216 onClick={async (e) => { 214 217 e.preventDefault(); 215 218 e.stopPropagation(); 216 219 await rep?.mutate.updatePublicationDraft({ 217 217 - cover_image: props.entityID, 220 220 + cover_image: null, 218 221 }); 219 222 }} 220 223 > 221 221 - <span className="w-4 h-4 flex items-center justify-center"> 222 222 - <ImageCoverImage /> 223 223 - </span> 224 224 - Set as Cover 225 225 - </button> 226 226 - </div> 224 224 + Remove Cover Image 225 225 + <ImageCoverImageRemove /> 226 226 + </ButtonSecondary> 227 227 + ); 228 228 + return ( 229 229 + <ButtonPrimary 230 230 + className="absolute top-2 right-2" 231 231 + onClick={async (e) => { 232 232 + e.preventDefault(); 233 233 + e.stopPropagation(); 234 234 + await rep?.mutate.updatePublicationDraft({ 235 235 + cover_image: props.entityID, 236 236 + }); 237 237 + }} 238 238 + > 239 239 + Use as Cover Image 240 240 + <ImageCoverImage /> 241 241 + </ButtonPrimary> 227 242 ); 228 243 }; 229 244

+20

components/Icons/ImageCoverImage.tsx

··· 1 1 + import { Props } from "./Props"; 2 2 + 1 3 export const ImageCoverImage = () => ( 2 4 <svg 3 5 width="24" ··· 12 14 /> 13 15 </svg> 14 16 ); 17 17 + 18 18 + export const ImageCoverImageRemove = (props: Props) => { 19 19 + return ( 20 20 + <svg 21 21 + width="24" 22 22 + height="24" 23 23 + viewBox="0 0 24 24" 24 24 + fill="none" 25 25 + xmlns="http://www.w3.org/2000/svg" 26 26 + {...props} 27 27 + > 28 28 + <path 29 29 + d="M21.7744 1.48538C22.0673 1.19249 22.542 1.19259 22.835 1.48538C23.1279 1.77824 23.1278 2.253 22.835 2.54592L2.22461 23.1602C1.93172 23.4526 1.45683 23.4528 1.16406 23.1602C0.871349 22.8674 0.871599 22.3926 1.16406 22.0996L21.7744 1.48538ZM22.9229 4.22561C23.1551 4.66244 23.2881 5.16029 23.2881 5.68948V18.3106C23.2879 20.0361 21.8886 21.4362 20.1631 21.4365H5.71582L6.96582 20.1865H20.1631C21.1982 20.1862 22.0379 19.3457 22.0381 18.3106V15.8067H11.3447L12.5947 14.5567H22.0381V10.1299L21.1738 9.42385L19.9775 10.9678C19.5515 11.5167 18.8233 11.7335 18.166 11.5078L16.3213 10.875C16.3092 10.8709 16.2965 10.8691 16.2842 10.8662L17.2705 9.87893L18.5723 10.3262C18.7238 10.378 18.892 10.3278 18.9902 10.2012L20.2061 8.63284L19.2764 7.87307L20.1641 6.9844L22.0381 8.51565V5.68948C22.0381 5.51371 22.0121 5.34397 21.9668 5.18264L22.9229 4.22561ZM17.6797 3.81448H3.83789C2.80236 3.81448 1.96289 4.65394 1.96289 5.68948V11.4805L4.8291 8.91897C5.18774 8.59894 5.70727 8.54438 6.12207 8.77346L6.20312 8.82327L10.083 11.4112L9.18164 12.3125L8.81055 12.0655L8.03027 12.8692C7.55062 13.3622 6.78587 13.438 6.21875 13.0489C6.17034 13.0156 6.10737 13.0113 6.05469 13.0371L4.79883 13.6573C4.258 13.9241 3.61319 13.8697 3.125 13.5157L2.26172 12.8887L1.96289 13.1573V14.5567H6.93945L5.68945 15.8067H1.96289V18.3115C1.96305 18.6614 2.06054 18.9882 2.22754 19.2686L1.32812 20.168C0.943293 19.6486 0.713079 19.0075 0.712891 18.3115V5.68948C0.712891 3.96359 2.112 2.56448 3.83789 2.56448H18.9287L17.6797 3.81448ZM14.4883 17.2578C14.9025 17.2578 15.2382 17.5937 15.2383 18.0078C15.2382 18.422 14.9025 18.7578 14.4883 18.7578H8.39453L9.89453 17.2578H14.4883ZM3.14941 18.3467C3.09734 18.2446 3.06545 18.1302 3.06543 18.0078C3.0655 17.5938 3.40144 17.2581 3.81543 17.2578H4.23828L3.14941 18.3467ZM4.71094 10.7012L4.70996 10.7002L3.21484 12.0362L3.85938 12.5039C3.97197 12.5854 4.12047 12.5976 4.24512 12.5362L5.50098 11.917C5.95928 11.6909 6.5044 11.7294 6.92578 12.0186C6.99104 12.0633 7.07958 12.0547 7.13477 11.9981L7.75488 11.3604L5.58984 9.91506L4.71094 10.7012ZM8.94629 4.52249C9.92559 4.52266 10.7195 5.31662 10.7197 6.29592C10.7197 7.27533 9.92567 8.06919 8.94629 8.06936C7.96687 8.06924 7.17292 7.27536 7.17285 6.29592C7.17304 5.31659 7.96694 4.52261 8.94629 4.52249ZM8.94629 5.52249C8.51923 5.52261 8.17304 5.86888 8.17285 6.29592C8.17292 6.72307 8.51915 7.06924 8.94629 7.06936C9.37338 7.06919 9.71966 6.72304 9.71973 6.29592C9.71954 5.86891 9.37331 5.52266 8.94629 5.52249Z" 30 30 + fill="currentColor" 31 31 + /> 32 32 + </svg> 33 33 + ); 34 34 + };

+6 -3

components/Toolbar/ImageToolbar.tsx

··· 6 6 import { ImageAltSmall, ImageRemoveAltSmall } from "components/Icons/ImageAlt"; 7 7 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 8 8 import { useSubscribe } from "src/replicache/useSubscribe"; 9 9 - import { ImageCoverImage } from "components/Icons/ImageCoverImage"; 9 9 + import { 10 10 + ImageCoverImage, 11 11 + ImageCoverImageRemove, 12 12 + } from "components/Icons/ImageCoverImage"; 10 13 import { Separator } from "components/Layout"; 11 14 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 12 15 ··· 134 137 } 135 138 }} 136 139 tooltipContent={ 137 137 - <div>{isCoverImage ? "Remove Cover Image" : "Set as Cover Image"}</div> 140 140 + <div>{isCoverImage ? "Remove Cover Image" : "Use as Cover Image"}</div> 138 141 } 139 142 > 140 140 - <ImageCoverImage /> 143 143 + {isCoverImage ? <ImageCoverImageRemove /> : <ImageCoverImage />} 141 144 </ToolbarButton> 142 145 ); 143 146 };