adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert "Layout/login"

pull/9/head
Renato Di Giacomo 2022-07-20 12:23:38 -03:00 committed by RenatoDiGiacomo
parent 76df0db703
commit c4a18eebfd
7 changed files with 0 additions and 331 deletions

15
frontend/src/components/Base/Form/Input/InputComponent.jsx
View File

@ -1,15 +0,0 @@
import React from "react";
import LabelComponent from "../Label/LabelComponent";
import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style";
const InputComponent = ({ type, id, label, value, ...props }) => {
return (
<InputContainerStyled>
<LabelComponent forhtml={id} label={label} />
<InputComponentStyled type={type} id={id} value={value} {...props} />
</InputContainerStyled>
);
};
export default InputComponent;

29
frontend/src/components/Base/MainContainer/MainContainer.style.jsx
View File

@ -1,29 +0,0 @@
import styled from "styled-components";
const MainContainerStyled = styled.main`
padding-left: 97px;
padding-top: 26px;
margin-right: 16px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 96vh;
@media only screen and (max-height: 790px) {
padding-top: 12px;
}
`;
const TitleContainerStyled = styled.div`
width: 100%;
`;
const ContentContainerStyled = styled.div`
width: 100%;
height: 100vh;
overflow: hidden;
margin-top: 16px;
`;
export default MainContainerStyled;
export { TitleContainerStyled, ContentContainerStyled };

82
frontend/src/components/Menu/MenuComponent.style.jsx
View File

@ -1,82 +0,0 @@
import styled from "styled-components";
import { color } from "../../style/varibles";
//Nav
const MenuStyled = styled.nav`
position: absolute;
width: 76px;
height: 100vh;
background: ${color.pricinpal.grisOscuro}; //Same background login
z-index: 100;
animation: ${(props) => (props.hover ? "hover" : "hoveroff")} 0.5s forwards;
@keyframes hover {
from {
width: 76px;
}
to {
width: 218px;
}
}
@keyframes hoveroff {
from {
width: 218px;
}
to {
width: 76px;
}
}
`;
//UL
const MenuListStyled = styled.ul`
margin-top: 16px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 100;
`;
//LI
const MenuListItemStyled = styled.li`
cursor: pointer;
display: flex;
flex-direction: row;
margin: 12px 28px;
gap: 6px;
color: ${color.pricinpal.blanco};
transition: all 0.1s linear;
a {
display: flex;
align-items: center;
color: ${color.pricinpal.blanco};
gap: 12px;
text-decoration: none;
p {
text-transform: capitalize;
font-family: "Helvetica55";
font-size: 14px;
opacity: ${(props) => (props.hover ? "1" : "0")};
display: ${(props) => (props.hover ? "block" : "none")};
}
svg {
width: 18px;
height: 18px;
fill: ${color.pricinpal.blanco};
transition: all 0.1s linear;
}
}
&:hover a p,
&:hover a svg {
color: ${color.pricinpal.naranja};
fill: ${color.pricinpal.naranja};
transition: all 0.1s linear;
}
@media only screen and (max-height: 790px) {
margin: 6px 28px;
}
`;
export { MenuStyled, MenuListStyled, MenuListItemStyled };

69
frontend/src/components/PageTitle/PageTitle.style.jsx
View File

