From b0b9b82f7892838ff08e3a3b3b367bb9bd631761 Mon Sep 17 00:00:00 2001 From: sayuri <smr17> Date: Wed, 14 Aug 2019 11:49:00 -0300 Subject: [PATCH] =?UTF-8?q?avatar=20de=20autores=20em=20cards=20pronto=20-?= =?UTF-8?q?=20cards=20recurso=20e=20cole=C3=A7oes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/AreasSubPages.js | 47 +++++++++++++++++++++++++------ src/Components/CollectionCard.js | 31 ++++++++++++++------ src/Components/ResourceCard.js | 17 +++++++++-- src/img/default_profile.png | Bin 0 -> 1334 bytes 4 files changed, 76 insertions(+), 19 deletions(-) create mode 100644 src/img/default_profile.png diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js index 96eaec1e..2ccd1a86 100644 --- a/src/Components/AreasSubPages.js +++ b/src/Components/AreasSubPages.js @@ -53,10 +53,26 @@ class ReqResources extends Component{ /></Col>)} </Row> <Row> - {row2.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail} author={card.author}/></Col>)} + {row2.map(card => <Col md={3} sm={6} key={card.id}> + <ResourceCard name={card.name} + rating={card.score} + type={card.object_type} + description={card.description} + thumbnail={card.thumbnail} + author={card.author} + avatar={card.publisher.avatar} + /></Col>)} </Row> <Row> - {row3.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail} author={card.author}/></Col>)} + {row3.map(card => <Col md={3} sm={6} key={card.id}> + <ResourceCard name={card.name} + rating={card.score} + type={card.object_type} + description={card.description} + thumbnail={card.thumbnail} + author={card.author} + avatar={card.publisher.avatar} + /></Col>)} </Row> </Carousel> ) @@ -83,23 +99,38 @@ class ReqCollections extends Component{ return( <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}> <Row style={{paddingBottom: "5px"}}> - {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails} avatar={card.owner.avatar}/></Col>)} + {row1.map(card => <Col md={3} sm={6} key={card.id}> + <CollectionCard name={card.name} + rating={card.score} + author={card.owner.name} + description={card.description} + thumbnail={card.items_thumbnails} + avatar={card.owner.avatar}/></Col>)} </Row> <Row> - {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails} avatar={card.owner.avatar}/></Col>)} + {row2.map(card => <Col md={3} sm={6} key={card.id}> + <CollectionCard name={card.name} + rating={card.score} + author={card.owner.name} + description={card.description} + thumbnail={card.items_thumbnails} + avatar={card.owner.avatar}/></Col>)} </Row> <Row> - {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails} avatar={card.owner.avatar}/></Col>)} + {row3.map(card => <Col md={3} sm={6} key={card.id}> + <CollectionCard name={card.name} + rating={card.score} + author={card.owner.name} + description={card.description} + thumbnail={card.items_thumbnails} + avatar={card.owner.avatar}/></Col>)} </Row> </Carousel> ) } } - - class SubPages extends Component{ - areaRender(){ switch(this.props.banner){ case "Recursos": diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js index 2f9741ee..f55985e2 100644 --- a/src/Components/CollectionCard.js +++ b/src/Components/CollectionCard.js @@ -11,6 +11,7 @@ import FolderIcon from '@material-ui/icons/Folder'; import FavoriteIcon from '@material-ui/icons/Favorite'; import StarRatings from 'react-star-ratings'; import algumaCoisa from "../img/laranja/LIVRO_DIGITAL.jpg"; +import noAvatar from "../img/default_profile.png"; var authorStyle={ position: "absolute", @@ -26,10 +27,10 @@ var pictureStyle={ display: "flex", backgroundColor: "white", borderRadius: "50%", - bottom:"23%", - left: "40%", - height: "50px", - width: "50px", + bottom:"7%", + left: "37%", + height: "70px", + width: "70px", }; const slideStyle={ height: "50px", @@ -47,6 +48,10 @@ class RenderThumbs extends Component { render(){ if (this.props.thumbs) { var array = this.props.thumbs.slice(0,4); + if (array.length < 3) { + return( + <img height="160" src={apiDomain+array[0]}/>) + } return( <Row> {array.map(thumb => <Col style={{padding: "0px"}} md={6}><img key={thumb.id} height="80" src={apiDomain+thumb}/> </Col>)} @@ -60,7 +65,8 @@ class CollectionCard extends Component { constructor(props){ super(props); this.state={ - userStyle: "animatiOff" + userStyle: "animatiOff", + userAvatar: null, }; } onHover(){ @@ -69,19 +75,28 @@ class CollectionCard extends Component { onIddle(){ this.setState({userStyle: "animatiOff"}) } + defAvatar(){ + if (!this.state.userAvatar && (!this.props.avatar.length)){ + this.setState({userAvatar: noAvatar}); + } + if (!this.state.userAvatar && (this.props.avatar.length) ) { + this.setState({userAvatar:apiDomain+this.props.avatar}); + } + } render(){ + this.defAvatar(); return ( <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} > <Container style={{padding:"0px", backgroundColor: "#673ab7"}}> <div className={this.state.userStyle}> - <img style={slideStyle} src={apiDomain+this.props.avatar}/> + <img style={slideStyle} src={this.state.userAvatar}/> <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div> </div> <RenderThumbs thumbs={this.props.thumbnail}/> <div style={authorStyle}> - <Typography variant="title" color="textSecondary" component="p" >{this.props.name}</Typography> + <div style={{textAlign: "center"}}>{this.props.name}</div> </div> - <img style={pictureStyle} src={apiDomain+this.props.avatar}/> + <img style={pictureStyle} src={this.state.userAvatar}/> </Container> <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}> diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js index 0ca8a28e..837910b8 100644 --- a/src/Components/ResourceCard.js +++ b/src/Components/ResourceCard.js @@ -27,6 +27,7 @@ import {apiDomain} from '../env'; import AddIcon from '@material-ui/icons/CreateNewFolder'; import Options from './CardOptions' import Video from '@material-ui/icons/OndemandVideo'; +import noAvatar from "../img/default_profile.png"; const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao}, {label: "Aplicativo" , thumb: aplicativo}, {label: "Ãudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "VÃdeo", thumb:video}] @@ -38,7 +39,7 @@ const slideStyle={ }; const publisherStyle={ color: "white", - paddinLeft: "20px", + paddinLeft: "30px", fontSize: "15px" }; @@ -49,6 +50,7 @@ class ResourceCard extends Component { this.state={ thumbnail: null, userStyle: "animatiOff", + userAvatar: null, }; } @@ -67,13 +69,22 @@ class ResourceCard extends Component { onIddle(){ this.setState({userStyle: "animatiOff"}) } + defAvatar(){ + if (!this.state.userAvatar && (!this.props.avatar.length)){ + this.setState({userAvatar: noAvatar}); + } + if (!this.state.userAvatar && (this.props.avatar) ) { + this.setState({userAvatar:apiDomain+this.props.avatar}); + } + } render(){ - this.renderType(this.props.type) + this.renderType(this.props.type); + this.defAvatar(); return ( <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} > <Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}> <div className={this.state.userStyle}> - <img style={slideStyle} src={apiDomain+this.props.avatar}/> + <img style={slideStyle} src={this.state.userAvatar}/> <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div> </div> <img src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/> diff --git a/src/img/default_profile.png b/src/img/default_profile.png new file mode 100644 index 0000000000000000000000000000000000000000..912e38e4b255ad6cc124f625dc950eddeb9121bd GIT binary patch literal 1334 zcmV-61<Cq}P)<h;3K|Lk000e1NJLTq004jh004jp0ssI2OkDPy0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$*hxe|RCwC#ojq$ZQ4odKC4mjNkQ7^3 zC`3?*MGF7_A4p@7!hnJSEw->wP;fyZ?@2CiK8<m8cV@1hQ!FWx?Cd=E&i$TSd3kvW zC_PmOfB*=9A^-xQ2w<lci^Y6C$1}^a*=)A;cW!QOq9}^v`1<-9PXZ`F@O7G|)9G}x z+2s1ei;IgSNoutks1U#*g5O7@5z70K{|9xV*=&LY0Z6;v3k<dZAjA)c!{0*u@j^Ii zwOXc{2SWfRlgVH(5O`6$-LBW`1n?m=uy8#hkJuX#i+}+QH37VOzt`&__z1rjfvDT< zsxwdqpyho#3^W1gdfx~GO#twIc^#fyT_Z5idV8q#V)XPac;5}SVa#~}z&AfXKilby z!x*j7pa1}&zu)g$8<E1Kywgp-0vM0S#ZEI6BA5ijP9Ffi(^T;J7Kr3ahBN@h=FX;h zq5u$NCFdIs5X=*92}0q|3(QN{NKpVPt(<Wq<p8+lT>AiEq~z>~9Dw<J9(W>2Q{?~{ znRu{fDgm4a00dT*f&RhWWwGW;2*7H!3cQk-!J$~0@(X~N!9oCZm%S_-90ruC2!H?x zfI58u#`lOT8q6BN8o(MLqbQ1e@xG*~;pvqrzf2{7vjLDKi7x;oO_c-SjxBoOeaX$z z;i;A^UyKw5P^;C9_l01d@JUMPftcCzx?1K*186iFW-9><gLx+o0PS0|*|Z4&hRL5* z3RSAP!7%|$QVEYblX0C+$HE!i&-D@}sk~YT0HUqd2me+ev|1*$>1cGfZ*Olccpqjc z4p5X2YWMqn-977w`?_^eKUIMu19k5QMv`@?FtFhLz)rdv0FXSp3fCJMlN-txv{)>j zo}S9yk`~AD-QAs?oK5CZmW@WE^3JiM!((k6ZZT(EmSw<DY^#8P1J@gzhO(PA(H&hs z^4utfxNyDY89)ybw@&|Se-du>&B^%J`INdC?elWET&-4k{)7RiSF6>lt1CQxNt+um zcQgSI009sH0Z;@$02Bcb07U=<KoI}|Pz3Nro6Y8ZsdBkouGj0Wzjk?fS*=#x&v6`^ z+I;5?fZ1%8W!d|jGyHz!f{Y{KW~!qovbHT%AHe$+dGNSQk{BRyYX%lB+|vQzoIagS zja=Z6B#9ObQ2=gb(FGZU;n)Qz;e|{I00%7U>Pm7+xkLbnGwGYWOBnZ=MD0!GMW<2# z!0D68#JfCkyW8!0y<Wy{#v%crq>smAxZd9)|7V2&hDM`N;0U7_0B$dvM^XOx7NV$q zcE<uJV;i9_DrCFk;Q&rP;K&4}0|CJADEQ~>`fnK8?e<|!bZ!6`Mh%C<Q|jRq*i&k? zT6yQ1asWViN2y2Ir>}Pi5h>S+`+WhRhog1ZoR1Ny)9LIvivAmbyLk`*=-FHXfPE4I z`~d(FAKv%k@*RV62?2Ju3cCQ5dR*&#wEJM%b^r)FkB^TY-TGo&s08=-_gll!769mC z!ut$6g@+?B_&KZk9YC6<gTa8k9kKD+7XS?U@=d}A0QJNr=cCVQDqaDwr>{6lsI1rP zUa!Zw9eJTa?smJChldAxUy(sb?<)$<=M^T(A^-v)0Ez$zfFb|_pa_5fC;}h=iU0_J sA^-xQ2!H@60w4g200@98N&f^G0EieYhKy+U$^ZZW07*qoM6N<$f)X)SSO5S3 literal 0 HcmV?d00001 -- GitLab