Skip to content

Created Popups of Profile page #329

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

Merged
merged 10 commits into from
Mar 3, 2020
Merged

Created Popups of Profile page #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
307e2f6
Merge pull request #314 from codeuino/development
devesh-verma Feb 17, 2020
a9ee972
Added Edit-Profile Popup
anisin97 Feb 23, 2020
2a0c685
Added Logout Button and Popup
anisin97 Feb 24, 2020
b3c5c3d
Changes finalising Logout Button and its Popup
anisin97 Feb 24, 2020
f23170d
Others
anisin97 Feb 24, 2020
dc0e408
Merge branch 'development' into development
anisin97 Feb 24, 2020
aefb037
Update navigation.js
anisin97 Feb 24, 2020
d7ca17f
Added Followers Popup
anisin97 Feb 26, 2020
f2dbca1
Merge branch 'development' of https://github.com/theprover97/social-p…
anisin97 Feb 26, 2020
d324abf
Changes in Followers popup
anisin97 Feb 29, 2020
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
60 changes: 60 additions & 0 deletions src/svgs/logout.svg
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: 19 additions & 3 deletions src/user/dashboard/navigation/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import React, { Component } from "react";
import { ListGroup } from "react-bootstrap";
import { NavLink } from 'react-router-dom';
import { ListGroup, Button } from "react-bootstrap";
import { NavLink } from "react-router-dom";
import { DonutTitleSmall } from "../../../donutTitle/donutTitle";
import "./navigation.scss";
import {Logout} from "../../profile/popups/logout";
import logo from "../../../svgs/logout.svg";

class Navigation extends Component {
state = { logout:false };
render() {
let cancel =()=>this.setState({
logout:false
});
const divStyle = {
position: "absolute",
bottom: 0
Expand Down Expand Up @@ -106,7 +112,7 @@ class Navigation extends Component {
<b>Account</b>
</NavLink>
</ListGroup.Item>
<ListGroup.Item style={divStyle}>
<ListGroup.Item style={{position: "absolute", bottom: "50px"}}>
<svg
width="38"
height="38"
Expand All @@ -122,6 +128,16 @@ class Navigation extends Component {
</svg>
Settings
</ListGroup.Item>
<ListGroup.Item style={divStyle}>
<Button variant="link" size="sm" style=
{{"margin-left": "-8.5px", color: "rgba(0, 0, 0, 0.5)"}} onClick={
()=>this.setState({logout:true})}>
<img class="logout" src={logo} alt="L"></img>
<b>Logout</b>
</Button>
<Logout show={this.state.logout}
onHide={cancel} />
</ListGroup.Item>
</ListGroup>
</div>
);
Expand Down
8 changes: 8 additions & 0 deletions src/user/dashboard/navigation/navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,12 @@
}
}
}
}

.logout{
height: 21px;
width: 21px;
color: rgba(0, 0, 0, 0.5);
margin-right: 15px;
margin-left: 2px;
}
99 changes: 99 additions & 0 deletions src/user/profile/popups/edit-profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, {Component} from 'react';
import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
import "./popups.scss";

