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

добавлена кнопка смены языка для декстопа

Browse Source
This commit is contained in:
DmitriyB
2022-08-12 13:00:07 +05:00
parent 8dd053ff70
commit 3b09a2b57b
10 changed files with 115 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1
View File
@@ -9,6 +9,7 @@
name="description"
content="Web site created using create-react-app"
/>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
src/App.css
+4 -1
View File
@@ -3,4 +3,7 @@
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
/* padding: env(20px) env(44px) env(20px) env(44px); */
}
src/components/mainScreen/toolbar/buttonContainer.tsx
+35 -8
View File
@@ -14,6 +14,8 @@ type TProps = {
active?: boolean,
isSelected?: boolean
}>
isBorderLineTop?: 'hide' | 'show'
isBorderLineBottom?: 'hide' | 'show'
}
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
@@ -21,7 +23,11 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
const windowHeight = useContext(ContextWindowHeight);
return <div className="toolbar-button-container">
<BorderLine />
{
props?.isBorderLineTop === 'hide' ?
null
: <BorderLine />
}
{props.buttons.map((button, index) => {
function onClick() {
if(openedAddButtons === button.type + index + 'areacont') {
@@ -34,10 +40,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
<ToolbarButton
// key={button.type + index}
onClick={() => {
onClick();
// if(openedAddButtons === button.type + index + 'areacont') {
// setOpenedAddButtons('');
// } setOpenedAddButtons(button.type + index + 'areacont')
onClick();
button.onClick()
}}
type={button.type}
@@ -46,7 +49,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
active={button?.active}
isCaption={button.isCaption}
isSelected={button?.isSelected}
isVisible={openedAddButtons === button.type + index + 'areacont'}
isVisible={openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
/>
{
button.type.includes('user') && windowHeight > 700 ?
@@ -72,14 +75,38 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
type={"control"}
caption={''}
isCaption={false}
isLarge={true}
size={"large"}
/>
</div>
: null
}
{
button.type.includes('language') && windowHeight > 700 ?
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' ? 'show' : ''}`}>
<ToolbarButton
onClick={() => {onClick(); button.onClick()}}
type={button.type}
caption={CaptionToolbarButtons[button.type]}
isCaption={false}
isSelected={button.isSelected}
/>
<ToolbarButton
onClick={() => null}
type={"language en"}
caption={CaptionToolbarButtons[button.type]}
isCaption={false}
isSelected={false}
/>
</div>
: null
}
</div>
}
)}
<BorderLine />
{
props?.isBorderLineBottom === 'hide' ?
null
: <BorderLine />
}
</div>
})
src/components/mainScreen/toolbar/icons/enIcon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 16.7273C5.44772 16.7273 5 16.2796 5 15.7273V9C5 8.44772 5.44772 8 6 8H9.90483C10.2178 8 10.4716 8.25375 10.4716 8.56676C10.4716 8.87978 10.2178 9.13352 9.90483 9.13352H6.81676C6.54062 9.13352 6.31676 9.35738 6.31676 9.63352V11.2926C6.31676 11.5688 6.54062 11.7926 6.81676 11.7926H9.62145C9.93329 11.7926 10.1861 12.0454 10.1861 12.3572C10.1861 12.6691 9.93329 12.9219 9.62145 12.9219H6.81676C6.54062 12.9219 6.31676 13.1457 6.31676 13.4219V15.0938C6.31676 15.3699 6.54062 15.5938 6.81676 15.5938H9.95597C10.269 15.5938 10.5227 15.8475 10.5227 16.1605C10.5227 16.4735 10.269 16.7273 9.95597 16.7273H6Z" fill="white"/>
<path d="M18.6225 8C18.9826 8 19.2745 8.29191 19.2745 8.65199V15.933C19.2745 16.3716 18.9189 16.7273 18.4802 16.7273C18.2197 16.7273 17.9757 16.5995 17.8274 16.3854L13.644 10.3496C13.6341 10.3353 13.6178 10.3267 13.6004 10.3267C13.571 10.3267 13.5472 10.3505 13.5472 10.3798V16.0689C13.5472 16.4325 13.2525 16.7273 12.8888 16.7273C12.5252 16.7273 12.2305 16.4325 12.2305 16.0689V8.79985C12.2305 8.3581 12.5886 8 13.0303 8C13.2927 8 13.5384 8.12867 13.6878 8.34434L17.8737 14.3862C17.8836 14.4005 17.9 14.4091 17.9174 14.4091C17.9467 14.4091 17.9705 14.3853 17.9705 14.356V8.65199C17.9705 8.29191 18.2624 8 18.6225 8Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/components/mainScreen/toolbar/icons/ruIcon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.65838 16.7273C5.29477 16.7273 5 16.4325 5 16.0689V9C5 8.44772 5.44772 8 6 8H8.1108C8.78693 8 9.34801 8.11648 9.79403 8.34943C10.2429 8.58239 10.5781 8.90483 10.7997 9.31676C11.0213 9.72585 11.1321 10.1989 11.1321 10.7358C11.1321 11.2699 11.0199 11.7401 10.7955 12.1463C10.5739 12.5497 10.2386 12.8636 9.78977 13.0881C9.34375 13.3125 8.78267 13.4247 8.10653 13.4247H6.31676C6.00375 13.4247 5.75 13.171 5.75 12.858C5.75 12.5449 6.00375 12.2912 6.31676 12.2912H7.98722C8.41335 12.2912 8.75994 12.2301 9.02699 12.108C9.29688 11.9858 9.49432 11.8082 9.61932 11.5753C9.74432 11.3423 9.80682 11.0625 9.80682 10.7358C9.80682 10.4062 9.7429 10.1207 9.61506 9.87926C9.49006 9.63778 9.29261 9.45312 9.02273 9.32528C8.75568 9.1946 8.40483 9.12926 7.97017 9.12926H6.81676C6.54062 9.12926 6.31676 9.35312 6.31676 9.62926V16.0689C6.31676 16.4325 6.02199 16.7273 5.65838 16.7273ZM8.92687 12.7898C9.16203 12.7898 9.37847 12.918 9.49141 13.1243L10.9325 15.7559C11.172 16.1932 10.8556 16.7273 10.357 16.7273C10.1153 16.7273 9.89316 16.5944 9.77884 16.3814L8.35977 13.7378C8.1296 13.309 8.44021 12.7898 8.92687 12.7898Z" fill="white"/>
<path d="M18.3466 8.66051C18.3466 8.29572 18.6423 8 19.0071 8C19.3719 8 19.6676 8.29572 19.6676 8.66051V13.7401C19.6676 14.3509 19.5241 14.892 19.2372 15.3636C18.9503 15.8324 18.5469 16.2017 18.027 16.4716C17.5071 16.7386 16.8977 16.8722 16.1989 16.8722C15.5028 16.8722 14.8949 16.7386 14.375 16.4716C13.8551 16.2017 13.4517 15.8324 13.1648 15.3636C12.8778 14.892 12.7344 14.3509 12.7344 13.7401V8.65838C12.7344 8.29477 13.0291 8 13.3928 8C13.7564 8 14.0511 8.29477 14.0511 8.65838V13.6335C14.0511 14.0284 14.1378 14.3793 14.3111 14.6861C14.4872 14.9929 14.7358 15.2344 15.0568 15.4105C15.3778 15.5838 15.7585 15.6705 16.1989 15.6705C16.642 15.6705 17.0241 15.5838 17.3452 15.4105C17.669 15.2344 17.9162 14.9929 18.0866 14.6861C18.2599 14.3793 18.3466 14.0284 18.3466 13.6335V8.66051Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

src/components/mainScreen/toolbar/toolbar.css
+19 -8
View File
@@ -10,7 +10,7 @@
border-right: 1px solid #4F4F4F;
background: #333333;
box-sizing: border-box;
box-sizing: border-box;
}
.toolbar-field {
@@ -48,17 +48,14 @@
position: absolute;
top: calc((100% - 128px) / 2);
left: calc(100% - 4px);
display: flex;
justify-content: center;
align-items: center;
margin-top: auto;
margin-bottom: auto;
width: 24px;
height: 128px;
border: none;
background: url('openToolbarIcon.svg') 50% 50% no-repeat;
background: url('openToolbarBackIcon.svg') 50% 50% no-repeat;
background-size: 100% 100%;
@@ -66,8 +63,8 @@
}
.toolbar-open-button-icon {
width: 100%;
height: 100%;
width: 24px;
height: 24px;
background: url('pointerIcon.svg') 50% 50% no-repeat;
background-size: 24px 24px;
}
@@ -280,7 +277,21 @@
background-color: #4F4F4F;
}
.toolbar-button.selected {
.toolbar-button.language {
background-color: #4F4F4F;
}
.toolbar-button.language.ru {
background: url('./icons/ruIcon.svg') 50% 50% no-repeat;
background-color: #4F4F4F;
}
.toolbar-button.language.en {
background: url('./icons/enIcon.svg') 50% 50% no-repeat;
background-color: #4F4F4F;
}
.toolbar-button.selected.selected {
background-color: #CE56C2;
}
src/components/mainScreen/toolbar/toolbar.tsx
+33 -5
View File
@@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import { ContextWindowHeight } from "../../contextWindowHeight";
import { ButtonContainer } from "./buttonContainer";
import './toolbar.css';
@@ -17,6 +17,11 @@ type TProps = {
export const Toolbar:React.FC<TProps> = React.memo((props) => {
const windowHeight = useContext(ContextWindowHeight);
const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState<boolean>(false);
function showAddButtons() {
setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop);
}
if(windowHeight < 700) {
return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
@@ -137,13 +142,36 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
}
]}
/>
<ToolbarButton
<ButtonContainer
buttons={[
{
type:"share",
onClick: () => null,
isCaption: true
},
{
type: "language ru",
onClick: () => showAddButtons(),
isCaption: true,
isSelected: showAddButtonsContOnDekstop
}
]}
isBorderLineTop={"hide"}
/>
{/* <ToolbarButton
type="share"
onClick={() => console.log('click')}
caption={CaptionToolbarButtons["share"]}
isCaption={true}
/>
<BorderLine />
<ToolbarButton
type="language ru"
onClick={() => showAddButtons()}
caption={CaptionToolbarButtons["language ru"]}
isCaption={true}
isSelected={showAddButtonsContOnDekstop}
/> */}
{/* <BorderLine />*/}
<ToolbarButton
type="exit"
onClick={() => null}
@@ -152,8 +180,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
/>
</div>
</div>
<button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
<div className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
<span className="toolbar-open-button-icon"></span>
</button>
</div>
</div>
})
src/components/mainScreen/toolbar/toolbarButton.tsx
+9 -26
View File
@@ -10,21 +10,16 @@ type TProps = {
active?: boolean
isNotification?: boolean
isSelected?: boolean
isLarge?: boolean
size?: 'large' | 'medium'
isVisible?: boolean | false
}
export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
const [isActive, setIsActive] = useState<boolean>(props?.active || false);
const [showAddButtons, setShowAddButtons] = useState(false)
function onClick() {
setIsActive(!isActive)
}
function showAdd() {
setShowAddButtons(!showAddButtons);
}
}
return <div className={`toolbar-button-area ${props?.isVisible ? 'hidden' : ''}`}>
<button
@@ -33,42 +28,30 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
${props.type} ${isActive ? 'on' : ''}
${props?.isNotification ? 'notification' : ''}
${props?.isSelected ? 'selected' : ''}
${props?.isLarge ? `large ${props.type}` : ''}
${props?.size ? `large ${props.type}` : ''}
`
}
onClick={() => {
props.onClick();
showAdd();
//@ts-ignore
if(CaptionToolbarButtons[`${props.type} on`] || props.type === 'users' || props.type === 'other')
onClick();
}}
>
{
props?.isLarge
props?.size === 'large'
? <div className="toolbar-button-large-view">
<span className="toolbar-button-large-view-icon"></span>
<span className="toolbar-button-large-view-title">{CaptionToolbarButtons[props.type]}</span>
</div>
: props?.size === 'medium'
? <div className="toolbar-button-medium-view">
<span className="toolbar-button-medium-view-icon"></span>
<span className="toolbar-button-medium-view-title">{CaptionToolbarButtons[props.type]}</span>
</div>
: null
}
</button>
{/* {
showAddButtons && props.type.includes('user')
&&
<div className="toolbar-button-add-buttons">
<button
className={`toolbar-button micro ${isActive ? 'on' : ''}`}
onClick={() => onClick()}
>
</button>
<button
className={`toolbar-button control ${isActive2 ? 'on' : ''}`}
onClick={() => onClick2()}
>
</button>
</div>
} */}
{
props.isCaption && <div className="toolbar-button-description-container">
<span className="toolbar-button-description-triangle"></span>
src/components/mainScreen/toolbar/typeButtons.ts
+3 -1
View File
@@ -14,4 +14,6 @@ export type TypeToolbarButtons =
| 'sound'
| 'exit'
| 'copy'
| 'share'
| 'share'
| 'language ru'
| 'language en'
src/components/mainScreen/toolbar/typeCaptionButtons.ts
+3 -1
View File
@@ -14,5 +14,7 @@ export const CaptionToolbarButtons = {
'sound': 'Включить звук',
'exit': 'Завершить презентацию',
'copy': 'Скопировать',
'share': 'Поделиться'
'share': 'Поделиться',
'language ru': 'Язык',
'language en': 'Language'
}