a tool for shared writing and social publishing
0
fork

Configure Feed

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

slight tweaks to the text toolbar, even more legible ordered list icon, closing submenus on select, save button on link input

celine 9df48749 364084c9

+95 -35
+74 -34
app/test/TextToolbar.tsx
··· 21 21 BlockLinkSmall, 22 22 BlockCardSmall, 23 23 BlockSmall, 24 + CheckTiny, 24 25 } from "components/Icons"; 25 26 import { create } from "zustand"; 26 27 import { combine } from "zustand/middleware"; ··· 52 53 set(() => ({ header: newHeader })), 53 54 setList: (newList: "ordered" | "unordered" | "none") => 54 55 set(() => ({ list: newList })), 55 - setLink: (newLink: string) => set(() => ({ link: newLink })), 56 + setLink: (newLink: string | undefined) => set(() => ({ link: newLink })), 56 57 }), 57 58 ), 58 59 ); ··· 148 149 </ToolbarButton> 149 150 </> 150 151 ) : toolbarState === "link" ? ( 151 - <> 152 - <ToolbarButton 153 - active={state.link !== undefined && state.link !== ""} 154 - onClick={() => setToolbarState("default")} 155 - > 156 - <LinkTextToolbarSmall /> 157 - </ToolbarButton> 158 - <Separator /> 159 - <input 160 - className="w-full grow bg-transparent border-none outline-none " 161 - placeholder="www.leafl.et" 162 - value={state.link} 163 - onChange={(e) => state.setLink(e.target.value)} 164 - /> 165 - <button onClick={() => setToolbarState("default")}> 166 - <CloseTiny /> 167 - </button> 168 - </> 152 + <LinkToolbar onClose={() => setToolbarState("default")} /> 169 153 ) : toolbarState === "header" ? ( 170 154 <HeaderToolbar onClose={() => setToolbarState("default")} /> 171 155 ) : toolbarState === "list" ? ( ··· 177 161 ); 178 162 }; 179 163 164 + const LinkToolbar = (props: { onClose: () => void }) => { 165 + let state = useTextState(); 166 + let [linkValue, setLinkValue] = useState(state.link); 167 + return ( 168 + <div className=" w-full flex items-center gap-[6px]"> 169 + <ToolbarButton 170 + active={state.link !== undefined && state.link !== ""} 171 + onClick={() => props.onClose} 172 + > 173 + <LinkTextToolbarSmall /> 174 + </ToolbarButton> 175 + <Separator /> 176 + <input 177 + className="w-full grow bg-transparent border-none outline-none " 178 + placeholder="www.leafl.et" 179 + value={linkValue} 180 + onChange={(e) => setLinkValue(e.target.value)} 181 + /> 182 + <div className="flex items-center gap-3"> 183 + <button 184 + className="hover:text-accent" 185 + onClick={() => { 186 + state.setLink(linkValue); 187 + props.onClose(); 188 + }} 189 + > 190 + <CheckTiny /> 191 + </button> 192 + <button className="hover:text-accent" onClick={() => props.onClose()}> 193 + <CloseTiny /> 194 + </button> 195 + </div> 196 + </div> 197 + ); 198 + }; 199 + 180 200 const HeaderToolbar = (props: { onClose: () => void }) => { 181 201 let state = useTextState(); 182 202 ··· 200 220 </ToolbarButton> 201 221 <Separator /> 202 222 <ToolbarButton 203 - onClick={() => state.setHeader("h1")} 223 + onClick={() => { 224 + state.setHeader("h1"); 225 + props.onClose(); 226 + }} 204 227 active={state.header === "h1"} 205 228 > 206 229 <Header1Small /> 207 230 </ToolbarButton> 208 231 <ToolbarButton 209 - onClick={() => state.setHeader("h2")} 232 + onClick={() => { 233 + state.setHeader("h2"); 234 + props.onClose(); 235 + }} 210 236 active={state.header === "h2"} 211 237 > 212 238 <Header2Small /> 213 239 </ToolbarButton> 214 240 <ToolbarButton 215 - onClick={() => state.setHeader("h3")} 241 + onClick={() => { 242 + state.setHeader("h3"); 243 + props.onClose(); 244 + }} 216 245 active={state.header === "h3"} 217 246 > 218 247 <Header3Small /> 219 248 </ToolbarButton> 220 249 <ToolbarButton 221 - onClick={() => state.setHeader("p")} 250 + onClick={() => { 251 + state.setHeader("p"); 252 + props.onClose(); 253 + }} 222 254 active={state.header === "p"} 223 255 className="px-[6px]" 224 256 > 225 257 Paragraph 226 258 </ToolbarButton> 227 259 </div> 228 - <button onClick={() => props.onClose()}> 229 - <CloseTiny /> 230 - </button> 260 + <CloseToolbarButton onClose={props.onClose} /> 231 261 </div> 232 262 ); 233 263 }; ··· 250 280 </ToolbarButton> 251 281 <Separator /> 252 282 <ToolbarButton 253 - onClick={() => state.setList("unordered")} 283 + onClick={() => { 284 + state.setList("unordered"); 285 + props.onClose(); 286 + }} 254 287 active={state.list === "unordered"} 255 288 > 256 289 <ListUnorderedSmall /> 257 290 </ToolbarButton> 258 291 <ToolbarButton 259 - onClick={() => state.setList("ordered")} 292 + onClick={() => { 293 + state.setList("ordered"); 294 + props.onClose(); 295 + }} 260 296 active={state.list === "ordered"} 261 297 > 262 298 <ListOrderedSmall /> ··· 270 306 <ListIndentDecreaseSmall /> 271 307 </ToolbarButton> 272 308 </div> 273 - <button onClick={() => props.onClose()}> 274 - <CloseTiny /> 275 - </button> 309 + <CloseToolbarButton onClose={props.onClose} /> 276 310 </div> 277 311 ); 278 312 }; ··· 295 329 <BlockCardSmall /> 296 330 </ToolbarButton> 297 331 </div> 298 - <button onClick={() => props.onClose()}> 299 - <CloseTiny /> 300 - </button> 332 + <CloseToolbarButton onClose={props.onClose} /> 301 333 </div> 302 334 ); 303 335 }; ··· 325 357 const Separator = () => { 326 358 return <div className="h-6 border-r border-border" />; 327 359 }; 360 + 361 + const CloseToolbarButton = (props: { onClose: () => void }) => { 362 + return ( 363 + <button className="hover:text-accent" onClick={() => props.onClose()}> 364 + <CloseTiny /> 365 + </button> 366 + ); 367 + };
+21 -1
components/Icons.tsx
··· 174 174 }; 175 175 176 176 // TINY ICONS 16x16 177 + export const CheckTiny = (props: Props) => { 178 + return ( 179 + <svg 180 + width="16" 181 + height="16" 182 + viewBox="0 0 16 16" 183 + fill="none" 184 + xmlns="http://www.w3.org/2000/svg" 185 + {...props} 186 + > 187 + <path 188 + fillRule="evenodd" 189 + clipRule="evenodd" 190 + d="M14.7921 2.03304C15.3262 2.4705 15.4045 3.25808 14.967 3.79213L6.7757 13.7921C6.55723 14.0588 6.2383 14.2235 5.89434 14.2471C5.55039 14.2707 5.21195 14.1512 4.95907 13.9169L1.15037 10.3874C0.644007 9.91821 0.613911 9.12732 1.08315 8.62096C1.55239 8.11459 2.34327 8.0845 2.84964 8.55374L5.68371 11.18L13.033 2.20794C13.4705 1.67388 14.258 1.59558 14.7921 2.03304Z" 191 + fill="currentColor" 192 + /> 193 + </svg> 194 + ); 195 + }; 177 196 178 197 export const CloseTiny = (props: Props) => { 179 198 return ( ··· 439 458 viewBox="0 0 24 24" 440 459 fill="none" 441 460 xmlns="http://www.w3.org/2000/svg" 461 + {...props} 442 462 > 443 463 <path 444 464 fillRule="evenodd" 445 465 clipRule="evenodd" 446 - d="M3.28318 7.72032V8.31824H5.81487V7.72032L5.17736 7.62699V4.07153L3.27734 4.36904V4.93488L3.82906 4.94363V7.62699L3.28318 7.72032ZM8.32275 5.19482C7.77047 5.19482 7.32275 5.64254 7.32275 6.19482C7.32275 6.74711 7.77047 7.19482 8.32275 7.19482H19.7002C20.2525 7.19482 20.7002 6.74711 20.7002 6.19482C20.7002 5.64254 20.2525 5.19482 19.7002 5.19482H8.32275ZM8.32275 10.9949C7.77047 10.9949 7.32275 11.4426 7.32275 11.9949C7.32275 12.5472 7.77047 12.9949 8.32275 12.9949H19.7002C20.2525 12.9949 20.7002 12.5472 20.7002 11.9949C20.7002 11.4426 20.2525 10.9949 19.7002 10.9949H8.32275ZM7.32275 17.7949C7.32275 17.2426 7.77047 16.7949 8.32275 16.7949H19.7002C20.2525 16.7949 20.7002 17.2426 20.7002 17.7949C20.7002 18.3472 20.2525 18.7949 19.7002 18.7949H8.32275C7.77047 18.7949 7.32275 18.3472 7.32275 17.7949ZM2.82851 14.1488V13.1859L3.86848 12.3148C4.19515 12.0441 4.43121 11.7095 4.50316 11.6025C4.5751 11.4956 4.65295 11.3542 4.67116 11.2613C4.69916 11.1183 4.66571 10.991 4.59182 10.8937C4.51793 10.7965 4.39963 10.7701 4.25186 10.7701C4.15315 10.7701 3.99293 10.8234 3.91515 10.9381C3.87158 11.0024 3.84048 11.0781 3.80035 11.2881L2.77309 11.2613L2.76726 11.2438C2.76142 10.9812 2.81781 10.744 2.93642 10.5321C3.05698 10.3201 3.23004 10.1519 3.4556 10.0275C3.68115 9.90304 3.94657 9.84082 4.25186 9.84082C4.55714 9.84082 4.81867 9.89429 5.03645 10.0012C5.25617 10.1062 5.42437 10.255 5.54104 10.4475C5.65965 10.6381 5.71895 10.8617 5.71895 11.1183C5.71895 11.2933 5.68881 11.4547 5.62854 11.6025C5.5702 11.7483 5.47298 11.9049 5.33687 12.0721C5.2027 12.2393 5.02284 12.4415 4.79728 12.6788L4.32057 13.1713L4.3264 13.1859H5.03645L5.04811 13.02H5.8152V14.1488H2.82851ZM3.49919 19.8366C3.73447 19.9319 3.99114 19.9796 4.2692 19.9796C4.57059 19.9796 4.83892 19.929 5.0742 19.8279C5.31143 19.7268 5.4981 19.5829 5.63421 19.3962C5.77032 19.2076 5.83838 18.984 5.83838 18.7254C5.83838 18.4901 5.7713 18.2879 5.63713 18.1187C5.5049 17.9495 5.32698 17.8232 5.10337 17.7395C5.32504 17.6326 5.49129 17.5043 5.60213 17.3545C5.71491 17.2029 5.7713 17.0211 5.7713 16.8091C5.7713 16.428 5.63227 16.1334 5.35421 15.9254C5.07809 15.7154 4.71253 15.6104 4.25753 15.6104C3.97558 15.6104 3.72377 15.6599 3.5021 15.7591C3.28044 15.8563 3.10738 15.9934 2.98293 16.1704C2.86043 16.3473 2.80307 16.5524 2.81085 16.7858L2.81668 16.8033H3.80836C3.80836 16.7216 3.8278 16.6506 3.86669 16.5904C3.92846 16.4477 4.04085 16.3777 4.19447 16.3777C4.34808 16.3777 4.44172 16.4433 4.52338 16.5347C4.607 16.6261 4.61855 16.7362 4.61855 16.8762C4.61855 16.9754 4.59814 17.0629 4.5573 17.1387C4.51647 17.2126 4.45619 17.2709 4.37647 17.3137C4.29869 17.3545 4.20244 17.375 4.08771 17.375H3.75294V18.1304H4.0638C4.26797 18.1304 4.38619 18.1819 4.49314 18.285C4.60008 18.3861 4.65355 18.5164 4.65355 18.6758C4.65355 18.8314 4.61855 18.9558 4.53047 19.0658C4.43325 19.163 4.31126 19.1964 4.18753 19.1964C4.0638 19.1964 3.9098 19.0658 3.87252 18.9558C3.86679 18.9389 3.8607 18.9222 3.85465 18.9057C3.83123 18.8416 3.80836 18.779 3.80836 18.7079H2.74668L2.74376 18.7254C2.73793 18.9957 2.80404 19.2241 2.9421 19.4108C3.08016 19.5975 3.26585 19.7394 3.49919 19.8366Z" 466 + d="M2.61712 10.7835V9.86485L3.45578 9.72146V5.59887L2.60815 5.58543V4.7161L5.52724 4.25903V9.72146L6.50669 9.86485V10.7835H2.61712ZM7.27734 6.19995C7.27734 5.64767 7.72506 5.19995 8.27734 5.19995H19.6548C20.2071 5.19995 20.6548 5.64767 20.6548 6.19995C20.6548 6.75224 20.2071 7.19995 19.6548 7.19995H8.27734C7.72506 7.19995 7.27734 6.75224 7.27734 6.19995ZM7.27734 12C7.27734 11.4477 7.72506 11 8.27734 11H19.6548C20.2071 11 20.6548 11.4477 20.6548 12C20.6548 12.5523 20.2071 13 19.6548 13H8.27734C7.72506 13 7.27734 12.5523 7.27734 12ZM8.27734 16.8001C7.72506 16.8001 7.27734 17.2478 7.27734 17.8001C7.27734 18.3523 7.72506 18.8001 8.27734 18.8001H19.6548C20.2071 18.8001 20.6548 18.3523 20.6548 17.8001C20.6548 17.2478 20.2071 16.8001 19.6548 16.8001H8.27734ZM1.91871 18.2618V19.7411H6.50732V18.0069H5.3288L5.31088 18.2618H4.22L4.21104 18.2394L4.94343 17.4826C5.28997 17.1182 5.5663 16.8075 5.77243 16.5506C5.98155 16.2937 6.13091 16.0532 6.22054 15.8291C6.31314 15.6021 6.35945 15.3541 6.35945 15.0853C6.35945 14.6909 6.26833 14.3474 6.0861 14.0546C5.90686 13.7589 5.64845 13.5303 5.31088 13.369C4.97629 13.2047 4.57449 13.1226 4.10547 13.1226C3.63645 13.1226 3.22867 13.2182 2.88214 13.4093C2.5356 13.6005 2.26972 13.8589 2.08451 14.1846C1.90228 14.5102 1.81564 14.8747 1.8246 15.278L1.83357 15.3048L3.4118 15.3461C3.47346 15.0234 3.52123 14.9071 3.58817 14.8083C3.70767 14.6321 3.95383 14.5502 4.10547 14.5502C4.33251 14.5502 4.51426 14.5909 4.62778 14.7402C4.7413 14.8896 4.79268 15.0853 4.74967 15.3048C4.72169 15.4476 4.60209 15.6648 4.49156 15.8291C4.38102 15.9934 4.01836 16.5076 3.51648 16.9234L1.91871 18.2618Z" 447 467 fill="currentColor" 448 468 /> 449 469 </svg>