Merge pull request #47 from AnWhiteM/column-modals

Column modals
AnWhiteM · Jun 12, 2024 · 94ff138 · 94ff138
2 parents bccc43d + 4d95817
commit 94ff138
Show file tree

Hide file tree

Showing 14 changed files with 897 additions and 7 deletions.
diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
@@ -1,17 +1,31 @@
 import css from "./AddAnotherCardBtn.module.css";
 import svg from "../../img/icons.svg";
+import { useState } from "react";
+import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx"
 
 export const AddAnotherCardBtn = () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const openModal = () => {
+        setIsOpen(true)
+    }
+
+    const closeModal = () => {
+        setIsOpen(false)
+    }
+
   return (
     <div className={css.container}>
-      <button className={css.btn}>
+      <button className={css.btn} onClick={openModal}>
         <div className={css.iconBox}>
           <svg className={css.icon} width="14px" height="14px">
             <use href={svg + "#icon-plus"}></use>
           </svg>
         </div>
         Add another card
       </button>
+    {isOpen &&
+        <CreateCard isOpen={isOpen} isClose={closeModal} />}
     </div>
   );
 };
diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/src/components/AddColumnBtn/AddColumnBtn.jsx
@@ -1,9 +1,24 @@
+import { CreateColumn } from "../CreateColumnModal/CreateColumnModal";
 import css from "./AddColumnBtn.module.css";
+import { useState } from "react";
 
 export const AddColumnBtn = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  function openColumnCreateModal() {
+    setIsOpen(true)
+  }
+
+  function closeColumnCreateModal() {
+    setIsOpen(false)
+  }
+
   return (
     <div>
-      <button className={css.btn}>Add another column</button>
+      <button className={css.btn} onClick={openColumnCreateModal}>Add another column</button>
+      {isOpen && (
+        <CreateColumn isOpen={isOpen} isClose={closeColumnCreateModal} />
+      )}
     </div>
   );
 };
diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -0,0 +1,67 @@
+import Modal from "react-modal";
+import css from "./CreateCard.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
+
+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!')
+    });
+
+    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>
+
+                        <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>
+    </>
+)
+}
diff --git a/src/components/CreateCardModal/CreateCardModal.module.css b/src/components/CreateCardModal/CreateCardModal.module.css
@@ -0,0 +1,185 @@
+.createCardModalRadioContainer {
+    display: flex;
+    gap: 10px;
+    width: 80px;
+}
+
+.createCardModalRadio1,
+.createCardModalRadio2,
+.createCardModalRadio3,
+.createCardModalRadio4 {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.createCardModalRadio1 + label::before,
+.createCardModalRadio2 + label::before,
+.createCardModalRadio3 + label::before,
+.createCardModalRadio4 + label::before {
+    content: '';
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #000000; 
+    transition: border-color 0.3s, background-color 0.3s;
+    cursor: pointer;
+}
+
+.createCardModalRadio1 + label::before {
+    background-color: #8FA1D0;
+}
+
+.createCardModalRadio2 + label::before {
+    background-color: #E09CB5;
+}
+
+.createCardModalRadio3 + label::before {
+    background-color: #BEDBB0;
+}
+
+.createCardModalRadio4 + label::before {
+    background-color: #FFFFFF4D;
+}
+
+.createCardModalRadio1:focus + label::before {
+    border: 1px solid #8FA1D0;
+}
+.createCardModalRadio2:focus + label::before {
+    border: 1px solid #E09CB5;
+}
+.createCardModalRadio3:focus + label::before {
+    border: 1px solid #BEDBB0;
+}
+.createCardModalRadio4:focus + label::before {
+    border: 1px solid #FFFFFF4D;
+}  
+
+.createCardModalCloseBtn {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    background-color: #000000;
+    border: none;
+    padding: 0;
+}
+
+.createCardModalIcon {
+    fill: none;
+    cursor: pointer;
+    stroke: rgba(255, 255, 255, 1);
+}
+
+.createCardModal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 335px;
+    height: 522px;
+    background: #000000;
+    border: 1px solid #bedbb080;
+    border-radius: 20px;
+}
+
+.createCardModalOverlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.419);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.createCardModalContainer {
+    margin: 24px;
+}
+
+.createCardModalText {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    margin-bottom: 24px;
+}
+
+.createCardModalForm {
+    display: flex;
+    flex-direction: column;
+}
+
+.createCardModalInput1 {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 49px;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+}
+
+.createCardModalInput2 {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 154px;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+    resize: none;
+    box-sizing: border-box;
+    vertical-align: top;
+    word-wrap: break-word;
+}
+
+.createCardModalInput1:hover,
+.createCardModalInput1:focus,
+.createCardModalInput2:hover,
+.createCardModalInput2:focus {
+    opacity: 100%;
+}
+
+.createCardModalRadio1 {
+    margin-right: 5px;
+    color: #8FA1D0;
+}
+
+.createCardModalSubmit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #bedbb0;
+    color: rgba(22, 22, 22, 1);
+    border: none;
+    width: 287px;
+    height: 49px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.createCardModalSpan {
+    width: 28px;
+    height: 28px;
+    background-color: #121212;
+    position: relative;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.createCardModalAddIcon {
+    stroke: white;
+}
diff --git a/src/components/CreateColumnModal/CreateColumnModal.jsx b/src/components/CreateColumnModal/CreateColumnModal.jsx
@@ -0,0 +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";
+
+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!')
+    });
+
+
+    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>
+    </>
+)
+}