From d15424cdfd7926f87d835de5dc6bcf0a804185ad Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Thu, 28 Jul 2022 18:56:14 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B5?= =?UTF-8?q?=20=D1=82=D1=83=D0=BB=D0=B1=D0=B0=D1=80=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 62 ++++++++++++++++ package.json | 2 + src/components/mainScreen/mainScreen.css | 2 + src/components/mainScreen/mainScreen.tsx | 20 +++++- .../mainScreen/toolbar/closeToolbarIcon.svg | 4 ++ .../mainScreen/toolbar/openToolbarIcon.svg | 3 + .../mainScreen/toolbar/pointerIcon.svg | 4 ++ src/components/mainScreen/toolbar/toolbar.css | 70 +++++++++++++++++++ src/components/mainScreen/toolbar/toolbar.tsx | 18 +++++ 9 files changed, 184 insertions(+), 1 deletion(-) create mode 100644 src/components/mainScreen/toolbar/closeToolbarIcon.svg create mode 100644 src/components/mainScreen/toolbar/openToolbarIcon.svg create mode 100644 src/components/mainScreen/toolbar/pointerIcon.svg create mode 100644 src/components/mainScreen/toolbar/toolbar.css create mode 100644 src/components/mainScreen/toolbar/toolbar.tsx diff --git a/package-lock.json b/package-lock.json index 6d6c50a..901ae73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,9 +15,11 @@ "@types/node": "^16.11.46", "@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" } @@ -3785,6 +3787,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 +6293,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 +13865,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 +19201,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 +21041,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 +26331,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 b5913be..c1dbb50 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "@types/node": "^16.11.46", "@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" }, diff --git a/src/components/mainScreen/mainScreen.css b/src/components/mainScreen/mainScreen.css index a417545..46b8c7a 100644 --- a/src/components/mainScreen/mainScreen.css +++ b/src/components/mainScreen/mainScreen.css @@ -5,6 +5,8 @@ } .main-screen-model { + position: absolute; + z-index: -2; width: 100%; height: 100%; background: url('backgroundImagePng.png') 50% 50% no-repeat; diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index 99df4d8..92144eb 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -1,8 +1,26 @@ -import React from "react"; +import React, { useState } from "react"; +import { CSSTransition } from "react-transition-group"; import './mainScreen.css'; +import { Toolbar } from "./toolbar/toolbar"; export const MainScreen:React.FC = React.memo(() => { + const [showToolbar, setShowToolbar] = useState(false); + + function onClickToolbar() { + setShowToolbar(!showToolbar); + } + return
+ + +
}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/closeToolbarIcon.svg b/src/components/mainScreen/toolbar/closeToolbarIcon.svg new file mode 100644 index 0000000..84ffc7b --- /dev/null +++ b/src/components/mainScreen/toolbar/closeToolbarIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/openToolbarIcon.svg b/src/components/mainScreen/toolbar/openToolbarIcon.svg new file mode 100644 index 0000000..25135a9 --- /dev/null +++ b/src/components/mainScreen/toolbar/openToolbarIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/pointerIcon.svg b/src/components/mainScreen/toolbar/pointerIcon.svg new file mode 100644 index 0000000..410099a --- /dev/null +++ b/src/components/mainScreen/toolbar/pointerIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css new file mode 100644 index 0000000..471a851 --- /dev/null +++ b/src/components/mainScreen/toolbar/toolbar.css @@ -0,0 +1,70 @@ +.toolbar-container { + display: flex; + position: relative; + height: 100%; + width: 94px; + + transform: translateX(-70px); +} + +/* .toolbar-container.closed { + transform: translateX(-70px); +} */ + +/* .toolbar-container.opened { + transform: translateX(0px); +} */ + +.toolbar-field { + width: 70px; + background: #333333; +} + +.toolbar-open-button { + display: flex; + justify-content: center; + align-items: center; + + margin-top: auto; + margin-bottom: auto; + margin-left: auto; + width: 24px; + height: 128px; + border: none; + background: url('openToolbarIcon.svg') 50% 50% no-repeat; + background-size: 100% 100%; +} + +.toolbar-open-button-icon { + width: 100%; + height: 100%; + background: url('pointerIcon.svg') 50% 50% no-repeat; + background-size: 24px 24px; +} + +.toolbar-container.opened .toolbar-open-button-icon { + background: url('closeToolbarIcon.svg') 50% 50% no-repeat; +} + + +.show-toolbar-enter { + transform: translateX(-70px); +} + +.show-toolbar-enter-done { + transform: translateX(0px); +} + +.show-toolbar-enter-active { + transform: translateX(0); + transition: .3s; +} + +.show-toolbar-exit { + transform: translateX(0); +} + +.show-toolbar-exit-active { + transform: translateX(-70px); + transition: .3s; +} \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx new file mode 100644 index 0000000..2d2b922 --- /dev/null +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import './toolbar.css'; + +type TProps = { + onClickOpenButton: () => void + isOpen: boolean +} + +export const Toolbar:React.FC = React.memo((props) => { + return
+
+ +
+ +
+}) \ No newline at end of file