diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx new file mode 100644 index 0000000..379efae --- /dev/null +++ b/src/components/mainScreen/toolbar/buttonContainer.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { ToolbarButton } from "./toolbarButton"; +import { BorderLine } from "./toolbarButtonContainerBorderLine"; +import { TypeToolbarButtons } from "./typeButtons"; + +type TProps = { + buttons: Array<{type: TypeToolbarButtons, onClick: () => void}> +} + +export const ButtonContainer:React.FC = React.memo((props) => { + return
+ + {props.buttons.map(button => )} + +
+}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/icons/controlDisabledIcon.svg b/src/components/mainScreen/toolbar/icons/controlDisabledIcon.svg new file mode 100644 index 0000000..5ba4613 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/controlDisabledIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/mainScreen/toolbar/icons/disableFullscreenIcon.svg b/src/components/mainScreen/toolbar/icons/disableFullscreenIcon.svg new file mode 100644 index 0000000..8f81515 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/disableFullscreenIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/exitIcon.svg b/src/components/mainScreen/toolbar/icons/exitIcon.svg new file mode 100644 index 0000000..512ae72 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/exitIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/microDisabledIcon.svg b/src/components/mainScreen/toolbar/icons/microDisabledIcon.svg new file mode 100644 index 0000000..fab1bc1 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/microDisabledIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/mainScreen/toolbar/icons/shareIcon.svg b/src/components/mainScreen/toolbar/icons/shareIcon.svg new file mode 100644 index 0000000..0664766 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/shareIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/userIcon.svg b/src/components/mainScreen/toolbar/icons/userIcon.svg new file mode 100644 index 0000000..7de10f4 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/userIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css index 471a851..008e9c0 100644 --- a/src/components/mainScreen/toolbar/toolbar.css +++ b/src/components/mainScreen/toolbar/toolbar.css @@ -2,9 +2,13 @@ display: flex; position: relative; height: 100%; - width: 94px; - + width: 74px; + padding: 0; + margin: 0; transform: translateX(-70px); + + border-right: 1px solid #4F4F4F; + background: #333333; } /* .toolbar-container.closed { @@ -18,16 +22,22 @@ .toolbar-field { width: 70px; background: #333333; + padding: 14px 15px; + box-sizing: border-box; + /* border-right: 1px solid red; */ } .toolbar-open-button { + position: absolute; + top: calc((100% - 128px) / 2); + left: calc(100% - 5px); display: flex; justify-content: center; align-items: center; margin-top: auto; margin-bottom: auto; - margin-left: auto; + width: 24px; height: 128px; border: none; diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index 2d2b922..924fc05 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -1,5 +1,7 @@ import React from "react"; +import { ButtonContainer } from "./buttonContainer"; import './toolbar.css'; +import { ToolbarButton } from "./toolbarButton"; type TProps = { onClickOpenButton: () => void @@ -9,7 +11,58 @@ type TProps = { export const Toolbar:React.FC = React.memo((props) => { return
- +
+ null} + /> + console.log('click') + }, + { + type: "user", + onClick: () => console.log('click') + }, + { + type: "user", + onClick: () => console.log('click') + }, + { + type: "user", + onClick: () => console.log('click') + } + ]} + /> +
+
+ console.log('click') + }, + { + type: "micro", + onClick: () => console.log('click') + } + ]} + /> + console.log('click') + } + ]} + /> + null} + /> +
+}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/toolbarButtonContainerBorderLine.tsx b/src/components/mainScreen/toolbar/toolbarButtonContainerBorderLine.tsx new file mode 100644 index 0000000..8341145 --- /dev/null +++ b/src/components/mainScreen/toolbar/toolbarButtonContainerBorderLine.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const BorderLine:React.FC = React.memo(() => { + return +}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/typeButtons.ts b/src/components/mainScreen/toolbar/typeButtons.ts new file mode 100644 index 0000000..4634fcc --- /dev/null +++ b/src/components/mainScreen/toolbar/typeButtons.ts @@ -0,0 +1,11 @@ +export type TypeToolbarButtons = + 'fullscreen' + | 'user' + | 'userse' + | 'micro' + | 'control' + | 'other' + | 'sound' + | 'exit' + | 'copy' + | 'share' \ No newline at end of file