From b79a17b151476d5749ecdb2bb25ded633338cf11 Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Fri, 12 Aug 2022 17:28:40 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=BF=D0=BE=D0=BF=D0=B0=D0=BF=20=D0=B4=D0=BB=D1=8F=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=B3=D0=BB=D0=B0=D1=88=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=B2=20=D0=B4=D0=B5=D0=BC=D0=BA=D1=83=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=B4=D0=B5=D0=BA=D1=81=D1=82=D0=BE=D0=BF=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mainScreen/mainScreen.tsx | 6 ++ .../mobileAddPart/mobileAddPart.css | 1 + .../mobileAddPart/mobileAddPartHeader.tsx | 3 +- .../mainScreen/sharePopup/copyIcon.svg | 4 + .../mainScreen/sharePopup/sharePopup.css | 92 +++++++++++++++++++ .../mainScreen/sharePopup/sharePopup.tsx | 50 ++++++++++ 6 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 src/components/mainScreen/sharePopup/copyIcon.svg create mode 100644 src/components/mainScreen/sharePopup/sharePopup.css create mode 100644 src/components/mainScreen/sharePopup/sharePopup.tsx diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index ec976e8..278052d 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -3,6 +3,7 @@ import { CSSTransition } from "react-transition-group"; import { ContextWindowHeight } from "../contextWindowHeight"; import './mainScreen.css'; import { MobileAddPart } from "./mobileAddPart/mobileAddPart"; +import { SharePopup } from "./sharePopup/sharePopup"; import { Toolbar } from "./toolbar/toolbar"; export const MainScreen:React.FC = React.memo(() => { @@ -85,6 +86,11 @@ export const MainScreen:React.FC = React.memo(() => { isOpenOtherMobilePart={showMobileOtherPart} /> + null} + /> { windowHeight < 700? <> diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css index 6bf87cd..d8eda88 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css +++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css @@ -16,6 +16,7 @@ height: 1px; background-color: #4F4F4F; align-self: center; + flex-shrink: 0; } .mobile-users-part-header { diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx index b2f1818..4a43687 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx +++ b/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx @@ -5,10 +5,11 @@ type TProps = { title: string isBackButton?: boolean onClickBackButton?: () => void + paddingBottom?: '0px' | '12px' | '24px' } export const MobileAddPartHeader:React.FC = React.memo((props) => { - return
+ return
{ props.isBackButton diff --git a/src/components/mainScreen/sharePopup/copyIcon.svg b/src/components/mainScreen/sharePopup/copyIcon.svg new file mode 100644 index 0000000..4e37371 --- /dev/null +++ b/src/components/mainScreen/sharePopup/copyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/mainScreen/sharePopup/sharePopup.css b/src/components/mainScreen/sharePopup/sharePopup.css new file mode 100644 index 0000000..ca32a86 --- /dev/null +++ b/src/components/mainScreen/sharePopup/sharePopup.css @@ -0,0 +1,92 @@ +.share-popup-container { + position: absolute; + display: flex; + flex-direction: column; + width: 494px; + height: 469px; + box-sizing: border-box; + border: 1px solid #4F4F4F; + border-radius: 32px; + top: calc(50% - 469px / 2); + left: calc(50% - 494px / 2); + background-color: #333333; + color: #FFFFFF; + padding: 48px; + /* gap: 24px; */ + justify-content: space-between; +} + +.share-popup-data-container { + display: flex; + flex-direction: column; + gap: 16px; +} + +.share-popup-data-title { + font-weight: 600; + font-size: 18px; + line-height: 22px; +} + +.share-popup-data-input { + background-color: #4F4F4F; + outline: none; + width: 100%; + border: none; + border-radius: 12px; + color: #FFFFFF; + box-sizing: border-box; +} + +.share-popup-data-input.code { + height: 76px; + font-weight: 300; + font-size: 38px; + line-height: 46px; + letter-spacing: 0.3em; + text-align: center; + padding: 15px 0; +} + +.share-popup-data-input.href { + height: 48px; + padding: 14.5px 16px; + font-weight: 400; + font-size: 16px; + line-height: 19px; +} + +.share-popup-copy-button { + display: flex; + box-sizing: border-box; + width: 176px; + height: 48px; + align-items: center; + justify-content: center; + border-radius: 12px; + background-color: #CE56C2; + border: none; + color: #FFFFFF; + font-weight: 500; + font-size: 16px; + line-height: 20px; + gap: 4px; + cursor: pointer; + transition: .3s; +} + +.share-popup-copy-button:hover { + opacity: .7; +} + +.share-popup-copy-button.copied { + background-color: #219653; + transition: .3s; +} + +.share-popup-copy-button-icon { + width: 24px; + height: 24px; + background: url('copyIcon.svg') 50% 50% no-repeat; + background-size: 100% 100%; +} \ No newline at end of file diff --git a/src/components/mainScreen/sharePopup/sharePopup.tsx b/src/components/mainScreen/sharePopup/sharePopup.tsx new file mode 100644 index 0000000..6cf435f --- /dev/null +++ b/src/components/mainScreen/sharePopup/sharePopup.tsx @@ -0,0 +1,50 @@ +import React, { useState } from "react"; +import { BorderLine } from "../mobileAddPart/borderLine"; +import { MobileAddPartHeader } from "../mobileAddPart/mobileAddPartHeader"; +import './sharePopup.css'; + +type TProps = { + acceessCode: string + href: string + onClickClose: () => void +} + +export const SharePopup:React.FC = React.memo((props) => { + const [isCopied, setIsCopied] = useState(false); + + function copyHref() { + navigator.clipboard.writeText(props.href).then(() => { + setIsCopied(true) + setTimeout(() => { + setIsCopied(false) + }, 2000); + }) + } + + return
+ +
+ Код подключения + +
+ +
+ Ссылка для подключения + + +
+
+}) \ No newline at end of file