Skip to content
Snippets Groups Projects
Commit 1b110ac8 authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

tabs quase pronto

parent ac7d577f
Branches
Tags
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!18Branch do lucas,!17Branch do lucas
Show whitespace changes
Inline Side-by-side
src/Components/MenuBar.js
+ 2
− 2
View file @ 1b110ac8
......@@ -29,7 +29,7 @@ import styled from 'styled-components'
import { Store } from '../Store';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Notifications from "./Notifications.js"
import CustomizedMenus from './MenuList'
import MenuList from './MenuList'
const ContainerStyled = styled(Container)`
*{ text-decoration: none }
......@@ -149,7 +149,7 @@ export default function MenuBar(props){
<Notifications/>
</div>
<CustomizedMenus items={minhaArea}/>
<MenuList items={minhaArea}/>
</>
]
......
src/Components/MenuList.js
+ 11
− 2
View file @ 1b110ac8
......@@ -42,7 +42,7 @@ const OverrideButton = styled(Button)`
text-transform : none !important;
`
export default function CustomizedMenus(props) {
export default function MenuList(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const { state, dispatch } = useContext(Store)
......@@ -77,7 +77,16 @@ export default function CustomizedMenus(props) {
onMouseEnter={handleClick}
>
{
state.currentUser.userAvatar === '' ?
(
<img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
):
(
<img src={state.currentUser.userAvatar} alt={''}/>
)
}
<span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Área </span> <KeyboardArrowDownIcon/>
</OverrideButton>
......
src/Components/TabAtividades.js 0 → 100644
+ 0
− 0
View file @ 1b110ac8
src/Pages/UserPage.js
+ 145
− 113
View file @ 1b110ac8
......@@ -29,116 +29,14 @@ import Popover from '@material-ui/core/Popover';
import { Store } from '../Store.js';
import EditIcon from '@material-ui/icons/Edit';
import CheckDecagram from '../img/check-decagram-gray.svg'
const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
`
const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
`
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
`
const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
magin-bottom: 30px;
width : 1170px;
margin-right : auto;
padding-left : 0 !important;
padding-right : 0 !important;
margin-left : auto;
`
const HeaderContainer = styled(Container)`
background-color : #afeeee;
position : relative;
`
const CoverContainer = styled(Container)`
height : 230px;
position : relative;
`
const ProfileAvatarDiv = styled.div`
bottom : -65px;
left : 60px;
border-radius : 100%;
position : absolute;
width : 150px;
height : 150px;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
cursor : pointer;
`
const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
bottom : 0;
display : flex;
background-color : #000;
color : #fff;
justify-content : center;
`
const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
`
const EditProfileAnchor = styled.a`
Button {
background-color : #fafafa;
position : absolute;
right : 5px;
bottom : 0;
margin-bottom : 20px;
color : #666;
padding : 0 10px;
text-decoration : none;
border-radius : 3px;
min-height : 36px;
min-width : 88px;
line-height : 36px;
border : 0;
display: inline-block;
text-align : center;
}
`
const CheckTeacherDiv = styled.div`
font-size : 14px;
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
color : #666 !important;
`
const RodapeDiv = styled.div`
`
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
const coverImg = ''
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [value, setValue] = useState(0);
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
......@@ -148,6 +46,10 @@ export default function UserPage (props){
props.history.push('/')
}
const handleChangeTab = (event, newValue) => {
setValue(newValue)
}
return (
<>
{
......@@ -186,7 +88,7 @@ export default function UserPage (props){
</label>
</CoverContainer>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
<img src={state.userAvatar}/>
<img src={state.currentUser.userAvatar}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
......@@ -233,6 +135,22 @@ export default function UserPage (props){
</>
</CheckTeacherDiv>
<RodapeDiv>
<NavBarContentContainer>
<Tabs
value ={value}
onChange ={handleChangeTab}
indicatorColor ="primary"
textColor ="primary"
variant = "scrollable"
scrollButtons = "auto"
>
<Tab label="Atividades"/>
<Tab label="Meus Recursos"/>
<Tab label="Favoritos"/>
<Tab label="Coleções"/>
<Tab label="Rede"/>
</Tabs>
</NavBarContentContainer>
</RodapeDiv>
</ContainerUserProfile>
</MainContainerDesktop>
......@@ -252,3 +170,117 @@ export default function UserPage (props){
)
}
const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
`
const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
`
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
`
const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
magin-bottom: 30px;
width : 1170px;
margin-right : auto;
padding-left : 0 !important;
padding-right : 0 !important;
margin-left : auto;
`
const HeaderContainer = styled(Container)`
background-color : #afeeee;
position : relative;
`
const CoverContainer = styled(Container)`
height : 230px;
position : relative;
`
const ProfileAvatarDiv = styled.div`
bottom : -65px;
left : 60px;
border-radius : 100%;
position : absolute;
width : 150px;
height : 150px;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
cursor : pointer;
`
const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
bottom : 0;
display : flex;
background-color : #000;
color : #fff;
justify-content : center;
`
const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
`
const EditProfileAnchor = styled.a`
Button {
background-color : #fafafa;
position : absolute;
right : 5px;
bottom : 0;
margin-bottom : 20px;
color : #666;
padding : 0 10px;
text-decoration : none;
border-radius : 3px;
min-height : 36px;
min-width : 88px;
line-height : 36px;
border : 0;
display: inline-block;
text-align : center;
}
`
const CheckTeacherDiv = styled.div`
font-size : 14px;
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
color : #666 !important;
`
const RodapeDiv = styled.div`
justify-content : flex-end;
display : flex;
`
const NavBarContentContainer = styled(Container)`
background-color : #fff;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hid1den !important;
margin-right : 0 !important;
`
src/img/horstmann.jpg 0 → 100644
+ 0
− 0
View file @ 1b110ac8
src/img/horstmann.jpg

38 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment