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

Fw18_0724 day-3 branch #36

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fw18_0724 day-3 branch #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions bitrix24/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
/node_modules
/.pnp
.pnp.js
App.js
App.css
index.js
package.json
package-lock.json

# testing
/coverage
Expand Down
18,799 changes: 61 additions & 18,738 deletions bitrix24/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions bitrix24/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Expand Down
8 changes: 5 additions & 3 deletions bitrix24/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@

import './App.css';
import Login from './pages/login/Login';
import Signup from './pages/signup/Signup';
import Tasks from './components/tasks/Tasks';
// import Login from './pages/login/Login';


function App() {
return (
<div className="App">
<Signup/>
{/* <Signup /> */}
{/* <Login/> */}
<Tasks />
</div>
);
}
Expand Down
19 changes: 19 additions & 0 deletions bitrix24/src/components/tasks/NavToggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Box, Text } from '@chakra-ui/react'
import React from 'react'

const NavToggle = () => {


return (
<>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Ongoing</Text></Box>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Asisting</Text></Box>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Set by me</Text></Box>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Following</Text></Box>


</>
)
}

export default NavToggle
101 changes: 101 additions & 0 deletions bitrix24/src/components/tasks/NewTaskModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import {
useDisclosure,
Button,
Text,
Input,
Flex,
Box,
border,
} from "@chakra-ui/react";

import {
Drawer,
DrawerBody,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
} from "@chakra-ui/react";
import React from "react";
import { AiFillCaretDown } from "react-icons/ai";
import { ImCross } from "react-icons/im";
import { TbMinusVertical } from "react-icons/tb";


function NewTaskModal() {
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();

return (
<>
<Button
ref={btnRef}
bgColor="#b3e728"
_hover={{ bgColor: "#c9f652eb" }}
fontSize="12px"
onClick={onOpen}
ml="10px"
>
<Text color={"#4f5c6b"} mr="10px" >
NEW TASK
</Text>{" "}
<Text color={"#4f5c6b"} mr="10px" >
<TbMinusVertical />
</Text>{" "}
<AiFillCaretDown color={"#4f5c6b"} />
</Button>
<Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
finalFocusRef={btnRef}
size="xl"
>
<DrawerOverlay />
<DrawerContent backgroundColor="#eef2f4">
<DrawerCloseButton
borderRadius={"20px"}
borderTopRightRadius={"none"}
borderBottomRightRadius={"none"}
width="70px"
backgroundColor={"#2dbcea"}
position={"left"}
ml="-70px"
mt="20px"
color="white"
_hover={"none"}
>
<Flex>
<Box m="auto" borderRadius="20px" border="1.5px solid #2dbcea" p=".4em" _hover={{borderRadius:"20px", border:"1.5px solid rgb(168 224 242)"}}>
<ImCross size={"12px"} />
</Box>
<Text ml="5px">TASK</Text>
</Flex>
</DrawerCloseButton>
<DrawerHeader><Text mt="-50px" ml="20px" color="#d2f959" fontWeight="100" fontSize="25px">New task</Text></DrawerHeader>

<DrawerBody mt='-20px'>
<Box width={"90%"} height="500px" bgColor={"white"} borderRadius={"20px"}>
<br/>
{/* Input Box */}
<Box width="95%" m="auto">
<Input focusBorderColor="none" border="none" borderRadius="none" borderBottom="1px solid #e9eaec" pb="1em" fontSize="larger" color="#757575" placeholder="Things to do" />
</Box>

</Box>
</DrawerBody>

<DrawerFooter bgColor={"white"} boxShadow="rgba(0, 0, 0, 0.35) 0px 5px 15px">
<Button variant="outline" mr={3} onClick={onClose}>
Cancel
</Button>
<Button colorScheme="blue">Save</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
);
}

export default NewTaskModal;
120 changes: 118 additions & 2 deletions bitrix24/src/components/tasks/Tasks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,124 @@
import React from 'react'
import { Box, Button, Flex, Hide, Input, Show, Text } from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import NavToggle from './NavToggle'
import styles from "./tasks.module.css"
import { MdOutlineNavigateNext } from 'react-icons/md';
import { AiFillStar } from 'react-icons/ai';
import NewTaskModal from './NewTaskModal';
import { IoMdSettings } from 'react-icons/io';
import { MdOutlineFlashOn } from 'react-icons/md';
import { BiMessageCheck } from 'react-icons/bi';
import { AiFillLock } from 'react-icons/ai';
import { BsThreeDots } from 'react-icons/bs';



