diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index 278052d..ae0fa07 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -12,6 +12,7 @@ export const MainScreen:React.FC = React.memo(() => { const [showMobileOtherPart, setShowMobileOtherPart] = useState(false); const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState(false); const [showMobileSharePart, setShowMobileSharePart] = useState(false); + const [showSharePopup, setShowSharePopup] = useState(false); const showPartsStates = [ setShowMobileUsersPart, setShowMobileOtherPart, @@ -61,7 +62,7 @@ export const MainScreen:React.FC = React.memo(() => { function closeSharePart() { setShowMobileSharePart(false); } - + function closeOthersParts(currentPart: React.Dispatch>) { showPartsStates.forEach(e => { if(currentPart !== e) { @@ -70,6 +71,14 @@ export const MainScreen:React.FC = React.memo(() => { }); } + function openSharePopup() { + setShowSharePopup(true); + } + + function closeSharePopup() { + setShowSharePopup(false); + } + return
{ isOpenUsersMobilePart={showMobileUsersPart} onClickMobileOther={openMobileOther} isOpenOtherMobilePart={showMobileOtherPart} + onClickShareButton={openSharePopup} + /> + + + - null} - /> { windowHeight < 700? <> diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css index d8eda88..aff148b 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css +++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css @@ -33,6 +33,7 @@ font-weight: 400; font-size: 22px; line-height: 130%; + user-select: none; } .mobile-users-part-header-back-button { @@ -42,6 +43,7 @@ height: 24px; background: url('icons/backIcon.svg') 50% 50% no-repeat; background-size: 100% 100%; + cursor: pointer; } .mobile-users-part-header-close-button { @@ -51,6 +53,7 @@ background-color: transparent; background: url('closeIcon.svg') 50% 50% no-repeat; background-size: 100% 100%; + cursor: pointer; } .mobile-users-part-users-container { diff --git a/src/components/mainScreen/sharePopup/sharePopup.css b/src/components/mainScreen/sharePopup/sharePopup.css index ca32a86..fff6a2e 100644 --- a/src/components/mainScreen/sharePopup/sharePopup.css +++ b/src/components/mainScreen/sharePopup/sharePopup.css @@ -26,6 +26,7 @@ font-weight: 600; font-size: 18px; line-height: 22px; + user-select: none; } .share-popup-data-input { @@ -89,4 +90,22 @@ height: 24px; background: url('copyIcon.svg') 50% 50% no-repeat; background-size: 100% 100%; +} + +.show-share-popup-enter { + opacity: 0; +} + +.show-share-popup-enter-active { + opacity: 1; + transition: .3s; +} + +.show-share-popup-exit { + opacity: 1; +} + +.show-share-popup-exit-active { + opacity: 0; + transition: .3s; } \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx index 302ae7e..af4c854 100644 --- a/src/components/mainScreen/toolbar/buttonContainer.tsx +++ b/src/components/mainScreen/toolbar/buttonContainer.tsx @@ -36,8 +36,8 @@ export const ButtonContainer:React.FC = React.memo((props) => { return
{ - props?.isBorderLineTop === 'hide' ? - null + props?.isBorderLineTop === 'hide' + ? null : } {props.buttons.map((button, index) => { @@ -160,8 +160,8 @@ export const ButtonContainer:React.FC = React.memo((props) => { } )} { - props?.isBorderLineBottom === 'hide' ? - null + props?.isBorderLineBottom === 'hide' + ? null : }
diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index eb4f87d..901a53d 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -7,11 +7,13 @@ import './toolbar.css'; type TProps = { onClickOpenButton: () => void - onClickMobileUsers?: () => void - onClickMobileOther?: () => void isOpen: boolean isOpenUsersMobilePart?: boolean isOpenOtherMobilePart?: boolean + isOpenSharePopup?: boolean + onClickMobileUsers?: () => void + onClickMobileOther?: () => void + onClickShareButton?: () => void } export const Toolbar:React.FC = React.memo((props) => { @@ -149,7 +151,7 @@ export const Toolbar:React.FC = React.memo((props) => { buttons={[ { type:"share", - onClick: () => null, + onClick: props.onClickShareButton, isCaption: true }, {