Skip to content

Commit

Permalink
Merge pull request #55 from AnWhiteM/column-modals
Browse files Browse the repository at this point in the history 
Column modals
  • Loading branch information
@AnWhiteM
AnWhiteM authored Jun 13, 2024
2 parents 16944c7 + de70865 commit 518c52a
Show file tree
Hide file tree
Showing 14 changed files with 423 additions and 261 deletions.
12 changes: 6 additions & 6 deletions src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import css from "./AddAnotherCardBtn.module.css";
import svg from "../../img/icons.svg";
import { useState } from "react";
// import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx"
import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx"

export const AddAnotherCardBtn = () => {
const [isOpen, setIsOpen] = useState(false)
const [createCardModal, setCreateCardModal] = useState(false)

const openModal = () => {
setIsOpen(true)
setCreateCardModal(true)
}

const closeModal = () => {
setIsOpen(false)
setCreateCardModal(false)
}

return (
Expand All @@ -24,8 +24,8 @@ export const AddAnotherCardBtn = () => {
</div>
Add another card
</button>
{/* {isOpen &&
<CreateCard isOpen={isOpen} isClose={closeModal} />} */}
{createCardModal &&
<CreateCard isOpen={createCardModal} isClose={closeModal} />}
</div>
);
};
6 changes: 3 additions & 3 deletions src/components/AddColumnBtn/AddColumnBtn.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// import { CreateColumn } from "../CreateColumnModal/CreateColumnModal";
import { CreateColumn } from "../CreateColumnModal/CreateColumnModal";
import css from "./AddColumnBtn.module.css";
import { useState } from "react";

Expand All @@ -16,9 +16,9 @@ export const AddColumnBtn = () => {
return (
<div>
<button className={css.btn} onClick={openColumnCreateModal}>Add another column</button>
{/* {isOpen && (
{isOpen && (
<CreateColumn isOpen={isOpen} isClose={closeColumnCreateModal} />
)} */}
)}
</div>
);
};
124 changes: 62 additions & 62 deletions src/components/CreateCardModal/CreateCardModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,67 @@
// import Modal from "react-modal";
// import css from "./CreateCardModal.module.css";
// import * as Yup from 'yup';
// import { Form, Formik, Field } from "formik";
// import svg from "../../img/icons.svg";
import Modal from "react-modal";
import css from "./CreateCardModal.module.css";
import * as Yup from 'yup';
import { Form, Formik, Field } from "formik";
import svg from "../../img/icons.svg";

// Modal.setAppElement('#root');
Modal.setAppElement('#root');

// export const CreateCard = ({ isOpen, isClose }) => {
// const columnModalValidation = Yup.object().shape({
// columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
// });
export const CreateCard = ({ isOpen, isClose }) => {
const columnModalValidation = Yup.object().shape({
columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
});

// return (
// <>
// <Modal isOpen={isOpen} onRequestClose={isClose} className={css.createCardModal} overlayClassName={css.createCardModalOverlay}>
// <button className={css.createCardModalCloseBtn} type="button" onClick={isClose}>
// <svg className={css.createCardModalIcon} width="18px" height="18px">
// <use href={svg + "#x-close"}></use>
// </svg>
// </button>
// <div className={css.createCardModalContainer}>
// <h1 className={css.createCardModalText}>Add card</h1>
// <Formik
// initialValues={{ cardtitle: '', carddescription: ''}}
// validationSchema={columnModalValidation}
// // onSubmit={(values, actions) => {}}
// >
// <Form autoComplete="off" className={css.createCardModalForm}>
// <Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
// <Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
// <label>Label color
// <div className={css.createCardModalRadioContainer}>
// <div>
// <Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
// <label htmlFor="createCardModalRadio1" className="radio-label"></label>
// </div>
// <div>
// <Field type="radio" className={css.createCardModalRadio2} id="createCardModalRadio2" name="color" />
// <label htmlFor="createCardModalRadio2" className="radio-label"></label>
// </div>
// <div>
// <Field type="radio" className={css.createCardModalRadio3} id="createCardModalRadio3" name="color" />
// <label htmlFor="createCardModalRadio3" className="radio-label"></label>
// </div>
// <div>
// <Field type="radio" className={css.createCardModalRadio4} id="createCardModalRadio4" name="color" />
// <label htmlFor="createCardModalRadio4" className="radio-label"></label>
// </div>
// </div>
// </label>
return (
<>
<Modal isOpen={isOpen} onRequestClose={isClose} className={css.createCardModal} overlayClassName={css.createCardModalOverlay}>
<button className={css.createCardModalCloseBtn} type="button" onClick={isClose}>
<svg className={css.createCardModalIcon} width="18px" height="18px">
<use href={svg + "#x-close"}></use>
</svg>
</button>
<div className={css.createCardModalContainer}>
<h1 className={css.createCardModalText}>Add card</h1>
<Formik
initialValues={{ cardtitle: '', carddescription: ''}}
validationSchema={columnModalValidation}
// onSubmit={(values, actions) => {}}
>
<Form autoComplete="off" className={css.createCardModalForm}>
<Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
<Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
<label className={css.createCardModalLabel}>Label color
<div className={css.createCardModalRadioContainer}>
<div>
<Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
<label htmlFor="createCardModalRadio1" className="radio-label"></label>
</div>
<div>
<Field type="radio" className={css.createCardModalRadio2} id="createCardModalRadio2" name="color" />
<label htmlFor="createCardModalRadio2" className="radio-label"></label>
</div>
<div>
<Field type="radio" className={css.createCardModalRadio3} id="createCardModalRadio3" name="color" />
<label htmlFor="createCardModalRadio3" className="radio-label"></label>
</div>
<div>
<Field type="radio" className={css.createCardModalRadio4} id="createCardModalRadio4" name="color" />
<label htmlFor="createCardModalRadio4" className="radio-label"></label>
</div>
</div>
</label>

// <button type="submit" className={css.createCardModalSubmit} onClick={() => isClose()}>
// <span className={css.createCardModalSpan}>
// <svg className={css.createCardModalAddIcon} width="14px" height="14px">
// <use href={svg + "#icon-plus"}></use>
// </svg>
// </span>
// Add</button>
// </Form>
// </Formik>
// </div>
<button type="submit" className={css.createCardModalSubmit} onClick={() => isClose()}>
<span className={css.createCardModalSpan}>
<svg className={css.createCardModalAddIcon} width="14px" height="14px">
<use href={svg + "#icon-plus"}></use>
</svg>
</span>
Add</button>
</Form>
</Formik>
</div>

// </Modal>
// </>
// )
// }
</Modal>
</>
)
}
31 changes: 29 additions & 2 deletions src/components/CreateCardModal/CreateCardModal.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.createCardModalRadioContainer {
display: flex;
gap: 10px;
gap: 8px;
width: 80px;
margin-top: 5px;
}

