From 255a39e2bbaab4094ce2e497ec6832da0938c1f9 Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Thu, 14 Aug 2025 12:15:09 +0400 Subject: [PATCH] refactor: removed constant sizes --- .../CreateBoardButtonMobile.module.css | 2 +- .../CreateBoardButtonMobile.tsx | 2 +- .../components/shared/BoardMenu/BoardMenu.tsx | 10 +- .../CreateStatusButton/CreateStatusButton.tsx | 17 ++-- .../deals/components/shared/Funnel/Funnel.tsx | 91 +++++++++---------- .../StatusColumnWrapper.module.css | 4 + .../StatusColumnWrapper.tsx | 9 +- .../shared/StatusMenu/StatusMenu.tsx | 3 +- .../BoardStatusesEditorDrawer.tsx | 2 +- .../components/StatusMobile.tsx | 1 - .../ProjectBoardsEditorDrawer.tsx | 2 +- .../components/ProjectMenu.tsx | 9 +- .../components/ProjectMobile.tsx | 1 - src/components/dnd/FunnelDnd/FunnelDnd.tsx | 77 ++++++++-------- 14 files changed, 109 insertions(+), 121 deletions(-) diff --git a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css index 00c0b90..04ad843 100644 --- a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css +++ b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css @@ -1,6 +1,6 @@ .create-button { - padding: 11px 10px 12px 10px; + padding: 10px 10px 11px 10px; border-bottom: 2px solid gray; } diff --git a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx index 9135110..7eeb278 100644 --- a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx +++ b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx @@ -16,7 +16,7 @@ const CreateBoardButtonMobile = () => { - + )} modalTitle={"Создание доски"} diff --git a/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx b/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx index a56159f..e5cf87a 100644 --- a/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx +++ b/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx @@ -8,15 +8,9 @@ type Props = { board: BoardSchema; startEditing: () => void; isHovered?: boolean; - menuIconSize?: number; }; -const BoardMenu: FC = ({ - board, - startEditing, - isHovered = true, - menuIconSize = 16, -}) => { +const BoardMenu: FC = ({ board, startEditing, isHovered = true }) => { const { selectedBoard, onDeleteBoard } = useBoardsContext(); return ( @@ -29,7 +23,7 @@ const BoardMenu: FC = ({ cursor: "pointer", }} onClick={e => e.stopPropagation()}> - + diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx index 514c0ae..77c4c5d 100644 --- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx +++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx @@ -1,26 +1,31 @@ import React from "react"; import { IconPlus } from "@tabler/icons-react"; -import { Box, Center, Stack } from "@mantine/core"; +import { Box, Center, Group, Stack, Text } from "@mantine/core"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; +import useIsMobile from "@/hooks/useIsMobile"; import styles from "./CreateStatusButton.module.css"; const CreateStatusButton = () => { const { onCreateStatus } = useStatusesContext(); + const isMobile = useIsMobile(); return ( - + (
startEditing()}> - + + + {isMobile && ( + Добавить + )} +
)} modalTitle={"Создание колонки"} diff --git a/src/app/deals/components/shared/Funnel/Funnel.tsx b/src/app/deals/components/shared/Funnel/Funnel.tsx index 4447fe4..2099894 100644 --- a/src/app/deals/components/shared/Funnel/Funnel.tsx +++ b/src/app/deals/components/shared/Funnel/Funnel.tsx @@ -27,54 +27,46 @@ const Funnel: FC = () => { } = useDealsAndStatusesDnd(); const renderFunnelDnd = () => ( - <> - `${status.id}-status`} - getItemsByContainer={( - status: StatusSchema, - items: DealSchema[] - ) => - sortByLexorank( - items.filter(deal => deal.statusId === status.id) - ) - } - renderContainer={( - status: StatusSchema, - funnelColumnComponent: ReactNode - ) => ( - - {funnelColumnComponent} - - )} - renderItem={(deal: DealSchema) => ( - - )} - activeContainer={activeStatus} - activeItem={activeDeal} - renderItemOverlay={(deal: DealSchema) => ( - - )} - renderContainerOverlay={(status: StatusSchema, children) => ( - - {children} - - )} - disabledColumns={isMobile} - /> - {!isMobile && } - + `${status.id}-status`} + getItemsByContainer={(status: StatusSchema, items: DealSchema[]) => + sortByLexorank( + items.filter(deal => deal.statusId === status.id) + ) + } + renderContainer={( + status: StatusSchema, + funnelColumnComponent: ReactNode + ) => ( + + {funnelColumnComponent} + + )} + renderItem={(deal: DealSchema) => ( + + )} + activeContainer={activeStatus} + activeItem={activeDeal} + renderItemOverlay={(deal: DealSchema) => } + renderContainerOverlay={(status: StatusSchema, children) => ( + + {children} + + )} + disabledColumns={isMobile} + /> ); if (isMobile) return renderFunnelDnd(); @@ -86,8 +78,9 @@ const Funnel: FC = () => { + gap={"xs"}> {renderFunnelDnd()} + ); diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css index b997ac2..5b277e0 100644 --- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css +++ b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css @@ -7,3 +7,7 @@ width: 80vw; } } + +.header { + border-bottom: solid blue 3px; +} diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx index 89cd507..11cd76e 100644 --- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx +++ b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx @@ -27,12 +27,13 @@ const StatusColumnWrapper = ({ }; return ( - + + p={"sm"} + wrap={"nowrap"} + mb={"xs"} + className={styles.header}> handleSave(value)} diff --git a/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx b/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx index 6ebaa9a..af2b532 100644 --- a/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx +++ b/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx @@ -23,12 +23,11 @@ const StatusMenu: FC = ({ status, handleEdit }) => { e.stopPropagation()}> - + diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx b/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx index 396c041..b92ff24 100644 --- a/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx +++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx @@ -22,7 +22,7 @@ const BoardStatusesEditorDrawer: FC = () => { const renderDraggable = () => ( - + ); diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx index a096dcb..d975dab 100644 --- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx +++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx @@ -37,7 +37,6 @@ const StatusMobile: FC = ({ status }) => { ); diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx b/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx index dd6d100..d471f2f 100644 --- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx +++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx @@ -22,7 +22,7 @@ const ProjectBoardsEditorDrawer: FC = () => { const renderDraggable = () => ( - + ); diff --git a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx index 7023bf2..271ff80 100644 --- a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx +++ b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx @@ -8,14 +8,9 @@ import styles from "./../ProjectsEditorDrawer.module.css"; type Props = { project: ProjectSchema; startEditing: () => void; - menuIconSize: number; }; -const ProjectMenu: FC = ({ - project, - startEditing, - menuIconSize = 16, -}) => { +const ProjectMenu: FC = ({ project, startEditing }) => { const { onDeleteProject } = useProjectsContext(); return ( @@ -24,7 +19,7 @@ const ProjectMenu: FC = ({ e.stopPropagation()}> - + diff --git a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx index 4e90774..e3ccd32 100644 --- a/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx +++ b/src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx @@ -46,7 +46,6 @@ const ProjectMobile: FC = ({ project }) => { ); diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index 751991d..a402461 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -69,7 +69,7 @@ const FunnelDnd = < containers.map(container => { const containerItems = getItemsByContainer(container, items); const containerId = getContainerId(container); - return ( + const item = ( ); + if (!isMobile) return item; + return {item}; }); - const renderBody = () => ( - <> - {isMobile ? ( + const renderBody = () => { + if (isMobile) { + return ( - ) : ( - renderContainers() - )} - { - const containerItems = getItemsByContainer( - container, - items - ); - const containerId = getContainerId(container); - return renderContainerOverlay( - container, - - ); - }} - renderItem={renderItemOverlay} - /> - - ); + ); + } + return ( + + {renderContainers()} + + ); + }; return ( - {isMobile ? ( - renderBody() - ) : ( - - {renderBody()} - - )} + {renderBody()} + { + const containerItems = getItemsByContainer( + container, + items + ); + const containerId = getContainerId(container); + return renderContainerOverlay( + container, + + ); + }} + renderItem={renderItemOverlay} + /> );