diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx index 5bfcd4e..cb3bd6c 100644 --- a/src/components/mainScreen/toolbar/buttonContainer.tsx +++ b/src/components/mainScreen/toolbar/buttonContainer.tsx @@ -2,12 +2,17 @@ import React from "react"; import { ToolbarButton } from "./toolbarButton"; import { BorderLine } from "./toolbarButtonContainerBorderLine"; import { TypeToolbarButtons } from "./typeButtons"; +import { CaptionToolbarButtons } from "./typeCaptionButtons"; type TProps = { - buttons: Array<{type: TypeToolbarButtons, isNotification?: boolean, onClick: () => void}> + buttons: Array<{ + type: TypeToolbarButtons, + isNotification?: boolean, + onClick: () => void + }> } -export const ButtonContainer:React.FC = React.memo((props) => { +export const ButtonContainer:React.FC = React.memo((props) => { return
{props.buttons.map((button, index) => @@ -16,6 +21,7 @@ export const ButtonContainer:React.FC = React.memo((props) => { onClick={button.onClick} type={button.type} isNotification={button?.isNotification} + caption={CaptionToolbarButtons[button.type]} />)}
diff --git a/src/components/mainScreen/toolbar/icons/closeFullscreenIcon.svg b/src/components/mainScreen/toolbar/icons/closeFullscreenIcon.svg new file mode 100644 index 0000000..e1fcfdc --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/closeFullscreenIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/closeIcon.svg b/src/components/mainScreen/toolbar/icons/closeIcon.svg new file mode 100644 index 0000000..c6696a6 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/closeIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/constrolOffIcon.svg b/src/components/mainScreen/toolbar/icons/constrolOffIcon.svg new file mode 100644 index 0000000..f3daa38 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/constrolOffIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/constrolOnIcon.svg b/src/components/mainScreen/toolbar/icons/constrolOnIcon.svg new file mode 100644 index 0000000..453c9dc --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/constrolOnIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/copyIcon.svg b/src/components/mainScreen/toolbar/icons/copyIcon.svg new file mode 100644 index 0000000..4e37371 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/copyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/descriptTiriangleIcon.svg b/src/components/mainScreen/toolbar/icons/descriptTiriangleIcon.svg new file mode 100644 index 0000000..7ad299f --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/descriptTiriangleIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/descriptionButtonIcon.svg b/src/components/mainScreen/toolbar/icons/descriptionButtonIcon.svg new file mode 100644 index 0000000..06fdd36 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/descriptionButtonIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/mainScreen/toolbar/icons/exitIcon.svg b/src/components/mainScreen/toolbar/icons/exitIcon.svg index 512ae72..a093752 100644 --- a/src/components/mainScreen/toolbar/icons/exitIcon.svg +++ b/src/components/mainScreen/toolbar/icons/exitIcon.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/src/components/mainScreen/toolbar/icons/handIcon.svg b/src/components/mainScreen/toolbar/icons/handIcon.svg new file mode 100644 index 0000000..c218bbd --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/handIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/microOffIcon.svg b/src/components/mainScreen/toolbar/icons/microOffIcon.svg new file mode 100644 index 0000000..93efe8c --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/microOffIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/microOnIcon.svg b/src/components/mainScreen/toolbar/icons/microOnIcon.svg new file mode 100644 index 0000000..bc433e5 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/microOnIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/openFullscreenIcon.svg b/src/components/mainScreen/toolbar/icons/openFullscreenIcon.svg new file mode 100644 index 0000000..e4dcd11 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/openFullscreenIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/othertIcon.svg b/src/components/mainScreen/toolbar/icons/othertIcon.svg new file mode 100644 index 0000000..c1f0eb1 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/othertIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/mainScreen/toolbar/icons/shareIcon.svg b/src/components/mainScreen/toolbar/icons/shareIcon.svg index 0664766..4397a11 100644 --- a/src/components/mainScreen/toolbar/icons/shareIcon.svg +++ b/src/components/mainScreen/toolbar/icons/shareIcon.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/src/components/mainScreen/toolbar/icons/soundOffIcon.svg b/src/components/mainScreen/toolbar/icons/soundOffIcon.svg new file mode 100644 index 0000000..60b12aa --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/soundOffIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/icons/soundOnIcon.svg b/src/components/mainScreen/toolbar/icons/soundOnIcon.svg new file mode 100644 index 0000000..b5d9f8b --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/soundOnIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/userIcon.svg b/src/components/mainScreen/toolbar/icons/userIcon.svg new file mode 100644 index 0000000..e9e36bd --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/userIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/toolbar/icons/usersIcon.svg b/src/components/mainScreen/toolbar/icons/usersIcon.svg new file mode 100644 index 0000000..f753fc6 --- /dev/null +++ b/src/components/mainScreen/toolbar/icons/usersIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css index 6e43cc8..610b03c 100644 --- a/src/components/mainScreen/toolbar/toolbar.css +++ b/src/components/mainScreen/toolbar/toolbar.css @@ -65,6 +65,8 @@ border: none; background: url('openToolbarIcon.svg') 50% 50% no-repeat; background-size: 100% 100%; + + cursor: pointer; } .toolbar-open-button-icon { @@ -78,6 +80,10 @@ background: url('closeToolbarIcon.svg') 50% 50% no-repeat; } +.toolbar-button-area { + position: relative; +} + .toolbar-button { position: relative; width: 40px; @@ -85,6 +91,45 @@ border: none; border-radius: 50px; background-size: 100% 100%; + background-color: #4F4F4F; + cursor: pointer; +} + +.toolbar-button:hover { + opacity: .7; +} + +.toolbar-button-description-container { + opacity: 0; + position: absolute; + left: 100%; + height: 24px; + top: calc(50% - 12px); + background-color: #27AE60; + transition: .3s; + pointer-events: none; + display: flex; + align-items: center; + /* width: auto; */ + box-sizing: content-box; +} + +.toolbar-button-area:hover .toolbar-button-description-container { + opacity: 1; + transition: .3s; +} + +.toolbar-button-description-rectangle { + /* display: inline-block; */ + white-space: nowrap; + /* flex-shrink: 0; */ +} + +.toolbar-button-description-triangle { + display: flex; + width: 18px; + height: 24px; + background-color: #EB5757; } .toolbar-button.notification::after { @@ -98,52 +143,84 @@ background-color: #F2994A; } -.toolbar-button.fullscreen { - background: url('./icons/disableFullscreenIcon.svg'); +.toolbar-button.fullscreenOn { + background: url('./icons/openFullscreenIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; +} + +.toolbar-button.fullscreenOff { + background: url('./icons/closeFullscreenIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; +} + +.toolbar-button.user { + background: url('icons/userIcon.svg') 50% 50% no-repeat; } .toolbar-button.admin { - background: url('./icons/adminIcon.svg'); + background-color: #2F80ED; } .toolbar-button.self { - background: url('./icons/selfIcon.svg'); + background-color: #27AE60; } .toolbar-button.guest { - background: url('./icons/guestIcon.svg'); + background-color: #9B51E0; } .toolbar-button.users { background: url('./icons/disableFullscreenIcon.svg'); } -.toolbar-button.micro { - background: url('./icons/microDisabledIcon.svg'); +.toolbar-button.microOff { + background: url('./icons/microOffIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; } -.toolbar-button.control { - background: url('./icons/controlDisabledIcon.svg'); +.toolbar-button.microOn { + background: url('./icons/microOnIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; +} + +.toolbar-button.controlOff { + background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; +} + +.toolbar-button.controlOn { + background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; } .toolbar-button.other { - background: url('./icons/disableFullscreenIcon.svg'); + background: url('./icons/othertIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; } -.toolbar-button.sound { - background: url('./icons/disableFullscreenIcon.svg'); +.toolbar-button.soundOff { + background: url('./icons/soundOffIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; +} + +.toolbar-button.soundOn { + background: url('./icons/soundOnIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; } .toolbar-button.exit { - background: url('./icons/exitIcon.svg'); + background: url('./icons/exitIcon.svg') 50% 50% no-repeat; + background-color: #EB5757; } .toolbar-button.copy { - background: url('./icons/disableFullscreenIcon.svg'); + background: url('./icons/copyIcon.svg') 50% 50% no-repeat; + background-color: #4F4F4F; } .toolbar-button.share { - background: url('./icons/shareIcon.svg'); + background: url('./icons/shareIcon.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 aab3fd3..1ea93c3 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -3,6 +3,7 @@ import { ButtonContainer } from "./buttonContainer"; import './toolbar.css'; import { ToolbarButton } from "./toolbarButton"; import { BorderLine } from "./toolbarButtonContainerBorderLine"; +import { CaptionToolbarButtons } from "./typeCaptionButtons"; type TProps = { onClickOpenButton: () => void @@ -14,25 +15,26 @@ export const Toolbar:React.FC = React.memo((props) => {
null} + caption={CaptionToolbarButtons["fullscreenOn"]} /> console.log('click'), }, { - type: "self", + type: "user self", onClick: () => console.log('click') }, { - type: "guest", + type: "user guest", onClick: () => console.log('click') }, { - type: "guest", + type: "user guest", onClick: () => console.log('click'), isNotification: true } @@ -43,11 +45,11 @@ export const Toolbar:React.FC = React.memo((props) => { console.log('click') }, { - type: "micro", + type: "microOff", onClick: () => console.log('click') } ]} @@ -55,11 +57,13 @@ export const Toolbar:React.FC = React.memo((props) => { console.log('click')} + caption={CaptionToolbarButtons["share"]} /> null} + caption={CaptionToolbarButtons["exit"]} />
diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx index 4714c36..999ff59 100644 --- a/src/components/mainScreen/toolbar/toolbarButton.tsx +++ b/src/components/mainScreen/toolbar/toolbarButton.tsx @@ -5,11 +5,19 @@ type TProps = { onClick: () => void type: TypeToolbarButtons isNotification?: boolean + caption: string } export const ToolbarButton:React.FC = React.memo((props) => { - return +
+ + {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 fb7b7e0..0752009 100644 --- a/src/components/mainScreen/toolbar/typeButtons.ts +++ b/src/components/mainScreen/toolbar/typeButtons.ts @@ -1,13 +1,17 @@ export type TypeToolbarButtons = - 'fullscreen' - | 'admin' - | 'guest' - | 'self' + 'fullscreenOn' + | 'fullscreenOff' + | 'user admin' + | 'user guest' + | 'user self' | 'users' - | 'micro' - | 'control' + | 'microOn' + | 'microOff' + | 'controlOn' + | 'controlOff' | 'other' - | 'sound' + | 'soundOn' + | 'soundOff' | 'exit' | 'copy' | 'share' \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/typeCaptionButtons.ts b/src/components/mainScreen/toolbar/typeCaptionButtons.ts new file mode 100644 index 0000000..d718d61 --- /dev/null +++ b/src/components/mainScreen/toolbar/typeCaptionButtons.ts @@ -0,0 +1,18 @@ +export const CaptionToolbarButtons = { + fullscreenOn: 'Развернуть', + fullscreenOff: 'Свернуть', + 'user admin': 'Администратор', + 'user guest': 'Гость', + 'user self': 'Вы', + 'users': 'Пользователи', + 'microOff': 'Включить микрофон', + 'microOn': 'Выключить микрофон', + 'controlOn': '', + 'controlOff': 'Запрос управления', + 'other': '', + 'soundOn': '', + 'soundOff': '', + 'exit': 'Завершить презентацию', + 'copy': '', + 'share': 'Поделиться' +} \ No newline at end of file