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

feat: board inplace input in form of tab

Browse Source
This commit is contained in:
AlexSserb
2025-08-21 09:08:55 +04:00
parent d5b6e28311
commit f3df8840df
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/deals/components/shared/Board/Board.tsx
View File

@ -33,8 +33,8 @@ const Board: FC<Props> = ({ board }) => {
onComplete={value => onUpdateBoard(board.id, { name: value })} onComplete={value => onUpdateBoard(board.id, { name: value })}
inputStyles={{ inputStyles={{
input: { input: {
height: 25, height: 24,
minHeight: 25, minHeight: 24,
}, },
}} }}
getChildren={startEditing => ( getChildren={startEditing => (

15
src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.tsx
View File

@ -1,5 +1,5 @@
import { IconPlus } from "@tabler/icons-react"; import { IconPlus } from "@tabler/icons-react";
import { Box, Flex } from "@mantine/core"; import { Box, Flex, rem } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import styles from "./CreateBoardButton.module.css"; import styles from "./CreateBoardButton.module.css";
@ -8,7 +8,7 @@ const CreateBoardButton = () => {
const { onCreateBoard } = useBoardsContext(); const { onCreateBoard } = useBoardsContext();
return ( return (
<Flex style={{borderBottom: "2px solid gray"}}> <Flex style={{ borderBottom: "2px solid gray" }}>
<InPlaceInput <InPlaceInput
placeholder={"Название доски"} placeholder={"Название доски"}
onComplete={onCreateBoard} onComplete={onCreateBoard}
@ -19,6 +19,17 @@ const CreateBoardButton = () => {
<IconPlus /> <IconPlus />
</Box> </Box>
)} )}
inputStyles={{
wrapper: {
marginRight: "var(--mantine-spacing-xs)",
paddingBlock: rem(3),
paddingLeft: "var(--mantine-spacing-xs)",
backgroundColor:
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))",
borderTopLeftRadius: "var(--mantine-spacing-xs)",
borderTopRightRadius: "var(--mantine-spacing-xs)",
},
}}
modalTitle={"Создание доски"} modalTitle={"Создание доски"}
/> />
</Flex> </Flex>