Tomasz Owczarczyk
239
app/routes/Apps/EmailDetails/EmailDetails.js
Executable file
239
app/routes/Apps/EmailDetails/EmailDetails.js
Executable file
@@ -0,0 +1,239 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
ButtonToolbar,
|
||||
Badge,
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
UncontrolledTooltip
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav";
|
||||
import { Attachment } from "../../components/Attachment";
|
||||
|
||||
const EmailDetails = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Email Details"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Content */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<MailboxLeftNav />
|
||||
</Col>
|
||||
<Col lg={ 9 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
{ /* START Header */}
|
||||
<div className="d-lg-flex justify-content-end mb-4">
|
||||
<div className="mr-auto d-flex align-items-center mb-3 mb-xl-0">
|
||||
<Button color="link" tag={ Link } to="/apps/inbox" className="text-decoration-none">
|
||||
<i className="fa fa-angle-left mr-2"></i> Inbox
|
||||
</Button>
|
||||
</div>
|
||||
<ButtonToolbar>
|
||||
<ButtonGroup className="mr-2 mb-3 mb-sm-0">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrev">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipPrev">
|
||||
Prev Message
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipNext">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipNext">
|
||||
Next Message
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="mr-2">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipForward">
|
||||
<i className="fa fa-fw fa-mail-forward"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipForward">
|
||||
Forward
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipFav">
|
||||
<i className="fa fa-fw fa-star"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipFav">
|
||||
Add to Favorites
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrint">
|
||||
<i className="fa fa-fw fa-print"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipPrint">
|
||||
Print
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipDelete">
|
||||
<i className="fa fa-fw fa-trash"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipDelete">
|
||||
Delete
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="ml-auto ml-lg-0">
|
||||
<Button color="primary" className="align-self-center" tag={ Link } to="/apps/inbox" id="tooltipReply">
|
||||
<i className="fa fa-fw fa-reply"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="tooltipReply">
|
||||
Reply
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</div>
|
||||
{ /* END Header */}
|
||||
{ /* START Message */}
|
||||
<div className="mb-4">
|
||||
<div className="d-flex flex-column flex-md-row">
|
||||
<Media>
|
||||
<Media left className="align-self-center mr-4">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="danger"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<a className="mt-0 text-decoration-none d-flex" href="#">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</a>
|
||||
<samp className="small">
|
||||
{ faker.internet.email() }
|
||||
</samp>
|
||||
</Media>
|
||||
</Media>
|
||||
<div className="ml-md-auto align-self-start text-left text-md-right mt-2 mt-md-0">
|
||||
18-Jun-2012<br />
|
||||
08:43 PM
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="d-flex mb-3">
|
||||
<h5>
|
||||
Secured Asynchronous Capacity
|
||||
</h5>
|
||||
<Badge pill color="primary" className="ml-auto align-self-start">
|
||||
Work
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="lead">
|
||||
{ faker.lorem.sentences() }
|
||||
</p>
|
||||
<p>
|
||||
{ faker.lorem.paragraphs() }
|
||||
</p>
|
||||
</div>
|
||||
{ /* END Message */}
|
||||
{ /* START Attachments */}
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<span className="small mr-2">
|
||||
Attachments
|
||||
</span>
|
||||
<Badge pill color="secondary">3</Badge>
|
||||
</div>
|
||||
<Attachment
|
||||
BgIconClassName="text-primary"
|
||||
icon="file-word-o"
|
||||
mediaClassName="mb-3"
|
||||
/>
|
||||
<Attachment
|
||||
BgIconClassName="text-success"
|
||||
icon="file-excel-o"
|
||||
mediaClassName="mb-3"
|
||||
/>
|
||||
<Attachment
|
||||
BgIconClassName="text-warning"
|
||||
icon="file-powerpoint-o"
|
||||
/>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<ButtonToolbar className="flex-column flex-lg-row">
|
||||
<ButtonGroup className="mb-2 mb-lg-0">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrevBtm">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipPrevBtm">
|
||||
Prev Message
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipNextBtm">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipNextBtm">
|
||||
Next Message
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonToolbar className="flex-column flex-sm-row ml-0 ml-lg-auto">
|
||||
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipForwardBtm">
|
||||
<i className="fa fa-fw fa-mail-forward"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipForwardBtm">
|
||||
Forward
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipFavBtm">
|
||||
<i className="fa fa-fw fa-star"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipFavBtm">
|
||||
Add to Favorites
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipPrintBtm">
|
||||
<i className="fa fa-fw fa-print"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipPrintBtm">
|
||||
Print
|
||||
</UncontrolledTooltip>
|
||||
<Button color="link" className="text-decoration-none align-self-center" id="tooltipDeleteBtm">
|
||||
<i className="fa fa-fw fa-trash"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipDeleteBtm">
|
||||
Delete
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup className="ml-0 ml-md-auto m-lg-0">
|
||||
<Button color="primary" className="align-self-center" tag={ Link } to="/apps/inbox" id="tooltipReplyBtm">
|
||||
<i className="fa fa-fw fa-reply"></i>
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="tooltipReplyBtm">
|
||||
Reply
|
||||
</UncontrolledTooltip>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbar>
|
||||
</ButtonToolbar>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Content */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default EmailDetails;
|
||||
Reference in New Issue
Block a user