Mep (#34)

* fix: display correct status * fix: edit banner spacings * feat: set edit banner sticky on mobile * fix: return arrow size * feat: set menu title position to sticky * fix: some styles * fix: simplify header * fix: show reports on 2 columns from 6 items * feat: add info messages * feat: display report item on 3 rows * fix: new colors * fix: informative message mb * fix: set printable colors * fix(pdf): set header sticky on desktop * fix: recipients textarea styles * fix: menu header padding and more * fix: remove * * fix: form labels * fix: date picker * fix: margins * gitignore * fix: pdf styles can now be italic and bold * fix: align tab title with content on firefox
betagouv · Sep 12, 2024 · e83aa71 · e83aa71
1 parent ef2e2da
commit e83aa71
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 66 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 dev-dist
+vite.config.ts.timestamp*
 # dependencies
 node_modules
 /.pnp

diff --git a/packages/frontend/src/components/chips/SpaceTypeChips.tsx b/packages/frontend/src/components/chips/SpaceTypeChips.tsx
@@ -21,7 +21,7 @@ export const SpaceTypeChips = (props: FlexProps & { disabled?: boolean }) => {
       value={selected}
       {...props}
       onChange={(values) => form.setValue("projectSpaceType", values.join(","))}
-      label="Type d'espace"
+      label="Type d'espace protégé"
     />
   );
 };
