diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx index 379efae..5bfcd4e 100644 --- a/src/components/mainScreen/toolbar/buttonContainer.tsx +++ b/src/components/mainScreen/toolbar/buttonContainer.tsx @@ -4,13 +4,19 @@ import { BorderLine } from "./toolbarButtonContainerBorderLine"; import { TypeToolbarButtons } from "./typeButtons"; type TProps = { - buttons: Array<{type: TypeToolbarButtons, onClick: () => void}> + buttons: Array<{type: TypeToolbarButtons, isNotification?: boolean, onClick: () => void}> } export const ButtonContainer:React.FC = React.memo((props) => { return
- {props.buttons.map(button => )} + {props.buttons.map((button, index) => + )}
}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/icons/userIcon.svg b/src/components/mainScreen/toolbar/icons/adminIcon.svg similarity index 100% rename from src/components/mainScreen/toolbar/icons/userIcon.svg rename to src/components/mainScreen/toolbar/icons/adminIcon.svg diff --git a/src/components/mainScreen/toolbar/icons/guestIcon.svg b/src/components/mainScreen/toolbar/icons/guestIcon.svg new file mode 100644 index 0000000..1904ffa --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/guestIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/selfIcon.svg b/src/components/mainScreen/toolbar/icons/selfIcon.svg new file mode 100644 index 0000000..bd00a49 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/selfIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/openToolbarBorderHoverIcon.svg b/src/components/mainScreen/toolbar/openToolbarBorderHoverIcon.svg new file mode 100644 index 0000000..8813063 --- /dev/null +++ b/src/components/mainScreen/toolbar/openToolbarBorderHoverIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/mainScreen/toolbar/openToolbarBorderIcon.svg b/src/components/mainScreen/toolbar/openToolbarBorderIcon.svg new file mode 100644 index 0000000..6072f97 --- /dev/null +++ b/src/components/mainScreen/toolbar/openToolbarBorderIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css index 008e9c0..6e43cc8 100644 --- a/src/components/mainScreen/toolbar/toolbar.css +++ b/src/components/mainScreen/toolbar/toolbar.css @@ -24,13 +24,35 @@ background: #333333; padding: 14px 15px; box-sizing: border-box; - /* border-right: 1px solid red; */ + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.toolbar-field-part { + display: flex; + flex-direction: column; + gap: 10px; +} + +.toolbar-button-container { + display: flex; + flex-direction: column; + gap: 10px; +} + +.toolbar-button-container-border-line { + width: 100%; + height: 1px; + background-color: #4F4F4F; } .toolbar-open-button { + z-index: 0; position: absolute; top: calc((100% - 128px) / 2); - left: calc(100% - 5px); + left: calc(100% - 4px); display: flex; justify-content: center; align-items: center; @@ -56,6 +78,78 @@ background: url('closeToolbarIcon.svg') 50% 50% no-repeat; } +.toolbar-button { + position: relative; + width: 40px; + height: 40px; + border: none; + border-radius: 50px; + background-size: 100% 100%; +} + +.toolbar-button.notification::after { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 12px; + height: 12px; + border-radius: 50px; + background-color: #F2994A; +} + +.toolbar-button.fullscreen { + background: url('./icons/disableFullscreenIcon.svg'); +} + +.toolbar-button.admin { + background: url('./icons/adminIcon.svg'); +} + +.toolbar-button.self { + background: url('./icons/selfIcon.svg'); +} + +.toolbar-button.guest { + background: url('./icons/guestIcon.svg'); +} + +.toolbar-button.users { + background: url('./icons/disableFullscreenIcon.svg'); +} + +.toolbar-button.micro { + background: url('./icons/microDisabledIcon.svg'); +} + +.toolbar-button.control { + background: url('./icons/controlDisabledIcon.svg'); +} + +.toolbar-button.other { + background: url('./icons/disableFullscreenIcon.svg'); +} + +.toolbar-button.sound { + background: url('./icons/disableFullscreenIcon.svg'); +} + +.toolbar-button.exit { + background: url('./icons/exitIcon.svg'); +} + +.toolbar-button.copy { + background: url('./icons/disableFullscreenIcon.svg'); +} + +.toolbar-button.share { + background: url('./icons/shareIcon.svg'); +} + + + + + .show-toolbar-enter { transform: translateX(-70px); diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index 924fc05..aab3fd3 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -2,6 +2,7 @@ import React from "react"; import { ButtonContainer } from "./buttonContainer"; import './toolbar.css'; import { ToolbarButton } from "./toolbarButton"; +import { BorderLine } from "./toolbarButtonContainerBorderLine"; type TProps = { onClickOpenButton: () => void @@ -11,7 +12,7 @@ type TProps = { export const Toolbar:React.FC = React.memo((props) => { return
-
+
null} @@ -19,26 +20,27 @@ export const Toolbar:React.FC = React.memo((props) => { console.log('click'), + }, + { + type: "self", onClick: () => console.log('click') }, { - type: "user", + type: "guest", onClick: () => console.log('click') }, { - type: "user", - onClick: () => console.log('click') - }, - { - type: "user", - onClick: () => console.log('click') + type: "guest", + onClick: () => console.log('click'), + isNotification: true } ]} />
-
- + = React.memo((props) => { } ]} /> - console.log('click') - } - ]} + console.log('click')} /> + null} diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx index ec4b446..4714c36 100644 --- a/src/components/mainScreen/toolbar/toolbarButton.tsx +++ b/src/components/mainScreen/toolbar/toolbarButton.tsx @@ -4,8 +4,12 @@ import { TypeToolbarButtons } from "./typeButtons"; type TProps = { onClick: () => void type: TypeToolbarButtons + isNotification?: boolean } export const ToolbarButton:React.FC = React.memo((props) => { - return + return }) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/typeButtons.ts b/src/components/mainScreen/toolbar/typeButtons.ts index 4634fcc..fb7b7e0 100644 --- a/src/components/mainScreen/toolbar/typeButtons.ts +++ b/src/components/mainScreen/toolbar/typeButtons.ts @@ -1,7 +1,9 @@ export type TypeToolbarButtons = 'fullscreen' - | 'user' - | 'userse' + | 'admin' + | 'guest' + | 'self' + | 'users' | 'micro' | 'control' | 'other' diff --git a/tsconfig.json b/tsconfig.json index a273b0c..e1fe19c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "strictNullChecks": false }, "include": [ "src"