Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column modals #55

Merged
merged 4 commits into from
Jun 13, 2024
Merged

Column modals #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8074d7a
Update TaskColumnName.jsx
Esnobart Jun 12, 2024
b54fbf3
Merge branch 'main' into column-modals
Esnobart Jun 12, 2024
0bdad83
fix modals
Esnobart Jun 12, 2024
de70865
final modals
Esnobart Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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