Skip to content

Commit

Permalink
Merge pull request #11 from sandygudie/new-version
Browse files Browse the repository at this point in the history 
Fixed Modal view
  • Loading branch information
@sandygudie
sandygudie authored Dec 24, 2023
2 parents b627b07 + 5357d6d commit 831dacd
Show file tree
Hide file tree
Showing 9 changed files with 126 additions and 122 deletions.
17 changes: 5 additions & 12 deletions src/components/Board/ActiveBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ import { FcCheckmark } from "react-icons/fc";
import IconButton from "components/IconButton";
import { IoCloseOutline } from "react-icons/io5";

interface Props {
showSidebar: boolean;
}
export default function ActiveBoard({ showSidebar }: Props) {

export default function ActiveBoard() {
const dispatch = useDispatch();
const [isAddTask, setAddTask] = useState(false);
const [isOpenPopup, setOpenPopup] = useState(false);
Expand Down Expand Up @@ -86,12 +84,7 @@ export default function ActiveBoard({ showSidebar }: Props) {
<>
<DragDropContext onDragEnd={onDragEnd}>
<div className="h-[90vh]">
<div
style={{
marginLeft: showSidebar ? "clamp(260px, 10vw, 500px)" : "0px",
}}
className={`z-10 relative h-auto py-4 mb-8 pr-8 pl-8`}
>

<div className="mt-3 z-10 h-full flex gap-x-10 w-full">
{active.columns?.map((item: IColumn, index: number) => {
return (
Expand Down Expand Up @@ -172,7 +165,7 @@ export default function ActiveBoard({ showSidebar }: Props) {
>
<div>
<PiDotsThreeLight
className=" relative font-bold"
className="relative font-bold"
size={20}
/>
{isOpenPopup && selectedColumn?.id === item.id ? (
Expand Down Expand Up @@ -243,7 +236,7 @@ export default function ActiveBoard({ showSidebar }: Props) {
</div>
</div>
</div>
</div>

</DragDropContext>

<Modal
Expand Down
2 changes: 1 addition & 1 deletion src/components/Board/AddTask.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export default function AddTask({ handleClose, activeColumn, tasks }: Props) {
)}
/>
</div>
<div className="relative flex items-center my-8 gap-x-8 justify-between ">
<div className="relative flex items-center my-6 gap-x-8 justify-between ">
<div className="w-1/2">
<TextInput
label="Deadline"
Expand Down
23 changes: 15 additions & 8 deletions src/components/Board/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,27 @@ interface Props {
export default function Index({ showSidebar }: Props) {
const [isOpenBoard, setOpenBoard] = useState(false);
const data: AppState = useSelector(appData);
const { active } = data;
const { active,board } = data;

return (
<div className="w-auto h-full">
<>
<div className={` ${board.length? "h-auto":"h-full"} w-auto`}>
<div
style={{
marginLeft: showSidebar ? "clamp(260px, 10vw, 500px)" : "0px",
}}
className={`relative h-full pt-8 pb-28 mb-8 pr-8 pl-8`}
>
{active ? (
<ActiveBoard showSidebar={showSidebar} />
<ActiveBoard />
) : (
<div className=" fixed -translate-y-[50%] -translate-x-[50%] top-1/2 shadow-lg p-4 md:p-8 bg-primary/20 rounded-lg left-[50%] text-center">
<div className="w-64 md:w-72 mx-auto h-auto">
<div className="h-full flex flex-col items-center justify-center">
<div className="shadow-lg p-4 md:p-8 bg-primary/20 rounded-lg w-64 md:w-96 mx-auto text-center">
<div className="w-52 md:w-72 mx-auto h-auto">
<img
src="/empty-project.png"
alt="start project"
loading="eager"
className="w-64 md:w-72 mx-auto h-auto"
className="w-52 md:w-72 mx-auto h-auto"
/>
</div>
<div className="">
Expand All @@ -54,8 +60,9 @@ export default function Index({ showSidebar }: Props) {
</div>
</button>
</div>
</div>
)}
</>
</div>
<Modal open={isOpenBoard} handleClose={() => setOpenBoard(false)}>
<AddBoard handleClose={() => setOpenBoard(false)} />
</Modal>
Expand Down
14 changes: 8 additions & 6 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function Header() {

return (
<div>
<div className="bg-white h-[65px] z-50 dark:bg-secondary flex items-center fixed w-full border-b-[1px] border-gray/20">
<div className="bg-white h-[65px] z-40 dark:bg-secondary flex items-center absolute w-full border-b-[1px] border-gray/20">
<div
className={`border-r-[1px] border-gray/20 py-6 px-4 min-w-[14rem] cursor-pointer hidden md:block`}
>
Expand All @@ -53,22 +53,24 @@ export default function Header() {
onClick={() => {
setWorkspaceMenu(!isWorkspaceMenu);
}}
className="flex items-center gap-x-2 relative"
className="flex items-center relative"
>
<h3 className="font-bold truncate w-[5ch] sm:w-auto sm:text-base md:text-xl">
<h3 className="font-bold truncate w-[10ch] md:w-auto sm:text-base md:text-xl">
{profile.name}
</h3>{" "}
<HiOutlineChevronDown className="mt-1 text-sm" />
</button>
{isWorkspaceMenu && (
<Popup
description={
<div className="flex gap-x-8 items-center border-b-[1px] border-gray/30 py-4 dark:text-white text-gray font-medium px-6 justify-center ">
<img
<div className="flex gap-x-6 items-center border-b-[1px] border-gray/30 py-4 dark:text-white text-gray font-medium px-4 justify-center ">
<div className="w-8 h-8">
<img
src="./workspace-placeholder.webp"
className="w-10 h-10"
className="w-8 h-8 object-fit"
alt=""
/>
</div>
<div>
<h2 className="text-xl font-bold">{profile.name}</h2>
<p className="text-xs">{profile.email}</p>
Expand Down
5 changes: 2 additions & 3 deletions src/components/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,10 @@ export default function Modal({
handleClose,
showDowndrop,
}: Props) {

return (
<>
{open && (
<>
<div className="z-50">
<button
onClick={handleClose}
className="z-50 bg-black/70 fixed -translate-y-[50%] -translate-x-[50%] top-[50%] left-[50%] w-screen h-screen"
Expand All @@ -31,7 +30,7 @@ export default function Modal({
>
{children}
</div>
</>
</div>
)}
</>
);
Expand Down
12 changes: 6 additions & 6 deletions src/components/Popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,20 @@ function Popup({ items, style, handleOpenMenu, description }: Props) {
style={style}
className={` ${
description ? "py-1" : "py-0"
} absolute rounded-md shadow-3xl dark:shadow-gray/20 shadow-gray/30
dark:bg-[#20212c] bg-offwhite text-white w-fit right-0 top-6 `}
} absolute rounded-md shadow-3xl dark:shadow-gray/20 shadow-gray/30
dark:bg-[#20212c] bg-offwhite text-white w-fit right-0 top-6`}
>
<div className="w-max">
<div className={`${description?"w-auto":"w-max"}`}>
{description ? description : null}
<div className="">
{items.map((list, i) => {
return (
<button
key={i}
onClick={list.handler}
className={`dark:text-white text-gray block w-full text-left hover:text-primary font-semiBold text-[0.95rem] ${
description ? "py-3 text-[0.9rem] hover:bg-primary hover:text-white" : "py-2 text-[0.75rem]"
} px-6
className={`dark:text-white text-gray block w-full text-left hover:text-primary font-semiBold text-[0.95rem] ${
description ? "py-3 text-[0.9rem] hover:bg-primary hover:text-white" : "dark:hover:text-primary py-2 text-[0.72rem]"
} px-4
${i < items.length - 1 && `border-b-[1px] border-gray/20`}`}
>
{list.title}
Expand Down
130 changes: 69 additions & 61 deletions src/components/SideBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import { appData, activeItem } from "redux/boardSlice";
import { IoIosAdd } from "react-icons/io";
import Modal from "components/Modal";
import AddBoard from "components/Board/AddBoard";
import { Collapse } from "@chakra-ui/react";
interface Props {
showSidebar: boolean;
setShowSidebar?: Dispatch<SetStateAction<boolean>>;
handleClose?: () => void;
handleaddBoardMobile?: () => void;
Expand All @@ -18,6 +20,7 @@ export default function Index({
handleaddBoardMobile,
setShowSidebar,
handleClose,
showSidebar,
}: Props) {
const [isOpen, setIsOpen] = useState<boolean>(false);
const dispatch = useDispatch();
Expand All @@ -27,77 +30,82 @@ export default function Index({

return (
<>
<div
className={`text-gray bg-white dark:bg-secondary ${
isMobile && "pr-2 pb-24 border-r-[1px] border-gray/20"
}
<Collapse in={showSidebar} animateOpacity>
<div
className={`h-screen fixed w-56 ${showSidebar ? "block " : "hidden"}`}
>
<div
className={`z-40 text-gray bg-white dark:bg-secondary ${
isMobile && "pr-2 pb-24 border-r-[1px] border-gray/20"
}
pt-4 flex
flex-col justify-between h-full left-0 `}
>
<div>
<p className="pl-4 py-2 text-xs">ALL BOARDS ({board.length})</p>
<div>
{board && (
<>
{board.map((options: IBoard) => {
return (
<button
key={options.id}
className={`py-3 w-52 px-4 flex items-center gap-x-2 font-bold cursor-pointer ${`${
active.id === options.id
? "bg-primary rounded-r-full text-white"
: "hover:bg-primary/20 rounded-r-full"
} `} `}
onClick={() => {
dispatch(activeItem(options));
if (handleClose) {
handleClose();
}
}}
>
<Icon type="board" />
{options.name}
</button>
);
})}
</>
)}
>
<div>
<p className="pl-4 py-2 text-xs">ALL BOARDS ({board.length})</p>
<div>
{board && (
<>
{board.map((options: IBoard) => {
return (
<button
key={options.id}
className={`py-3 w-52 px-4 flex items-center gap-x-2 font-bold cursor-pointer ${`${
active.id === options.id
? "bg-primary rounded-r-full text-white"
: "hover:bg-primary/20 rounded-r-full"
} `} `}
onClick={() => {
dispatch(activeItem(options));
if (handleClose) {
handleClose();
}
}}
>
<Icon type="board" />
{options.name}
</button>
);
})}
</>
)}

{profile.id.length ? (
<button
onClick={() => {
handleaddBoardMobile
? handleaddBoardMobile()
: setIsOpen(true);
}}
className="pl-4 my-8 md:my-4 font-bold cursor-pointer text-primary hover:text-primary/60"
>
<div className="flex items-center ">
{" "}
<span>
{" "}
<IoIosAdd size={20} />{" "}
</span>{" "}
<p> Add New Board</p>
</div>
</button>
) : null}
</div>
</div>

{profile.id.length ? (
<div className="mx-auto w-4/5 mb-4 absolute bottom-20 right-5 md:mb-0">
<button
aria-label="Hide Sidebar"
onClick={() => {
handleaddBoardMobile
? handleaddBoardMobile()
: setIsOpen(true);
setShowSidebar ? setShowSidebar(false) : null;
}}
className="pl-4 my-8 md:my-4 font-bold cursor-pointer text-primary hover:text-primary/60"
className="cursor-pointer hover:text-primary border-none inline-flex items-center gap-x-2 text-xs my-4"
>
<div className="flex items-center ">
{" "}
<span>
{" "}
<IoIosAdd size={20} />{" "}
</span>{" "}
<p> Add New Board</p>
</div>
<MdVisibilityOff size={20} /> Hide Sidebar
</button>
) : null}
</div>
</div>
</div>

<div className="mx-auto w-4/5 mb-4 absolute bottom-20 right-5 md:mb-0">
<button
aria-label="Hide Sidebar"
onClick={() => {
setShowSidebar ? setShowSidebar(false) : null;
}}
className="cursor-pointer hover:text-primary border-none inline-flex items-center gap-x-2 text-xs my-4"
>
<MdVisibilityOff size={20} /> Hide Sidebar
</button>
</div>
</div>

</Collapse>
<Modal open={isOpen} handleClose={() => setIsOpen(false)}>
<AddBoard handleClose={() => setIsOpen(false)} />
</Modal>
Expand Down
Loading

0 comments on commit 831dacd

Please sign in to comment.