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..1afd019 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -1,27 +1,18 @@ -.app { - text-align: center; +body { + height: 600px; + background-color: #e5eaf0; + margin: 0; + /*background-color: black;*/ } -.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); -} - -.app-link { - color: #61dafb; -} - -@keyframes app-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +/*@font-face {*/ +/* font-family: 'HelveticaNeueCyr-Medium';*/ +/* src: url('./src/sourse/fonts/HelveticaNeueCyr-Medium.eot');*/ +/* src: url('sourse/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),*/ +/* url('./sourse/fonts/HelveticaNeueCyr-Medium.svg#HelveticaNeueCyr-Medium') format('svg'),*/ +/* url('./sourse/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype'),*/ +/* url('./sourse/fonts/HelveticaNeueCyr-Medium.woff') format('woff'),*/ +/* url('./sourse/fonts/HelveticaNeueCyr-Medium.woff2') format('woff2');*/ +/* font-weight: normal;*/ +/* font-style: normal;*/ +/*}*/ diff --git a/src/app/app.jsx b/src/app/app.jsx index f759eed..cd7c06d 100644 --- a/src/app/app.jsx +++ b/src/app/app.jsx @@ -1,24 +1,14 @@ import React, { Component } from 'react'; import './app.css'; +import { Header } from './header/Header'; +import { Main } from './main/Main'; export class App extends Component { render() { return (
-
-

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

- - Learn React - -
+
); } diff --git a/src/app/functions/Functions.jsx b/src/app/functions/Functions.jsx new file mode 100644 index 0000000..3566b30 --- /dev/null +++ b/src/app/functions/Functions.jsx @@ -0,0 +1,44 @@ +const senders = ['Mom', 'Dad', 'Cat', 'Dog', 'Apple', 'Teacher', 'Homie', 'Mole', + 'Hare', 'BB-8', 'Porg', 'Totoro']; + +const actions = ['runs', 'waits', 'flies', 'sleeps', 'lays', 'jumps', 'sings', + 'writes', 'reads', 'executes', 'exists', 'builds', 'tests']; + +const adverbs = ['rapidly', 'at home', 'at school', 'at the university', 'on bed', + 'highly', 'alone', 'sadly', 'today']; + +const punctuationMarks = ['.', '...', '!', '?', '?!']; + +export function getRandomFromRange(minTime, maxTime) { + return Math.random() * (maxTime - minTime) + minTime; +} + +function getRandomInt(minRange, maxRange) { + return Math.trunc(getRandomFromRange(minRange, maxRange)); +} + +function genColor() { + const n = getRandomInt(0, 255); + let res = n.toString(16); + while (res.length < 2) { + res = `0${ res}`; + } + return res; +} + +export function genLetterText() { + const letterLen = getRandomInt(2, 2); + let answer = ''; + for (let i = 0; i < letterLen; i++) { + const send = senders[getRandomInt(0, senders.length)]; + const act = actions[getRandomInt(0, actions.length)]; + const adv = adverbs[getRandomInt(0, adverbs.length)]; + const punMark = punctuationMarks[getRandomInt(0, punctuationMarks.length)]; + answer += `${send } ${act} ${ adv }${punMark } `; + } + const curDate = new Date(); + const letterDate = `${curDate.getDate() } ${ curDate.toLocaleString('ru', { month: 'short' })}`; + const senderOne = senders[getRandomInt(0, senders.length)]; + const colorLetter = `#${ genColor() }${genColor() }${genColor()}`; + return {deleted: false, letterText: answer, sender: senderOne, date: letterDate, color: colorLetter }; +} diff --git a/src/app/header/Header.css b/src/app/header/Header.css new file mode 100644 index 0000000..20e442b --- /dev/null +++ b/src/app/header/Header.css @@ -0,0 +1,61 @@ +.high-part__before-lines { + margin-top: 11px; + margin-left: 22px; + height: 19px; +} + +.high-part__one-line { + width: 20px; + height: 2px; + margin-top: 4px; + background-color: #000000; +} + +.dark-side { + background-color: #ffffff; +} + +.high-part__search { + margin-top: 11px; + margin-left: 114px; + width: 301px; + height: 32px; + line-height: 100%; + background-color: #ffffff; +} + +.high-part__search-cancel-sign { + float: right; + background-color: inherit; + border: none; + padding-right: 15px; + margin-top: -25px; + /*opacity: 0.15;*/ +} + +.high-part__search-word { + border: none; + display: inline-block; + padding-left: 16px; + box-sizing: border-box; + width: 100%; + height: 100%; + opacity: 0.5; + font-size: 15px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); +} + +.high-part__yandex-mail_picture { + margin-left: 11px; + margin-top: 10px; +} + +.high-part__yandex-mail_unstressed-link { + color: inherit; + text-decoration: none; +} + +.high-part { + display: inline-block; + vertical-align: middle; +} diff --git a/src/app/header/Header.jsx b/src/app/header/Header.jsx new file mode 100644 index 0000000..5c962e9 --- /dev/null +++ b/src/app/header/Header.jsx @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; + +import './Header.css'; +import logo from '../../sourse/YandexMail.png'; +import darkLogo from '../../sourse/YandexMail-dark.png'; + +export class Header extends Component { + render() { + let darkClass; + let oneLineDark = "high-part__one-line"; + let searchDark = "high-part high-part__search"; + let actualLogo; + if (this.props.isDark) { + darkClass = 'black-side'; + oneLineDark += ' dark-side'; + searchDark += ' black-side'; + actualLogo = darkLogo; + } else { + actualLogo = logo; + } + + return ( +
+
+
+
+
+
+
+ + yandexMailPicture + +
+
+ this.props.searchLetters(e.target.value)}/> + +
+
+ ); + } +} diff --git a/src/app/main/Main.css b/src/app/main/Main.css new file mode 100644 index 0000000..4be1615 --- /dev/null +++ b/src/app/main/Main.css @@ -0,0 +1,4 @@ +.black-side { + background-color: black; + color: white; +} diff --git a/src/app/main/Main.jsx b/src/app/main/Main.jsx new file mode 100644 index 0000000..44c832b --- /dev/null +++ b/src/app/main/Main.jsx @@ -0,0 +1,235 @@ +import React, { Component } from 'react'; +import { Header } from '../header/Header'; +import { Menu } from './menu/Menu'; +import { LettersList } from './window-letters/LettersList'; +import { genLetterText, getRandomFromRange } from '../functions/Functions'; +import './Main.css'; + + +export class Main extends Component { + constructor(props) { + super(props); + this.state = { isDark: false, letters: [], openId: -1, searchedLetters: [], template: ""}; + this.letterAdded = this.letterAdded.bind(this); + this.lettersDeleted = this.lettersDeleted.bind(this); + this.letterChose = this.letterChose.bind(this); + this.allLettersChose = this.allLettersChose.bind(this); + this.openArticle = this.openArticle.bind(this); + this.openLetters = this.openLetters.bind(this); + this.markNotNew = this.markNotNew.bind(this); + this.searchLetters = this.searchLetters.bind(this); + this.setLetters = this.setLetters.bind(this); + this.changeColor = this.changeColor.bind(this); + this.curMin = 10; + this.curMax = 6001; + this.fiveMin = 3000; + this.diff = getRandomFromRange(10, 3000); + } + + openArticle(index) { + console.log('in openArticle ' + index); + this.setState(state => { + return { openId: index } + }); + } + + openLetters() { + this.setState(state => { + return { openId: -1 } + }); + } + + allLettersChose(status) { + const newLetters = this.state.letters.map(letter => { + if (letter.isVisible) { + return { ...letter, chose: status }; + } else { + return letter; + }}); + this.setState(state => { + return { letters: newLetters } + }); + } + + lettersDeleted() { + const bools = []; + const newLetters = this.state.letters.map(letter => { + if (letter.chose) { + letter.classS = 'delete'; + } + bools.push(letter.chose); + return letter; + }); + + const boolsS = []; + const newLettersS = this.state.searchedLetters.map(letter => { + if (letter.chose) { + letter.classS = 'delete'; + } + bools.push(letter.chose); + return letter; + }); + + this.setState(state => { + return { + letters: newLetters, + searchedLetters: newLettersS + // articles: articlesS + }; + }); + window.setTimeout(function(letters) { + const lettersS = letters.filter(letter => { + return letter.classS !== 'delete'; + }); + this.setState(state => { + return { letters: lettersS }; + }); + }.bind(this), 1300, newLetters); + } + + letterChose(index) { + const newLetters = this.state.letters.map(letter => { + if (letter.id !== index) return letter; + return { ... letter, chose: !letter.chose }; + }); + this.setState(state => { + return { letters: newLetters } + }); + } + + setLetters() { + let newLetters = []; + for (let j = 0; j < 10000; j += 1000) { + console.log(j); + for (let i = j; i < j + 999; i++) { + const newLetter = genLetterText(); + newLetters.push({ + id: i, + letterText: newLetter.letterText, + sender: newLetter.sender, + color: newLetter.color, + date: newLetter.date, + deleted: newLetter.deleted, + classS: 'notNew', + chose: newLetter.chose, + isVisible: true + }); + } + } + this.setState(state => { + return { letters: newLetters }; + }) + } + + letterAdded(index) { + const newLetter = genLetterText(); + this.setState(state => { + let newLetterS = { + id: index, + letterText: newLetter.letterText, + sender: newLetter.sender, + color: newLetter.color, + date: newLetter.date, + deleted: newLetter.deleted, + classS: 'add', + chose: newLetter.chose, + isVisible: true + } + if (!newLetterS.letterText.includes(state.template)) { + newLetterS.isVisible = false; + } + return { + letters: [newLetterS, ...state.letters], + openId: -1, + searchedLetters: state.letters + }; + } + ); + let delay = 0; + let itsTime = false; + let newMax = this.curMax; + console.log(newMax); + let currGen = 0; + while (!itsTime) { + let genDelay = getRandomFromRange(this.curMin, newMax); + currGen += genDelay; + if (currGen + this.diff >= this.fiveMin) { + itsTime = true; + } else { + newMax = Math.max(0, newMax - genDelay); + } + delay += genDelay; + } + this.diff = delay; + console.log(delay); + window.setTimeout(this.letterAdded, delay + 1000, index + 1); + } + + markNotNew(id) { + const lettersS = this.state.letters; + for (let i = 0; i < lettersS.length; i++) { + if (lettersS[i].id === id) { + lettersS[i].classS = "notNew" + } + } + + this.setState(state => { + return { letters: lettersS }; + }); + } + + searchLetters(template) { + console.log("searchLetters " + template); + /*const lettersS = this.state.letters.filter(letter => { + return letter.letterText.includes(template); + });*/ + const lettersS = this.state.letters; + for(let i = 0; i < lettersS.length; i++) { + if (!lettersS[i].letterText.includes(template)) { + lettersS[i].isVisible = false; + } else { + lettersS[i].isVisible = true; + } + } + this.setState(state => { + return { template: template, letters: lettersS }; + }); + } + + changeColor() { + this.setState(state => { + return { isDark: !state.isDark }; + }); + } + + render() { + let darkClass; + if (this.state.isDark) { + darkClass = 'black-side'; + } + return ( +
+
+
+ + +
+
+ ); + } +} diff --git a/src/app/main/menu/Menu.css b/src/app/main/menu/Menu.css new file mode 100644 index 0000000..542b180 --- /dev/null +++ b/src/app/main/menu/Menu.css @@ -0,0 +1,43 @@ +.menu__actions-list_unstressed-link { + color: inherit; + text-decoration: none; +} + +.menu__actions-list { + list-style-type: none; + padding-inline-start: 28px; +} + +.menu__navigation { + line-height: 22px; + padding-left: 10px; + margin-left: -28px; + font-family: HelveticaNeueCyr-Medium; + font-size: 11px; + font-weight: 500; + color: #707070; +} + +.menu__navigation:hover { + border-radius: 3px; + background-color: #cdd6e4; +} + +.menu__write-button { + width: 147px; + height: 32px; + border: none; + border-radius: 3px; + background-color: #6287bd; + font-family: HelveticaNeueCyr-Medium; + font-size: 12px; + font-weight: 500; + color: #ffffff; +} + +.menu { + display: inline-block; + margin-top: 13px; + margin-left: 22px; + width: 147px; +} diff --git a/src/app/main/menu/Menu.jsx b/src/app/main/menu/Menu.jsx new file mode 100644 index 0000000..2e78036 --- /dev/null +++ b/src/app/main/menu/Menu.jsx @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +import './Menu.css'; + +export class Menu extends Component { + render() { + return( +
+ + + + +
+ ); +} +} diff --git a/src/app/main/window-letters/Article.css b/src/app/main/window-letters/Article.css new file mode 100644 index 0000000..a7dcda0 --- /dev/null +++ b/src/app/main/window-letters/Article.css @@ -0,0 +1,19 @@ +.window-letters__article { + /*background: url("../../../src/background.jpg");*/ + background-attachment: fixed; + background-size: 15%; + /*background-repeat: space;*/ + /*background-color: #FFFFDD;*/ + margin-left: -40px; + height: inherit; +} + +.window-letters__article-cancel-sign { + float: right; + margin-top: 20px; + margin-right: 20px; +} + +.qqq { + display: none; +} diff --git a/src/app/main/window-letters/Article.jsx b/src/app/main/window-letters/Article.jsx new file mode 100644 index 0000000..5bbaaef --- /dev/null +++ b/src/app/main/window-letters/Article.jsx @@ -0,0 +1,20 @@ +import React, { Component } from 'react' + +import './Article.css'; +import { genLetterText, showArticle } from '../../functions/Functions'; + +export class Article extends Component { + render() { + console.log(this.props); + return ( +
+ this.props.openLetters()}/> +
+ + {this.props.letterText} +
+
+ ) + } +} diff --git a/src/app/main/window-letters/Letter.css b/src/app/main/window-letters/Letter.css new file mode 100644 index 0000000..0befd04 --- /dev/null +++ b/src/app/main/window-letters/Letter.css @@ -0,0 +1,193 @@ +.window-letters__letter_add { + margin-top: 0px; + margin-left: -40px; + position: relative; + z-index: 1; + list-style-type: none; + transition-property: margin-top; + transition-duration: 1s; + transition-timing-function: linear; + transition-delay: 0s; +} + +.window-letters__letter_delete { + margin-top: -50.36px; + z-index: 0; + margin-left: -40px; + position: relative; + transition-property: margin-top; + transition-duration: 1s; + transition-timing-function: linear; + transition-delay: 0s; +} + +.window-letters__letter_notNew { + margin-top: 0px; + margin-left: -40px; + position: relative; + z-index: 1; +} + +.window-letters__letter { + margin-top: -50.36px; + margin-left: -40px; + position: relative; + z-index: 1; + list-style-type: none; +} + +.window-letters__letter-date { + float: right; + margin-right: 20px; + font-family: HelveticaNeueCyr-Medium; + font-size: 13px; + line-height: 28px; + text-align: right; + color: #9b9b9b; + /* margin-top: -30px; */ +} + +.window-letters__letter-innerior { + margin: 0; + /*width: 900px;*/ + border-style: solid; + border-color: #9b9b9b; + border-width: 0 0 0.5px 0; + height: 50px; + list-style-type: none; + background-color: #ffffff; +} + +.window-letters__letter-part { + display: inline-block; + vertical-align: middle; + margin-bottom: 0px; + margin-top: 10px; +} + +.window-letters__letter-sender_pict_wrap { + margin-left: 10px; + width: 30px; + height: 30px; + border-radius: 50%; + font-size: 25px; + font-family: HelveticaNeueCyr-Medium; + color: white; +} + +.window-letters__letter-sender_pict { + width: inherit; + height: inherit; + border-radius: 50%; + text-align: center; +} + +.window-letters__letter-sender { + margin-left: 10px; + width: 130px; + height: 16px; + font-family: HelveticaNeueCyr-Medium; + font-size: 13px; + font-weight: bold; + /*color: #000000;*/ + overflow: hidden; +} + +.window-letters__letter-text { + margin-left: 10px; + /* width: 300px; */ + width: calc(100% - 300px); + height: 16px; + font-family: HelveticaNeueCyr-Medium; + font-size: 13px; + font-weight: bold; + /*color: #000000;*/ + overflow: hidden; +} + +.window-letters__letter-unread-point { + margin-left: 20px; + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #6287bd; +} + +.window-letters__letters-list { + overflow: auto; + min-height: 475px; + max-height: 475px; + margin-block-start: 0; + margin-block-end: 0; + list-style-type: none; +} + +.window-letters__select-button { + position: relative; + margin-top: -20px; + width: 16px; + height: 16px; + border-radius: 3px; + border: solid 1px rgba(0, 0, 0, 0.15); + background-color: #ffffff; + /*background-color: black;*/ +} + +.window-letters__select-button:after { + margin: -3px 0 0 4px; + width: 7px; + height: 14px; + content: ''; + position: absolute; + border-right: 2px solid; + border-bottom: 2px solid; + color: #000000; + -webkit-transform: scale(0.85) rotate(47deg) skewX(12deg); + transform: scale(0.85) rotate(47deg) skewX(12deg); + visibility: hidden; +} + +.window-letters__square-for-button { + margin-left: -25px; + width: 16px; + height: 16px; + margin-block-start: 8px; + margin-block-end: 0; +} + +.window-letters { + display: inline-block; + vertical-align: top; + margin: 13px 20px 14px 22px; + width: calc(100% - 215px); + min-width: 50px; + height: 580px; + max-height: 1530px; + /*max-height: 612px;*/ + /*overflow: none;*/ + border-radius: 3px; + border-color: #e5eaf0; + border-width: 0.5px; + border-style: solid; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34); + background-color: #ffffff; + box-sizing: border-box; +} + +.window-letters__input-button:checked + .window-letters__select-button:after { + visibility: inherit; +} + +#window-letters__label_open-art { + display: none; +} + +.not_show { + display: none; +} + +.dark-side { + background-color: black; + border-left-color: #e5eaf0; + border-left-width: 0.5px; +} diff --git a/src/app/main/window-letters/Letter.jsx b/src/app/main/window-letters/Letter.jsx new file mode 100644 index 0000000..3b5333c --- /dev/null +++ b/src/app/main/window-letters/Letter.jsx @@ -0,0 +1,77 @@ +import React, { Component } from 'react'; + +import './Letter.css'; +import { genLetterText, showArticle } from '../../functions/Functions'; + +export class Letter extends Component { + constructor(props) { + super(props); + this.markerRef = React.createRef(); + } + + render() { + window.setTimeout( function() { + if(this.props.classS === "add") { + this.markerRef.current.className = `window-letters__letter_${this.props.classS}`; + window.setTimeout( function() { + this.props.markNotNew(this.props.id); + }.bind(this), + 1000); + } else { + if (this.markerRef.current !== null) + this.markerRef.current.className = `window-letters__letter_${this.props.classS}`; + } + // const newLetter = document.getElementsByClassName('window-letters__letter'); + // if (newLetter[0] !== undefined) { + // newLetter[0].className = `window-letters__letter_${this.props.classS}`; + // } + }.bind(this), + 10); + + const myStyle = { backgroundColor: this.props.color }; + let darkClass = "window-letters__letter-innerior"; + if (this.props.isDark) { + darkClass += ' dark-side'; + } + + return ( + <> +
  • + this.props.openArticle(this.props.id)}/> + +
    • + + ); + } +} diff --git a/src/app/main/window-letters/LetterHeader.css b/src/app/main/window-letters/LetterHeader.css new file mode 100644 index 0000000..f10874d --- /dev/null +++ b/src/app/main/window-letters/LetterHeader.css @@ -0,0 +1,25 @@ +.window-letters__header { + font-size: 13px; + border-style: solid; + border-color: #9b9b9b; + border-width: 0 0 0.5px 0; + margin-block-start: 0; + margin-block-end: 0; + height: 50px; +} + +.window-letters__header-buttons { + margin-left: 26px; + margin-top: -10px; + border: none; + outline: none; + background-color: inherit; + font-weight: 500; + color: #cccccc; +} + +.window-letters__header-part { + display: inline-block; + margin-top: 18px; +} + diff --git a/src/app/main/window-letters/LetterHeader.jsx b/src/app/main/window-letters/LetterHeader.jsx new file mode 100644 index 0000000..95e6466 --- /dev/null +++ b/src/app/main/window-letters/LetterHeader.jsx @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; + +import './LetterHeader.css'; + +export class LetterHeader extends Component { + + render() { + return( + + ); + } + +} diff --git a/src/app/main/window-letters/LettersList.jsx b/src/app/main/window-letters/LettersList.jsx new file mode 100644 index 0000000..853a964 --- /dev/null +++ b/src/app/main/window-letters/LettersList.jsx @@ -0,0 +1,71 @@ +import React, { Component } from 'react'; +import { LetterHeader } from './LetterHeader'; +import { Letter } from './Letter'; +import { genLetterText, getRandomFromRange } from '../../functions/Functions'; +import { Article } from './Article'; + +import './Letter.css'; + +export class LettersList extends Component { + constructor(props) { + super(props); + } + + render() { + let code; + if (this.props.openId !== -1) { + code = +
    ; + } else { + code =
    + { + this.props.letters. + filter(letter => {return letter.isVisible}). + slice(0, 100).map(letter => { + return ( + + ); + }) + } +
    ; + } + let darkClass = 'window-letters'; + if (this.props.isDark) { + darkClass += ' black-side'; + } + + return ( +
    + +
      + + {code} +
    +
    + ); + } +} diff --git a/src/index.css b/src/index.css index 2b6e525..c7a0a15 100644 --- a/src/index.css +++ b/src/index.css @@ -1,12 +1,12 @@ -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', - 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +@font-face { + font-family: 'HelveticaNeueCyr-Medium'; + src: url('./sourse/fonts/HelveticaNeueCyr-Medium.eot'); + src: url('./sourse/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'), + url('././sourse/fonts/HelveticaNeueCyr-Medium.svg#HelveticaNeueCyr-Medium') format('svg'), + url('././sourse/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype'), + url('././sourse/fonts/HelveticaNeueCyr-Medium.woff') format('woff'), + url('././sourse/fonts/HelveticaNeueCyr-Medium.woff2') format('woff2'); + font-weight: normal; + font-style: normal; } diff --git a/src/sourse/YandexMail-dark.png b/src/sourse/YandexMail-dark.png new file mode 100644 index 0000000..d63742f Binary files /dev/null and b/src/sourse/YandexMail-dark.png differ diff --git a/src/sourse/YandexMail.png b/src/sourse/YandexMail.png new file mode 100644 index 0000000..90aa921 Binary files /dev/null and b/src/sourse/YandexMail.png differ diff --git a/src/sourse/background.jpg b/src/sourse/background.jpg new file mode 100644 index 0000000..d0cc448 Binary files /dev/null and b/src/sourse/background.jpg differ diff --git a/src/sourse/cat-circle.png b/src/sourse/cat-circle.png new file mode 100644 index 0000000..9d889a6 Binary files /dev/null and b/src/sourse/cat-circle.png differ diff --git a/src/sourse/fonts/HelveticaNeueBlackCondensed.svg b/src/sourse/fonts/HelveticaNeueBlackCondensed.svg new file mode 100644 index 0000000..aed2bac --- /dev/null +++ b/src/sourse/fonts/HelveticaNeueBlackCondensed.svg @@ -0,0 +1,1280 @@ + + + + +Created by FontForge 20170910 at Thu Sep 29 03:11:39 2011 + By Jimmy Wärting +Copyright (c) 1981, 1982, 1983, 1989 and 1993, Linotype Library GmbH or its affiliated Linotype-Hell companies. All rights reserved. + +The digitally encoded machine readable software for producing the Typefaces licensed to you is now the property of Heidelberger Druckmaschinen AG and its licensors, and may not be reproduced, used, displayed, modified, disclosed or transferred without the express written approval of Heidelberger Druckmaschinen AG. + +Copyright (c) 1988, 1990, 1993 Adobe Systems Incorporated. All Rights Reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sourse/fonts/HelveticaNeueBlackCondensed.ttf b/src/sourse/fonts/HelveticaNeueBlackCondensed.ttf new file mode 100644 index 0000000..b41c291 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueBlackCondensed.ttf differ diff --git a/src/sourse/fonts/HelveticaNeueBlackCondensed.woff b/src/sourse/fonts/HelveticaNeueBlackCondensed.woff new file mode 100644 index 0000000..6cc8520 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueBlackCondensed.woff differ diff --git a/src/sourse/fonts/HelveticaNeueCondensedBlack.eot b/src/sourse/fonts/HelveticaNeueCondensedBlack.eot new file mode 100644 index 0000000..16af87a Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCondensedBlack.eot differ diff --git a/src/sourse/fonts/HelveticaNeueCondensedBlack.ttf b/src/sourse/fonts/HelveticaNeueCondensedBlack.ttf new file mode 100644 index 0000000..fab85d9 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCondensedBlack.ttf differ diff --git a/src/sourse/fonts/HelveticaNeueCondensedBlack.woff2 b/src/sourse/fonts/HelveticaNeueCondensedBlack.woff2 new file mode 100644 index 0000000..f60ace4 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCondensedBlack.woff2 differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Bold.eot b/src/sourse/fonts/HelveticaNeueCyr-Bold.eot new file mode 100644 index 0000000..a326acf Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Bold.eot differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Bold.otf b/src/sourse/fonts/HelveticaNeueCyr-Bold.otf new file mode 100644 index 0000000..383dca6 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Bold.otf differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Bold.svg b/src/sourse/fonts/HelveticaNeueCyr-Bold.svg new file mode 100644 index 0000000..d27a898 --- /dev/null +++ b/src/sourse/fonts/HelveticaNeueCyr-Bold.svg @@ -0,0 +1,939 @@ + + + + +Created by FontForge 20170910 at Tue Aug 29 12:39:48 2006 + By Jimmy Wärting +Copyrighted (c) 1981, 1997 by and the property of Linotype-Hell AG and/or its subsidiaries. All Rights Reserved. All Cyrillic characters designed by DoubleAlex. Helvetica is a registered Trademark of Linotype-Hell AG and/or its subsidiaries. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sourse/fonts/HelveticaNeueCyr-Bold.ttf b/src/sourse/fonts/HelveticaNeueCyr-Bold.ttf new file mode 100644 index 0000000..f246357 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Bold.ttf differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Bold.woff b/src/sourse/fonts/HelveticaNeueCyr-Bold.woff new file mode 100644 index 0000000..7e40ebe Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Bold.woff differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Bold.woff2 b/src/sourse/fonts/HelveticaNeueCyr-Bold.woff2 new file mode 100644 index 0000000..c066e26 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Bold.woff2 differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Medium.eot b/src/sourse/fonts/HelveticaNeueCyr-Medium.eot new file mode 100644 index 0000000..5b367eb Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Medium.eot differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Medium.otf b/src/sourse/fonts/HelveticaNeueCyr-Medium.otf new file mode 100644 index 0000000..a2cde16 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Medium.otf differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Medium.svg b/src/sourse/fonts/HelveticaNeueCyr-Medium.svg new file mode 100644 index 0000000..41c4075 --- /dev/null +++ b/src/sourse/fonts/HelveticaNeueCyr-Medium.svg @@ -0,0 +1,933 @@ + + + + +Created by FontForge 20170910 at Tue Aug 29 12:39:48 2006 + By Jimmy Wärting +Copyrighted (c) 1981, 1997 by and the property of Linotype-Hell AG and/or its subsidiaries. All Rights Reserved. All Cyrillic characters designed by DoubleAlex. Helvetica is a registered Trademark of Linotype-Hell AG and/or its subsidiaries. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sourse/fonts/HelveticaNeueCyr-Medium.ttf b/src/sourse/fonts/HelveticaNeueCyr-Medium.ttf new file mode 100644 index 0000000..045a1fd Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Medium.ttf differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Medium.woff b/src/sourse/fonts/HelveticaNeueCyr-Medium.woff new file mode 100644 index 0000000..026cc96 Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Medium.woff differ diff --git a/src/sourse/fonts/HelveticaNeueCyr-Medium.woff2 b/src/sourse/fonts/HelveticaNeueCyr-Medium.woff2 new file mode 100644 index 0000000..316cfff Binary files /dev/null and b/src/sourse/fonts/HelveticaNeueCyr-Medium.woff2 differ diff --git a/src/sourse/yandexCircle.jpg b/src/sourse/yandexCircle.jpg new file mode 100644 index 0000000..c8dd3d8 Binary files /dev/null and b/src/sourse/yandexCircle.jpg differ diff --git a/src/sourse/yandexMailNew.jpg b/src/sourse/yandexMailNew.jpg new file mode 100644 index 0000000..329d0f5 Binary files /dev/null and b/src/sourse/yandexMailNew.jpg differ