export class EditProfile extends Component{
// eslint-disable-next-line
constructor(props){
super(props);
}
render(){
return (
<Modal
{...this.props}
size="md"
aria-labelledby="contained-modal-title-vcenter"
centered>
<div className="container">
<Modal.Header closeButton className="heading border border-0 p-0">
<Modal.Title id="contained-modal-title-vcenter">
<div className="title">Edit Profile</div>
<div className="about">PERSONAL INFORMATION</div>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row className="form-content">
<Col className="p-0" sm={5}>
<Form.Label className="label">First Name</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="Type here.."
size="sm"/>
</Col>
<Col className="p-0" sm={5}>
<Form.Label className="label">Last Name</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="Type here.."
size="sm"/>
</Col>
</Row>
<Row className="form-content">
<Col className="p-0" sm={5}>
<Form.Label className="label">Designation</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="What do you do?"
size="sm"/>
</Col>
<Col className="p-0" sm={5}>
<Form.Label className="label">Location</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="Where do you live?"
size="sm"/>
</Col>
</Row>
<Row className="form-content">
<Form.Label className="label">About</Form.Label>
<Form.Control className="form-input"
as="textarea"
placeholder="Write a few lines about yourself.."
size="sm"/>
</Row>
<div className="about extra">PROFILES</div>
<Row className="form-content">
<Col className="p-0" sm={5}>
<Form.Label className="label">GitHub URL</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="GitHub Profile"
size="sm"/>
</Col>
<Col className="p-0" sm={5}>
<Form.Label className="label">LinkedIn URL</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="LinkedIn Profile"
size="sm"/>
</Col>
</Row>
<Row className="form-content">
<Col className="p-0" sm={5}>
<Form.Label className="label">Facebook URL</Form.Label>
<Form.Control className="form-input"
type="text"
placeholder="Facebook Profile"
size="sm"/>
</Col>
</Row>
</Modal.Body>
<div className="form-footer">
<Button onClick={this.props.onHide} className="savebtn">Save</Button>
<Button variant="outline-primary" onClick={this.props.onHide}>Cancel</Button>
</div>
</div>
</Modal>
);
}
}
81 changes: 81 additions & 0 deletions src/user/profile/popups/followers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import React, {Component} from 'react';
import {Modal, Button, Row, Col} from 'react-bootstrap';
import logo from "../../../svgs/profile-icon.svg";
import "./popups.scss";

export class Followers extends Component{
// eslint-disable-next-line
constructor(props){
super(props);
}
state = {text:"Follow"};
render(){

return (
<Modal
{...this.props}
size="md"
aria-labelledby="contained-modal-title-vcenter"
centered>
<div className="container">
<Modal.Header closeButton className="heading border border-0 p-0">
<Modal.Title id="contained-modal-title-vcenter">
<div className="title">Followers</div>
<div className="about">PEOPLE WHO FOLLOW YOU</div>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row className="follower" id="p1">
<Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
<Col md={7}><div className="contain">
<p className="user">Dhanus Rajendra</p>
<p className="descr">Front-End Developer</p>
</div></Col>
<Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
</Row>
<Row className="follower" id="p1">
<Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
<Col md={7}><div className="contain">
<p className="user">Dhanus Rajendra</p>
<p className="descr">Front-End Developer</p>
</div></Col>
<Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
</Row>
<Row className="follower" id="p1">
<Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
<Col md={7}><div className="contain">
<p className="user">Dhanus Rajendra</p>
<p className="descr">Front-End Developer</p>
</div></Col>
<Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
</Row>
<Row className="follower" id="p1">
<Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
<Col md={7}><div className="contain">
<p className="user">Dhanus Rajendra</p>
<p className="descr">Front-End Developer</p>
</div></Col>
<Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
</Row>
<Row className="follower" id="p1">
<Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
<Col md={7}><div className="contain">
<p className="user">Dhanus Rajendra</p>
<p className="descr">Front-End Developer</p>
</div></Col>
<Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
</Row>
<Row className="follower" id="p1">
<Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
<Col md={7}><div className="contain">
<p className="user">Dhanus Rajendra</p>
<p className="descr">Front-End Developer</p>
</div></Col>
<Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
</Row>
</Modal.Body>
</div>
</Modal>
);
}
}
33 changes: 33 additions & 0 deletions src/user/profile/popups/logout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React, {Component} from 'react';
import {Modal, Button} from 'react-bootstrap';
import "./popups.scss";

export class Logout extends Component{
// eslint-disable-next-line
constructor(props){
super(props);
}
render(){
return (
<Modal
{...this.props}
size="md"
aria-labelledby="contained-modal-title-vcenter"
centered>
<div className="container">
<Modal.Header closeButton className="heading border border-0 p-0">
<Modal.Title id="contained-modal-title-vcenter">
<div className="title">Logout?</div>
<div className="message">Are you sure you want to logout of Donut?</div>
</Modal.Title>
</Modal.Header>

<div className="form-footer">
<Button onClick={this.props.onHide} className="savebtn" size="sm">Yes</Button>
<Button variant="outline-primary" onClick={this.props.onHide} size="sm">No</Button>
</div>
</div>
</Modal>
);
}
}
Loading