Mep (#33)

* 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
betagouv · Aug 8, 2024 · ef2e2da · ef2e2da
1 parent bfd1630
commit ef2e2da
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 35 deletions.
diff --git a/packages/frontend/src/components/SyncForm.tsx b/packages/frontend/src/components/SyncForm.tsx
@@ -57,6 +57,14 @@ export function SyncFormBanner({ form, baseObject }: { form: UseFormReturn<Repor
             }}
             hideBelow="lg"
             fontSize="16px"
+            {...{
+              "&::before": {
+                width: "16px !important",
+                height: "16px !important",
+                mb: "4px !important",
+                mr: "4px",
+              },
+            }}
           >
             Retour
           </styled.a>
@@ -122,7 +130,7 @@ const electricStatusToStatus: Record<ElectricStatus, SyncFormStatus> = {
 
 export const useStatus = (overrideStatus?: SyncFormStatus) => {
   const electricStatus = useElectricStatus();
-  if (electricStatus === "error") return "offline";
+  if (electricStatus === "error" || overrideStatus === "offline") return "offline";
 
   const formStatus = electricStatusToStatus[electricStatus];
 
@@ -132,7 +140,7 @@ export const useStatus = (overrideStatus?: SyncFormStatus) => {
 };
 
 export const Status = ({ status, className }: { status?: SyncFormStatus; className?: string }) => {
-  const formStatus = useStatus(status === "pending" ? "pending" : undefined);
+  const formStatus = useStatus(status);
 
   return (
     <styled.div
@@ -184,9 +192,17 @@ const syncFormBanner = sva({
       justifyContent: "flex-end",
       w: "100%",
       maxW: { base: "unset", sm: "800px" },
+      h: { base: "56px", lg: "unset" },
       px: "15px",
     },
-    back: { ml: "-10px", color: "black", _hover: { bgColor: "transparent" } },
+    back: {
+      ml: "-10px",
+      color: "black",
+      _hover: { bgColor: "transparent" },
+      "&::before": {
+        width: "24px !important",
+      },
+    },
     label: {},
     input: {
       w: { base: "100%", lg: "100%" },

diff --git a/packages/frontend/src/features/ReportActions.tsx b/packages/frontend/src/features/ReportActions.tsx
@@ -1,5 +1,5 @@
 import { css } from "#styled-system/css";
-import { Stack } from "#styled-system/jsx";
+import { Divider, Stack } from "#styled-system/jsx";
 import Button, { ButtonProps } from "@codegouvfr/react-dsfr/Button";
 import { forwardRef } from "react";
 import { useUser } from "../contexts/AuthContext";
@@ -42,21 +42,30 @@ export const ReportActions = forwardRef<HTMLDivElement, { report: ReportWithUser
   return (
     <Stack ref={ref} gap="0">
       {isOwner ? (
-        <ReportAction
-          iconId="ri-pencil-line"
-          label="Editer"
-          onClick={() => navigate({ to: "/edit/$reportId", params: { reportId: report.id } })}
-        />
+        <>
+          <ReportAction
+            iconId="ri-pencil-line"
+            label="Editer"
+            onClick={() => navigate({ to: "/edit/$reportId", params: { reportId: report.id } })}
+          />
+          <Divider height="1px" color="#DDD" />
+        </>
       ) : null}
       {isOwner ? (
-        <ReportAction
-          iconId="ri-delete-bin-2-line"
-          label="Supprimer"
-          onClick={() => deleteMutation.mutate(report.id)}
-        />
+        <>
+          <ReportAction
+            iconId="ri-delete-bin-2-line"
+            label="Supprimer"
+            onClick={() => deleteMutation.mutate(report.id)}
+          />
+          <Divider height="1px" color="#DDD" />
+        </>
       ) : null}
       {report.pdf ? (
-        <ReportAction iconId="ri-download-line" label="Télécharger" onClick={() => downloadPdfMutation.mutate()} />
+        <>
+          <ReportAction iconId="ri-download-line" label="Télécharger" onClick={() => downloadPdfMutation.mutate()} />
+          <Divider height="1px" color="#DDD" />
+        </>
       ) : null}
       <ReportAction iconId="ri-file-add-line" label="Dupliquer" onClick={() => duplicateMutation.mutate()} />
     </Stack>

diff --git a/packages/frontend/src/features/menu/ClauseMenu.tsx b/packages/frontend/src/features/menu/ClauseMenu.tsx
@@ -262,15 +262,17 @@ const ClauseList = ({ clauses, isEditing }: { clauses: ClauseWithIndex[]; isEdit
     <Stack>
       {Object.entries(groupedByKey).map(([key, clauses], index) => (
         <Fragment key={key}>
-          <Stack gap="24px">
+          <Stack gap="20px">
             <styled.span fontSize="20px" fontWeight="normal">
               {(clauseNameMap as any)[key] ?? key}
             </styled.span>
             {clauses.map((clause) => (
               <DivOrTextarea key={clause.id} clause={clause} isEditing={isEditing ?? false} />
             ))}
           </Stack>
-          {index < Object.keys(groupedByKey).length - 1 && <Divider height="1px" my="16px" color="#C1C1FB" />}
+          {index < Object.keys(groupedByKey).length - 1 && (
+            <Divider height="1px" my={{ base: "16px", lg: "30px" }} color="#C1C1FB" />
+          )}
         </Fragment>
       ))}
     </Stack>

diff --git a/packages/frontend/src/features/menu/HelpMenu.tsx b/packages/frontend/src/features/menu/HelpMenu.tsx
@@ -3,7 +3,7 @@ import Button from "@codegouvfr/react-dsfr/Button";
 import { electric } from "../../db";
 import { MenuTitle } from "./MenuTitle";
 
-export const HelpMenu = () => {
+export const HelpMenu = ({ backButtonOnClick }: { backButtonOnClick: () => void }) => {
   const deleteLocalData = () => {
     if (electric.isConnected) electric.disconnect();
     localStorage.clear();
@@ -12,7 +12,7 @@ export const HelpMenu = () => {
   };
   return (
     <>
-      <MenuTitle>Assistance technique</MenuTitle>
+      <MenuTitle backButtonOnClick={backButtonOnClick}>Assistance technique</MenuTitle>
       <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
       <Stack>
         <styled.div mb="10px">

diff --git a/packages/frontend/src/features/menu/MenuButton.tsx b/packages/frontend/src/features/menu/MenuButton.tsx
@@ -16,7 +16,7 @@ import { MenuActions } from "./MenuActions";
 import { menuStore } from "./menuStore";
 import { ShareReport } from "./Share";
 
-import { useClickAway } from "react-use";
+import { useClickAway, useNetworkState } from "react-use";
 
 const nestedMenus = ["main", "help", "clauses-nationales", "clauses-departementales", "share"] as const;
 export type NestedMenu = (typeof nestedMenus)[number];
@@ -25,6 +25,9 @@ export const MenuButton = ({ headerRef }: { headerRef: any }) => {
   const menu = useSelector(menuStore, (state) => state.context.menu);
   const isDesktop = useIsDesktop();
 
+  const { online } = useNetworkState();
+  const status = !online ? "offline" : "saved";
+
   const isOpen = isDesktop ? !!menu && menu !== "main" : !!menu;
 
   useIsModalOpen(menuModal, {
@@ -48,7 +51,10 @@ export const MenuButton = ({ headerRef }: { headerRef: any }) => {
             >
               <styled.div hideBelow="lg">
                 <Flex alignItems="center">
-                  <Status className={css({ display: "flex", alignItems: "center", fontSize: "10px" })} />
+                  <Status
+                    className={css({ display: "flex", alignItems: "center", fontSize: "10px" })}
+                    status={status}
+                  />
                   <Popover.Root positioning={{ placement: "bottom-end" }}>
                     <Popover.Trigger asChild>
                       <Button
@@ -87,10 +93,10 @@ const menuModal = createModal({ isOpenedByDefault: false, id: "menu-modal-2" });
 
 const modalContents: Record<NestedMenu, (props: ModalContentProps) => ReactNode> = {
   main: (props) => <MenuActions menu={props.menu} />,
-  help: () => <HelpMenu />,
+  help: (props) => <HelpMenu {...props} />,
   "clauses-departementales": (props) => <ClauseMenu isNational={false} {...props} />,
   "clauses-nationales": (props) => <ClauseMenu isNational {...props} />,
-  share: () => <ShareReport />,
+  share: (props) => <ShareReport {...props} />,
 };
 
 export type ModalContentProps = {
@@ -131,6 +137,9 @@ const MenuModal = ({ menu, isOpen, className }: { menu: NestedMenu | null; isOpe
             maxHeight: "100%",
             p: 0,
           },
+          "& .fr-modal__title": {
+            display: "none",
+          },
           "& .fr-modal__body": {
             width: { base: "100%", lg: "800px" },
             maxWidth: "100%",

diff --git a/packages/frontend/src/features/menu/MenuTitle.tsx b/packages/frontend/src/features/menu/MenuTitle.tsx
@@ -18,12 +18,15 @@ export const MenuTitle = ({
 }) => (
   <>
     <Flex
+      position={{ base: "sticky", lg: "unset" }}
+      top={{ base: "-1px", lg: "unset" }}
       justifyContent="space-between"
       alignItems="center"
       w="100%"
-      h="40px"
-      mt={{ base: "0", lg: "48px" }}
-      mb={{ base: "16px", lg: "48px" }}
+      py={{ base: "16px", lg: "30px" }}
+      // mt={{ base: "0", lg: "48px" }}
+      // mb={{ base: "16px", lg: "48px" }}
+      bgColor="white"
     >
       <styled.div hideFrom="lg">
         {backButtonOnClick ? (
@@ -56,7 +59,7 @@ export const MenuTitle = ({
     </Flex>
     {alert ? alert : null}
     {!hideDivider ? (
-      <styled.div my="24px">
+      <styled.div hideFrom="lg" mb="24px">
         {buttons ? (
           <styled.span hideFrom={"lg"} fontSize="20px" fontWeight="bold" nowrap>
             {children}

diff --git a/packages/frontend/src/features/menu/Share.tsx b/packages/frontend/src/features/menu/Share.tsx
@@ -8,7 +8,7 @@ import { useMutation } from "@tanstack/react-query";
 import { css } from "#styled-system/css";
 import { MenuTitle } from "./MenuTitle";
 
-export const ShareReport = () => {
+export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => void }) => {
   const user = useUser()!;
 
   const coworkersQuery = useLiveQuery(
@@ -41,8 +41,8 @@ export const ShareReport = () => {
 
   return (
     <>
-      <MenuTitle>Partage des CR</MenuTitle>
-      <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
+      <MenuTitle backButtonOnClick={backButtonOnClick}>Partage des CR</MenuTitle>
+      <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" />
 
       <Stack w="100%">
         <styled.div>Ces personnes peuvent créer, modifier et supprimer vos CR : </styled.div>

diff --git a/packages/frontend/src/features/text-editor/TextEditor.tsx b/packages/frontend/src/features/text-editor/TextEditor.tsx
@@ -30,8 +30,9 @@ export const textEditorClassName = css({
   minH: "160px",
   "& > div": {
     outline: "none",
+    borderRadius: "0 !important",
     roundedTop: "md",
-    borderWidth: "1px",
+    borderWidth: "0px",
     h: "100%",
     minH: "160px",
     maxHeight: "100%",

diff --git a/packages/frontend/src/routes/__root.tsx b/packages/frontend/src/routes/__root.tsx
@@ -108,6 +108,12 @@ const Layout = ({ children }: PropsWithChildren) => {
                 }
               : {},
           }),
+          logo: css({
+            "&::after": {
+              backgroundPosition: "0 0 !important",
+            },
+          }),
+          service: css({ display: { base: "none", lg: "unset" } }),
           toolsLinks: css({
             h: "100%",
           }),

diff --git a/packages/frontend/src/routes/pdf.$reportId.tsx b/packages/frontend/src/routes/pdf.$reportId.tsx
@@ -186,7 +186,7 @@ export const PDF = () => {
   }
 
   return (
-    <styled.div w="100%" h="100%" bgColor={mode === "edit" ? "background-open-blue-france" : "unset"} overflowY="auto">
+    <styled.div w="100%" h="100%" bgColor={mode === "edit" ? "background-open-blue-france" : "unset"}>
       <TextEditorContextProvider>
         {report ? (
           <SendForm generatePdf={generatePdfMutation.mutate} report={report}>
@@ -295,10 +295,16 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
       : router.history.back();
 
   return (
-    <Banner status="saved" flexDir="row">
+    <Banner
+      status="saved"
+      zIndex={3}
+      position={{ base: "sticky", lg: "unset" }}
+      top={{ base: "-1px", lg: "unset" }}
+      flexDir="row"
+    >
       <Flex
         direction="row"
-        justifyContent={"space-between"}
+        justifyContent={"flex-start"}
         alignItems="center"
         w={{ base: "100%", lg: "1000px" }}
         maxW={{ base: "100%", lg: "1000px" }}
@@ -316,6 +322,14 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
             hideBelow="lg"
             fontSize="16px"
             whiteSpace="nowrap"
+            {...{
+              "&::before": {
+                width: "16px !important",
+                height: "16px !important",
+                mb: "4px !important",
+                mr: "4px",
+              },
+            }}
           >
             Retour
           </styled.a>
@@ -331,7 +345,7 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
           color="black"
           fontSize="16px"
         ></styled.a>
-        <styled.div ml={{ base: "0", lg: "50px" }} nowrap>
+        <styled.div flex={1} ml={{ base: "0", lg: "32px" }} pr="8px" nowrap>
           {title}
         </styled.div>
         <Flex>{buttons}</Flex>