sybers.fr / leaflet
a tool for shared writing and social publishing
0
fork

Configure Feed

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

added undo buttons to the page

celine 0f0cc686 70d11752

+57 -26
+14 -14
components/Icons.tsx
··· 936 936 ); 937 937 }; 938 938 939 - export const SearchTiny = (props: Props) => { 939 + export const UndoTiny = (props: Props) => { 940 940 return ( 941 941 <svg 942 942 width="16" ··· 949 949 <path 950 950 fillRule="evenodd" 951 951 clipRule="evenodd" 952 - d="M2.95685 7.38903C2.5496 5.40568 3.7763 3.51814 5.64053 3.13535C7.50476 2.75255 9.37599 4.00398 9.78324 5.98733C10.1905 7.97069 8.9638 9.85822 7.09957 10.241C5.23534 10.6238 3.36411 9.37239 2.95685 7.38903ZM5.36899 1.81294C2.73276 2.35425 1.08592 4.98923 1.63444 7.66057C2.18297 10.3319 4.73488 12.1047 7.37111 11.5634C8.07196 11.4195 8.70288 11.1276 9.24122 10.7264L13.1848 13.9403C13.613 14.2892 14.2429 14.225 14.5918 13.7969C14.9407 13.3688 14.8764 12.7389 14.4483 12.39L10.5619 9.2227C11.1395 8.20102 11.3616 6.96237 11.1057 5.7158C10.5571 3.04445 8.00522 1.27163 5.36899 1.81294ZM4.83423 6.30333C5.22704 6.22267 5.48009 5.83885 5.39944 5.44604C5.31878 5.05322 4.93496 4.80017 4.54214 4.88083C4.14933 4.96149 3.89628 5.34531 3.97694 5.73812C4.0576 6.13094 4.44142 6.38399 4.83423 6.30333ZM5.22415 7.40592C5.1635 7.06611 4.83887 6.83981 4.49906 6.90045C4.15925 6.9611 3.93295 7.28573 3.99359 7.62554C4.1788 8.66325 5.33436 9.59619 6.85483 9.38256C7.19665 9.33454 7.43481 9.0185 7.38679 8.67668C7.33876 8.33486 7.02273 8.09669 6.68091 8.14472C5.74535 8.27617 5.27738 7.70416 5.22415 7.40592Z" 952 + d="M5.98775 3.14543C6.37828 2.75491 6.37828 2.12174 5.98775 1.73122C5.59723 1.34069 4.96407 1.34069 4.57354 1.73122L1.20732 5.09744C0.816798 5.48796 0.816798 6.12113 1.20732 6.51165L4.57354 9.87787C4.96407 10.2684 5.59723 10.2684 5.98775 9.87787C6.37828 9.48735 6.37828 8.85418 5.98775 8.46366L4.32865 6.80456H9.6299C12.1732 6.80456 13.0856 8.27148 13.0856 9.21676C13.0856 9.84525 12.8932 10.5028 12.5318 10.9786C12.1942 11.4232 11.6948 11.7367 10.9386 11.7367H9.43173C8.87944 11.7367 8.43173 12.1844 8.43173 12.7367C8.43173 13.2889 8.87944 13.7367 9.43173 13.7367H10.9386C12.3587 13.7367 13.4328 13.0991 14.1246 12.1883C14.7926 11.3086 15.0856 10.2062 15.0856 9.21676C15.0856 6.92612 13.0205 4.80456 9.6299 4.80456L4.32863 4.80456L5.98775 3.14543Z" 953 953 fill="currentColor" 954 954 /> 955 955 </svg> 956 956 ); 957 957 }; 958 958 959 - // Text Toolbar Icons h:24px, w: variable 960 - 961 - export const UndoSmall = (props: Props) => { 959 + export const RedoTiny = (props: Props) => { 962 960 return ( 963 961 <svg 964 - width="24" 965 - height="24" 966 - viewBox="0 0 24 24" 962 + width="16" 963 + height="16" 964 + viewBox="0 0 16 16" 967 965 fill="none" 968 966 xmlns="http://www.w3.org/2000/svg" 969 967 {...props} ··· 971 969 <path 972 970 fillRule="evenodd" 973 971 clipRule="evenodd" 974 - d="M8.13949 5.17586C8.53001 4.78533 8.53001 4.15217 8.13949 3.76164C7.74897 3.37112 7.1158 3.37112 6.72528 3.76164L2.78076 7.70616L6.72528 11.6507C7.1158 12.0412 7.74897 12.0412 8.13949 11.6507C8.53001 11.2601 8.53001 10.627 8.13949 10.2365L6.60933 8.7063H14.1598C16.0894 8.7063 17.221 9.17118 17.8647 9.7593C18.4949 10.335 18.8046 11.1639 18.8046 12.2285C18.8046 13.2209 18.441 14.0478 17.707 14.6471C16.9511 15.2643 15.6989 15.7221 13.7911 15.7221H9.42379C8.87151 15.7221 8.42379 16.1698 8.42379 16.7221C8.42379 17.2743 8.87151 17.7221 9.42379 17.7221H13.7911C15.9944 17.7221 17.7489 17.1949 18.9719 16.1962C20.217 15.1796 20.8046 13.7597 20.8046 12.2285C20.8046 10.7694 20.3679 9.33716 19.2137 8.28273C18.0731 7.24068 16.3823 6.7063 14.1598 6.7063H6.60905L8.13949 5.17586Z" 972 + d="M10.0122 3.14543C9.62172 2.75491 9.62172 2.12174 10.0122 1.73122C10.4028 1.34069 11.0359 1.34069 11.4265 1.73122L14.7927 5.09744C15.1832 5.48796 15.1832 6.12113 14.7927 6.51165L11.4265 9.87787C11.0359 10.2684 10.4028 10.2684 10.0122 9.87787C9.62172 9.48735 9.62172 8.85418 10.0122 8.46366L11.6713 6.80456H6.3701C3.82678 6.80456 2.91443 8.27148 2.91443 9.21676C2.91443 9.84525 3.10681 10.5028 3.46817 10.9786C3.8058 11.4232 4.30523 11.7367 5.06143 11.7367H6.56827C7.12056 11.7367 7.56827 12.1844 7.56827 12.7367C7.56827 13.2889 7.12056 13.7367 6.56827 13.7367H5.06143C3.6413 13.7367 2.56723 13.0991 1.87544 12.1883C1.20738 11.3086 0.914429 10.2062 0.914429 9.21676C0.914429 6.92612 2.97946 4.80456 6.3701 4.80456L11.6714 4.80456L10.0122 3.14543Z" 975 973 fill="currentColor" 976 974 /> 977 975 </svg> 978 976 ); 979 977 }; 980 978 981 - export const RedoSmall = (props: Props) => { 979 + export const SearchTiny = (props: Props) => { 982 980 return ( 983 981 <svg 984 - width="24" 985 - height="24" 986 - viewBox="0 0 24 24" 982 + width="16" 983 + height="16" 984 + viewBox="0 0 16 16" 987 985 fill="none" 988 986 xmlns="http://www.w3.org/2000/svg" 989 987 {...props} ··· 991 989 <path 992 990 fillRule="evenodd" 993 991 clipRule="evenodd" 994 - d="M15.8605 5.17586C15.47 4.78533 15.47 4.15217 15.8605 3.76164C16.251 3.37112 16.8842 3.37112 17.2747 3.76164L21.2192 7.70616L17.2747 11.6507C16.8842 12.0412 16.251 12.0412 15.8605 11.6507C15.47 11.2601 15.47 10.627 15.8605 10.2365L17.3907 8.7063H9.84018C7.9106 8.7063 6.77903 9.17118 6.13528 9.7593C5.50508 10.335 5.19542 11.1639 5.19542 12.2285C5.19542 13.2209 5.55903 14.0478 6.29299 14.6471C7.04893 15.2643 8.30115 15.7221 10.2089 15.7221H14.5762C15.1285 15.7221 15.5762 16.1698 15.5762 16.7221C15.5762 17.2743 15.1285 17.7221 14.5762 17.7221H10.2089C8.00564 17.7221 6.25111 17.1949 5.02806 16.1962C3.78304 15.1796 3.19542 13.7597 3.19542 12.2285C3.19542 10.7694 3.63213 9.33716 4.7863 8.28273C5.92692 7.24068 7.61773 6.7063 9.84018 6.7063H17.391L15.8605 5.17586Z" 992 + d="M2.95685 7.38903C2.5496 5.40568 3.7763 3.51814 5.64053 3.13535C7.50476 2.75255 9.37599 4.00398 9.78324 5.98733C10.1905 7.97069 8.9638 9.85822 7.09957 10.241C5.23534 10.6238 3.36411 9.37239 2.95685 7.38903ZM5.36899 1.81294C2.73276 2.35425 1.08592 4.98923 1.63444 7.66057C2.18297 10.3319 4.73488 12.1047 7.37111 11.5634C8.07196 11.4195 8.70288 11.1276 9.24122 10.7264L13.1848 13.9403C13.613 14.2892 14.2429 14.225 14.5918 13.7969C14.9407 13.3688 14.8764 12.7389 14.4483 12.39L10.5619 9.2227C11.1395 8.20102 11.3616 6.96237 11.1057 5.7158C10.5571 3.04445 8.00522 1.27163 5.36899 1.81294ZM4.83423 6.30333C5.22704 6.22267 5.48009 5.83885 5.39944 5.44604C5.31878 5.05322 4.93496 4.80017 4.54214 4.88083C4.14933 4.96149 3.89628 5.34531 3.97694 5.73812C4.0576 6.13094 4.44142 6.38399 4.83423 6.30333ZM5.22415 7.40592C5.1635 7.06611 4.83887 6.83981 4.49906 6.90045C4.15925 6.9611 3.93295 7.28573 3.99359 7.62554C4.1788 8.66325 5.33436 9.59619 6.85483 9.38256C7.19665 9.33454 7.43481 9.0185 7.38679 8.67668C7.33876 8.33486 7.02273 8.09669 6.68091 8.14472C5.74535 8.27617 5.27738 7.70416 5.22415 7.40592Z" 995 993 fill="currentColor" 996 994 /> 997 995 </svg> 998 996 ); 999 997 }; 998 + 999 + // Text Toolbar Icons h:24px, w: variable 1000 1000 1001 1001 export const BoldSmall = (props: Props) => { 1002 1002 return (
+43 -12
components/Pages/index.tsx
··· 26 26 import { DraftPostOptions } from "../Blocks/MailboxBlock"; 27 27 import { Blocks } from "components/Blocks"; 28 28 import { MenuItem, Menu } from "../Layout"; 29 - import { MoreOptionsTiny, CloseTiny, PaintSmall, ShareSmall } from "../Icons"; 29 + import { 30 + MoreOptionsTiny, 31 + CloseTiny, 32 + PaintSmall, 33 + ShareSmall, 34 + UndoTiny, 35 + RedoTiny, 36 + } from "../Icons"; 30 37 import { HelpPopover } from "../HelpPopover"; 31 38 import { scanIndex } from "src/replicache/utils"; 32 39 import { PageThemeSetter } from "../ThemeManager/PageThemeSetter"; ··· 158 165 `} 159 166 > 160 167 <Media mobile={true}> 161 - <PageOptionsMenu entityID={props.entityID} first={props.first} /> 168 + <PageOptions entityID={props.entityID} first={props.first} /> 162 169 </Media> 163 170 <DesktopPageFooter pageID={props.entityID} /> 164 171 {isDraft.length > 0 && ( ··· 177 184 </div> 178 185 <Media mobile={false}> 179 186 {isFocused && ( 180 - <PageOptionsMenu entityID={props.entityID} first={props.first} /> 187 + <PageOptions entityID={props.entityID} first={props.first} /> 181 188 )} 182 189 </Media> 183 190 </div> ··· 242 249 ); 243 250 }; 244 251 245 - const PageOptionsMenu = (props: { 252 + const PageOptions = (props: { 246 253 entityID: string; 247 254 first: boolean | undefined; 248 255 }) => { 256 + let greyButtonStyle = 257 + "pt-[2px] h-5 w-5 p-0.5 mx-auto bg-border text-bg-page sm:rounded-r-md sm:rounded-l-none rounded-b-md hover:bg-accent-1 hover:text-accent-2"; 258 + let whiteButtonStyle = ` 259 + pageOptionsTrigger 260 + shrink-0 261 + bg-bg-page text-border 262 + outline-none border sm:border-l-0 border-t-1 border-border sm:rounded-r-md sm:rounded-l-none rounded-b-md 263 + hover:shadow-[0_1px_0_theme(colors.border)_inset,_0_-1px_0_theme(colors.border)_inset,_-1px_0_0_theme(colors.border)_inset] 264 + flex items-center justify-center`; 265 + 249 266 return ( 250 267 <div className=" z-10 w-fit absolute sm:top-3 sm:-right-[19px] top-0 right-3 flex sm:flex-col flex-row-reverse gap-1 items-start"> 251 268 {!props.first && ( 252 269 <button 253 - className="pt-[2px] h-5 w-5 p-0.5 mx-auto bg-border text-bg-page sm:rounded-r-md sm:rounded-l-none rounded-b-md hover:bg-accent-1 hover:text-accent-2" 270 + className={greyButtonStyle} 254 271 onClick={() => { 255 272 useUIState.getState().closePage(props.entityID); 256 273 }} ··· 258 275 <CloseTiny /> 259 276 </button> 260 277 )} 261 - {<OptionsMenu entityID={props.entityID} first={!!props.first} />} 278 + <OptionsMenu 279 + entityID={props.entityID} 280 + first={!!props.first} 281 + buttonStyle={whiteButtonStyle} 282 + /> 283 + <div className="gap-1 flex sm:flex-col"> 284 + <button className={`${whiteButtonStyle} h-5 w-5 p-0.5`}> 285 + <UndoTiny /> 286 + </button> 287 + <button className={`${whiteButtonStyle} h-5 w-5 p-0.5`}> 288 + <RedoTiny /> 289 + </button> 290 + </div> 262 291 </div> 263 292 ); 264 293 }; 265 294 266 - const OptionsMenu = (props: { entityID: string; first: boolean }) => { 295 + const OptionsMenu = (props: { 296 + entityID: string; 297 + first: boolean; 298 + buttonStyle: string; 299 + }) => { 267 300 let [state, setState] = useState<"normal" | "theme" | "share">("normal"); 268 301 let { permissions } = useEntitySetContext(); 269 302 if (!permissions.write) return null; ··· 276 309 trigger={ 277 310 <div 278 311 className={`pageOptionsTrigger 279 - shrink-0 sm:h-8 sm:w-5 h-5 w-8 280 - bg-bg-page text-border 281 - outline-none border sm:border-l-0 border-t-1 border-border sm:rounded-r-md sm:rounded-l-none rounded-b-md 282 - hover:shadow-[0_1px_0_theme(colors.border)_inset,_0_-1px_0_theme(colors.border)_inset,_-1px_0_0_theme(colors.border)_inset] 283 - flex items-center justify-center`} 312 + ${props.buttonStyle} 313 + sm:h-8 sm:w-5 h-5 w-8 314 + `} 284 315 > 285 316 <MoreOptionsTiny className="sm:rotate-90" /> 286 317 </div>