From 3a53ad9e8c3cb76fe518378af8dbdcd18bd72a9c Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Mon, 25 Jul 2022 17:35:15 +0530 Subject: [PATCH] add transition, add plane container --- package-lock.json | 66 +++++++++++++++++++- package.json | 12 +++- src/components/footer/contactsContainer.tsx | 2 +- src/components/footer/footer.tsx | 2 +- src/components/mainPart/main-part-footer.tsx | 11 +++- src/components/mainPart/mainPart.css | 45 ++++++++++++- src/components/mainPart/mainPart.tsx | 55 ++++++++++------ src/components/mainPart/orLineContainer.tsx | 7 +++ 8 files changed, 172 insertions(+), 28 deletions(-) create mode 100644 src/components/mainPart/orLineContainer.tsx diff --git a/package-lock.json b/package-lock.json index 70dc12d..86620b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "pixelstreamingwebreact", "version": "0.1.0", + "license": "ISC", "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", @@ -15,12 +16,15 @@ "@types/node": "^16.11.45", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@types/react-transition-group": "^4.4.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-transition-group": "^4.4.2", "typescript": "^4.7.4", "web-vitals": "^2.1.4" - } + }, + "devDependencies": {} }, "node_modules/@ampproject/remapping": { "version": "2.2.0", @@ -3785,6 +3789,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -6283,6 +6295,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -13846,6 +13867,21 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -19167,6 +19203,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -20999,6 +21043,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -26280,6 +26333,17 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index a2ba33d..8d5389c 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "@types/node": "^16.11.45", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@types/react-transition-group": "^4.4.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-transition-group": "^4.4.2", "typescript": "^4.7.4", "web-vitals": "^2.1.4" }, @@ -39,5 +41,13 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).", + "main": "index.js", + "repository": { + "type": "git", + "url": "http://localhost:3000/DmitriyB/pixelstreamingwebreact.git" + }, + "author": "", + "license": "ISC" } diff --git a/src/components/footer/contactsContainer.tsx b/src/components/footer/contactsContainer.tsx index 9f9aadb..9bc5bc7 100644 --- a/src/components/footer/contactsContainer.tsx +++ b/src/components/footer/contactsContainer.tsx @@ -19,7 +19,7 @@ export const ContactContainer:React.FC = React.memo((props) => { }
{props.pairData.map(pair => { - return
+ return
{pair.value1}
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index f4ec591..808bd1a 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -20,7 +20,7 @@ export const Footer:React.FC = React.memo(() => { diff --git a/src/components/mainPart/main-part-footer.tsx b/src/components/mainPart/main-part-footer.tsx index 5f85be8..67c19f8 100644 --- a/src/components/mainPart/main-part-footer.tsx +++ b/src/components/mainPart/main-part-footer.tsx @@ -2,8 +2,15 @@ import React from "react"; export const MainPartFooter:React.FC = React.memo(() => { return
- - Данная технология находится на стадии разработки. Если подключиться к демонстрации не удалось, свяжитесь с нами. + +
+ + Данная технология находится на стадии разработки. + + + Если подключиться к демонстрации не удалось, свяжитесь с нами. + +
+7 800 770 00 67 (Россия) / +971 50 983 8902 (ОАЭ) diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css index c38816b..eb59fc5 100644 --- a/src/components/mainPart/mainPart.css +++ b/src/components/mainPart/mainPart.css @@ -1,4 +1,4 @@ -.main-part-container { +.main-part-container { position: relative; width: 100%; height: 100vh; @@ -22,6 +22,7 @@ } .main-part-header { + z-index: 1; box-sizing: border-box; width: 100%; display: flex; @@ -139,8 +140,48 @@ display: flex; flex-direction: column; position: relative; + max-width: 600px; + gap: 8px; } -.main-part-footer-text::before { +.main-part-footer-text-container { + display: flex; +} + +.main-part-footer-text-container::before { content: '*'; +} + +.main-part-footer-text { + display: flex; + flex-direction: column; +} + +.background-container { + z-index: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(30, 22, 48, 0.8); + backdrop-filter: blur(12px); +} + +.show-background-enter { + opacity: 0; +} + +.show-background-enter-active { + opacity: 1; + transition: .3s; +} + +.show-background-exit { + opacity: 1; +} + +.show-background-exit-active { + opacity: 0; + transition: .3s; } \ No newline at end of file diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx index 5519ce1..92241ff 100644 --- a/src/components/mainPart/mainPart.tsx +++ b/src/components/mainPart/mainPart.tsx @@ -4,8 +4,12 @@ import { PinkButton } from "./button"; import { MainPartHeader } from "./mainPartHeader"; import { ContentContainer } from "./contentContainer"; import { MainPartFooter } from "./main-part-footer"; +import { OrLineContainer } from "./orLineContainer"; +import { CSSTransition } from "react-transition-group"; + export const MainPart: React.FC = React.memo(() => { + const [showBackground, setShowBackground] = useState(false); const [currentContent, setCurrentContent] = useState( { ); function onClickStartDemo() { - setCurrentContent(<> - onClickCreateNewDemo()} - textButton='Начать новую демонстрацию' - /> -
- - или - -
- - onClickPlaneDemo()} - textButton='Запланировать демонстрацию' - /> + setCurrentContent( + <> + onClickCreateNewDemo()} + textButton='Начать новую демонстрацию' + /> + + onClickPlaneDemo()} + textButton='Запланировать демонстрацию' + /> - ) } @@ -52,19 +51,35 @@ export const MainPart: React.FC = React.memo(() => { } function onClickPlaneDemo() { - + enableBackground(); } function onClickConnect() { } + function enableBackground() { + setShowBackground(true); + } + + function disableBackground() { + setShowBackground(false); + } + return
{currentContent}
+ +
+
}) \ No newline at end of file diff --git a/src/components/mainPart/orLineContainer.tsx b/src/components/mainPart/orLineContainer.tsx new file mode 100644 index 0000000..96faf10 --- /dev/null +++ b/src/components/mainPart/orLineContainer.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +export const OrLineContainer:React.FC = () =>
+ + или + +
; \ No newline at end of file