добавлен компонент push уведомлений
This commit is contained in:
DmitriyB
@@ -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<boolean>(false);
|
||||
const [showMobileSharePart, setShowMobileSharePart] = useState<boolean>(false);
|
||||
const [showSharePopup, setShowSharePopup] = useState<boolean>(false);
|
||||
const [showPushMessage, setShowPushMessage] = useState<boolean>(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 <div className="main-screen-container">
|
||||
<div className="main-screen-model"></div>
|
||||
<CSSTransition
|
||||
in={showPushMessage}
|
||||
timeout={300}
|
||||
classNames='show-push-message'
|
||||
unmountOnExit
|
||||
>
|
||||
<PushMessage
|
||||
textMessage="Управление презентацией получено"
|
||||
typeMessage="controlOn"
|
||||
/>
|
||||
</CSSTransition>
|
||||
<CSSTransition
|
||||
in={showToolbar}
|
||||
timeout={300}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5714 5.8125C10.5714 5.4375 10.3238 4.6875 9.33333 4.6875C8.34286 4.6875 8.09524 5.4375 8.09524 5.8125V6.5M10.5714 5.8125V4.125C10.5714 3.75 10.819 3 11.8095 3C12.8 3 13.0476 3.75 13.0476 4.125V5.25M10.5714 5.8125V9M13.0476 5.25C13.0476 4.875 13.2952 4.125 14.2857 4.125C15.2762 4.125 15.5238 4.875 15.5238 5.25V7.5M13.0476 5.25V11.5M15.5238 7.5C15.5238 7.125 15.7714 6.375 16.7619 6.375C17.7524 6.375 18 7.125 18 7.5V15.375C18 15.5659 17.9885 15.7762 17.963 16M15.5238 7.5V13.125M8.09524 12V13.6875C8.09524 13.6875 7.47619 13.125 7.47619 12C7.47619 11.625 7.22857 10.875 6.2381 10.875C5.24762 10.875 5 11.625 5 12C5 13.6875 5 21 12.4286 21C13.881 21 14.9785 20.6018 15.7981 20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 921 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5714 5.8125C10.5714 5.4375 10.3238 4.6875 9.33333 4.6875C8.34286 4.6875 8.09524 5.4375 8.09524 5.8125V13.6875C8.09524 13.6875 7.47619 13.125 7.47619 12C7.47619 11.625 7.22857 10.875 6.2381 10.875C5.24762 10.875 5 11.625 5 12C5 13.6875 5 21 12.4286 21C16.8857 21 18 17.25 18 15.375V7.5C18 7.125 17.7524 6.375 16.7619 6.375C15.7714 6.375 15.5238 7.125 15.5238 7.5M10.5714 5.8125V4.125C10.5714 3.75 10.819 3 11.8095 3C12.8 3 13.0476 3.75 13.0476 4.125V5.25M10.5714 5.8125V12.5625M13.0476 5.25C13.0476 4.875 13.2952 4.125 14.2857 4.125C15.2762 4.125 15.5238 4.875 15.5238 5.25V7.5M13.0476 5.25V12M15.5238 7.5V13.125" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -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;
|
||||
}
|
||||
@@ -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<TProps> = React.memo((props) => {
|
||||
return <div className="push-message-container">
|
||||
<span className={`push-message-icon ${props.typeMessage}`}></span>
|
||||
<div className="push-message-text-container">
|
||||
<span className="push-message-title">Уведомление</span>
|
||||
<span className="push-message-message-text">{props.textMessage}</span>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
@@ -124,7 +124,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
|
||||
onClick: () => console.log('click'),
|
||||
isNotification: true,
|
||||
isCaption: true
|
||||
}
|
||||
},
|
||||
|
||||
]}
|
||||
isOpenToolbar={props.isOpen}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user