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

fix close parts, доверстано окно Поделиться

Browse Source
This commit is contained in:
DmitriyB
2022-08-11 13:55:24 +05:00
parent b18640a99d
commit f440ec83ba
7 changed files with 154 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mainScreen/mainScreen.tsx
+32 -2
View File
@@ -10,10 +10,12 @@ export const MainScreen:React.FC = React.memo(() => {
const [showMobileUsersPart, setShowMobileUsersPart] = useState<boolean>(false);
const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState<boolean>(false);
const [showMobileSharePart, setShowMobileSharePart] = useState<boolean>(false);
const showPartsStates = [
setShowMobileUsersPart,
setShowMobileOtherPart,
setShowMobileLangSelectorPart
setShowMobileLangSelectorPart,
setShowMobileSharePart
]
const windowHeight = useContext(ContextWindowHeight);
@@ -46,6 +48,19 @@ export const MainScreen:React.FC = React.memo(() => {
setShowMobileLangSelectorPart(true);
}
function closeLangSelector() {
setShowMobileLangSelectorPart(false);
}
function openSharePart() {
closeOthersParts(setShowMobileSharePart);
setShowMobileSharePart(true);
}
function closeSharePart() {
setShowMobileSharePart(false);
}
function closeOthersParts(currentPart: React.Dispatch<React.SetStateAction<boolean>>) {
showPartsStates.forEach(e => {
if(currentPart !== e) {
@@ -94,6 +109,7 @@ export const MainScreen:React.FC = React.memo(() => {
<MobileAddPart
onClickClose={closeMobileOther}
onClickChangeLang={openLangSelector}
onClickShare={openSharePart}
title='Дополнительно'
type="other"
/>
@@ -105,13 +121,27 @@ export const MainScreen:React.FC = React.memo(() => {
unmountOnExit
>
<MobileAddPart
onClickClose={closeMobileOther}
onClickClose={closeLangSelector}
title='Выбор языка'
type="selectLang"
isContainBack={true}
onClickBackButton={openMobileOther}
/>
</CSSTransition>
<CSSTransition
in={showMobileSharePart}
timeout={300}
classNames='show-mobile-users'
unmountOnExit
>
<MobileAddPart
onClickClose={closeSharePart}
title='Пригласить на демонстрацию'
type="share"
isContainBack={true}
onClickBackButton={openMobileOther}
/>
</CSSTransition>
</>
: null
}
src/components/mainScreen/mobileAddPart/borderLine.tsx
+9 -2
View File
@@ -1,5 +1,12 @@
import React from "react";
export const BorderLine:React.FC = React.memo(() => {
return <div className="border-line"></div>
type TProps = {
width?: '80%' | '100%'
}
export const BorderLine:React.FC<TProps> = React.memo((props) => {
return <div
className="border-line"
style={{width: props?.width ? props.width : '100%'}}
></div>
})
src/components/mainScreen/mobileAddPart/icons/copyIcon.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="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="white" stroke-linecap="round"/>
<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="white" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

src/components/mainScreen/mobileAddPart/icons/pinkCopyIcon.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="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="#CE56C2" stroke-linecap="round"/>
<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="#CE56C2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

src/components/mainScreen/mobileAddPart/mobileAddPart.css
+95 -1
View File
@@ -15,6 +15,7 @@
width: 100%;
height: 1px;
background-color: #4F4F4F;
align-self: center;
}
.mobile-users-part-header {
@@ -94,7 +95,7 @@
flex-direction: column;
padding-top: 12px;
height: 100%;
justify-content: space-between;
justify-content: space-between;
}
.setting-buttons-row {
@@ -192,16 +193,109 @@
height: 24px;
}
.share-container {
display: flex;
flex-direction: column;
padding-top: 12px;
height: 100%;
gap: 18px;
color: #FFFFFF;
}
.share-container-item {
display: flex;
flex-direction: column;
gap: 16px;
}
.share-container-item-title {
font-weight: 600;
font-size: 16px;
line-height: 19px;
}
.share-container-item-buttons {
display: flex;
gap: 8px;
}
.share-container-item-input {
height: 48px;
background-color: #4F4F4F;
outline: none;
border: none;
border-radius: 12px;
box-sizing: border-box;
color: #FFFFFF;
}
.share-container-item-input.code {
flex: 2;
text-align: center;
vertical-align: middle;
font-weight: 300;
font-size: 24px;
line-height: 29px;
letter-spacing: 0.3em;
}
.share-container-item-input.href {
width: 100%;
font-weight: 400;
font-size: 16px;
line-height: 19px;
padding: 14.5px 16px;
}
.share-container-item-copy-code-button-container {
height: 48px;
flex: 1;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: #CE56C2;
border-radius: 12px;
font-weight: 500;
font-size: 16px;
line-height: 20px;
user-select: none;
}
.share-container-item-copy-code-button-icon {
width: 24px;
height: 24px;
background: url('icons/copyIcon.svg') 50% 50% no-repeat;
background-size: 100% 100%;
}
.share-container-item-copy-code-button-container:active {
background-color: #FFFFFF;
color: #CE56C2;
}
.share-container-item-copy-code-button-container:active .share-container-item-copy-code-button-icon {
background: url('icons/pinkCopyIcon.svg') 50% 50% no-repeat;
}
.share-container-item-copy-href-button {
width: 48px;
height: 48px;
border: none;
border-radius: 12px;
background: url('icons/copyIcon.svg') 50% 50% no-repeat;
background-color: #CE56C2;
background-size: 24px 24px;
flex-shrink: 0;
}
.share-container-item-copy-href-button:active {
background: url('icons/pinkCopyIcon.svg') 50% 50% no-repeat;
background-color: #FFFFFF;
}
src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
+3
View File
@@ -4,6 +4,7 @@ import { MobileAddPartHeader } from "./mobileAddPartHeader";
import { UsersList } from "./usersList";
import { SettingButtons } from "./settingButtons";
import './mobileAddPart.css';
import { ShareContainer } from "./shareContainer";
type TProps = {
onClickClose: () => void
@@ -42,6 +43,8 @@ export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
type="selectLang"
onClickSelectLang={props.onClickSelectLang}
/>
: props.type === 'share'
? <ShareContainer />
: null
}
</div>
src/components/mainScreen/mobileAddPart/shareContainer.tsx
+7 -3
View File
@@ -10,18 +10,22 @@ export const ShareContainer:React.FC<TProps> = React.memo((props) => {
<div className="share-container-item">
<span className="share-container-item-title">Код подключения</span>
<div className="share-container-item-buttons">
<input className="share-container-item-input code"></input>
<input className="share-container-item-input code" value={'123 456'} readOnly></input>
<div className="share-container-item-copy-code-button-container">
<span className="share-container-item-copy-code-button-icon"></span>
<span className="share-container-item-copy-code-button-text">Скопировать</span>
</div>
</div>
</div>
<BorderLine />
<BorderLine width="80%"/>
<div className="share-container-item">
<span className="share-container-item-title">Ссылка для подключения</span>
<div className="share-container-item-buttons">
<input className="share-container-item-input href"></input>
<input
className="share-container-item-input href"
value={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
readOnly
></input>
<button className="share-container-item-copy-href-button"></button>
</div>
</div>