itmo2019 · alexust27 · May 11, 2019 · May 11, 2019 · May 20, 2019
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <title>React App</title>
+    <title>Яндекс.Почта</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git 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
@@ -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 (
       <div className="app">
-        <header className="app-header">
-          <p>
-            Edit <code>src/app/app.jsx</code> and save to reload.
-          </p>
-          <a
-            className="app-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <Header />
+        <Menu />
+        <MainContent />
       </div>
     );
   }

diff --git a/src/app/fonts/HelveticaNeueCyr-Light.otf b/src/app/fonts/HelveticaNeueCyr-Light.otf
diff --git a/src/app/fonts/HelveticaNeueCyr-Medium.otf b/src/app/fonts/HelveticaNeueCyr-Medium.otf
diff --git a/src/app/fonts/YandexSansDisplay-Bold.ttf b/src/app/fonts/YandexSansDisplay-Bold.ttf
diff --git a/src/app/fonts/YandexSansDisplay-Thin.ttf b/src/app/fonts/YandexSansDisplay-Thin.ttf
diff --git a/src/app/structure/header/header.css 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
@@ -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 (
+      <header className="header clearfix">
+        <div className="header__lines">
+          <div className="header__line" />
+          <div className="header__line" />
+          <div className="header__line" />
+        </div>
+        <div className="header__main-logo">
+          <img src={logo} alt="logo" />
+        </div>
+        <SearchInput />
+      </header>
+    );
+  }
+}
diff --git a/src/app/structure/header/images/logo.png b/src/app/structure/header/images/logo.png
diff --git a/src/app/structure/header/images/reset.png b/src/app/structure/header/images/reset.png
diff --git a/src/app/structure/header/searchInput/searchInput.css b/src/app/structure/header/searchInput/searchInput.css
@@ -0,0 +1,32 @@
+.header__search {
+  width: 37%;
+  height: 32px;
+  margin-top: 11px;
+  margin-left: 114px;
+  background: #f2f5f8;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  float: left;
+}
+
+.header__input {
+  display: inline-block;
+  width: calc(100% - 50px);
+  height: 26px;
+  margin-left: 16px;
+
+  border: none;
+  background: none;
+  outline: none;
+  vertical-align: center;
+}
+
+.header__button {
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin: 10px;
+
+  border: none;
+  background: #f2f5f8;
+  float: right;
+}
diff --git a/src/app/structure/header/searchInput/searchInput.jsx b/src/app/structure/header/searchInput/searchInput.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import './searchInput.css';
+import reset from '../images/reset.png';
+
+export class SearchInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputVal = '';
+  }
+
+  resetForm = () => {
+    this.inputVal.value = '';
+  };
+
+  render() {
+    return (
+      <div className="header__search">
+        <input
+          type="text"
+          ref={el => (this.inputVal = el)}
+          placeholder="Поиск"
+          className="header__input"
+        />
+        <button type="button" className="header__button" onClick={this.resetForm}>
+          <img src={reset} height="12" width="12" alt="reset" />
+        </button>
+      </div>
+    );
+  }
+}
diff --git a/src/app/structure/main-content/all-functions/Button/Button.css b/src/app/structure/main-content/all-functions/Button/Button.css
@@ -0,0 +1,13 @@
+.main-block__ref-func {
+  border: none;
+  background: none;
+  color: #cccccc;
+  font-family: "'HelveticaNeue'", sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.main-block__ref-func:hover {
+  border-bottom: 2px solid #cccccc;
+}
diff --git a/src/app/structure/main-content/all-functions/Button/Button.jsx b/src/app/structure/main-content/all-functions/Button/Button.jsx
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import './Button.css';
+
+export class Button extends Component {
+  constructor(props) {
+    super(props);
+    this.action = this.props.action.bind(this);
+  }
+
+  render() {
+    return (
+      <button
+        type="button"
+        id={this.props.id}
+        className="main-block__ref-func"
+        onClick={() => {
+          if (!this.props.isLetterOpened) this.action();
+        }}
+      >
+        {this.props.title}
+      </button>
+    );
+  }
+}
diff --git a/src/app/structure/main-content/all-functions/allFunctions.css b/src/app/structure/main-content/all-functions/allFunctions.css
@@ -0,0 +1,37 @@
+.clearfix:after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.check {
+  width: 16px;
+  height: 16px;
+  margin: 12px;
+
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background-color: #ffffff;
+  border-radius: 3px;
+  float: left;
+}
+
+.hidden-check {
+  display: none;
+}
+
+.main-block__mail-functions {
+  height: 40px;
+
+  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
+}
+
+.main-block__all-function {
+  padding-top: 6px;
+  margin: 0;
+}
+
+.main-block__func {
+  display: inline-block;
+  margin-left: 20px;
+  list-style: none;
+}
diff --git a/src/app/structure/main-content/all-functions/allFunctions.jsx b/src/app/structure/main-content/all-functions/allFunctions.jsx
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+
+import './allFunctions.css';
+import { Button } from './Button/Button';
+
+export class AllFunctions extends Component {
+  constructor(props) {
+    super(props);
+    this.newMailOnClick = this.props.newMailOnClick.bind(this);
+    this.deleteLetter = this.props.deleteLetter.bind(this);
+    this.selectAll = this.props.selectAll.bind(this);
+  }
+
+  doNothing = () => {};
+
+  render() {
+    return (
+      <div className="main-block__mail-functions clearfix">
+        <input
+          type="checkbox"
+          className="check"
+          checked={this.props.isChecked}
+          onChange={() => {
+            if (!this.props.isLetterOpened) this.selectAll();
+          }}
+        />
+        <ul className="main-block__all-function">
+          <li className="main-block__func">
+            <Button
+              id="get-letter"
+              isLetterOpened={this.props.isLetterOpened}
+              action={this.newMailOnClick}
+              title="Получить"
+            />
+          </li>
+          <li className="main-block__func">
+            <Button
+              id="remove"
+              isLetterOpened={this.props.isLetterOpened}
+              action={this.deleteLetter}
+              title="Удалить"
+            />
+          </li>
+          <li className="main-block__func">
+            <Button
+              id="resend"
+              isLetterOpened={this.props.isLetterOpened}
+              action={this.doNothing}
+              title="Переслать"
+            />
+          </li>
+          <li className="main-block__func">
+            <Button
+              id="spam"
+              isLetterOpened={this.props.isLetterOpened}
+              action={this.doNothing}
+              title="Это спам"
+            />
+          </li>
+          <li className="main-block__func">
+            <Button
+              id="read"
+              isLetterOpened={this.props.isLetterOpened}
+              action={this.doNothing}
+              title="Прочитано"
+            />
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
diff --git a/src/app/structure/main-content/footer/footer.css b/src/app/structure/main-content/footer/footer.css
@@ -0,0 +1,20 @@
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 26px;
+  padding-top: 5px;
+
+  border-top: 2px solid rgba(140, 140, 140, 0.45);
+  background-color: white;
+  color: #9b9b9b;
+  font-family: "'HelveticaNeue'", sans-serif;
+  font-size: 0.7em;
+}
+
+.footer__texts {
+  margin-right: 20px;
+  float: right;
+}