DmitriyB/pixelstreamingui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

добавлено открытие тулбара

Browse Source
This commit is contained in:
DmitriyB
2022-07-28 18:56:14 +05:00
parent fdfb0d21e9
commit d15424cdfd
9 changed files with 184 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+62
View File
@@ -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",
package.json
+2
View File
@@ -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"
},
src/components/mainScreen/mainScreen.css
+2
View File
@@ -5,6 +5,8 @@
}
.main-screen-model {
position: absolute;
z-index: -2;
width: 100%;
height: 100%;
background: url('backgroundImagePng.png') 50% 50% no-repeat;
src/components/mainScreen/mainScreen.tsx
+19 -1
View File
@@ -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<boolean>(false);
function onClickToolbar() {
setShowToolbar(!showToolbar);
}
return <div className="main-screen-container">
<div className="main-screen-model"></div>
<CSSTransition
in={showToolbar}
timeout={300}
classNames='show-toolbar'
>
<Toolbar
onClickOpenButton={onClickToolbar}
isOpen={showToolbar}
/>
</CSSTransition>
</div>
})
src/components/mainScreen/toolbar/closeToolbarIcon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 17L11 12L16 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 22L7 12L7 2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

src/components/mainScreen/toolbar/openToolbarIcon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="128" viewBox="0 0 24 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H3.69231L22.4433 29.547C23.4601 31.1492 24 33.0076 24 34.9053V93.0947C24 94.9924 23.4601 96.8508 22.4433 98.453L3.69231 128H0V0Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 265 B

src/components/mainScreen/toolbar/pointerIcon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 17L17 12L12 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 22L7 12L7 2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

src/components/mainScreen/toolbar/toolbar.css
+70
View File
@@ -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;
}
src/components/mainScreen/toolbar/toolbar.tsx
+18
View File
@@ -0,0 +1,18 @@
import React from "react";
import './toolbar.css';
type TProps = {
onClickOpenButton: () => void
isOpen: boolean
}
export const Toolbar:React.FC<TProps> = React.memo((props) => {
return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
<div className="toolbar-field">
</div>
<button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
<span className="toolbar-open-button-icon"></span>
</button>
</div>
})