Даминов Нодир М3339 #31

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.

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

Open

DaminovN wants to merge 3 commits into itmo2019:master from DaminovN:master

public/index.html

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,16 +2,15 @@
  
    <html lang="ru">

      <head>

        <meta charset="utf-8" />

        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

        <link rel="shortcut icon" href="%PUBLIC_URL%/ya-mail-favicon.png" />

        <meta

          name="viewport"

          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>

        <div id="root"></div>

      </body>

    </html>

public/ya-mail-favicon.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/app/app.css

-Original file line number
+Diff line change
@@ -1,27 +1,98 @@
-    .app {
-      text-align: center;
+    @font-face {
+      font-family: YandexSansBold;
+      font-weight: 700;
+      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("../fonts/YandexSansDisplay-Thin.ttf");
     }
-    .app-link {
-      color: #61dafb;
+    @font-face {
+      font-family: HelveticaNeueLight;
+      src: url("../fonts/HelveticaNeueCyr-Light.otf");
     }
-    @keyframes app-logo-spin {
-      from {
-        transform: rotate(0deg);
+    @font-face {
+      font-family: HelveticaNeue;
+      src: url("../fonts/HelveticaNeueCyr-Medium.otf");
+    }
+    .page {
+      position: relative;
+      min-width: 800px;
+      padding-right: 20px;
+      min-height: 100%;
+    }
+    ul{
+      list-style-type: none;
+    }
+    a, a:active, a:visited, a:hover {
+      color: unset;
+      text-decoration: none;
+      position: unset !important;
+    }
+    .page_inline{
+      display: inline;
+      text-decoration-color: red;
+    }
+    .page_text-overflow_hide{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .page_visibility_hide{
+      visibility: hidden;
+    }
+    .page_checkbox{
+      width: 16px;
+      height: 16px;
+    }
+    .create_animation{
+      animation: add 1s forwards;
+    }
+    .delete_animation{
+      animation: remove 1s forwards;
+    }
+    @keyframes add{
+%{
+          height: 0;
+          opacity: 0;
+      }
+%{
+          height: 500px;
+          opacity: 0.5;
       }
-      to {
-        transform: rotate(360deg);
+%{
+          opacity: 1;
+      }
+    }
+    @keyframes remove{
+%{
+          height: 22px;
+          opacity: 1;
+      }
+%{
+          height: 500px;
+          opacity: 0.5;
+      }
+%{
+          height: 0px;
+          opacity: 0;
       }
     }

src/app/app.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,23 +2,158 @@ import React, { Component } from 'react'; @@
     import './app.css';
+    import { Header } from './header/header';
+    import { YaSideBar } from './ya-sidebar/ya-sidebar';
+    import { YaMail } from './ya-mail/ya-mail';
     export class App extends Component {
+      constructor(props) {
+        super(props);
+        this.createMessage = this.createMessage.bind(this);
+        this.buildMessage = this.buildMessage.bind(this);
+        this.deleteSelected = this.deleteSelected.bind(this);
+        this.selectCheckBox = this.selectCheckBox.bind(this);
+        this.selectAll = this.selectAll.bind(this);
+        this.newMailTime = this.newMailTime.bind(this);
+        this.setNextRand = this.setNextRand.bind(this);
+        this.authors = ['Антон', 'Саша', 'Алексей'];
+        this.subject = ['Путешествие', 'Стажировка', 'Виза'];
+        this.text = [
+          'Когда планируема дата вашего приезда ?',
+          'Где вы собираетесь оставаться ?',
+          'Ты опоздал с дедлайном'
+        ];
+        this.dates = ['1 янв', '2 фев', '3 март', '4 апр', '5 авг'];
+        this.minTime = 10;
+        this.maxTime = 1000 * 60 * 10 - this.minTime;
+        this.state = {
+          messageList: [],
+          allSelected: false
+        };
+      }
+      componentDidMount() {
+        this.newMailTime();
+      }
+      newMailTime() {
+        this.createMessage();
+        this.setNextRand();
+      }
+      setNextRand() {
+        setTimeout(this.newMailTime, Math.random() * this.maxTime + this.minTime);
+      }
+      buildMessage() {
+        const id = new Date().getTime();
+        const messageText = this.text[Math.floor(Math.random() * this.text.length)];
+        const messageAuthor = this.authors[Math.floor(Math.random() * this.authors.length)];
+        const messageSubject = this.subject[Math.floor(Math.random() * this.subject.length)];
+        const messageDate = this.dates[Math.floor(Math.random() * this.dates.length)];
+        return {
+          id,
+          messageAuthor,
+          messageSubject,
+          messageDate,
+          messageText,
+          selected: false,
+          addAnimation: true,
+          deleteAnimation: false
+        };
+      }
+      createMessage() {
+        this.setState(prevState => {
+          const newMessageList = prevState.messageList;
+          if (prevState.messageList.length >= 30) {
+            return {
+              messageList: newMessageList
+            };
+          }
+          const newMessage = this.buildMessage();
+          const curId = newMessage.id;
+          setTimeout(() => {
+            this.setState(prevSt => {
+              return prevSt.messageList.map(message => {
+                if (message.id === curId) {
+                  const updMessage = message;
+                  updMessage.addAnimation = false;
+                  return updMessage;
+                }
+                return message;
+              });
+            });
+          }, 1500);
+          newMessageList.unshift(newMessage);
+          return {
+            messageList: newMessageList
+          };
+        });
+      }
+      deleteSelected() {
+        this.setState(prevState => {
+          return {
+            messageList: prevState.messageList.map(message => {
+              if (message.selected) {
+                const updMessage = message;
+                updMessage.deleteAnimation = true;
+                return updMessage;
+              }
+              return message;
+            }),
+            allSelected: false
+          };
+        });
+        setTimeout(() => {
+          this.setState(prevState => {
+            return {
+              messageList: prevState.messageList.filter(message => !message.selected)
+            };
+          });
+        }, 1500);
+      }
+      selectAll() {
+        this.setState(prevState => {
+          const newMessageList = prevState.messageList;
+          for (let i = 0; i < newMessageList.length; i++) {
+            newMessageList[i].selected = !newMessageList[i].selected;
+          }
+          return {
+            messageList: newMessageList,
+            allSelected: !prevState.allSelected
+          };
+        });
+      }
+      selectCheckBox(messageIndex) {
+        this.setState(prevState => {
+          const newMessageList = prevState.messageList;
+          newMessageList[messageIndex].selected = !newMessageList[messageIndex].selected;
+          return {
+            messagesList: newMessageList
+          };
+        });
+      }
       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>
+          <div className="page">
+            <Header createMessage={this.createMessage} />
+            <YaSideBar />
+            <YaMail
+              messageList={this.state.messageList}
+              deleteSelected={this.deleteSelected}
+              selectCheckBox={this.selectCheckBox}
+              selectAll={this.selectAll}
+              allSelected={this.state.allSelected}
+            />
           </div>
         );
       }
@@ Expand Down @@

src/app/header/header.css

-Original file line number
+Diff line change
@@ -0,0 +1,8 @@
+    .page__header {
+      display: inline-block;
+      width: 100%;
+      height: 31px;
+      position: relative;
+      margin-top: 13px;
+      margin-bottom: 13px;
+    }

src/app/header/header.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,21 @@
+    import React, { Component } from 'react';
+    import './header.css';
+    import Menu from './menu/menu';
+    import YaMailLogo from './ya-mail-logo/ya-mail-logo';
+    import SearchBar from './search-bar/search-bar';
+    import MessageCreator from './message-creator/message-creator';
+    export class Header extends Component {
+      render() {
+        return (
+          <header className="page__header">
+            <Menu />
+            <YaMailLogo />
+            <SearchBar />
+            <MessageCreator createMessage={this.props.createMessage} />
+          </header>
+        );
+      }
+    }

src/app/header/menu/menu.css

-Original file line number
+Diff line change
@@ -0,0 +1,9 @@
+    .page__ya-menu-logo{
+      margin-left: 22px;
+    }
+    .page__sidebar-menu{
+      position: relative;
+      vertical-align: bottom;
+      bottom: 3px;
+    }

src/app/header/menu/menu.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    import React from 'react';
+    import './menu.css';
+    import SidebarMenu from '../../../images/sidebar-menu.png';
+    function Menu() {
+      return (
+        <div className="page_inline page__ya-menu-logo">
+          <a href="/">
+            <img className="page__sidebar-menu" src={SidebarMenu} alt="menu" width="25" height="29" />
+          </a>
+        </div>
+      );
+    }
+    export default Menu;

src/app/header/message-creator/message-creator.css

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    .page__message-creator {
+      display: inline-block;
+      position: relative;
+      left: 18%;
+      opacity: 0.5;
+      cursor: pointer;
+    }

src/app/header/message-creator/message-creator.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,15 @@
+    import React from 'react';
+    import './message-creator.css';
+    class MessageCreator extends React.Component {
+      render() {
+        return (
+          <button className="page__message-creator" type="button" onClick={this.props.createMessage}>
+            New Mail
+          </button>
+        );
+      }
+    }
+    export default MessageCreator;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Даминов Нодир М3339 #31

Uh oh!

Diff view

Diff view

There are no files selected for viewing

evgenymarkov May 23, 2019

Uh oh!

Uh oh!

Даминов Нодир М3339 #31

Are you sure you want to change the base?

Uh oh!

Даминов Нодир М3339 #31

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

evgenymarkov May 23, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!