fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styles for deal drawer

Browse Source
This commit is contained in:
AlexSserb
2025-09-18 09:50:06 +04:00
parent 6b4e2f193a
commit a95d05e28b
20 changed files with 199 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
View File

@ -1,6 +0,0 @@
.container {
width: min-content;
cursor: pointer;
padding: 6px;
height: 100%;
}

26
src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
View File

@ -1,26 +0,0 @@
import { FC, PropsWithChildren } from "react";
import { ActionIcon, Box } from "@mantine/core";
import style from "./ToolPanelAction.module.css";
type Props = {
onClick: () => void;
};
const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
onClick,
children,
}) => {
return (
<Box>
<ActionIcon
variant={"default"}
onClick={onClick}
radius="lg"
className={style.container}>
{children}
</ActionIcon>
</Box>
);
};
export default ToolPanelAction;

14
src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
View File

@ -4,12 +4,12 @@ import { FC } from "react";
import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
import { Flex, Group, Indicator } from "@mantine/core";
import { modals } from "@mantine/modals";
import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { useDrawersContext } from "@/drawers/DrawersContext";
import useIsMobile from "@/hooks/utils/useIsMobile";
@ -89,16 +89,16 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
disabled={!isChangedFilters}
offset={3}
size={8}>
<ToolPanelAction onClick={onFiltersClick}>
<ActionIconWithTip onClick={onFiltersClick}>
<IconFilter />
</ToolPanelAction>
</ActionIconWithTip>
</Indicator>
<ToolPanelAction onClick={onEditClick}>
<ActionIconWithTip onClick={onEditClick}>
<IconEdit />
</ToolPanelAction>
<ToolPanelAction onClick={onCreateClick}>
</ActionIconWithTip>
<ActionIconWithTip onClick={onCreateClick}>
<IconPlus />
</ToolPanelAction>
</ActionIconWithTip>
<ProjectSelect
data={projects}
value={selectedProject}

4
src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css
View File

@ -1,6 +1,8 @@
.tab {
border-bottom-width: 3px;
@media (max-width: 48em) {
border-bottom-width: 3px;
}
}
.header-board {

5
src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx
View File

@ -25,7 +25,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
return (
<Drawer
size={isMobile ? "100%" : "60%"}
size={isMobile ? "100%" : "80%"}
position={"right"}
onClose={onClose}
removeScrollProps={{ allowPinchZoom: true }}
@ -37,7 +37,8 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
body: {
display: "flex",
flexDirection: "column",
padding: 0,
padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
height: "100vh",
},
header: {
paddingBlock: 0,

5
src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx
View File

@ -3,6 +3,7 @@ import { IconEdit } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { Box, Tabs } from "@mantine/core";
import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { DealSchema, ProjectSchema } from "@/lib/client";
import { MODULES } from "@/modules/modules";
import styles from "../DealEditorDrawer.module.css";
@ -15,6 +16,8 @@ type Props = {
};
const DealEditorBody: FC<Props> = props => {
const isMobile = useIsMobile();
const getTabPanel = (value: string, component: ReactNode): ReactNode => (
<Tabs.Panel
key={value}
@ -53,6 +56,8 @@ const DealEditorBody: FC<Props> = props => {
return (
<Tabs
defaultValue="general"
orientation={isMobile ? "horizontal" : "vertical"}
h={"100%"}
classNames={{ tab: styles.tab }}>
<Tabs.List>
<Tabs.Tab

60
src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx
View File

@ -1,5 +1,5 @@
import React, { FC } from "react";
import { Stack, Text, TextInput } from "@mantine/core";
import { Flex, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
@ -40,27 +40,43 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
return (
<form onSubmit={form.onSubmit(onSubmit)}>
<Stack p={"md"}>
<TextInput
label={"Название"}
{...form.getInputProps("name")}
/>
<Text>
Создано: {utcDateTimeToLocalString(value.createdAt)}
</Text>
<BoardSelect
label={"Доска"}
{...form.getInputProps("board")}
onChange={board => {
form.setFieldValue("board", board ?? undefined);
form.setFieldValue("status", undefined);
}}
projectId={value.board.projectId}
/>
<StatusSelect
label={"Статус"}
{...form.getInputProps("status")}
boardId={form.values.board?.id}
/>
<Flex
gap={"md"}
w={"100%"}
direction={{ base: "column", sm: "row" }}>
<TextInput
label={"Название"}
{...form.getInputProps("name")}
flex={1}
/>
<TextInput
label={"Дата создания"}
value={utcDateTimeToLocalString(value.createdAt)}
readOnly
flex={1}
/>
</Flex>
<Flex
gap={"md"}
w={"100%"}
direction={{ base: "column", sm: "row" }}>
<BoardSelect
label={"Доска"}
{...form.getInputProps("board")}
onChange={board => {
form.setFieldValue("board", board ?? undefined);
form.setFieldValue("status", undefined);
}}
projectId={value.board.projectId}
flex={1}
/>
<StatusSelect
label={"Статус"}
{...form.getInputProps("status")}
boardId={form.values.board?.id}
flex={1}
/>
</Flex>
<Footer
form={form}
onDelete={() => onDelete(value)}