diff --git a/src/app/deals/components/BoardMobile/BoardMobile.tsx b/src/app/deals/components/BoardMobile/BoardMobile.tsx deleted file mode 100644 index 500e7b7..0000000 --- a/src/app/deals/components/BoardMobile/BoardMobile.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { FC } from "react"; -import { Box, Group, Text } from "@mantine/core"; -import BoardMenu from "@/app/deals/components/Board/BoardMenu"; -import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; -import { BoardSchema } from "@/lib/client"; - -type Props = { - board: BoardSchema; -}; - -const BoardMobile: FC = ({ board }) => { - const { selectedBoard } = useBoardsContext(); - const { onUpdateBoard } = useBoardsContext(); - - return ( - - onUpdateBoard(board.id, { name: value })} - inputStyles={{ - input: { - height: 25, - minHeight: 25, - }, - }} - getChildren={startEditing => ( - <> - - {board.name} - - - - )} - modalTitle={"Редактирование доски"} - /> - - ); -}; - -export default BoardMobile; diff --git a/src/app/deals/components/Board/Board.module.css b/src/app/deals/components/desktop/Board/Board.module.css similarity index 100% rename from src/app/deals/components/Board/Board.module.css rename to src/app/deals/components/desktop/Board/Board.module.css diff --git a/src/app/deals/components/Board/Board.tsx b/src/app/deals/components/desktop/Board/Board.tsx similarity index 93% rename from src/app/deals/components/Board/Board.tsx rename to src/app/deals/components/desktop/Board/Board.tsx index 29b5ad3..ade3f0c 100644 --- a/src/app/deals/components/Board/Board.tsx +++ b/src/app/deals/components/desktop/Board/Board.tsx @@ -1,7 +1,7 @@ import React, { FC, useState } from "react"; import { Box, Group, Text } from "@mantine/core"; -import styles from "@/app/deals/components/Board/Board.module.css"; -import BoardMenu from "@/app/deals/components/Board/BoardMenu"; +import styles from "@/app/deals/components/desktop/Board/Board.module.css"; +import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; diff --git a/src/app/deals/components/Boards/Boards.tsx b/src/app/deals/components/desktop/Boards/Boards.tsx similarity index 78% rename from src/app/deals/components/Boards/Boards.tsx rename to src/app/deals/components/desktop/Boards/Boards.tsx index 11abfbc..7b1bb5d 100644 --- a/src/app/deals/components/Boards/Boards.tsx +++ b/src/app/deals/components/desktop/Boards/Boards.tsx @@ -2,9 +2,8 @@ import React from "react"; import { Group, ScrollArea } from "@mantine/core"; -import Board from "@/app/deals/components/Board/Board"; -import BoardMobile from "@/app/deals/components/BoardMobile/BoardMobile"; -import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBoardButton"; +import Board from "@/app/deals/components/desktop/Board/Board"; +import CreateBoardButton from "@/app/deals/components/desktop/CreateBoardButton/CreateBoardButton"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import SortableDnd from "@/components/dnd/SortableDnd"; import useIsMobile from "@/hooks/useIsMobile"; @@ -16,10 +15,6 @@ const Boards = () => { const renderBoard = (board: BoardSchema) => ; - const renderBoardMobile = (board: BoardSchema) => ( - - ); - const onDragEnd = (itemId: number, newLexorank: string) => { onUpdateBoard(itemId, { lexorank: newLexorank }); }; @@ -39,7 +34,7 @@ const Boards = () => { gap={0}> = ({ board }) => { + const { selectedBoard } = useBoardsContext(); + + return ( + + {board.name} + + ); +}; + +export default BoardMobile; diff --git a/src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx b/src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx new file mode 100644 index 0000000..904a4cb --- /dev/null +++ b/src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx @@ -0,0 +1,50 @@ +"use client"; + +import React from "react"; +import { Group, ScrollArea } from "@mantine/core"; +import BoardMobile from "@/app/deals/components/mobile/BoardMobile/BoardMobile"; +import CreateBoardButtonMobile from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile"; +import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; +import SortableDnd from "@/components/dnd/SortableDnd"; +import useIsMobile from "@/hooks/useIsMobile"; +import { BoardSchema } from "@/lib/client"; + +const BoardsMobile = () => { + const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext(); + const isMobile = useIsMobile(); + + const renderBoard = (board: BoardSchema) => ; + + const onDragEnd = (itemId: number, newLexorank: string) => { + onUpdateBoard(itemId, { lexorank: newLexorank }); + }; + + const selectBoard = (board: BoardSchema) => { + setSelectedBoard(board); + }; + + return ( + + + + + + + ); +}; + +export default BoardsMobile; diff --git a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css new file mode 100644 index 0000000..00c0b90 --- /dev/null +++ b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css @@ -0,0 +1,12 @@ + +.create-button { + padding: 11px 10px 12px 10px; + border-bottom: 2px solid gray; +} + +.spacer { + height: 46px; + padding: 11px 10px 12px 10px; + border-bottom: 2px solid gray; + width: 100%; +} diff --git a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx new file mode 100644 index 0000000..9135110 --- /dev/null +++ b/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx @@ -0,0 +1,35 @@ +import { IconPlus } from "@tabler/icons-react"; +import { Box } from "@mantine/core"; +import styles from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css"; +import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; +import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; + +const CreateBoardButtonMobile = () => { + const { onCreateBoard } = useBoardsContext(); + + return ( + <> + ( + + + + )} + modalTitle={"Создание доски"} + inputStyles={{ + wrapper: { + marginLeft: 15, + marginRight: 15, + }, + }} + /> + + + ); +}; + +export default CreateBoardButtonMobile; diff --git a/src/app/deals/components/Board/BoardMenu.tsx b/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx similarity index 87% rename from src/app/deals/components/Board/BoardMenu.tsx rename to src/app/deals/components/shared/BoardMenu/BoardMenu.tsx index aeb8d2f..a56159f 100644 --- a/src/app/deals/components/Board/BoardMenu.tsx +++ b/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx @@ -2,7 +2,6 @@ import React, { FC } from "react"; import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react"; import { Box, Group, Menu, Text } from "@mantine/core"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import useIsMobile from "@/hooks/useIsMobile"; import { BoardSchema } from "@/lib/client"; type Props = { @@ -19,7 +18,6 @@ const BoardMenu: FC = ({ menuIconSize = 16, }) => { const { selectedBoard, onDeleteBoard } = useBoardsContext(); - const isMobile = useIsMobile(); return ( @@ -27,10 +25,7 @@ const BoardMenu: FC = ({ e.stopPropagation()}> diff --git a/src/app/deals/components/CreateStatusButton/CreateStatusButton.tsx b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx similarity index 100% rename from src/app/deals/components/CreateStatusButton/CreateStatusButton.tsx rename to src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx diff --git a/src/app/deals/components/DealCard/DealCard.module.css b/src/app/deals/components/shared/DealCard/DealCard.module.css similarity index 100% rename from src/app/deals/components/DealCard/DealCard.module.css rename to src/app/deals/components/shared/DealCard/DealCard.module.css diff --git a/src/app/deals/components/DealCard/DealCard.tsx b/src/app/deals/components/shared/DealCard/DealCard.tsx similarity index 100% rename from src/app/deals/components/DealCard/DealCard.tsx rename to src/app/deals/components/shared/DealCard/DealCard.tsx diff --git a/src/app/deals/components/DealContainer/DealContainer.tsx b/src/app/deals/components/shared/DealContainer/DealContainer.tsx similarity index 89% rename from src/app/deals/components/DealContainer/DealContainer.tsx rename to src/app/deals/components/shared/DealContainer/DealContainer.tsx index 99c1625..2df3ac7 100644 --- a/src/app/deals/components/DealContainer/DealContainer.tsx +++ b/src/app/deals/components/shared/DealContainer/DealContainer.tsx @@ -1,6 +1,6 @@ import React, { FC, useMemo } from "react"; import { Box } from "@mantine/core"; -import DealCard from "@/app/deals/components/DealCard/DealCard"; +import DealCard from "@/app/deals/components/shared/DealCard/DealCard"; import SortableItem from "@/components/dnd/SortableItem"; import { DealSchema } from "@/lib/client"; diff --git a/src/app/deals/components/Funnel/Funnel.tsx b/src/app/deals/components/shared/Funnel/Funnel.tsx similarity index 89% rename from src/app/deals/components/Funnel/Funnel.tsx rename to src/app/deals/components/shared/Funnel/Funnel.tsx index 8995320..22fe25e 100644 --- a/src/app/deals/components/Funnel/Funnel.tsx +++ b/src/app/deals/components/shared/Funnel/Funnel.tsx @@ -2,10 +2,10 @@ import React, { FC, ReactNode } from "react"; import { Group, ScrollArea } from "@mantine/core"; -import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton"; -import DealCard from "@/app/deals/components/DealCard/DealCard"; -import DealContainer from "@/app/deals/components/DealContainer/DealContainer"; -import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper"; +import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton"; +import DealCard from "@/app/deals/components/shared/DealCard/DealCard"; +import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer"; +import StatusColumnWrapper from "@/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper"; import { useDealsContext } from "@/app/deals/contexts/DealsContext"; import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd"; import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd"; diff --git a/src/app/deals/components/Header/Header.tsx b/src/app/deals/components/shared/Header/Header.tsx similarity index 86% rename from src/app/deals/components/Header/Header.tsx rename to src/app/deals/components/shared/Header/Header.tsx index 1b7942c..2cc3954 100644 --- a/src/app/deals/components/Header/Header.tsx +++ b/src/app/deals/components/shared/Header/Header.tsx @@ -2,7 +2,8 @@ import { IconChevronLeft, IconSettings } from "@tabler/icons-react"; import { Box, Group, Stack, Text } from "@mantine/core"; -import Boards from "@/app/deals/components/Boards/Boards"; +import Boards from "@/app/deals/components/desktop/Boards/Boards"; +import BoardsMobile from "@/app/deals/components/mobile/BoardsMobile/BoardsMobile"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect"; @@ -20,7 +21,8 @@ const Header = () => { + wrap={"nowrap"} + pr={"md"}> { const getMobileHeader = () => { return ( - + @@ -48,7 +48,7 @@ const Header = () => { - + ); }; diff --git a/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css similarity index 100% rename from src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css rename to src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css diff --git a/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx similarity index 92% rename from src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx rename to src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx index b80cfda..89cd507 100644 --- a/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx +++ b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx @@ -1,10 +1,10 @@ import React, { ReactNode } from "react"; import { Box, Group, Text } from "@mantine/core"; -import styles from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css"; -import StatusMenu from "@/app/deals/components/StatusColumnWrapper/StatusMenu"; +import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; import { StatusSchema } from "@/lib/client"; +import styles from "./StatusColumnWrapper.module.css"; type Props = { status: StatusSchema; diff --git a/src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx b/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx similarity index 100% rename from src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx rename to src/app/deals/components/shared/StatusMenu/StatusMenu.tsx diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx index 51f8983..a096dcb 100644 --- a/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx +++ b/src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx @@ -1,7 +1,7 @@ import React, { FC } from "react"; import { Box, Group, Text } from "@mantine/core"; import { modals } from "@mantine/modals"; -import BoardMenu from "@/app/deals/components/Board/BoardMenu"; +import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import { StatusSchema } from "@/lib/client"; diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx b/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx index dff1995..557411e 100644 --- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx +++ b/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx @@ -1,7 +1,7 @@ import React, { FC } from "react"; import { Box, Group, Text } from "@mantine/core"; import { modals } from "@mantine/modals"; -import BoardMenu from "@/app/deals/components/Board/BoardMenu"; +import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import { BoardSchema } from "@/lib/client"; diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index 11cc221..b71e48f 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -1,5 +1,5 @@ -import Funnel from "@/app/deals/components/Funnel/Funnel"; -import Header from "@/app/deals/components/Header/Header"; +import Funnel from "@/app/deals/components/shared/Funnel/Funnel"; +import Header from "@/app/deals/components/shared/Header/Header"; import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext"; import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext"; import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext"; @@ -16,7 +16,7 @@ export default function DealsPage() { + style={{ padding: 0 }}>
diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index c4467c1..bf7fcb5 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -13,7 +13,7 @@ import { SortableContext, } from "@dnd-kit/sortable"; import { Group, ScrollArea } from "@mantine/core"; -import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton"; +import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton"; import useDndSensors from "@/app/deals/hooks/useSensors"; import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn"; import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay"; diff --git a/src/components/dnd/SortableItem/DragHandle.tsx b/src/components/dnd/SortableItem/DragHandle.tsx index f6dc78b..12951b5 100644 --- a/src/components/dnd/SortableItem/DragHandle.tsx +++ b/src/components/dnd/SortableItem/DragHandle.tsx @@ -23,7 +23,7 @@ const DragHandle = ({ id, children, style, disabled }: Props) => { style={{ width: "100wv", cursor: disabled ? "default" : "grab", - touchAction: "none", + touchAction: disabled ? "auto" : "none", ...style, }} ref={setNodeRef}> diff --git a/src/components/layout/PageBlock/PageBlock.module.css b/src/components/layout/PageBlock/PageBlock.module.css index 86d7c9f..084248f 100644 --- a/src/components/layout/PageBlock/PageBlock.module.css +++ b/src/components/layout/PageBlock/PageBlock.module.css @@ -1,15 +1,21 @@ .container { - background-color: white; @mixin dark { background-color: var(--mantine-color-dark-8); - box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6); } @mixin light { - box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16); + background-color: white; } + @media (min-width: 48em) { padding: rem(35); border-radius: rem(20); + + @mixin dark { + box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6); + } + @mixin light { + box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16); + } } }