diff --git a/public/index.html b/public/index.html
index 9a8ef8f..5d57a79 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
- React App
+ Яндекс.Почта
diff --git a/src/app/app.css b/src/app/app.css
index 1c4d511..69bbb16 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -1,27 +1,29 @@
-.app {
- text-align: center;
+@font-face {
+ font-family: YandexSansBold;
+ src: url(fonts/YandexSansDisplay-Bold.ttf);
}
-.app-header {
- display: flex;
- min-height: 100vh;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #282c34;
- color: #fff;
- font-size: calc(10px + 2vmin);
+@font-face {
+ font-family: YandexSansThin;
+ src: url(/src/app/fonts/YandexSansDisplay-Thin.ttf);
}
-.app-link {
- color: #61dafb;
+@font-face {
+ font-family: HelveticaNeue;
+ src: url(/src/app/fonts/HelveticaNeueCyr-Medium.otf);
}
-@keyframes app-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+@font-face {
+ font-family: HelveticaNeueLight;
+ src: url(/src/app/fonts/HelveticaNeueCyr-Light.otf);
+}
+
+body {
+ position: relative;
+
+ min-width: 750px;
+ max-width: 1600px;
+ padding: 0;
+ margin: 0 auto;
+ background: #e5eaf0;
}
diff --git a/src/app/app.jsx b/src/app/app.jsx
index f759eed..9574d3e 100644
--- a/src/app/app.jsx
+++ b/src/app/app.jsx
@@ -1,24 +1,17 @@
import React, { Component } from 'react';
import './app.css';
+import { Header } from './structure/header/header';
+import { Menu } from './structure/menu/menu';
+import { MainContent } from './structure/main-content/mainContent';
export class App extends Component {
render() {
return (
);
}
diff --git a/src/app/fonts/HelveticaNeueCyr-Light.otf b/src/app/fonts/HelveticaNeueCyr-Light.otf
new file mode 100755
index 0000000..7ced49a
Binary files /dev/null and b/src/app/fonts/HelveticaNeueCyr-Light.otf differ
diff --git a/src/app/fonts/HelveticaNeueCyr-Medium.otf b/src/app/fonts/HelveticaNeueCyr-Medium.otf
new file mode 100755
index 0000000..a2cde16
Binary files /dev/null and b/src/app/fonts/HelveticaNeueCyr-Medium.otf differ
diff --git a/src/app/fonts/YandexSansDisplay-Bold.ttf b/src/app/fonts/YandexSansDisplay-Bold.ttf
new file mode 100755
index 0000000..d901f4b
Binary files /dev/null and b/src/app/fonts/YandexSansDisplay-Bold.ttf differ
diff --git a/src/app/fonts/YandexSansDisplay-Thin.ttf b/src/app/fonts/YandexSansDisplay-Thin.ttf
new file mode 100755
index 0000000..3b8e196
Binary files /dev/null and b/src/app/fonts/YandexSansDisplay-Thin.ttf differ
diff --git a/src/app/structure/header/header.css b/src/app/structure/header/header.css
new file mode 100644
index 0000000..edc064c
--- /dev/null
+++ b/src/app/structure/header/header.css
@@ -0,0 +1,35 @@
+/*Start SearchInput*/
+
+.header {
+ margin-top: 7px;
+ margin-bottom: 18px;
+ margin-left: 22px;
+}
+
+.header__lines,
+.header__main-logo {
+ margin: 0;
+ float: left;
+}
+
+.header__lines {
+ margin-top: 12px;
+}
+
+.header__line {
+ width: 20px;
+ height: 3px;
+ margin-top: 4px;
+ background-color: #000000;
+}
+
+.header__main-logo {
+ margin-top: 7px;
+ margin-left: 11px;
+}
+
+.clearfix:after {
+ display: table;
+ clear: both;
+ content: '';
+}
diff --git a/src/app/structure/header/header.jsx b/src/app/structure/header/header.jsx
new file mode 100644
index 0000000..6267f69
--- /dev/null
+++ b/src/app/structure/header/header.jsx
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+import './header.css';
+import logo from './images/logo.png';
+import { SearchInput } from './searchInput/searchInput';
+
+export class Header extends Component {
+ render() {
+ return (
+
+
+
+
+
+
(this.inputVal = el)}
+ placeholder="Поиск"
+ className="header__input"
+ />
+
+
+
{
+ if (!this.props.isLetterOpened) this.selectAll();
+ }}
+ />
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
{
+ this.closeLetter();
+ }}
+ />
+
{this.props.text}
+
+
this.onCheckboxChange(this.props.id)}
+ checked={this.props.isChecked}
+ />
+
this.openLetter(this.props.text)}>
+
+
+
+
{this.props.author}
+
+
{this.props.topic}
+
+
+
+ {this.props.letters.map(letter => {
+ if (letter.isVisible)
+ return (
+
+ );
+ })}
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/letters/letters-list/lettersList.css b/src/app/structure/main-content/letters/letters-list/lettersList.css
new file mode 100644
index 0000000..fd91245
--- /dev/null
+++ b/src/app/structure/main-content/letters/letters-list/lettersList.css
@@ -0,0 +1,45 @@
+.main-block__all-letters {
+ overflow: scroll;
+ height: calc(100vh - 14px);
+ padding: 0;
+ margin: 0;
+}
+
+.animation-insert {
+ animation: inserting 0.5s linear;
+}
+
+.all-letter-down {
+ animation: down 0.6s linear;
+}
+
+.animation-delete {
+ animation: deleting 0.6s linear;
+}
+
+@keyframes inserting {
+ 0% {
+ transform: scale(0.5);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes down {
+ 0% {
+ transform: translateY(-40px);
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes deleting {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(0.5);
+ }
+}
diff --git a/src/app/structure/main-content/letters/letters.css b/src/app/structure/main-content/letters/letters.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/structure/main-content/letters/letters.jsx b/src/app/structure/main-content/letters/letters.jsx
new file mode 100644
index 0000000..eb1002e
--- /dev/null
+++ b/src/app/structure/main-content/letters/letters.jsx
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import './letters.css';
+import { LetterPage } from './letter-page/letterPage';
+import { LetterList } from './letters-list/letterList';
+
+export class Letters extends Component {
+ render() {
+ return this.props.isLetterOpened ? (
+
+ ) : (
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/mainContent.css b/src/app/structure/main-content/mainContent.css
new file mode 100644
index 0000000..909b74c
--- /dev/null
+++ b/src/app/structure/main-content/mainContent.css
@@ -0,0 +1,14 @@
+.main-block {
+ position: relative;
+
+ width: calc(100% - 230px);
+ min-width: 515px;
+ min-height: 300px;
+ padding: 0;
+ margin: 0 20px 14px 22px;
+
+ background-color: #ffffff;
+ border-radius: 3px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
+ float: right;
+}
diff --git a/src/app/structure/main-content/mainContent.jsx b/src/app/structure/main-content/mainContent.jsx
new file mode 100644
index 0000000..8e68e7d
--- /dev/null
+++ b/src/app/structure/main-content/mainContent.jsx
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+
+import './mainContent.css';
+import { Letters } from './letters/letters';
+import { AllFunctions } from './all-functions/allFunctions';
+import { generateNewLetter, randomInt } from './scripts/generator';
+import { Footer } from './footer/footer';
+
+const LETTERS_ON_PAGE = 30;
+
+export class MainContent extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isLetterOpened: false,
+ openedLetterText: null,
+ letters: [],
+ isAllChecked: false,
+ checkedLetters: {}
+ };
+
+ this.onCheckboxChange = this.onCheckboxChange.bind(this);
+ this.selectAll = this.selectAll.bind(this);
+ this.newMail = this.newMail.bind(this);
+ this.deleteLetter = this.deleteLetter.bind(this);
+ this.getRandomLetter = this.getRandomLetter.bind(this);
+ this.openLetter = this.openLetter.bind(this);
+ this.closeLetter = this.closeLetter.bind(this);
+
+ setTimeout(this.getRandomLetter, 100);
+ }
+
+ onCheckboxChange(id) {
+ this.setState(prevState => {
+ const newCheckedLetters = prevState.checkedLetters;
+ newCheckedLetters[id] = !newCheckedLetters[id];
+ return {
+ isAllChecked: false,
+ checkedLetters: newCheckedLetters
+ };
+ });
+ }
+
+ getRandomLetter() {
+ const t = randomInt(10, 300000) + 300000;
+ this.newMail();
+ setTimeout(this.getRandomLetter, t);
+ }
+
+ selectAll() {
+ this.setState(prevState => {
+ const newCheckedLetters = prevState.checkedLetters;
+ prevState.letters.forEach(letter => {
+ if (letter.isVisible) {
+ newCheckedLetters[letter.key] = !prevState.isAllChecked;
+ }
+ });
+ return {
+ isAllChecked: !prevState.isAllChecked,
+ checkedLetters: newCheckedLetters
+ };
+ });
+ }
+
+ newMail() {
+ const newLetter = generateNewLetter();
+ this.setState(prevState => {
+ const newCheckedLetters = prevState.checkedLetters;
+ const newLetters = prevState.letters;
+ newCheckedLetters[newLetter.id] = false;
+ for (let i = newLetters.length - 1; i >= LETTERS_ON_PAGE - 1; i--) {
+ newLetters[i].isVisible = false;
+ newLetters[i].isChecked = false;
+ newCheckedLetters[newLetters[i].key] = false;
+ }
+ return {
+ letters: [newLetter, ...newLetters],
+ checkedLetters: newCheckedLetters,
+ isAllChecked: false
+ };
+ });
+ }
+
+ deleteLetter() {
+ this.setState(prevState => {
+ const newLetters = prevState.letters.filter(letter => !prevState.checkedLetters[letter.key]);
+ for (let i = 0; i < Math.min(newLetters.length, LETTERS_ON_PAGE); i++) {
+ newLetters[i].isVisible = true;
+ }
+ return {
+ letters: newLetters,
+ isAllChecked: false
+ };
+ });
+ }
+
+ openLetter(text) {
+ this.setState({
+ isLetterOpened: true,
+ openedLetterText: text
+ });
+ }
+
+ closeLetter() {
+ this.setState({
+ isLetterOpened: false,
+ openedLetterText: null
+ });
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/scripts/generator.js b/src/app/structure/main-content/scripts/generator.js
new file mode 100644
index 0000000..a90f2bb
--- /dev/null
+++ b/src/app/structure/main-content/scripts/generator.js
@@ -0,0 +1,119 @@
+const companies = ['ebay', 'facebook', 'live', 'yandex', 'live', 'reddit', 'twitter', 'youtube'];
+const topics = [
+ 'Внимание!',
+ 'Добро пожаловать!',
+ 'Обновление',
+ 'Получите приз!',
+ 'Восстановление аккаунта',
+ 'Ищем сотрудников',
+ 'Спасибо за отзыв'
+];
+const hello = ['Здравствуйте!', 'Добрый день!', 'Привет!', 'Приветствую!', 'Салют!'];
+const word1 = ['Я', 'Меня зовут', 'Это'];
+const firstName = ['Виталий', 'Андрей', 'Владимир', 'Алексей', 'Артём', 'Антон'];
+const secondName = [
+ 'Соболев',
+ 'Чиркин',
+ 'Борисов',
+ 'Орехов',
+ 'Гаврилов',
+ 'Иванов',
+ 'Сергеев',
+ 'Онегин'
+];
+const phrase1 = [
+ 'Так вышло, что',
+ 'Нам стало известно, что',
+ 'Сообщаем вам, что',
+ 'Как вы могли заметить,',
+ 'С сегоднящнего дня'
+];
+const nouns1 = ['эксперт', 'редактор', 'программист', 'рабочий'];
+const verbs = [
+ 'взломал',
+ 'проверил',
+ 'удалил',
+ 'исправил',
+ 'закрыл',
+ 'заметил',
+ 'пометил',
+ 'пересмотрел',
+ 'передал'
+];
+const nouns2 = ['счет', 'аккаунт', 'пароль', 'кабинет'];
+const adjectives = [
+ 'идеальный',
+ 'прямой',
+ 'обратный',
+ 'наш',
+ 'постоянный',
+ 'великолепный',
+ 'исключительный',
+ 'личный',
+ 'ваш'
+];
+
+let counter = 0;
+
+export function randomInt(min, max) {
+ return Math.floor((max - min) * Math.random() + min);
+}
+
+function randFromList(list) {
+ return list[randomInt(0, list.length)];
+}
+
+const randomDate = () => {
+ const m = randomInt(1, 12);
+ let day = randomInt(1, 30);
+ if (m === 2) day = Math.min(28, day);
+ const month = [
+ 'янв',
+ 'фев',
+ 'мар',
+ 'апр',
+ 'май',
+ 'июн',
+ 'июл',
+ 'авг',
+ 'сен',
+ 'окт',
+ 'ноя',
+ 'дек'
+ ];
+ return `${String(day)} ${String(month[m - 1])}`;
+};
+
+const generateText = sender => {
+ const textContent = [
+ `${randFromList(hello)} ${randFromList(word1)} ${randFromList(firstName)} ${randFromList(
+ secondName
+ )}, глава компании ${sender.toUpperCase()}.`
+ ];
+ textContent.push(
+ `${randFromList(phrase1)} ${randFromList(adjectives)} ${randFromList(nouns1)} ${randFromList(
+ verbs
+ )} ${randFromList(adjectives)} ${randFromList(nouns2)}.`
+ );
+ return textContent;
+};
+
+export const generateNewLetter = () => {
+ counter++;
+ const id = counter;
+ const author = randFromList(companies);
+ const text = generateText(author);
+ const topic = randFromList(topics);
+ const date = randomDate();
+
+ return {
+ key: `id${id}`,
+ id: `id${id}`,
+ text,
+ author,
+ topic,
+ date,
+ isChecked: false,
+ isVisible: true
+ };
+};
diff --git a/src/app/structure/menu/menu.css b/src/app/structure/menu/menu.css
new file mode 100644
index 0000000..bafed00
--- /dev/null
+++ b/src/app/structure/menu/menu.css
@@ -0,0 +1,53 @@
+.menu {
+ width: 147px;
+ max-width: 170px;
+ margin-left: 22px;
+ float: left;
+}
+
+.menu__to-write {
+ width: 147px;
+ height: 32px;
+
+ border: none;
+ background-color: #6287bd;
+ border-radius: 3px;
+ color: #ffffff;
+ font-family: "'HelveticaNeue'", sans-serif;
+ font-size: 12px;
+}
+
+.menu__to-write:hover {
+ box-shadow: 2px 2px rgba(0, 0, 0, 0.6);
+}
+
+.menu__bar {
+ padding: 0;
+}
+
+.menu__action {
+ width: 147px;
+ height: 22px;
+ margin-top: 2px;
+ border-radius: 3px;
+ list-style: none;
+}
+
+.menu__text-ref {
+ display: block;
+ padding-left: 10px;
+ color: #555555;
+ font-family: "'HelveticaNeue'", sans-serif;
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 22px;
+ text-decoration: none;
+}
+
+.menu__action:hover {
+ background-color: #cdd6e4;
+}
+
+.menu__text-ref:hover {
+ font-weight: 700;
+}
diff --git a/src/app/structure/menu/menu.jsx b/src/app/structure/menu/menu.jsx
new file mode 100644
index 0000000..7cc0737
--- /dev/null
+++ b/src/app/structure/menu/menu.jsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+import './menu.css';
+
+const actions = [
+ { title: 'Входящие', fragment: 'inbox' },
+ { title: 'Отправленные', fragment: 'sent' },
+ { title: 'Удалённые', fragment: 'deleted' },
+ { title: 'Спам', fragment: 'spam' },
+ { title: 'Черновики', fragment: 'drafts' },
+ { title: 'Создать папку', fragment: 'createdir' }
+];
+
+export class Menu extends Component {
+ render() {
+ return (
+
+ );
+ }
+}