diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css index 610b03c..ca6beaa 100644 --- a/src/components/mainScreen/toolbar/toolbar.css +++ b/src/components/mainScreen/toolbar/toolbar.css @@ -82,6 +82,9 @@ .toolbar-button-area { position: relative; + display: flex; + background-color: #333333; + border-top-left-radius: 50px solid #4f4f4f; } .toolbar-button { @@ -93,19 +96,29 @@ background-size: 100% 100%; background-color: #4F4F4F; cursor: pointer; + flex-shrink: 0; } .toolbar-button:hover { opacity: .7; } +.toolbar-button-add-buttons { + background-color: #333333; + position: absolute; + top: 0; + left: 100%; + display: flex; +} + .toolbar-button-description-container { + margin-left: 2px; opacity: 0; position: absolute; left: 100%; height: 24px; top: calc(50% - 12px); - background-color: #27AE60; + /* background-color: #27AE60; */ transition: .3s; pointer-events: none; display: flex; @@ -123,13 +136,27 @@ /* display: inline-block; */ white-space: nowrap; /* flex-shrink: 0; */ + background-color: #333333; + height: 24px; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; + border: 1px solid #4F4F4F; + color: white; + display: flex; + align-items: center; + justify-content: center; + padding: 0 12px 0 8px; + font-weight: 400; + font-size: 12px; + line-height: 15px; } .toolbar-button-description-triangle { display: flex; width: 18px; - height: 24px; + height: 26px; background-color: #EB5757; + background: url('icons/descriptTiriangleIcon.svg'); } .toolbar-button.notification::after { @@ -173,23 +200,23 @@ background: url('./icons/disableFullscreenIcon.svg'); } -.toolbar-button.microOff { +.toolbar-button.micro { background: url('./icons/microOffIcon.svg') 50% 50% no-repeat; background-color: #4F4F4F; } -.toolbar-button.microOn { +.toolbar-button.micro.on { background: url('./icons/microOnIcon.svg') 50% 50% no-repeat; background-color: #4F4F4F; } -.toolbar-button.controlOff { +.toolbar-button.control { background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat; background-color: #4F4F4F; } -.toolbar-button.controlOn { - background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat; +.toolbar-button.control.on { + background: url('./icons/constrolOnIcon.svg') 50% 50% no-repeat; background-color: #4F4F4F; } diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index 1ea93c3..dc7e7e4 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -45,11 +45,11 @@ export const Toolbar:React.FC = React.memo((props) => { console.log('click') }, { - type: "microOff", + type: "micro", onClick: () => console.log('click') } ]} diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx index 999ff59..1d836b4 100644 --- a/src/components/mainScreen/toolbar/toolbarButton.tsx +++ b/src/components/mainScreen/toolbar/toolbarButton.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { TypeToolbarButtons } from "./typeButtons"; type TProps = { @@ -9,15 +9,46 @@ type TProps = { } export const ToolbarButton:React.FC = React.memo((props) => { + const [isActive, setIsActive] = useState(false); + const [isActive2, setIsActive2] = useState(false); + const [showAddButtons, setShowAddBUttons] = useState(false) + function onClick() { + setIsActive(!isActive) + } + + function onClick2() { + setIsActive2(!isActive2) + } + + function showAdd() { + setShowAddBUttons(!showAddButtons); + } + return
-
+ { + showAddButtons && props.type.includes('user') + && +
+ + +
+ } + {/*
{props.caption} -
+
*/}
}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/typeButtons.ts b/src/components/mainScreen/toolbar/typeButtons.ts index 0752009..fb66bbf 100644 --- a/src/components/mainScreen/toolbar/typeButtons.ts +++ b/src/components/mainScreen/toolbar/typeButtons.ts @@ -5,10 +5,10 @@ export type TypeToolbarButtons = | 'user guest' | 'user self' | 'users' - | 'microOn' - | 'microOff' - | 'controlOn' - | 'controlOff' + | 'micro' + | 'micro on' + | 'control' + | 'control on' | 'other' | 'soundOn' | 'soundOff' diff --git a/src/components/mainScreen/toolbar/typeCaptionButtons.ts b/src/components/mainScreen/toolbar/typeCaptionButtons.ts index d718d61..6e5131a 100644 --- a/src/components/mainScreen/toolbar/typeCaptionButtons.ts +++ b/src/components/mainScreen/toolbar/typeCaptionButtons.ts @@ -5,10 +5,10 @@ export const CaptionToolbarButtons = { 'user guest': 'Гость', 'user self': 'Вы', 'users': 'Пользователи', - 'microOff': 'Включить микрофон', - 'microOn': 'Выключить микрофон', - 'controlOn': '', - 'controlOff': 'Запрос управления', + 'micro': 'Включить микрофон', + 'micro on': 'Выключить микрофон', + 'control on': '', + 'control': 'Запрос управления', 'other': '', 'soundOn': '', 'soundOff': '',