DmitriyB/pixelstreamingui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

добавлена аналогичная эмуляция кнопки передачи контроля, fix control button height in mobile

Browse Source
This commit is contained in:
DmitriyB
2022-08-12 15:01:04 +05:00
parent 6ada0f778f
commit 4d29bef67b
4 changed files with 81 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mainScreen/mobileAddPart/addPartUserItem.tsx
+62 -8
View File
@@ -1,8 +1,9 @@
import React from "react";
import React, { useState } from "react";
import { ToolbarButton } from "../toolbar/toolbarButton";
import { TypeToolbarButtons } from "../toolbar/typeButtons";
import { BorderLine } from "./borderLine";
import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";
import { ControlButton } from "../toolbar/controlButton";
type TProps = {
typeUser: TypeToolbarButtons
@@ -12,6 +13,16 @@ type TProps = {
}
export const AddPartUserItem:React.FC<TProps> = React.memo((props) => {
const controlStates = ['default', 'questing', 'return', 'questing'];// temp
const [currentControlState, setCurrentControlState] = useState<number>(0); // temp
// temp
function nextControlState() {
if(currentControlState + 1 < controlStates.length)
setCurrentControlState(currentControlState + 1);
else setCurrentControlState(0);
}
return <div className="user-item" onClick={() => props?.onClickItem ? props?.onClickItem() : null}>
<ToolbarButton
type={props.typeUser}
@@ -32,13 +43,56 @@ export const AddPartUserItem:React.FC<TProps> = React.memo((props) => {
isCaption={false}
onClick={() => props?.onClickMicro ? props?.onClickMicro() : null}
/>
<ToolbarButton
type="control"
active={false}
caption=''
isCaption={false}
onClick={() => props?.onClickControl ? props?.onClickControl() : null }
/>
{
// temp
currentControlState === 0
? <ControlButton
onClick={() => nextControlState()}
state={"default"}
userType={'admin'}
/>
: currentControlState === 1
? <>
<ToolbarButton
onClick={() => nextControlState()}
type={"no"}
caption={''}
isCaption={false}
size={"medium"}
/>
<ToolbarButton
onClick={() => nextControlState()}
type={"yes"}
caption={''}
isCaption={false}
size={"medium"}
/>
</>
: currentControlState === 2
? <ControlButton
onClick={() => nextControlState()}
state={"waiting"}
userType={'admin'}
/>
: currentControlState === 3
? <>
<ToolbarButton
onClick={() => nextControlState()}
type={"no"}
caption={''}
isCaption={false}
size={"medium"}
/>
<ToolbarButton
onClick={() => nextControlState()}
type={"yes"}
caption={''}
isCaption={false}
size={"medium"}
/>
</>
: null
}
</div>
: null
}
src/components/mainScreen/toolbar/buttonContainer.tsx
+8 -6
View File
@@ -15,15 +15,17 @@ type TProps = {
active?: boolean,
isSelected?: boolean
}>
isOpenToolbar: boolean
isBorderLineTop?: 'hide' | 'show'
isBorderLineBottom?: 'hide' | 'show'
}
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
const windowHeight = useContext(ContextWindowHeight);
const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
const controlStates = ['default', 'questing', 'return', 'questing'];// temp
const [currentControlState, setCurrentControlState] = useState<number>(0); // temp
const windowHeight = useContext(ContextWindowHeight);
const typeUser = 'admin' // 'user' // temp
// temp
function nextControlState() {
@@ -63,7 +65,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
/>
{
button.type.includes('user') && windowHeight > 700 ?
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' ? 'show' : ''}`}>
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' && props.isOpenToolbar ? 'show' : ''}`}>
<ToolbarButton
// key={button.type + index}
onClick={() => onClick()}
@@ -86,7 +88,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
? <ControlButton
onClick={() => nextControlState()}
state={"default"}
userType={'admin'}
userType={typeUser}
/>
: currentControlState === 1
? <>
@@ -108,8 +110,8 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
: currentControlState === 2
? <ControlButton
onClick={() => nextControlState()}
state={"return"}
userType={'admin'}
state={"waiting"}
userType={typeUser}
/>
: currentControlState === 3
? <>
@@ -136,7 +138,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
}
{
button.type.includes('language') && windowHeight > 700 ?
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' ? 'show' : ''}`}>
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' && props.isOpenToolbar ? 'show' : ''}`}>
<ToolbarButton
onClick={() => {onClick(); button.onClick()}}
type={button.type}
src/components/mainScreen/toolbar/toolbar.css
+5 -1
View File
@@ -367,7 +367,7 @@
box-sizing: border-box;
display: flex;
width: 196px;
height: 44px;
height: 40px;
border-radius: 50px;
justify-content: center;
align-items: center;
@@ -446,4 +446,8 @@
.toolbar-button:active {
opacity: .7;
}
.control-button {
height: 44px;
}
}
src/components/mainScreen/toolbar/toolbar.tsx
+5
View File
@@ -48,6 +48,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
isSelected: props?.isOpenUsersMobilePart
}
]}
isOpenToolbar={props.isOpen}
/>
</div>
<div className="toolbar-field-part">
@@ -66,6 +67,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
isCaption: false
}
]}
isOpenToolbar={props.isOpen}
/>
{/* <BorderLine /> */}
<ToolbarButton
@@ -122,6 +124,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
isCaption: true
}
]}
isOpenToolbar={props.isOpen}
/>
</div>
<div className="toolbar-field-part">
@@ -140,6 +143,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
isCaption: true
}
]}
isOpenToolbar={props.isOpen}
/>
<ButtonContainer
buttons={[
@@ -156,6 +160,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
}
]}
isBorderLineTop={"hide"}
isOpenToolbar={props.isOpen}
/>
{/* <ToolbarButton
type="share"