.createCardModalRadio1,
Expand Down Expand Up @@ -147,6 +148,17 @@
opacity: 100%;
}

.createCardModalLabel {
margin-bottom: 14px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.02em;
text-align: left;
color: #FFFFFF80;
}

.createCardModalRadio1 {
margin-right: 5px;
color: #8FA1D0;
Expand Down Expand Up @@ -182,4 +194,19 @@

.createCardModalAddIcon {
stroke: white;
}
}

@media screen and (min-width: 768px) {
.createCardModal {
width: 350px;
}

.createCardModalInput1,
.createCardModalInput2 {
width: 302px;
}

.createCardModalSubmit {
width: 302px;
}
}
84 changes: 42 additions & 42 deletions src/components/CreateColumnModal/CreateColumnModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
// import Modal from "react-modal";
// import css from "./CreateColumnModal.module.css";
// import * as Yup from 'yup';
// import { Form, Formik, Field } from "formik";
// import svg from "../../img/icons.svg";
import Modal from "react-modal";
import css from "./CreateColumnModal.module.css";
import * as Yup from 'yup';
import { Form, Formik, Field } from "formik";
import svg from "../../img/icons.svg";

// Modal.setAppElement('#root');
Modal.setAppElement('#root');

// export const CreateColumn = ({ isOpen, isClose }) => {
// const columnModalValidation = Yup.object().shape({
// columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
// });
export const CreateColumn = ({ isOpen, isClose }) => {
const columnModalValidation = Yup.object().shape({
columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
});


// return (
// <>
// <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}>
// <button className={css.createColumnModalCloseBtn} type="button" onClick={isClose}>
// <svg className={css.createColumnModalIcon} width="18px" height="18px">
// <use href={svg + "#x-close"}></use>
// </svg>
// </button>
// <div className={css.createColumnModalContainer}>
// <h1 className={css.createColumnModalText}>Add column</h1>
// <Formik
// initialValues={{ columnname: ''}}
// validationSchema={columnModalValidation}
// portalClassName="createColumnModalContainer"
// // onSubmit={(values, actions) => {}}
// >
// <Form autoComplete="off" className={css.createColumnModalForm}>
// <Field type='text' name='columnname' className={css.createColumnModalInput} placeholder="Title" />
// <button type="submit" className={css.createColumnModalSubmit} onClick={() => isClose()}>
// <span className={css.createColumnModalSpan}>
// <svg className={css.createColumnModalAddIcon} width="14px" height="14px">
// <use href={svg + "#icon-plus"}></use>
// </svg>
// </span>
// Add</button>
// </Form>
// </Formik>
// </div>
// </Modal>
// </>
// )
// }
return (
<>
<Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}>
<button className={css.createColumnModalCloseBtn} type="button" onClick={isClose}>
<svg className={css.createColumnModalIcon} width="18px" height="18px">
<use href={svg + "#x-close"}></use>
</svg>
</button>
<div className={css.createColumnModalContainer}>
<h1 className={css.createColumnModalText}>Add column</h1>
<Formik
initialValues={{ columnname: ''}}
validationSchema={columnModalValidation}
portalClassName="createColumnModalContainer"
// onSubmit={(values, actions) => {}}
>
<Form autoComplete="off" className={css.createColumnModalForm}>
<Field type='text' name='columnname' className={css.createColumnModalInput} placeholder="Title" />
<button type="submit" className={css.createColumnModalSubmit} onClick={() => isClose()}>
<span className={css.createColumnModalSpan}>
<svg className={css.createColumnModalAddIcon} width="14px" height="14px">
<use href={svg + "#icon-plus"}></use>
</svg>
</span>
Add</button>
</Form>
</Formik>
</div>
</Modal>
</>
)
}
16 changes: 15 additions & 1 deletion src/components/CreateColumnModal/CreateColumnModal.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,18 @@

.createColumnModalAddIcon {
stroke: white;
}
}

@media screen and (min-width: 768px) {
.createColumnModal {
width: 350px;
}

.createColumnModalInput {
width: 302px;
}

.createColumnModalSubmit {
width: 302px;
}
}
Loading

0 comments on commit 518c52a

Please sign in to comment.