From d5bf148b080efee7c8cdfa946c5dbd7c96d12f6b Mon Sep 17 00:00:00 2001 From: Egor Galkin Date: Thu, 23 May 2019 21:06:23 +0300 Subject: [PATCH] Add task5 implementation --- package-lock.json | 56 ++++++-- src/app/app.css | 16 +++ src/app/app.jsx | 20 +-- src/components/header/Header.css | 40 ++++++ src/components/header/Header.jsx | 18 +++ src/components/main/PageContent.css | 4 + src/components/main/PageContent.jsx | 17 +++ src/components/main/mail/Mail.css | 115 +++++++++++++++ src/components/main/mail/Mail.jsx | 59 ++++++++ src/components/main/mail/MailAction.css | 52 +++++++ src/components/main/mail/MailAction.jsx | 50 +++++++ src/components/main/mail/MailBody.css | 20 +++ src/components/main/mail/MailBody.jsx | 21 +++ src/components/main/mail/MailContent.css | 46 ++++++ src/components/main/mail/MailContent.jsx | 173 +++++++++++++++++++++++ src/components/main/mail/MailFactory.css | 4 + src/components/main/mail/MailFactory.jsx | 44 ++++++ src/components/main/mail/mailUtils.js | 46 ++++++ src/components/main/sidebar/Sidebar.css | 64 +++++++++ src/components/main/sidebar/Sidebar.jsx | 29 ++++ src/index.css | 1 + src/resources/images/yandex-logo.svg | 91 ++++++++++++ 22 files changed, 958 insertions(+), 28 deletions(-) create mode 100644 src/components/header/Header.css create mode 100644 src/components/header/Header.jsx create mode 100644 src/components/main/PageContent.css create mode 100644 src/components/main/PageContent.jsx create mode 100644 src/components/main/mail/Mail.css create mode 100644 src/components/main/mail/Mail.jsx create mode 100644 src/components/main/mail/MailAction.css create mode 100644 src/components/main/mail/MailAction.jsx create mode 100644 src/components/main/mail/MailBody.css create mode 100644 src/components/main/mail/MailBody.jsx create mode 100644 src/components/main/mail/MailContent.css create mode 100644 src/components/main/mail/MailContent.jsx create mode 100644 src/components/main/mail/MailFactory.css create mode 100644 src/components/main/mail/MailFactory.jsx create mode 100644 src/components/main/mail/mailUtils.js create mode 100644 src/components/main/sidebar/Sidebar.css create mode 100644 src/components/main/sidebar/Sidebar.jsx create mode 100644 src/resources/images/yandex-logo.svg diff --git a/package-lock.json b/package-lock.json index 24c1378..2c1555c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3396,12 +3396,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3416,17 +3418,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3543,7 +3548,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3555,6 +3561,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3569,6 +3576,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3576,12 +3584,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3600,6 +3610,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3680,7 +3691,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3692,6 +3704,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3813,6 +3826,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7242,12 +7256,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7262,17 +7278,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7389,7 +7408,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7401,6 +7421,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7415,6 +7436,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7422,12 +7444,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -7446,6 +7470,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7526,7 +7551,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7538,6 +7564,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7659,6 +7686,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/app/app.css b/src/app/app.css index 1c4d511..ee523de 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -2,6 +2,7 @@ text-align: center; } + .app-header { display: flex; min-height: 100vh; @@ -25,3 +26,18 @@ transform: rotate(360deg); } } + +.input { + transition: width .35s linear; + outline: none; + border: none; + border-radius: 4px; + padding: 10px; + font-size: 20px; + width: 150px; + background-color: #dddddd; +} + +.input-focused { + width: 240px; +} diff --git a/src/app/app.jsx b/src/app/app.jsx index f759eed..114ce3e 100644 --- a/src/app/app.jsx +++ b/src/app/app.jsx @@ -2,23 +2,15 @@ import React, { Component } from 'react'; import './app.css'; +import { Header } from '../components/header/Header'; +import { PageContent } from '../components/main/PageContent'; + export class App extends Component { render() { return ( -
-
-

- Edit src/app/app.jsx and save to reload. -

- - Learn React - -
+
+
+
); } diff --git a/src/components/header/Header.css b/src/components/header/Header.css new file mode 100644 index 0000000..eb2e367 --- /dev/null +++ b/src/components/header/Header.css @@ -0,0 +1,40 @@ +.header { + width: 100%; + height: 56px; + float: right; +} + +.header__mail-logo { + width: 153px; + height: 31px; + float: left; + margin: 19px 20% 0 22px; +} + + +.search-bar { + float: left; + width: 30%; + height: 60%; +} + +.search-bar_position { + margin: 11px 0 13px; + opacity: 0.5; +} + +.search-bar__input { + float: left; + width: 98%; + height: 100%; + +} + +.search-bar__input_view { + margin: 0; + padding-left: 2%; + opacity: 0.5; + text-overflow: ellipsis; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + background-color: #fff; +} diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx new file mode 100644 index 0000000..bd38f2f --- /dev/null +++ b/src/components/header/Header.jsx @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; + +import './Header.css'; + +import YandexLogo from '../../resources/images/yandex-logo.svg' + +export class Header extends Component { + render() { + return ( +
+ +
+ +
+
+ ); + } +} diff --git a/src/components/main/PageContent.css b/src/components/main/PageContent.css new file mode 100644 index 0000000..ed35caa --- /dev/null +++ b/src/components/main/PageContent.css @@ -0,0 +1,4 @@ +.page-content { + width: 100%; + float: left; +} diff --git a/src/components/main/PageContent.jsx b/src/components/main/PageContent.jsx new file mode 100644 index 0000000..712ce6e --- /dev/null +++ b/src/components/main/PageContent.jsx @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; + +import {Sidebar} from './sidebar/Sidebar'; +import { MailContent } from './mail/MailContent'; + +import './PageContent.css' + +export class PageContent extends Component{ + render() { + return ( +
+ + +
+ ); + } +} diff --git a/src/components/main/mail/Mail.css b/src/components/main/mail/Mail.css new file mode 100644 index 0000000..f495ba9 --- /dev/null +++ b/src/components/main/mail/Mail.css @@ -0,0 +1,115 @@ +.mail__sender-logo { + float: left; + display: inline-block; + width: 30px; + height: 30px; + margin-right: 10px; + background-color: #f33; + border-radius: 50%; + color: #fff; + line-height: 30px; + text-align: center; + vertical-align: middle; +} + +.mail__author { + width: 25%; + height: 30px; + float: left; + display: inline-block; + vertical-align: middle; +} + +.mail__author_view { + margin: 10px 20px 13px 0; +} + +.mail__unread { + font-weight: bold; +} + +.read-status { + float: left; + width: 10px; + height: 10px; + +} + +.read-status_view { + margin: 14px 10px 15px 0; + border-radius: 50%; + background-color: #6287bd; + display: inline-block; + vertical-align: middle; +} + +.read-status_not-read { + visibility: visible; +} + +.read-status_read { + visibility: hidden; +} + +.mail { + height: 0px; + padding-top: 5px; + padding-bottom: 5px; + border-bottom: solid 1px #e2e2e2; + transition: all 1.2s ease-out; +} + +.mail__text-overflow { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.just-added { + height: 30px; + opacity: 0; +} + +.already-added { + height: 30px; + opacity: 1; +} + +.mail__message-body { + display: inline-block; + vertical-align: middle; + width: 40%; +} + +.mail__checkbox { + width: 16px; + display: inline-block; + vertical-align: middle; + height: 16px; +} + +.chose { + float: left; +} + +.chose_view { + margin-left: 20px; + margin-right: 20px; +} + +.message-date { + right: 20px; + top: 13px; + float: right; + display: inline-block; + vertical-align: middle; +} + +.message-date_view { + margin-right: 20px; +} + +.mail_deleted { + transition: all 0.6s ease-out; + opacity: 0; +} diff --git a/src/components/main/mail/Mail.jsx b/src/components/main/mail/Mail.jsx new file mode 100644 index 0000000..f92b26a --- /dev/null +++ b/src/components/main/mail/Mail.jsx @@ -0,0 +1,59 @@ +import React, { Component } from 'react'; + +import './Mail.css'; + +export class Mail extends Component { + constructor(props) { + super(props); + this.notifyIsMarked = this.notifyIsMarked.bind(this); + this.handleClick = this.handleClick.bind(this); + } + + render() { + let marked = this.props.isMailMarked(this.props.id); + let justAdded = this.props.justAdded; + let toDelete = this.props.toDelete; + const mailClass = `mail${toDelete ? ' mail_deleted' : ''} ${ + justAdded ? ' just-added' : 'already-added' + }`; + console.log(mailClass) + const logoClass = 'mail__sender-logo'; + const senderClass = 'mail__author mail__text-overflow mail__unread'; + const messageBodyClass = 'mail__message-body mail__message-body_view mail__text-overflow mail__unread'; + const readStatusClass = 'read-status read-status_view read-status_not-read'; + return ( +
+
+ +
+ {this.props.logo} + {this.props.sender} +
+ {this.props.title} + +
+ + ); + } + + handleClick(event) { + let targetName = event.target.className; + if (targetName !== 'mail__checkbox') { + this.props.openMail(this.props.id); + } + } + + notifyIsMarked() { + let wasUpdate = this.props.updateAllMarked(this.props.id); + if (!wasUpdate) { + this.setState({}) + } + } +} + + diff --git a/src/components/main/mail/MailAction.css b/src/components/main/mail/MailAction.css new file mode 100644 index 0000000..3449820 --- /dev/null +++ b/src/components/main/mail/MailAction.css @@ -0,0 +1,52 @@ +.actions { + height: 37px; +} + +.actions_view { + overflow: hidden; + border-bottom: 1px solid #e2e2e2; +} + +.actions__chose-all { + width: 16px; + height: 16px; +} + +.actions__chose-all { + float: left; +} + +.chose_view { + margin-right: 20px; + margin-left: 20px; +} + +.actions__choose-all { + width: 16px; + height: 16px; +} + +.actions_option { + margin: 11px 10px; + float: left; + font: normal 500 13px normal HelveticaNeue; + font-stretch: normal; + letter-spacing: normal; + color: #cccccc; +} + +.no-button-decoration { + padding: 0; + border: none; + background: none; +} + +.no-button-decoration:focus{ + outline: 0; +} + +.no-button-decoration:hover { + border-radius: 3px; + background-color: #cdd6e4; +} + diff --git a/src/components/main/mail/MailAction.jsx b/src/components/main/mail/MailAction.jsx new file mode 100644 index 0000000..e40ba35 --- /dev/null +++ b/src/components/main/mail/MailAction.jsx @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; + +import './MailAction.css'; + +export class MailAction extends Component { + constructor(props) { + super(props); + this.markAll = this.markAll.bind(this); + } + + markAll() { + if (this.props.markAll) + this.props.markAll(); + } + + render() { + const isMarkedAll = this.props.isAllMarked(); + + const actions = [ + { name: 'resend', title: 'Переслать' }, + { name: 'delete', title: 'Удалить', func: this.props.removeMarkedMails }, + { name: 'spam', title: 'Это спам!' }, + { name: 'read', title: 'Прочитано' }, + { name: 'newMessage', title: 'Добавить письмо', func: this.props.addNewMail } + ].map(elem => + ); + + return ( +
+
+ +
+ {actions} +
+ ); + + } + +} + +function Action(props) { + const classStr = `actions__${props.title} actions__${props.title}_view ` + + 'actions_option no-button-decoration'; + + return ( + + ); +} diff --git a/src/components/main/mail/MailBody.css b/src/components/main/mail/MailBody.css new file mode 100644 index 0000000..c0661e2 --- /dev/null +++ b/src/components/main/mail/MailBody.css @@ -0,0 +1,20 @@ +.mail-body { + min-height: 480px; +} + +.mail-body__text { + position: absolute; + background-color: #fff; + width: 95%; + text-align: justify; + font-size: 16px; + margin: 10px; +} + +.mail-body__close { + float: right; + margin: 5px; + font-size: 20px; + color: #708090; + cursor: pointer; +} diff --git a/src/components/main/mail/MailBody.jsx b/src/components/main/mail/MailBody.jsx new file mode 100644 index 0000000..1b5d5cc --- /dev/null +++ b/src/components/main/mail/MailBody.jsx @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; + +import './MailBody.css' + +export class MailBody extends Component { + constructor(props) { + super(props); + } + + render() { + return( +
+

{this.props.text}

+
+ × +
+
+ ); + } +} + diff --git a/src/components/main/mail/MailContent.css b/src/components/main/mail/MailContent.css new file mode 100644 index 0000000..f18573c --- /dev/null +++ b/src/components/main/mail/MailContent.css @@ -0,0 +1,46 @@ +.mail-content { + width: 70%; + min-width: 730px; + min-height: 500px; + height: 90vh; +} + +.mail-content_view { + position: relative; + margin-left: 180px; + border-radius: 3px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34); + background-color: #fff; +} + +.footer_view { + border-top: 1px solid #e2e2e2; + bottom: 0; + height: 33px; + position: absolute; +} + +.footer { + width: 100%; +} + +.footer__site-information { + width: 345px; + height: 12px; + float: right; +} + +.footer__site-information_view { + margin: 1% 1% 0 0; + color: #9b9b9b; + font: normal 500 11px normal HelveticaNeue; + letter-spacing: normal; + font-stretch: normal; + text-align: right; +} + +.footer__link_view { + color: #9b9b9b; + margin-right: 20px; + text-decoration: none; +} diff --git a/src/components/main/mail/MailContent.jsx b/src/components/main/mail/MailContent.jsx new file mode 100644 index 0000000..3f454ae --- /dev/null +++ b/src/components/main/mail/MailContent.jsx @@ -0,0 +1,173 @@ +import React, { Component } from 'react'; + +import { MailAction } from './MailAction'; +import { MailFactory } from './MailFactory'; +import { MailBody } from './MailBody'; + +import { FIVE_MIN, MESSAGES_LIMIT, getRandomInt, getLocalDate, getRandomMail, MailState } from './mailUtils'; + +import './MailContent.css'; + +export class MailContent extends Component { + constructor(props) { + super(props); + this.state = { mails: [] }; + + this.createNewMail = this.createNewMail.bind(this); + this.addNewMail = this.addNewMail.bind(this); + this.isAllMarked = this.isAllMarked.bind(this); + this.markAll = this.markAll.bind(this); + this.updateAllMarked = this.updateAllMarked.bind(this); + this.isMailMarked = this.isMailMarked.bind(this); + this.removeMarkedMails = this.removeMarkedMails.bind(this); + this.openMail = this.openMail.bind(this); + this.closeMail = this.closeMail.bind(this); + + this.markedMails = new Set(); + + setInterval(this.addNewMail, FIVE_MIN); + } + + render() { + var content; + if (this.state.text) + content = ; + else + content = ( + + ); + + + return ( +
+ + {content} + +
+ ); + } + + + openMail(id) { + const mailText = this.state.mails[id].text; + this.setState({ + text: mailText + }); + } + + closeMail() { + this.setState({ + text: null + }); + } + + removeMarkedMails() { + const mails = this.state.mails; + const limit = Math.max(mails.length - MESSAGES_LIMIT, 0); + let notDeletedMails = []; + var deletedMails = 0; + for (var i = limit; i < mails.length; i++) { + if (this.markedMails.has(i)) { + deletedMails++; + mails[i].toDelete = true; + } else { + notDeletedMails.push(mails[i]); + } + } + if (limit !== 0) { + notDeletedMails = notDeletedMails.concat(mails.slice(0, limit)); + } + this.markedMails.clear(); + this.setState({ + mails: mails + }); + setTimeout(() => { + this.setState({ mails: notDeletedMails }); + }, 1000); + } + + markAll() { + let wasMakedAll = this.isAllMarked(); + this.markedMails.clear(); + let mails = this.state.mails; + if (!wasMakedAll) { + let limit = Math.max(mails.length - MESSAGES_LIMIT, 0); + for (var i = mails.length - 1; i >= limit; i--) { + this.markedMails.add(i); + } + } + + this.setState({ + mails: mails + }); + } + + isAllMarked() { + return this.markedMails.size > 0 && this.markedMails.size === this.state.mails.length; + } + + isMailMarked(id) { + return this.markedMails.has(id); + } + + updateAllMarked(id) { + let wasAllMarked = this.isAllMarked(); + const mails = this.state.mails; + + if (this.isMailMarked(id)) + this.markedMails.delete(id); + else + this.markedMails.add(id); + + if (this.isAllMarked() || wasAllMarked) { + this.setState({ mails: mails }); + return true; + } + return false; + } + + async createNewMail() { + let mailTemplate = await getRandomMail(); + let date = getLocalDate(); + let newMail = new MailState( + mailTemplate['logo'], + mailTemplate['sender'], + mailTemplate['title'], + date, + mailTemplate['text'] + ); + let otherMails = this.state.mails; + otherMails.push(newMail); + this.setState({ mails: otherMails }); + setTimeout(() => { + this.setState({ mails: otherMails }); + }, 10); + }; + + + addNewMail() { + let currentRandomTimeout = getRandomInt(FIVE_MIN); + setTimeout(this.createNewMail, currentRandomTimeout); + } +} + + diff --git a/src/components/main/mail/MailFactory.css b/src/components/main/mail/MailFactory.css new file mode 100644 index 0000000..19c985e --- /dev/null +++ b/src/components/main/mail/MailFactory.css @@ -0,0 +1,4 @@ +.content-main { + height: 92%; + overflow-y: auto; +} diff --git a/src/components/main/mail/MailFactory.jsx b/src/components/main/mail/MailFactory.jsx new file mode 100644 index 0000000..8621daa --- /dev/null +++ b/src/components/main/mail/MailFactory.jsx @@ -0,0 +1,44 @@ +import React, { Component } from 'react'; + +import { MESSAGES_LIMIT } from './mailUtils'; +import { Mail } from './Mail'; + +import './MailFactory.css'; + +export class MailFactory extends Component { + constructor(props) { + super(props); + this.initMails = this.initMails.bind(this); + } + + render() { + return (
{this.initMails()}
); + } + + initMails() { + const mailsInfo = this.props.mails; + const mailComponents = []; + const limit = Math.max(mailsInfo.length - MESSAGES_LIMIT, 0); + + for (var i = mailsInfo.length - 1; i >= limit; i--) { + const info = mailsInfo[i]; + const newMail = ; + mailComponents.push(newMail); + mailsInfo[i].justAdded = false; + + } + return mailComponents; + } +} diff --git a/src/components/main/mail/mailUtils.js b/src/components/main/mail/mailUtils.js new file mode 100644 index 0000000..2de1621 --- /dev/null +++ b/src/components/main/mail/mailUtils.js @@ -0,0 +1,46 @@ +const MONTH = ['янв', 'фев', 'март', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']; +export const FIVE_MIN = 60 * 5 * 1000; +export const MESSAGES_LIMIT = 30; + +const senders = ['Принц Рашид', 'Спортлото', 'Дальний родственник', 'Димас', 'Физрук', 'IBM']; + +export const getRandomInt = limit => { + return Math.floor(Math.random() * (Math.floor(limit) + 1)); +}; + +function getRandomSender() { + return senders[getRandomInt(senders.length - 1)]; +} + +async function getRandomThemeAndText() { + const responseText = await fetch('https://baconipsum.com/api/?type=meat-and-filler'); + const responseTheme = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=1'); + const dataText = await responseText.json(); + const dataTheme = await responseTheme.json(); + return [dataTheme[0], dataText[0]]; +} + +export const getLocalDate = () => { + const date = new Date(); + return `${date.getDate()} ${MONTH[date.getMonth()]}`; +}; + +export async function getRandomMail() { + const senderName = getRandomSender(); + const logo = senderName[0]; + const [title, text] = await getRandomThemeAndText(); + return { logo: logo, sender: senderName, title: title, text: text }; +} + + +export class MailState { + constructor(logo, sender, title, time, text) { + this.logo = logo; + this.sender = sender; + this.title = title; + this.time = time; + this.text = text; + this.justAdded = true; + this.toDelete = false; + } +} diff --git a/src/components/main/sidebar/Sidebar.css b/src/components/main/sidebar/Sidebar.css new file mode 100644 index 0000000..36f6a5d --- /dev/null +++ b/src/components/main/sidebar/Sidebar.css @@ -0,0 +1,64 @@ +a { + color: #000; + text-decoration: none; +} + +.sidebar { + width: 147px; + height: 100%; +} + +.sidebar_position { + top: 64px; + left: 22px; + position: absolute; +} + +.sidebar__mail-send { + width: 147px; + height: 32px; +} + +.sidebar__mail-send_view { + margin-bottom: 8px; + border-radius: 3px; + background-color: #6287bd; + border: none; + font: normal 500 12px normal HelveticaNeue; + letter-spacing: normal; + font-stretch: normal; + color: #fff; +} + +.sidebar__items { + margin: 0; + padding-left: 0; +} + +.sidebar__item { + width: 147px; + height: 22px; +} + +.sidebar__item:hover { + border-radius: 3px; + background-color: #cdd6e4; +} + +.sidebar__item_view { + margin: 0; + padding: 0; + color: #707070; + list-style-type: none; +} + +.sidebar__item-paragraph { + width: 70px; + margin: 0; + padding: 4px 67px 5px 10px; + font: normal 500 11px normal HelveticaNeue; + font-stretch: normal; + letter-spacing: normal; +} + + diff --git a/src/components/main/sidebar/Sidebar.jsx b/src/components/main/sidebar/Sidebar.jsx new file mode 100644 index 0000000..e5c45f3 --- /dev/null +++ b/src/components/main/sidebar/Sidebar.jsx @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; + +import './Sidebar.css'; + + +export class Sidebar extends Component { + render() { + const sidebarElements = ['Входящие', 'Отправленные', 'Удаленные', 'Спам', 'Черновики', 'Создать папку'] + const liElems = sidebarElements.map(elem => ) + + return ( +
+ +
    {liElems}
+
+ ); + } +} + +function BarItem(props) { + const className = 'sidebar__item sidebar__item_view'; + return ( +
  • +

    {props.title}

     +
    • + ); +} diff --git a/src/index.css b/src/index.css index 2b6e525..98dd98c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,7 @@ body { padding: 0; margin: 0; + background-color: #e5eaf0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; diff --git a/src/resources/images/yandex-logo.svg b/src/resources/images/yandex-logo.svg new file mode 100644 index 0000000..20a1170 --- /dev/null +++ b/src/resources/images/yandex-logo.svg @@ -0,0 +1,91 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + Яндекс Почта + +