From b18640a99dc71402d6f17a6b91df27d2be54f149 Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Thu, 11 Aug 2022 13:19:47 +0500 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=B4=D0=BE=D0=BF=20?= =?UTF-8?q?=D0=BF=D0=B0=D1=80=D0=B0=D0=BC=D0=B5=D1=82=D1=80=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2?= =?UTF-8?q?=D0=B0,=20=D1=81=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=B0=D0=BD=20?= =?UTF-8?q?=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=20=D1=8F=D0=B7=D1=8B=D0=BA=D0=B0?= =?UTF-8?q?,=20=D0=BD=D0=B0=D1=87=D0=B0=D1=82=D0=B0=20=D0=B2=D0=B5=D1=80?= =?UTF-8?q?=D1=81=D1=82=D0=BA=D0=B0=20=D0=BE=D0=BA=D0=BD=D0=B0=20=D0=9F?= =?UTF-8?q?=D0=BE=D0=B4=D0=B5=D0=BB=D0=B8=D1=82=D1=8C=D1=81=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mainScreen/mainScreen.tsx | 38 +++++++- .../{addPartItem.tsx => addPartUserItem.tsx} | 4 +- .../mobileAddPart/icons/backIcon.svg | 3 + .../mobileAddPart/icons/exitIcon.svg | 3 + .../mobileAddPart/icons/languageIcon.svg | 3 + .../mainScreen/mobileAddPart/icons/okIcon.svg | 3 + .../mobileAddPart/icons/pointer2Icon.svg | 3 + .../mobileAddPart/icons/shareIcon.svg | 3 + .../mainScreen/mobileAddPart/langButton.tsx | 23 +++++ .../mobileAddPart/mobileAddPart.css | 93 ++++++++++++++++++- .../mobileAddPart/mobileAddPart.tsx | 35 ++++--- .../mobileAddPart/mobileAddPartHeader.tsx | 7 ++ .../mobileAddPart/settingButton.tsx | 16 ++-- .../mobileAddPart/settingButtons.tsx | 72 ++++++++++---- .../mobileAddPart/shareContainer.tsx | 29 ++++++ .../mainScreen/mobileAddPart/usersList.tsx | 16 ++-- 16 files changed, 299 insertions(+), 52 deletions(-) rename src/components/mainScreen/mobileAddPart/{addPartItem.tsx => addPartUserItem.tsx} (94%) create mode 100644 src/components/mainScreen/mobileAddPart/icons/backIcon.svg create mode 100644 src/components/mainScreen/mobileAddPart/icons/exitIcon.svg create mode 100644 src/components/mainScreen/mobileAddPart/icons/languageIcon.svg create mode 100644 src/components/mainScreen/mobileAddPart/icons/okIcon.svg create mode 100644 src/components/mainScreen/mobileAddPart/icons/pointer2Icon.svg create mode 100644 src/components/mainScreen/mobileAddPart/icons/shareIcon.svg create mode 100644 src/components/mainScreen/mobileAddPart/langButton.tsx create mode 100644 src/components/mainScreen/mobileAddPart/shareContainer.tsx diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index b0407ae..b2cd5c4 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -9,6 +9,12 @@ export const MainScreen:React.FC = React.memo(() => { const [showToolbar, setShowToolbar] = useState(false); const [showMobileUsersPart, setShowMobileUsersPart] = useState(false); const [showMobileOtherPart, setShowMobileOtherPart] = useState(false); + const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState(false); + const showPartsStates = [ + setShowMobileUsersPart, + setShowMobileOtherPart, + setShowMobileLangSelectorPart + ] const windowHeight = useContext(ContextWindowHeight); function onClickToolbar() { @@ -16,7 +22,7 @@ export const MainScreen:React.FC = React.memo(() => { } function openMobileUsers() { - closeMobileOther(); + closeOthersParts(setShowMobileUsersPart); setShowMobileUsersPart(true); } @@ -26,7 +32,7 @@ export const MainScreen:React.FC = React.memo(() => { } function openMobileOther() { - closeMobileUsers(); + closeOthersParts(setShowMobileOtherPart); setShowMobileOtherPart(true); } @@ -35,6 +41,19 @@ export const MainScreen:React.FC = React.memo(() => { setShowMobileOtherPart(false); } + function openLangSelector() { + closeOthersParts(setShowMobileLangSelectorPart) + setShowMobileLangSelectorPart(true); + } + + function closeOthersParts(currentPart: React.Dispatch>) { + showPartsStates.forEach(e => { + if(currentPart !== e) { + e(false); + } + }); + } + return
{ > + + + : null } diff --git a/src/components/mainScreen/mobileAddPart/addPartItem.tsx b/src/components/mainScreen/mobileAddPart/addPartUserItem.tsx similarity index 94% rename from src/components/mainScreen/mobileAddPart/addPartItem.tsx rename to src/components/mainScreen/mobileAddPart/addPartUserItem.tsx index 4e1431c..3161ab1 100644 --- a/src/components/mainScreen/mobileAddPart/addPartItem.tsx +++ b/src/components/mainScreen/mobileAddPart/addPartUserItem.tsx @@ -11,13 +11,13 @@ type TProps = { onClickItem?: () => void } -export const AddPartItem:React.FC = React.memo((props) => { +export const AddPartUserItem:React.FC = React.memo((props) => { return
props?.onClickItem ? props?.onClickItem() : null}> null} + onClick={() => null} />
diff --git a/src/components/mainScreen/mobileAddPart/icons/backIcon.svg b/src/components/mainScreen/mobileAddPart/icons/backIcon.svg new file mode 100644 index 0000000..a4ca963 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/backIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/mobileAddPart/icons/exitIcon.svg b/src/components/mainScreen/mobileAddPart/icons/exitIcon.svg new file mode 100644 index 0000000..a093752 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/exitIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/mobileAddPart/icons/languageIcon.svg b/src/components/mainScreen/mobileAddPart/icons/languageIcon.svg new file mode 100644 index 0000000..1a4ae0c --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/languageIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/mobileAddPart/icons/okIcon.svg b/src/components/mainScreen/mobileAddPart/icons/okIcon.svg new file mode 100644 index 0000000..7a4d5b2 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/okIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/mobileAddPart/icons/pointer2Icon.svg b/src/components/mainScreen/mobileAddPart/icons/pointer2Icon.svg new file mode 100644 index 0000000..42303e1 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/pointer2Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/mobileAddPart/icons/shareIcon.svg b/src/components/mainScreen/mobileAddPart/icons/shareIcon.svg new file mode 100644 index 0000000..4397a11 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/icons/shareIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/mobileAddPart/langButton.tsx b/src/components/mainScreen/mobileAddPart/langButton.tsx new file mode 100644 index 0000000..45361b3 --- /dev/null +++ b/src/components/mainScreen/mobileAddPart/langButton.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import okIcon from './icons/okIcon.svg'; + +type TProps = { + title: string + caption: string + isSelected: boolean + onClick: () => void +} + +export const LangButton:React.FC = React.memo((props) => { + return
+
+ {props.title} + {props.caption} +
+ { + props.isSelected + ? Текущий язык + : null + } +
+}) \ No newline at end of file diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css index 2e944ab..ff6bc3a 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css +++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css @@ -25,11 +25,23 @@ } .mobile-users-part-header-title { + display: flex; + gap: 12px; + align-items: center; font-weight: 400; font-size: 22px; line-height: 130%; } +.mobile-users-part-header-back-button { + border: none; + background-color: transparent; + width: 24px; + height: 24px; + background: url('icons/backIcon.svg') 50% 50% no-repeat; + background-size: 100% 100%; +} + .mobile-users-part-header-close-button { width: 30px; height: 30px; @@ -99,14 +111,93 @@ align-items: center; background-color: #4F4F4F; border-radius: 16px; + padding: 0 18px; + + + font-weight: 400; + font-size: 16px; + line-height: 19px; +} + +.setting-button-container:active { + background-color: #828282; +} + +.setting-button-help-text { + font-weight: 400; + font-size: 14px; + line-height: 17px; + color: #BDBDBD; +} + +.setting-button-part { + display: flex; + align-items: center; + gap: 12px; +} + +.setting-button-icon { + width: 24px; + height: 24px; } .setting-button-container.exit { - width: 106px; + width: 102px; background-color: #EB5757; align-self: flex-end; + padding: 0; + justify-content: center; } +.setting-button-container.exit .setting-button-part { + gap: 9px; +} + +.lang-button-container { + display: flex; + box-sizing: border-box; + width: 100%; + height: 57px; + padding: 0 16px; + border-radius: 16px; + background-color: #4F4F4F; + justify-content: space-between; + align-items: center; +} + +.lang-button-container:active { + background-color: #828282; +} + +.lang-button-text-part { + color: #FFFFFF; + display: flex; + flex-direction: column; +} + +.lang-button-text-title { + font-weight: 400; + font-size: 16px; + line-height: 19px; +} + +.lang-button-text-caption { + font-weight: 400; + font-size: 10px; + line-height: 12px; +} + +.lang-button-selected-icon { + width: 24px; + height: 24px; +} + + + + + + + diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx index 67911d6..1804fd1 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx +++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx @@ -1,18 +1,21 @@ import React from "react"; import { BorderLine } from "./borderLine"; import { MobileAddPartHeader } from "./mobileAddPartHeader"; -import './mobileAddPart.css'; -import { AddPartItem } from "./addPartItem"; import { UsersList } from "./usersList"; import { SettingButtons } from "./settingButtons"; +import './mobileAddPart.css'; type TProps = { onClickClose: () => void title: string - type: 'users' | 'other' + type: 'users' | 'other' | 'selectLang' | 'share' users?: '???' // onClickShare?: () => void - onClickExit?: () => void + onClickExit?: () => void + onClickChangeLang?: () => void + onClickSelectLang?: () => void + onClickBackButton?: () => void + isContainBack?: boolean } export const MobileAddPart:React.FC = React.memo((props) => { @@ -20,20 +23,26 @@ export const MobileAddPart:React.FC = React.memo((props) => { { props.type === 'users' ? - : + : props.type === 'other' + ? + : props.type === 'selectLang' + ? + : null } - {/* - */}
}) \ No newline at end of file diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx index 615660b..b2f1818 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx +++ b/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx @@ -3,11 +3,18 @@ import React from "react"; type TProps = { onClick: () => void title: string + isBackButton?: boolean + onClickBackButton?: () => void } export const MobileAddPartHeader:React.FC = React.memo((props) => { return
+ { + props.isBackButton + ? + : null + } {props.title} +
+
+
+}) \ No newline at end of file diff --git a/src/components/mainScreen/mobileAddPart/usersList.tsx b/src/components/mainScreen/mobileAddPart/usersList.tsx index 6376886..3b5b1ad 100644 --- a/src/components/mainScreen/mobileAddPart/usersList.tsx +++ b/src/components/mainScreen/mobileAddPart/usersList.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AddPartItem } from "./addPartItem"; +import { AddPartUserItem } from "./addPartUserItem"; type TProps = { users?: '???' @@ -7,12 +7,12 @@ type TProps = { export const UsersList:React.FC = React.memo((props) => { return
- - - - - - - + + + + + + +
}) \ No newline at end of file