diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index b2cd5c4..ec976e8 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -10,10 +10,12 @@ export const MainScreen:React.FC = React.memo(() => { const [showMobileUsersPart, setShowMobileUsersPart] = useState(false); const [showMobileOtherPart, setShowMobileOtherPart] = useState(false); const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState(false); + const [showMobileSharePart, setShowMobileSharePart] = useState(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>) { showPartsStates.forEach(e => { if(currentPart !== e) { @@ -94,6 +109,7 @@ export const MainScreen:React.FC = React.memo(() => { @@ -105,13 +121,27 @@ export const MainScreen:React.FC = React.memo(() => { unmountOnExit > + + + : null } diff --git a/src/components/mainScreen/mobileAddPart/borderLine.tsx b/src/components/mainScreen/mobileAddPart/borderLine.tsx index a10009e..96d2a63 100644 --- a/src/components/mainScreen/mobileAddPart/borderLine.tsx +++ b/src/components/mainScreen/mobileAddPart/borderLine.tsx @@ -1,5 +1,12 @@ import React from "react"; -export const BorderLine:React.FC = React.memo(() => { - return
+type TProps = { + width?: '80%' | '100%' +} + +export const BorderLine:React.FC = React.memo((props) => { + return
}) \ No newline at end of file diff --git a/src/components/mainScreen/mobileAddPart/icons/copyIcon.svg b/src/components/mainScreen/mobileAddPart/icons/copyIcon.svg new file mode 100644 index 0000000..4e37371 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/copyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/mobileAddPart/icons/pinkCopyIcon.svg b/src/components/mainScreen/mobileAddPart/icons/pinkCopyIcon.svg new file mode 100644 index 0000000..4a7a5bb --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/pinkCopyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css index ff6bc3a..a380072 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css +++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css @@ -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; +} diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx index 1804fd1..ed69854 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx +++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx @@ -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 = React.memo((props) => { type="selectLang" onClickSelectLang={props.onClickSelectLang} /> + : props.type === 'share' + ? : null } diff --git a/src/components/mainScreen/mobileAddPart/shareContainer.tsx b/src/components/mainScreen/mobileAddPart/shareContainer.tsx index daf78db..dbc89c3 100644 --- a/src/components/mainScreen/mobileAddPart/shareContainer.tsx +++ b/src/components/mainScreen/mobileAddPart/shareContainer.tsx @@ -10,18 +10,22 @@ export const ShareContainer:React.FC = React.memo((props) => {
Код подключения
- +
Скопировать
- +
Ссылка для подключения
- +