@ -1,69 +0,0 @@
import styled from "styled-components";
import { color } from "../../style/varibles";
const PageTitleStyled = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
`;
const UserBtnStyled = styled.button`
display: flex;
width: 218px;
padding: 16px;
text-align: left;
background-color: ${color.pricinpal.grisOscuro};
color: ${color.pricinpal.blanco};
border: none;
border-radius: 5px;
font-family: "Helvetica55";
letter-spacing: 0.5px;
font-size: 14px;
text-transform: capitalize;
align-items: center;
cursor: pointer;
img {
background-color: white;
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 50%;
margin-right: 12px;
}
`;
const UserModalStyled = styled.div`
display: ${({ modal }) => (modal ? "flex" : "none")};
position: absolute;
background-color: white;
padding: 12px;
right: 2rem;
top: 5.5rem;
border-radius: 5px;
z-index: 999;
box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity};
`;
const UserModalListStyled = styled.ul`
display: flex;
flex-direction: column;
`;
const UserModalItemStyled = styled.li`
display: flex;
justify-content: left;
color: ${color.pricinpal.grisOscuro};
margin: 6px 0;
cursor: pointer;
svg {
margin-right: 12px;
}
`;
export {
PageTitleStyled,
UserBtnStyled,
UserModalStyled,
UserModalListStyled,
UserModalItemStyled,
};

46
frontend/src/components/PageTitle/UserBtn/UserBtn.jsx
View File

@ -1,46 +0,0 @@
import React from "react";
import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style";
import { AuthContext } from "../../../context/Auth/AuthContext";
import UserItem from "./UserItem";
import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg";
import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg";
import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal";
import UserModal from "../../UserModal/UserModal";
const UserBtn = ({ user, img, modal, modalSet }) => {
const [modalConfirm, setModalConfirm] = React.useState(false);
const [modalUser, setModalUser] = React.useState(false);
const { handleLogout } = React.useContext(AuthContext);
const handleModal = () => {
setModalConfirm(!modalConfirm);
};
const handleModalUser = (e)=>{
e.preventDefault()
setModalUser(!modalUser)
}
return (
<>
<UserBtnStyled onClick={modalSet}>
<img src={img} alt={user ? user.name : null} width="24px" />
Bem Vindo, {user ? user.name : null}
</UserBtnStyled>
<UserModalStyled modal={modal} onMouseLeave={modalSet}>
<UserModalListStyled>
<UserItem title="Perfil" icon={<Perfil />} onClick={handleModalUser} />
<UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
</UserModalListStyled>
</UserModalStyled>
<UserModal modal={modalUser} click={handleModalUser}/>
<ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
Deseja Sair do sistema?
</ConfirmationModal>
</>
);
};
export default UserBtn;

56
frontend/src/components/UserModal/UserModal.jsx
View File

@ -1,56 +0,0 @@
import React from "react";
import { color } from "../../style/varibles";
import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";
import api from "../../services/api";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can";
import BtnComponent from "../Base/BTN/Btn";
import FormComponent from "../Base/Form/FormComponent";
import InputComponent from "../Base/Form/Input/InputComponent";
import UserModalComponent from "./UserModalImg/UserModalComponent";
import UserImg from "../../assets/images/User/user.jpg";
const UserModal = ({ modal, click }) => {
const { user } = React.useContext(AuthContext);
const initalData = {
name: user.name,
email: user.email,
perfil:user.profile,
}
console.log(user);
return (
<ModalOverlayStyled modal={modal}>
<UserModalStyled>
<UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
<FormComponent method="get">
<InputComponent id="nome" label="Nome" type="text" value={initalData.name}/>
<InputComponent id="email" label="E-mail" type="email" value={initalData.email}/>
<InputComponent id="password" label="Senha" type="password" />
<UserBtns>
<BtnComponent text="Cancelar" onClick={click} />
<BtnComponent
text="Salvar"
bgcolor={color.status.yes}
fontcolor={color.pricinpal.blanco}
/>
</UserBtns>
</FormComponent>
</UserModalStyled>
</ModalOverlayStyled>
);
};
export default UserModal;
/*{name: 'teste', id: 2, email: 'teste@teste.com', profile: 'master', tokenVersion: 0, …}
email: "teste@teste.com"
id: 2
name: "teste"
profile: "master"
queues: []
tokenVersion: 0 */

34
frontend/src/components/UserModal/UserModal.style.jsx
View File

@ -1,34 +0,0 @@
import styled from "styled-components";
import { color } from "../../style/varibles";
const ModalOverlayStyled = styled.div`
display: ${({ modal }) => (modal ? "flex" : "none")};
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #00000050;
z-index: 100;
top: 0;
right: 0;
`;
const UserModalStyled = styled.div`
position: relative;
display: flex;
flex-direction: row;
margin: 0 auto;
padding: 12px;
z-index: 101;
border-radius: 5px;
background-color: ${color.pricinpal.grisOscuro};
width: 650px;
`;
const UserBtns = styled.div`
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
`;
export { ModalOverlayStyled, UserModalStyled, UserBtns };