fix animation for add mobile part

This commit is contained in:
DmitriyB
2022-08-11 18:47:36 +05:00
parent 26ecc099e9
commit 92b26dce68
2 changed files with 8 additions and 3 deletions
@@ -317,17 +317,20 @@
.show-mobile-users-enter {
position: absolute;
transform: translateX(-15%);
opacity: 0;
}
.show-mobile-users-enter-active {
position: relative;
transform: translateX(0);
opacity: 1;
transition: .3s;
}
.show-mobile-users-exit {
position: absolute;
transform: translateX(0);
opacity: 1;
}
@@ -1,4 +1,5 @@
import React, { useState } from "react";
import React, { useContext, useState } from "react";
import { ContextWindowHeight } from "../../contextWindowHeight";
import { ToolbarButton } from "./toolbarButton";
import { BorderLine } from "./toolbarButtonContainerBorderLine";
import { TypeToolbarButtons } from "./typeButtons";
@@ -17,6 +18,7 @@ type TProps = {
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
const windowHeight = useContext(ContextWindowHeight);
return <div className="toolbar-button-container">
<BorderLine />
@@ -36,7 +38,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
// if(openedAddButtons === button.type + index + 'areacont') {
// setOpenedAddButtons('');
// } setOpenedAddButtons(button.type + index + 'areacont')
// button.onClick()
button.onClick()
}}
type={button.type}
isNotification={button?.isNotification}
@@ -46,7 +48,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
isSelected={button?.isSelected}
/>
{
button.type.includes('user') ?
button.type.includes('user') && windowHeight > 700 ?
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' ? 'show' : ''}`}>
<ToolbarButton
// key={button.type + index}