Skip to content
Snippets Groups Projects
Commit 5b89b00f authored by lfr20's avatar lfr20
Browse files

trying to display avatar frame and badged on user avatares

parent 00b360e4
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/Components/Badge.js
+ 6
− 10
View file @ 5b89b00f
...@@ -30,10 +30,6 @@ export default function Badge(props) { ...@@ -30,10 +30,6 @@ export default function Badge(props) {
const [src, setSrc] = useState(apiDomain + props.src); const [src, setSrc] = useState(apiDomain + props.src);
const [alt, setAlt] = useState(props.alt); const [alt, setAlt] = useState(props.alt);
if (props.item_id) {
// get real src and alt using axios
}
if (props.lower) if (props.lower)
return <LowerBadge src={src} alt={alt} /> return <LowerBadge src={src} alt={alt} />
else else
...@@ -41,15 +37,15 @@ export default function Badge(props) { ...@@ -41,15 +37,15 @@ export default function Badge(props) {
} }
const BadgeImg = styled.img` const BadgeImg = styled.img`
height: 25px; height: 10px;
width: 25px; width: 10px;
border-radius: 50px; border-radius: 50%;
` `
const LowerBadge = styled.img` const LowerBadge = styled.img`
height: 25px; height: 10px;
width: 25px; width: 10px;
border-radius: 50px; border-radius: 50%;
position: absolute; position: absolute;
bottom: -10px; bottom: -10px;
` `
src/Components/ContactCard.js
+ 157
− 156
View file @ 5b89b00f
...@@ -45,163 +45,163 @@ export default function ImgMediaCard(props) { ...@@ -45,163 +45,163 @@ export default function ImgMediaCard(props) {
return (window.location.href.includes("loja")) return (window.location.href.includes("loja"))
} }
return (
<StyledCard>
<StyledAvatar>
<Avatar
src={props.avatar ? props.avatar : noAvatar}
alt="user avatar"
style={{ height: "56%", width: "55%", objectFit: 'cover' }}
/>
</StyledAvatar>
</StyledCard>
)
// return ( // return (
// <StyledCard> // <StyledCard>
// <CardDiv> // <StyledAvatar>
// <CardAreaDiv> // <Avatar
// {/* Top part of contat card (background image, number of followers and avatar) */} // src={props.avatar ? props.avatar : noAvatar}
// <Header> // alt="user avatar"
// <StyledCardMedia image={props.cover}> // style={{ height: "56%", width: "55%", objectFit: 'cover' }}
// <div
// style={{
// display: "flex",
// backgroundColor: "inherit",
// float: "right",
// }}
// >
// <Link to={props.href}>
// <FollowersCountButton followCount={props.follow_count} />
// </Link>
// <AvatarDiv>
// <BadgesDiv>
// {
// props.userBadges.length === 1 &&
// <Badge
// lower
// src={props.userBadges[0].image}
// alt={props.userBadges[0].name}
// /> // />
// } // </StyledAvatar>
// { // </StyledCard>
// props.userBadges.length === 2 && // )
// <>
// <Badge
// src={props.userBadges[0].image}
// alt={props.userBadges[0].name}
// /> return (
// <Badge <StyledCard>
// src={props.userBadges[1].image} <CardDiv>
// alt={props.userBadges[1].name} <CardAreaDiv>
{/* Top part of contat card (background image, number of followers and avatar) */}
<Header>
<StyledCardMedia image={props.cover}>
<div
style={{
display: "flex",
backgroundColor: "inherit",
float: "right",
}}
>
<Link to={props.href}>
<FollowersCountButton followCount={props.follow_count} />
</Link>
<AvatarDiv>
<BadgesDiv>
{
props.userBadges.length === 1 &&
<Badge
lower
src={props.userBadges[0].image}
alt={props.userBadges[0].name}
/>
}
{
props.userBadges.length === 2 &&
<>
<Badge
src={props.userBadges[0].image}
alt={props.userBadges[0].name}
// /> />
// </> <Badge
// } src={props.userBadges[1].image}
// { alt={props.userBadges[1].name}
// props.userBadges.length === 3 &&
// <>
// <Badge
// src={props.userBadges[0].image}
// alt={props.userBadges[0].name}
// /> />
// <Badge </>
// lower }
// src={props.userBadges[1].image} {
// alt={props.userBadges[1].name} props.userBadges.length === 3 &&
<>
<Badge
src={props.userBadges[0].image}
alt={props.userBadges[0].name}
// /> />
// <Badge <Badge
// src={props.userBadges[2].image} lower
// alt={props.userBadges[2].name} src={props.userBadges[1].image}
// /> alt={props.userBadges[1].name}
// </>
// } />
// </BadgesDiv> <Badge
// <img src={props.userBadges[2].image}
// src={props.avatar ? props.avatar : noAvatar} alt={props.userBadges[2].name}
// alt="user avatar" />
// style={{ height: "90%", width: "90%", borderRadius: "50%", backgroundColor: 'white' }} </>
// /> }
// </AvatarDiv> </BadgesDiv>
// </div> <img
// </StyledCardMedia> src={props.avatar ? props.avatar : noAvatar}
// </Header> alt="user avatar"
style={{ height: "56%", width: "55%", borderRadius: "50%" }}
// {/* Rest of the card content. Button to be rendered depends on whether the contact is followed by the user */} />
// <CardContent> </AvatarDiv>
// <UserInfo> </div>
// <Link to={props.href}> </StyledCardMedia>
// <p className="p1">{props.name}</p> </Header>
// </Link>
{/* Rest of the card content. Button to be rendered depends on whether the contact is followed by the user */}
// <Link to={props.href}> <CardContent>
// <span style={{ fontSize: "14px", fontWeight: "normal" }}> <UserInfo>
// <b>{props.numCollections}</b>{" "} <Link to={props.href}>
// {props.numCollections !== 1 ? "Coleções" : "Coleção"} |{" "} <p className="p1">{props.name}</p>
// <b>{props.numLearningObjects}</b>{" "} </Link>
// {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
// </span> <Link to={props.href}>
// </Link> <span style={{ fontSize: "14px", fontWeight: "normal" }}>
<b>{props.numCollections}</b>{" "}
// { {props.numCollections !== 1 ? "Coleções" : "Coleção"} |{" "}
// !isOnStore() ? <b>{props.numLearningObjects}</b>{" "}
// <div style={{ display: "flex", justifyContent: "center" }}> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
// { </span>
// followedBoolean ? </Link>
// (
// <React.Fragment> {
// <FollowingButton !isOnStore() ?
// followedID={props.followerID ? props.followerID : props.followedID} <div style={{ display: "flex", justifyContent: "center" }}>
// toggleFollowed={toggleFollowed} /> {
followedBoolean ?
// <Options (
// followableID={props.followerID ? props.followerID : props.followedID} <React.Fragment>
// followed={followedBoolean} <FollowingButton
// toggleFollowed={toggleFollowed} /> followedID={props.followerID ? props.followerID : props.followedID}
// </React.Fragment> toggleFollowed={toggleFollowed} />
// )
// : <Options
// ( followableID={props.followerID ? props.followerID : props.followedID}
// <React.Fragment> followed={followedBoolean}
// <FollowButton toggleFollowed={toggleFollowed} />
// followerID={props.followedID ? props.followedID : props.followerID} </React.Fragment>
// toggleFollowed={toggleFollowed} /> )
:
// <Options (
// followableID={props.followedID ? props.followedID : props.followerID} <React.Fragment>
// followed={followedBoolean} <FollowButton
// toggleFollowed={toggleFollowed} /> followerID={props.followedID ? props.followedID : props.followerID}
// </React.Fragment> toggleFollowed={toggleFollowed} />
// )
// } <Options
// </div> followableID={props.followedID ? props.followedID : props.followerID}
// : followed={followedBoolean}
// <StatusInfoDiv> toggleFollowed={toggleFollowed} />
// <CoinsInfoDiv> </React.Fragment>
// <GemImg src={Rubi} /> )
// <CoinsSpan>{props.points} </CoinsSpan> }
// </CoinsInfoDiv> </div>
// </StatusInfoDiv> :
// } <StatusInfoDiv>
// </UserInfo> <CoinsInfoDiv>
// </CardContent> <GemImg src={Rubi} />
// </CardAreaDiv> <CoinsSpan>{props.points} </CoinsSpan>
// </CardDiv> </CoinsInfoDiv>
// </StyledCard > </StatusInfoDiv>
// ); }
</UserInfo>
</CardContent>
</CardAreaDiv>
</CardDiv>
</StyledCard >
);
} }
const StyledAvatar = styled(Avatar)` const StyledAvatar = styled(Avatar)`
border-radius: 105px 105px 0px 0px; border-radius: 105px 105px 0px 0px;
height: 300px; max-height: 300px;
width: 300px; max-width: 300px;
float: right; float: right;
overflow: hidden; overflow: hidden;
background-image: url("https://rocket-league.com/content/media/items/avatar/220px/4f474ee3bb1535899237.png"); background-image: url("https://png.pngtree.com/png-clipart/20210404/original/pngtree-fluorescent-purple-blue-twibbon-avatar-border-png-image_6193873.jpg");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
...@@ -301,13 +301,14 @@ const AvatarDiv = styled.div` ...@@ -301,13 +301,14 @@ const AvatarDiv = styled.div`
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
/* max-height: 300px;
max-width: 300px; */
float: right;
overflow: hidden;
background-image: url("https://png.pngtree.com/png-clipart/20210404/original/pngtree-fluorescent-purple-blue-twibbon-avatar-border-png-image_6193873.jpg");
background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
border-image: background-position: center;
url("https://mdn.mozillademos.org/files/4127/border.png") /* source */
27 / /* slice */
36px 28px 18px 8px / /* width */
18px 14px 9px 4px /* outset */
round;
`; `;
/* gamification aspects */ /* gamification aspects */
...@@ -315,7 +316,7 @@ const BadgesDiv = styled.div` ...@@ -315,7 +316,7 @@ const BadgesDiv = styled.div`
z-index: 9; z-index: 9;
position: absolute; position: absolute;
display: block; display: block;
bottom: 0; bottom: 12px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
src/Components/MobileDrawerMenu.js
+ 252
− 168
View file @ 5b89b00f
...@@ -16,7 +16,7 @@ GNU Affero General Public License for more details. ...@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useContext } from 'react' import React, { useContext, useEffect, useState } from 'react'
import { Store } from '../Store'; import { Store } from '../Store';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components' import styled from 'styled-components'
...@@ -32,10 +32,11 @@ import { Button } from '@material-ui/core'; ...@@ -32,10 +32,11 @@ import { Button } from '@material-ui/core';
import DefaultAvatar from '../img/default_profile0.png' import DefaultAvatar from '../img/default_profile0.png'
import SettingsIcon from '@material-ui/icons/Settings'; import SettingsIcon from '@material-ui/icons/Settings';
import { apiDomain } from '../env.js' import { apiDomain } from '../env.js'
import { deleteRequest } from './HelperFunctions/getAxiosConfig' import { deleteRequest, getRequest } from './HelperFunctions/getAxiosConfig'
export default function MobileDrawerMenu(props) { export default function MobileDrawerMenu(props) {
const { state, dispatch } = useContext(Store) const { state, dispatch } = useContext(Store)
const [userBadges, setUserBadges] = useState([])
const buildMyAreaTabs = () => { const buildMyAreaTabs = () => {
const minhaArea = [ const minhaArea = [
...@@ -86,7 +87,7 @@ export default function MobileDrawerMenu(props) { ...@@ -86,7 +87,7 @@ export default function MobileDrawerMenu(props) {
}; };
const getUserAvatar = () => { const getUserAvatar = () => {
if (state.currentUser.avatar === '' || state.currentUser.avatar == null) { if (!state.currentUser.avatar) {
return DefaultAvatar return DefaultAvatar
} }
else { else {
...@@ -108,6 +109,25 @@ export default function MobileDrawerMenu(props) { ...@@ -108,6 +109,25 @@ export default function MobileDrawerMenu(props) {
deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) }) deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
} }
useEffect(() => {
if (state.currentUser.id)
getRequest(
`/users/${state.currentUser.id}/items?being_used=true`,
(data, header) => {
const newUserBadges = []
for (let index = 0; index < data.length; index++) {
const item = data[index];
if (item.item.item_type === 'badge')
newUserBadges.push(item.item)
}
setUserBadges(newUserBadges)
},
(error) => {
}
)
}, [state.currentUser.id])
return ( return (
<StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}> <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody> <MenuBody>
...@@ -129,15 +149,67 @@ export default function MobileDrawerMenu(props) { ...@@ -129,15 +149,67 @@ export default function MobileDrawerMenu(props) {
state.userIsLoggedIn ? state.userIsLoggedIn ?
( (
<div style={{ display: "flex", flexDirection: "column", color: "#666", paddingBottom: "10px" }}> <div style={{ display: "flex", flexDirection: "column", color: "#666", paddingBottom: "10px" }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<MyArea> <MyArea>
<div className="user-avatar"> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-betww', alignItems: 'center' }}>
<img alt="user-avatar" <BadgesDiv>
src={getUserAvatar()} {
userBadges.length === 1 &&
<Badge
lower
src={apiDomain + userBadges[0].image}
alt={userBadges[0].name}
/>
}
{
userBadges.length === 2 &&
<>
<Badge
src={apiDomain + userBadges[0].image}
alt={userBadges[0].name}
/>
<Badge
src={apiDomain + userBadges[1].image}
alt={userBadges[1].name}
/>
</>
}
{
userBadges.length === 3 &&
<>
<Badge
src={apiDomain + userBadges[0].image}
alt={userBadges[0].name}
/>
<Badge
lower
src={apiDomain + userBadges[1].image}
alt={userBadges[1].name}
/> />
<Badge
src={apiDomain + userBadges[2].image}
alt={userBadges[2].name}
/>
</>
}
</BadgesDiv>
</div> </div>
<span className="text">Minha área</span> <img
className="user-avatar"
src={getUserAvatar()}
alt="user avatar"
/>
</MyArea> </MyArea>
<div>
<span>
Minha área
</span>
</div>
</div>
{ {
minhaArea.map((item, index) => minhaArea.map((item, index) =>
<Link to={{ <Link to={{
...@@ -198,31 +270,43 @@ export default function MobileDrawerMenu(props) { ...@@ -198,31 +270,43 @@ export default function MobileDrawerMenu(props) {
) )
} }
const MyArea = styled.div` const Badge = styled.img`
margin : 0 16px; height: 10px;
width: 10px;
border-radius: 50%;
`
const BadgesDiv = styled.div`
z-index: 9;
/* position: absolute; */
/* display: block; */
/* bottom: 12px; */
/* width: 100%; */
height: 50%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around;
`;
.text {
font-size : 16px;
color : #666;
align-self : center;
}
.user-avatar { const MyArea = styled.div`
margin-right : 10px;
align-self : center;
border-radius: 50%; border-radius: 50%;
border : 1px solid #fff; height: 70px;
max-width : 50px; width: 70px;
max-height : 50px; display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
float: right;
overflow: hidden; overflow: hidden;
background-image: url("https://png.pngtree.com/png-clipart/20210404/original/pngtree-fluorescent-purple-blue-twibbon-avatar-border-png-image_6193873.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
img{ img{
width : 100%; height: 56%;
height : 100%; width: 55%;
vertical-align : middle;
}
} }
` `
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment