From fd886982ac6a8104185447ab6a2aff166dc270fd Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Fri, 12 Aug 2022 18:38:30 +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=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=20push=20=D1=83=D0=B2=D0=B5=D0=B4=D0=BE=D0=BC=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mainScreen/mainScreen.tsx | 32 +++++++- .../pushMessage/constrolOffIcon.svg | 4 + .../mainScreen/pushMessage/constrolOnIcon.svg | 3 + .../mainScreen/pushMessage/pushMessage.css | 77 +++++++++++++++++++ .../mainScreen/pushMessage/pushMessage.tsx | 19 +++++ src/components/mainScreen/toolbar/toolbar.tsx | 3 +- 6 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 src/components/mainScreen/pushMessage/constrolOffIcon.svg create mode 100644 src/components/mainScreen/pushMessage/constrolOnIcon.svg create mode 100644 src/components/mainScreen/pushMessage/pushMessage.css create mode 100644 src/components/mainScreen/pushMessage/pushMessage.tsx diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index 7256d27..e952a19 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -1,8 +1,9 @@ -import React, { useContext, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { CSSTransition } from "react-transition-group"; import { ContextWindowHeight } from "../contextWindowHeight"; import './mainScreen.css'; import { MobileAddPart } from "./mobileAddPart/mobileAddPart"; +import { PushMessage } from "./pushMessage/pushMessage"; import { SharePopup } from "./sharePopup/sharePopup"; import { Toolbar } from "./toolbar/toolbar"; @@ -13,6 +14,7 @@ export const MainScreen:React.FC = React.memo(() => { const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState(false); const [showMobileSharePart, setShowMobileSharePart] = useState(false); const [showSharePopup, setShowSharePopup] = useState(false); + const [showPushMessage, setShowPushMessage] = useState(false); const showPartsStates = [ setShowMobileUsersPart, setShowMobileOtherPart, @@ -79,8 +81,36 @@ export const MainScreen:React.FC = React.memo(() => { setShowSharePopup(false); } + function onShowPushMessage() { + setShowPushMessage(true); + setTimeout(() => { + hidePushMessage() + }, 2000); + } + + function hidePushMessage() { + setShowPushMessage(false); + } + + useEffect(() => { + setTimeout(() => { + onShowPushMessage() + }, 1000); + }, []) + return
+ + + + + + diff --git a/src/components/mainScreen/pushMessage/constrolOnIcon.svg b/src/components/mainScreen/pushMessage/constrolOnIcon.svg new file mode 100644 index 0000000..453c9dc --- /dev/null +++ b/src/components/mainScreen/pushMessage/constrolOnIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainScreen/pushMessage/pushMessage.css b/src/components/mainScreen/pushMessage/pushMessage.css new file mode 100644 index 0000000..ba6fa7b --- /dev/null +++ b/src/components/mainScreen/pushMessage/pushMessage.css @@ -0,0 +1,77 @@ +.push-message-container { + position: absolute; + height: 56px; + display: flex; + background: #333333; + border: 1px solid #4F4F4F; + border-radius: 32px; + padding: 8px 24px 8px 8px; + box-sizing: border-box; + left: 50%; + transform: translate(-50%, 0); + top: 16px; + gap: 8px; + user-select: none; + transition: 0; +} + +.push-message-icon { + width: 40px; + height: 40px; + border-radius: 50px; + background-size: 100% 100%; +} + +.push-message-icon.controlOn { + background: url('constrolOnIcon.svg') 50% 50% no-repeat; + background-color: #219653; +} + +.push-message-icon.controlOff { + background: url('constrolOffIcon.svg') 50% 50% no-repeat; + background-color: #EB5757; +} + +.push-message-text-container { + display: flex; + flex-direction: column; + justify-content: space-evenly; + color: #FFFFFF; +} + +.push-message-title { + font-weight: 400; + font-size: 10px; + line-height: 12px; + opacity: 0.5; +} + +.push-message-message-text { + font-weight: 400; + font-size: 14px; + line-height: 17px; +} + + + +.show-push-message-enter { + transform: translate(-50%, -100%); + opacity: 0; +} + +.show-push-message-enter-active { + transform: translate(-50%, 0); + opacity: 1; + transition: .3s; +} + +.show-push-message-exit { + transform: translate(-50%, 0); + opacity: 1; +} + +.show-push-message-exit-active { + transform: translate(-50%, -100%); + opacity: 0; + transition: .3s; +} \ No newline at end of file diff --git a/src/components/mainScreen/pushMessage/pushMessage.tsx b/src/components/mainScreen/pushMessage/pushMessage.tsx new file mode 100644 index 0000000..aa6072c --- /dev/null +++ b/src/components/mainScreen/pushMessage/pushMessage.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import controlOnIcon from './constrolOnIcon.svg'; +import controlOffIcon from './constrolOffIcon.svg'; +import './pushMessage.css'; + +type TProps = { + textMessage: string + typeMessage: 'controlOn' | 'controlOff' +} + +export const PushMessage:React.FC = React.memo((props) => { + return
+ +
+ Уведомление + {props.textMessage} +
+
+}) \ No newline at end of file diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index 901a53d..458e6e5 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -124,7 +124,8 @@ export const Toolbar:React.FC = React.memo((props) => { onClick: () => console.log('click'), isNotification: true, isCaption: true - } + }, + ]} isOpenToolbar={props.isOpen} />