const Tasks = () => {

const [show,setShow]=useState(true)

console.log(show)


return (
<div>Tasks</div>
<div className={styles.background}>
<Flex height={"100%"} justifyContent="space-between" pt="5%" >

{/* <LEFT NAV BAR></LEFT> */}
<Box width="17.2%" border={"1px solid red"} height="100%"></Box>

{/* Task Box Start */}
<Box width="76%" border={"1px solid green"} height="100%">

{/* Box1 */}

<Flex width="98%" height="12%" margin={"auto"} backgroundColor="rgb(245 246 249)" borderRadius=".5em" >
<Box margin={"auto"}><Text color="rgb(16 88 208)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Tasks</Text></Box>

<Button onClick={()=>setShow(!show)} height="100%" pl="0px" pr="0"><MdOutlineNavigateNext /></Button> {/* Toggle Button */}

{show && <NavToggle />}

<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Projects</Text></Box>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Scrum</Text></Box>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >Effiiciency</Text></Box>
<Box margin={"auto"}><Text color="rgb(84 92 106)" fontSize={"15px"} fontWeight="500" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >More</Text></Box>
</Flex>

{/* Box 2 */}

<Flex width="98%" m="auto" /*border={"1px solid red"}*/ height="12%" mt="1%" p="1em" >
<Text width="auto" fontSize={"26px"} fontWeight="200" fontFamily={`system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'`} >My tasks</Text>
<Box ml="6px"><AiFillStar color="a7b0ba" size="28px" opacity={1} /></Box>
<Box mt="-8px"><NewTaskModal/></Box>
<Box width="53%" mt="-8px" ml="12px" >
<Input bgColor={"white"} placeholder='Filter and search' />
</Box>
<Box mt="-8px" ml="12px" ><Button bgColor="rgb(233 237 242 / 40%)" border={".5px solid white"} _hover={{backgroundColor:"rgb(233 237 242 / 66%)"}}><IoMdSettings color="white" size="22px" /></Button></Box>
<Box mt="-8px" ml="12px" ><Button bgColor="rgb(233 237 242 / 40%)" border={".5px solid white"} _hover={{backgroundColor:"rgb(233 237 242 / 66%)"}}><MdOutlineFlashOn color="white" size="22px" /></Button></Box>
</Flex>

{/* Box 3 */}

<Flex width="98%" /*border={"1px solid yellow"}*/ height="8%" margin={"auto"}mt="1%">

<Flex bgColor="rgb(233 237 242 / 40%)" p="1em" borderRadius={"20px"} gap="20px" >
<Text fontSize={"14px"}>List</Text>
<Text fontSize={"14px"}>Deadline</Text>
<Text fontSize={"14px"}>Planner</Text>
<Text fontSize={"14px"}>Calendar</Text>
<Text fontSize={"14px"}>Gantt</Text>
</Flex>

<Flex gap="160px" >
<Flex bgColor="rgb(233 237 242 / 40%)" p="1em" borderRadius={"20px"} gap="25px" ml="12px">
<Text fontSize={"14px"}>My items:</Text>
<Text fontSize={"14px"}>Overdue</Text>
<Text fontSize={"14px"}>Comments</Text>
<Text>|</Text>
<Text fontSize={"14px"}><BiMessageCheck size="20px" /></Text>
</Flex>

<Flex gap="12px">
<Box ><Button bgColor="rgb(233 237 242 / 40%)" borderRadius={"20px"} color="white" _hover={{backgroundColor:"rgb(233 237 242 / 66%)"}}><AiFillLock size="22px" /></Button></Box>
<Box ><Button bgColor="rgb(233 237 242 / 40%)" borderRadius={"20px"} color="white" _hover={{backgroundColor:"rgb(233 237 242 / 66%)"}}><BsThreeDots size="22px" /></Button></Box>

</Flex>
</Flex>

</Flex>

{/* Box 4 */}

<Box width="98%" /*border={"1px solid pink"}*/ bgColor="white" borderRadius="20px" height="45%" margin={"auto"}mt="1%">

</Box>

{/* Footer */}
<Flex width="98%" /*border={"1px solid red"}*/ height="12%" margin={"auto"}mt="1%" pb="1em" gap={"10px"} pt=".5em">

<Text fontSize={"18px"} fontWeight="600" borderRadius="5px" p=".2em 1em .2em 1em" bgColor="rgb(233 237 242 / 40%)" border={".5px solid white"}>Bitrix24</Text>
<Text borderRadius="5px" p=".4em .8em .3em .8em" bgColor="rgb(233 237 242 / 40%)" border={".5px solid white"}>English</Text>
<p>© 2022 Bitrix24</p>
<p>|</p>
<p>Implementation request</p>
<p>|</p>
<p>Themes</p>
<p>|</p>
<p>Print</p>

</Flex>



</Box>
{/* Task Box Ends*/}

{/* <RIGHT NAV BAR> */}
<Box width="5%" border={"1px solid red"} height="100%"></Box>

</Flex>
</div>
)
}

Expand Down
Binary file added bitrix24/src/components/tasks/images/background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions bitrix24/src/components/tasks/tasks.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* *{
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
} */


.background{
height: 577.5px;
background-size: contain;
background-repeat: repeat;
background-image: url("./images/background.jpg");
/* background-position: fixed; */
}




/* footer CSS */
p{
font-size: 14px;
color: white;
align-self: center;
}