diff --git a/packages/frontend/src/features/InfoForm.tsx b/packages/frontend/src/features/InfoForm.tsx
@@ -98,7 +98,7 @@ export const InfoForm = () => {
           <Input
             className={css({ flex: { base: "none", lg: 1 }, mb: { base: "16px", lg: "16px" } })}
             disabled={isFormDisabled}
-            label="Nom du demandeur*"
+            label="Nom du demandeur"
             nativeInputProps={form.register("applicantName")}
           />
         </Stack>
@@ -142,7 +142,7 @@ export const InfoForm = () => {
         <Input
           className={css({ flex: { base: "none", lg: 2 }, mt: "16px", mb: { base: "24px", lg: undefined } })}
           disabled={isFormDisabled}
-          label="Adresse du projet"
+          label="Adresse"
           nativeInputProps={form.register("applicantAddress")}
         />
         <Stack gap={{ base: "0", lg: "16px" }} direction={{ base: "column", lg: "row" }}>
@@ -156,16 +156,16 @@ export const InfoForm = () => {
           <Input
             className={css({ flex: { base: "none", lg: 1 }, mb: { base: "24px", lg: undefined } })}
             disabled={isFormDisabled}
-            label="Commune*"
+            label="Commune"
             // hintText="Ce champ apparaitra dans la liste des compte-rendus"
             nativeInputProps={form.register("city")}
           />
         </Stack>
         <Stack gap={{ base: "0", lg: "16px" }} direction={{ base: "column", lg: "row" }}>
           <Input
-            className={css({ flex: { base: "none", lg: 1 }, mb: "16px" })}
+            className={css({ flex: { base: "none", lg: 1 }, mb: "24px" })}
             disabled={isFormDisabled}
-            label="Référence cadastrale du projet"
+            label="Référence cadastrale"
             nativeInputProps={form.register("projectCadastralRef")}
           />
           <Box
@@ -182,7 +182,7 @@ export const InfoForm = () => {
         <SpaceTypeChips className={css({ flex: { base: "none", lg: 1 } })} disabled={isFormDisabled} />
       </InputGroupWithTitle>
 
-      <Center justifyContent={{ base: "center", lg: "flex-start" }} mt={{ base: "80px", lg: 0 }} mb="120px">
+      <Center justifyContent={{ base: "center", lg: "flex-start" }} mt={{ base: "80px", lg: "50px" }} mb="120px">
         <Button
           type="button"
           iconId="ri-arrow-right-line"

diff --git a/packages/frontend/src/features/ReportList.tsx b/packages/frontend/src/features/ReportList.tsx
@@ -114,8 +114,6 @@ const NoReport = () => {
   );
 };
 
-const nbPerColumn = 10;
-
 export const ReportList = ({
   reports,
   page,
@@ -135,7 +133,7 @@ export const ReportList = ({
 }) => {
   const error = reports.length === 0 ? <NoReport /> : null;
 
-  const columns = chunk(reports, nbPerColumn);
+  const columns = reports.length < 6 ? [reports] : chunk(reports, Math.ceil(reports.length / 2));
 
   return (
     <Stack w="100%" mt={{ base: "20px", lg: "30px" }}>
@@ -199,8 +197,6 @@ const ReportListItem = ({
   const forText = report.applicantName ? uppercaseFirstLetterIf(`pour ${report.applicantName}`, !whereText) : null;
   const byText = uppercaseFirstLetterIf(`par ${report.redactedBy ?? report.user?.name ?? ""}`, !whereText && !forText);
 
-  const description = [whereText, forText, byText].filter(Boolean).join(" ");
-
   return (
     <Flex position="relative" direction="column" w="100%">
       <Link
@@ -230,9 +226,9 @@ const ReportListItem = ({
               <styled.span ml={"5px"}>{new Date(report.meetDate).toLocaleDateString()}</styled.span>
             ) : null}
           </Flex>
-          <styled.div lineClamp={2}>
-            <styled.span>{description}</styled.span>
-          </styled.div>
+          <styled.div nowrap>{whereText}</styled.div>
+          <styled.div nowrap>{forText}</styled.div>
+          <styled.div nowrap>{byText}</styled.div>
           <styled.div mt="8px">
             <ReportBadge status={report.pdf ? "published" : "draft"} />
           </styled.div>

diff --git a/packages/frontend/src/features/menu/ClauseMenu.tsx b/packages/frontend/src/features/menu/ClauseMenu.tsx
@@ -37,8 +37,21 @@ export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & M
   if (isNational)
     return (
       <>
-        <ClauseTitle isNational={isNational} buttons={null} {...props} />
-        <ClauseList clauses={(clausesQuery.results as any) ?? []} isEditing={false} />
+        <ClauseTitle
+          isNational={isNational}
+          buttons={null}
+          alert={
+            <ClauseFormBanner
+              status="idle"
+              icon={fr.cx("fr-icon-alert-fill")}
+              text={`Ces clauses sont communes à toutes les UDAP et ne peuvent pas être modifiées.`}
+            />
+          }
+          {...props}
+        />
+        <styled.div px="20px">
+          <ClauseList clauses={(clausesQuery.results as any) ?? []} isEditing={false} />
+        </styled.div>
       </>
     );
 
@@ -76,7 +89,10 @@ const ClauseForm = ({
   ...props
 }: { clauses: Clause_v2[]; isNational: boolean } & ModalContentProps) => {
   const [mode, setMode] = useState<Mode>("view");
-  const [bannerProps, setBannerProps] = useState<{ status: BannerStatus; text: string; icon: string } | null>(null);
+  const [bannerProps, setBannerProps] = useState<{ status: BannerStatus; text: string; icon: string } | null>({
+    ...initialBannerProps,
+    text: "Ces clauses sont spécifiques à votre UDAP et modifiables.",
+  });
 
   const isEditing = mode === "edit";
   const isAdding = mode === "add";
@@ -202,33 +218,34 @@ const ClauseForm = ({
         {...props}
         alert={bannerProps ? <ClauseFormBanner {...bannerProps} /> : null}
       />
-
-      {isAdding ? (
-        <ClauseAdd
-          onSuccess={() => {
-            setBannerProps({ status: "success", text: "Clause ajoutée", icon: "ri-check-fill" });
-            setMode("view");
-          }}
-          isNational={isNational}
-        />
-      ) : null}
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} id="edit-form">
-          <ClauseList clauses={fieldsWithIndex} isEditing={isEditing} />
-        </form>
-      </FormProvider>
+      <styled.div px="20px">
+        {isAdding ? (
+          <ClauseAdd
+            onSuccess={() => {
+              setBannerProps({ status: "success", text: "Clause ajoutée", icon: "ri-check-fill" });
+              setMode("view");
+            }}
+            isNational={isNational}
+          />
+        ) : null}
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} id="edit-form">
+            <ClauseList clauses={fieldsWithIndex} isEditing={isEditing} />
+          </form>
+        </FormProvider>
+      </styled.div>
     </>
   );
 };
 
 type BannerStatus = "idle" | "success";
 
-const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string; status: BannerStatus }) => {
+export const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string; status: BannerStatus }) => {
   const bgColor = status === "idle" ? "#E8EDFF" : "#B8FEC9";
   const iconColor = status === "idle" ? "#0063CB" : "#18753C";
 
   return (
-    <Flex ml="-32px" mr="-32px" py="16px" px="32px" bgColor={bgColor}>
+    <Flex mb="24px" py="16px" px="32px" bgColor={bgColor}>
       <i className={cx(icon, css({ color: iconColor }))} />
       <styled.div
         dangerouslySetInnerHTML={{ __html: transformBold(text) }}
@@ -240,7 +257,7 @@ const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string;
   );
 };
 
-function transformBold(str: string) {
+export function transformBold(str: string) {
   return str.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
 }
 

diff --git a/packages/frontend/src/features/menu/HelpMenu.tsx b/packages/frontend/src/features/menu/HelpMenu.tsx
@@ -14,9 +14,9 @@ export const HelpMenu = ({ backButtonOnClick }: { backButtonOnClick: () => void
     <>
       <MenuTitle backButtonOnClick={backButtonOnClick}>Assistance technique</MenuTitle>
       <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
-      <Stack>
+      <Stack px="20px">
         <styled.div mb="10px">
-          Si vous n'arrivez pas à vous connecter, essayez de réinitialiser les données locales :
+          Vous ne voyez pas vos dernières informations enregistrées ? Essayez de réinitialiser les données locales :
         </styled.div>
         <Button onClick={() => deleteLocalData()}>Réinitialiser</Button>
       </Stack>

diff --git a/packages/frontend/src/features/menu/MenuButton.tsx b/packages/frontend/src/features/menu/MenuButton.tsx
@@ -129,6 +129,10 @@ const MenuModal = ({ menu, isOpen, className }: { menu: NestedMenu | null; isOpe
             maxHeight: "100%",
             p: 0,
           },
+          "& .fr-modal__content": {
+            pl: 0,
+            pr: 0,
+          },
           "& .fr-col-12": {
             flex: { base: 1, lg: "unset" },
             width: { base: "100%", lg: "unset" },

diff --git a/packages/frontend/src/features/menu/Share.tsx b/packages/frontend/src/features/menu/Share.tsx
@@ -7,6 +7,8 @@ import { ToggleSwitch } from "@codegouvfr/react-dsfr/ToggleSwitch";
 import { useMutation } from "@tanstack/react-query";
 import { css } from "#styled-system/css";
 import { MenuTitle } from "./MenuTitle";
+import { ClauseFormBanner } from "./ClauseMenu";
+import { fr } from "@codegouvfr/react-dsfr";
 
 export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => void }) => {
   const user = useUser()!;
@@ -41,15 +43,26 @@ export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => vo
 
   return (
     <>
-      <MenuTitle backButtonOnClick={backButtonOnClick}>Partage des CR</MenuTitle>
-      <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" />
+      <MenuTitle
+        backButtonOnClick={backButtonOnClick}
+        alert={
+          <ClauseFormBanner
+            status="idle"
+            icon={fr.cx("fr-icon-alert-fill")}
+            text={`Tous les agents de l'UDAP peuvent voir et télécharger les compte-rendus envoyés. Seuls ceux à qui vous avez donné le droit peuvent créer, modifier, et supprimer vos compte-rendus. Le compte-rendu est attribué à un agent via le champ "rédigé par" du formulaire.`}
+          />
+        }
+      >
+        Partage des CR
+      </MenuTitle>
+      {/* <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" /> */}
 
-      <Stack w="100%">
+      <Stack w="100%" px="20px">
         <styled.div>Ces personnes peuvent créer, modifier et supprimer vos CR : </styled.div>
         <ManageDelegations coworkers={coworkersQuery.results ?? []} delegations={delegationsQuery.results ?? []} />
       </Stack>
 
-      <Stack mt="49px" color="#757575">
+      <Stack mt="49px" px="20px" color="#757575">
         <styled.div>Ces personnes vous permettent de créer, modifier et supprimer leurs CR :</styled.div>
         <styled.ul>
           {delegatedToMeQuery.results?.map((delegation) => (

diff --git a/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx b/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx
@@ -32,7 +32,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("bold"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         iconId="fr-icon-bold"
         type="button"
@@ -45,7 +45,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("italic"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         type="button"
         iconId="fr-icon-italic"
@@ -58,7 +58,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("underline"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         iconId="ri-underline"
         type="button"
@@ -91,7 +91,7 @@ const ColorInput = () => {
       <Popover.Trigger>
         <Button
           className={toolbarButtonRecipe({})}
-          size="small"
+          size="medium"
           priority="tertiary no outline"
           iconId="ri-palette-line"
           type="button"
@@ -105,18 +105,13 @@ const ColorInput = () => {
           <Stack p="8px">
             <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
               <ColorButton value={currentValue} color="black" />
-              <ColorButton value={currentValue} color="#c9191e" />
-              <ColorButton value={currentValue} color="#666666" />
+              <ColorButton value={currentValue} color="#e1000f" />
+              <ColorButton value={currentValue} color="#d64d00" />
             </Stack>
-            <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
-              <ColorButton value={currentValue} color="#cecece" />
-              <ColorButton value={currentValue} color="#0078f3" />
-              <ColorButton value={currentValue} color="#1f8d49" />
-            </Stack>
-            <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
-              <ColorButton value={currentValue} color="#68a532" />
-              <ColorButton value={currentValue} color="#e4794a" />
-              <ColorButton value={currentValue} color="#272747" />
+            <Stack flexDir="row" w="100%">
+              <ColorButton value={currentValue} color="#000091" />
+              <ColorButton value={currentValue} color="#118d49" />
+              <div />
             </Stack>
           </Stack>
         </Popover.Content>

diff --git a/packages/frontend/src/routes/edit.$reportId.tsx b/packages/frontend/src/routes/edit.$reportId.tsx
@@ -89,13 +89,17 @@ const WithReport = ({ report }: { report: Report }) => {
     document.getElementById("root")!.scrollTo(0, 0);
   };
 
+  // @ts-ignore
+  const isChrome = !!window.chrome;
+
   const options = [
     {
       id: "info",
       label: "RDV",
       className: css({
         position: "absolute",
-        left: "max(calc((100vw - 800px) / 2 + 8px), 16px)",
+        // there is a difference in padding between chrome and other browsers due to scrollbar width (i guess)
+        left: isChrome ? "max(calc((100vw - 800px) / 2 + 8px), 16px)" : "max(calc((100vw - 800px) / 2 + 16px), 16px)",
       }),
     },
     {

diff --git a/packages/frontend/src/routes/index.tsx b/packages/frontend/src/routes/index.tsx
@@ -47,6 +47,7 @@ const Index = () => {
           id: `report-${v4()}`,
           createdBy: user.id,
           createdAt: new Date(),
+          meetDate: new Date(),
           disabled: false,
           udap_id: user.udap.id,
           redactedBy: user.name,