diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx index 97d3393..33738d2 100644 --- a/src/components/mainScreen/toolbar/buttonContainer.tsx +++ b/src/components/mainScreen/toolbar/buttonContainer.tsx @@ -1,5 +1,6 @@ import React, { useContext, useState } from "react"; import { ContextWindowHeight } from "../../contextWindowHeight"; +import { ControlButton } from "./controlButton"; import { ToolbarButton } from "./toolbarButton"; import { BorderLine } from "./toolbarButtonContainerBorderLine"; import { TypeToolbarButtons } from "./typeButtons"; @@ -20,7 +21,16 @@ type TProps = { export const ButtonContainer:React.FC = React.memo((props) => { const [openedAddButtons, setOpenedAddButtons] = useState(''); + const controlStates = ['default', 'questing', 'return', 'questing'];// temp + const [currentControlState, setCurrentControlState] = useState(0); // temp const windowHeight = useContext(ContextWindowHeight); + + // temp + function nextControlState() { + if(currentControlState + 1 < controlStates.length) + setCurrentControlState(currentControlState + 1); + else setCurrentControlState(0); + } return
{ @@ -70,13 +80,57 @@ export const ButtonContainer:React.FC = React.memo((props) => { caption={''} isCaption={false} /> - null} - type={"control"} - caption={''} - isCaption={false} - size={"large"} - /> + { + // temp + currentControlState === 0 + ? nextControlState()} + state={"default"} + userType={'admin'} + /> + : currentControlState === 1 + ? <> + nextControlState()} + type={"no"} + caption={''} + isCaption={false} + size={"medium"} + /> + nextControlState()} + type={"yes"} + caption={''} + isCaption={false} + size={"medium"} + /> + + : currentControlState === 2 + ? nextControlState()} + state={"return"} + userType={'admin'} + /> + : currentControlState === 3 + ? <> + nextControlState()} + type={"no"} + caption={''} + isCaption={false} + size={"medium"} + /> + nextControlState()} + type={"yes"} + caption={''} + isCaption={false} + size={"medium"} + /> + + : null + } +
: null } diff --git a/src/components/mainScreen/toolbar/controlButton.tsx b/src/components/mainScreen/toolbar/controlButton.tsx new file mode 100644 index 0000000..2ecb3ea --- /dev/null +++ b/src/components/mainScreen/toolbar/controlButton.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import controlOnIcon from './icons/constrolOnIcon.svg'; +import controlOffIcon from './icons/constrolOffIcon.svg'; + +type TProps = { + state: 'default' | 'waiting' | 'return' + userType: 'admin' | 'user' + onClick: () => void +} + +const titleButtonAdmin = { + default: 'Передать управление', + waiting: 'Передать управление', + return: 'Вернуть управление' +} + +const titleButtonUser = { + default: 'Запросить управление', + waiting: 'Запросить управление', + return: 'Вернуть управление' +} + +export const ControlButton:React.FC = React.memo((props) => { + return
props.onClick()}> + control icon + + { + props.userType === "admin" + ? titleButtonAdmin[props.state] + : titleButtonUser[props.state] + } + +
+}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css index 2763768..871452a 100644 --- a/src/components/mainScreen/toolbar/toolbar.css +++ b/src/components/mainScreen/toolbar/toolbar.css @@ -102,6 +102,10 @@ display: flex; gap: 10px; align-items: center; + color: #FFFFFF; + font-weight: 400; + font-size: 14px; + line-height: 17px; } @@ -301,7 +305,13 @@ background-image: none; } -.toolbar-button-large-view { +.toolbar-button.medium { + width: 94px; + background-image: none; +} + +.toolbar-button-large-view, +.toolbar-button-medium-view { display: flex; align-items: center; justify-content: center; @@ -323,13 +333,80 @@ background-size: 100% 100%; } -.toolbar-button-large-view-title { +.toolbar-button-large-view-title, +.toolbar-button-medium-view-title { font-weight: 400; font-size: 14px; line-height: 130%; color: #FFFFFF; } +.toolbar-button.yes .toolbar-button-medium-view-icon { + width: 24px; + height: 24px; + background: url('icons/constrolOnIcon.svg') 50% 50% no-repeat; + background-size: 100% 100%; +} + +.toolbar-button.yes { + background-color: #219653; +} + +.toolbar-button.no .toolbar-button-medium-view-icon { + width: 24px; + height: 24px; + background: url('icons/constrolOffIcon.svg') 50% 50% no-repeat; + background-size: 100% 100%; +} + +.toolbar-button.no { + background-color: #EB5757; +} + +.control-button { + box-sizing: border-box; + display: flex; + width: 196px; + height: 44px; + border-radius: 50px; + justify-content: center; + align-items: center; + gap: 4px; + background: #4F4F4F; + color: #FFFFFF; + font-weight: 400; + font-size: 14px; + line-height: 17px; + cursor: pointer; + user-select: none; +} + +.control-button.waiting { + background: #F2994A; +} + +.control-button:hover { + opacity: .7; +} + + +.control-button-icon { + width: 24px; + height: 24px; +} + + + + + + + + + + + + + .show-toolbar-enter { transform: translateX(-60px); } diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index 03763ac..2a45a0b 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -1,10 +1,9 @@ import React, { useContext, useState } from "react"; import { ContextWindowHeight } from "../../contextWindowHeight"; import { ButtonContainer } from "./buttonContainer"; -import './toolbar.css'; import { ToolbarButton } from "./toolbarButton"; -import { BorderLine } from "./toolbarButtonContainerBorderLine"; import { CaptionToolbarButtons } from "./typeCaptionButtons"; +import './toolbar.css'; type TProps = { onClickOpenButton: () => void diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx index 492089c..a5b4fec 100644 --- a/src/components/mainScreen/toolbar/toolbarButton.tsx +++ b/src/components/mainScreen/toolbar/toolbarButton.tsx @@ -28,7 +28,7 @@ export const ToolbarButton:React.FC = React.memo((props) => { ${props.type} ${isActive ? 'on' : ''} ${props?.isNotification ? 'notification' : ''} ${props?.isSelected ? 'selected' : ''} - ${props?.size ? `large ${props.type}` : ''} + ${props?.size === 'large' ? `large ${props.type}` : props?.size === 'medium' ? `medium ${props.type}` : ''} ` } onClick={() => { diff --git a/src/components/mainScreen/toolbar/typeButtons.ts b/src/components/mainScreen/toolbar/typeButtons.ts index fbb87ab..08f542e 100644 --- a/src/components/mainScreen/toolbar/typeButtons.ts +++ b/src/components/mainScreen/toolbar/typeButtons.ts @@ -16,4 +16,6 @@ export type TypeToolbarButtons = | 'copy' | 'share' | 'language ru' - | 'language en' \ No newline at end of file + | 'language en' + | 'yes' + | 'no' \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/typeCaptionButtons.ts b/src/components/mainScreen/toolbar/typeCaptionButtons.ts index 6aab539..4807383 100644 --- a/src/components/mainScreen/toolbar/typeCaptionButtons.ts +++ b/src/components/mainScreen/toolbar/typeCaptionButtons.ts @@ -16,5 +16,7 @@ export const CaptionToolbarButtons = { 'copy': 'Скопировать', 'share': 'Поделиться', 'language ru': 'Язык', - 'language en': 'Language' + 'language en': 'Language', + 'yes': 'Да', + 'no': 'Нет' } \ No newline at end of file