Merge pull request #29 from betagouv/mep

feat: new color picker + some fixes
betagouv · Jul 25, 2024 · 2df2430 · 2df2430
2 parents c6bc3e3 + 67d19ff
commit 2df2430
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 86 deletions.
diff --git a/packages/backend/src/features/mail.ts b/packages/backend/src/features/mail.ts
@@ -24,7 +24,7 @@ export const sendReportMail = ({
   return transporter.sendMail({
     from: ENV.EMAIL_EMITTER,
     to: recipients,
-    subject: "Compte-rendu UDAP : " + (report?.title ? ` : ${report.title}` : ""),
+    subject: "Compte-rendu UDAP" + (report?.title ? ` : ${report.title}` : ""),
     text: `Bonjour,
 vous trouverez ci-joint le compte-rendu de notre rendez-vous.
 

diff --git a/packages/frontend/src/components/ReportSearch.tsx b/packages/frontend/src/components/ReportSearch.tsx
@@ -88,8 +88,8 @@ export const SearchResults = ({ search, hideEmpty }: { search: string; hideEmpty
   const otherReports = results.filter((report) => report.createdBy !== user.id);
 
   return (
-    <Center>
-      <Stack flexDir={{ base: "column", lg: "row" }} mt="24px">
+    <Center w="100%">
+      <Stack flexDir={{ base: "column", lg: "row" }} w="100%" mt="24px">
         {myReports.length ? (
           <Stack maxW={{ base: "100%", lg: "400px" }}>
             <styled.div mb="16px" fontSize="20px" fontWeight="bold">
@@ -113,11 +113,11 @@ export const SearchResults = ({ search, hideEmpty }: { search: string; hideEmpty
 
 const NoResults = () => {
   return (
-    <Center flexDir="column" h="100%" mt="100px">
+    <Center flexDir="column" h="100%" mt="100px" mb="24px">
       <styled.span fontSize="16px" fontWeight="bold">
         Aucun résultat
       </styled.span>
-      <img src={noResultsImage} alt="Aucun résultat" />
+      <styled.img src={noResultsImage} alt="Aucun résultat" />
     </Center>
   );
 };
diff --git a/packages/frontend/src/components/SyncForm.tsx b/packages/frontend/src/components/SyncForm.tsx
@@ -56,7 +56,7 @@ export function SyncFormBanner({ form, baseObject }: { form: UseFormReturn<Repor
               goBack();
             }}
             hideBelow="lg"
-            fontSize="15px"
+            fontSize="16px"
           >
             Retour
           </styled.a>
@@ -137,6 +137,7 @@ export const Status = ({ status, className }: { status?: SyncFormStatus; classNa
   return (
     <styled.div
       className={className}
+      display="flex"
       borderRadius="4px"
       height="20px"
       px="6px"
@@ -146,7 +147,19 @@ export const Status = ({ status, className }: { status?: SyncFormStatus; classNa
       fontWeight="500"
       bgColor={messagesColor[formStatus]}
     >
-      <styled.span className={fr.cx("fr-icon-wifi-line", "fr-icon--sm")} aria-hidden={true} mr="6px" mb="2px" />
+      <styled.span
+        className={fr.cx("fr-icon-wifi-line")}
+        aria-hidden={true}
+        height="24px"
+        {...{
+          "&::before": {
+            width: "16px !important",
+            height: "16px !important",
+            verticalAlign: "middle",
+          },
+        }}
+        mr="6px"
+      />
       {messages[formStatus]}
     </styled.div>
   );

diff --git a/packages/frontend/src/components/chips/ContactChips.tsx b/packages/frontend/src/components/chips/ContactChips.tsx
@@ -22,7 +22,7 @@ export const ContactChips = (props: FlexProps & { disabled?: boolean }) => {
       value={selected}
       {...props}
       onChange={(values) => form.setValue("contacts", values.join(","))}
-      label="Contacts"
+      label="Contacts utiles"
     />
   );
 };
diff --git a/packages/frontend/src/components/chips/FurtherInfoChips.tsx b/packages/frontend/src/components/chips/FurtherInfoChips.tsx
@@ -22,7 +22,7 @@ export const FurtherInfoChips = (props: FlexProps & { disabled?: boolean }) => {
       value={selected}
       {...props}
       onChange={(values) => form.setValue("furtherInformation", values.join(","))}
-      label="Pour aller plus loin"
+      label="Bonnes pratiques"
     />
   );
 };
diff --git a/packages/frontend/src/features/menu/MenuButton.tsx b/packages/frontend/src/features/menu/MenuButton.tsx
@@ -4,7 +4,7 @@ import { css, cx } from "#styled-system/css";
 import { Flex, styled } from "#styled-system/jsx";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
 
 import { useSelector } from "@xstate/store/react";
@@ -16,6 +16,8 @@ import { MenuActions } from "./MenuActions";
 import { menuStore } from "./menuStore";
 import { ShareReport } from "./Share";
 
+import { useClickAway } from "react-use";
+
 const nestedMenus = ["main", "help", "clauses-nationales", "clauses-departementales", "share"] as const;
 export type NestedMenu = (typeof nestedMenus)[number];
 
@@ -26,7 +28,9 @@ export const MenuButton = ({ headerRef }: { headerRef: any }) => {
   const isOpen = isDesktop ? !!menu && menu !== "main" : !!menu;
 
   useIsModalOpen(menuModal, {
-    onConceal: () => menuStore.send({ type: "setMenu", menu: null }),
+    onConceal: () => {
+      menuStore.send({ type: "setMenu", menu: null });
+    },
   });
 
   return (

diff --git a/packages/frontend/src/features/text-editor/TextEditor.tsx b/packages/frontend/src/features/text-editor/TextEditor.tsx
@@ -35,8 +35,7 @@ export const textEditorClassName = css({
     h: "100%",
     minH: "160px",
     maxHeight: "100%",
-    py: "2",
-    px: "2",
+    p: "40px",
     fontSize: "13px",
     bgColor: "white",
     overflowY: "auto",

diff --git a/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx b/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx
@@ -1,9 +1,10 @@
 import { cva } from "#styled-system/css";
-import { HStack, Stack } from "#styled-system/jsx";
+import { Flex, HStack, Stack, styled } from "#styled-system/jsx";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { useContext, useState } from "react";
 import { ColorPicker } from "../../components/ColorPicker";
 import { TextEditorContext } from "./TextEditorContext";
+import { Popover } from "#components/Popover";
 
 const toolbarButtonRecipe = cva({
   base: {
@@ -86,74 +87,57 @@ const ColorInput = () => {
   };
 
   return (
-    <ColorPicker.Root
-      open={isOpen}
-      onOpenChange={({ open }) => setIsOpen(open)}
-      value={currentValue}
-      onValueChangeEnd={(e) => editor.chain().focus().setColor(e.value.toString("hex")).run()}
-      closeOnSelect={false}
-    >
-      {() => (
-        <>
-          <ColorPicker.Control>
-            <ColorPicker.Trigger asChild>
-              <Button
-                className={toolbarButtonRecipe()}
-                size="small"
-                priority="tertiary no outline"
-                iconId="ri-palette-line"
-                type="button"
-                nativeButtonProps={{
-                  onPointerDown: (event) => event.preventDefault(),
-                }}
-              ></Button>
-            </ColorPicker.Trigger>
-          </ColorPicker.Control>
-          <ColorPicker.Positioner>
-            <ColorPicker.Content w="200px">
-              <Stack gap="3">
-                <ColorPicker.Area>
-                  <ColorPicker.AreaBackground />
-                  <ColorPicker.AreaThumb />
-                </ColorPicker.Area>
-                <HStack gap="3">
-                  <Stack flex="1" gap="2">
-                    <ColorPicker.ChannelSlider channel="hue">
-                      <ColorPicker.ChannelSliderTrack />
-                      <ColorPicker.ChannelSliderThumb />
-                    </ColorPicker.ChannelSlider>
-                  </Stack>
-                </HStack>
-                {/* <Stack gap="1.5">
-                    <Text size="xs" color="fg.default" fontWeight="medium">
-                      Saved Colors
-                    </Text>
-                    <ColorPicker.SwatchGroup>
-                      {presets.map((color, id) => (
-                        <ColorPicker.SwatchTrigger key={id} value={color}>
-                          <ColorPicker.Swatch value={color} />
-                        </ColorPicker.SwatchTrigger>
-                      ))}
-                    </ColorPicker.SwatchGroup>
-                  </Stack> */}
-              </Stack>
-            </ColorPicker.Content>
-          </ColorPicker.Positioner>
-        </>
-      )}
-    </ColorPicker.Root>
-    // <input
-    //   id="text-color"
-    //   // className={css({ visibility: "hidden", width: "0px", margin: 0, padding: 0 })}
-    //   type="color"
-    //   onInput={(event) =>
-    //     editor
-    //       .chain()
-    //       .focus()
-    //       .setColor((event.target as any).value)
-    //       .run()
-    //   }
-    //   value={editor.getAttributes("textStyle").color ?? "#000000"}
-    // />
+    <Popover.Root open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <Popover.Trigger>
+        <Button
+          className={toolbarButtonRecipe({})}
+          size="small"
+          priority="tertiary no outline"
+          iconId="ri-palette-line"
+          type="button"
+          nativeButtonProps={{
+            onPointerDown: (event) => event.preventDefault(),
+          }}
+        ></Button>
+      </Popover.Trigger>
+      <Popover.Positioner>
+        <Popover.Content>
+          <Stack p="8px">
+            <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
+              <ColorButton value={currentValue} color="black" />
+              <ColorButton value={currentValue} color="#000091" />
+              <ColorButton value={currentValue} color="#E1000F" />
+            </Stack>
+            <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
+              <ColorButton value={currentValue} color="#6E445A" />
+              <ColorButton value={currentValue} color="#2B7758" />
+              <ColorButton value={currentValue} color="#465F9D" />
+            </Stack>
+          </Stack>
+        </Popover.Content>
+      </Popover.Positioner>
+    </Popover.Root>
+  );
+};
+
+const ColorButton = ({ color, value }: { color: string; value: string }) => {
+  const editor = useContext(TextEditorContext).editor!;
+
+  const isSelected = value === color;
+
+  return (
+    <styled.button
+      type="button"
+      onClick={() => {
+        editor.chain().focus().setColor(color).run();
+      }}
+      style={{
+        backgroundColor: color,
+      }}
+      border={isSelected ? "1px solid black" : undefined}
+      borderRadius="50%"
+      w="30px"
+      h="30px"
+    ></styled.button>
   );
 };
diff --git a/packages/frontend/src/routes/pdf.$reportId.tsx b/packages/frontend/src/routes/pdf.$reportId.tsx
@@ -314,7 +314,7 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
               goBack();
             }}
             hideBelow="lg"
-            fontSize="15px"
+            fontSize="16px"
             whiteSpace="nowrap"
           >
             Retour
@@ -329,7 +329,7 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
           hideFrom="lg"
           pr="8px"
           color="black"
-          fontSize="15px"
+          fontSize="16px"
         ></styled.a>
         <styled.div ml={{ base: "0", lg: "50px" }} nowrap>
           {title}

diff --git a/packages/pdf/src/report.tsx b/packages/pdf/src/report.tsx
@@ -237,7 +237,7 @@ export const getReportHtmlString = (
     </p>
   
     <p>
-        <strong>Pour aller plus loin</strong><br/>
+        <strong>Bonnes pratiques</strong><br/>
         ${furtherInfos.map((furtherInfo) => `<span>${furtherInfo}</span>`).join("<br/><br/>")}
     </p>