PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил анимацию кнопке: "Задайте нам вопрос"

Browse Source
This commit is contained in:
ArtChaos189 2023-05-25 14:25:44 +03:00 committed by Nastya
parent 11fb28dc58
commit eba25c46ac
2 changed files with 107 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/FloatingSupportChat/FloatingSupportChat.tsx
View File

@ -1,44 +1,92 @@
import { Box, Fab } from "@mui/material"; import { Box, Fab, Typography } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import CircleDoubleDown from "./CircleDoubleDownIcon"; import CircleDoubleDown from "./CircleDoubleDownIcon";
import Chat from "./Chat"; import Chat from "./Chat";
export default function FloatingSupportChat() { export default function FloatingSupportChat() {
const [isChatOpened, setIsChatOpened] = useState<boolean>(false); const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
return ( const animation = {
<Box sx={{ "@keyframes runningStripe": {
position: "fixed", "0%": {
right: "20px", left: "0",
bottom: "10px", backgroundColor: "transparent",
display: "flex", },
flexDirection: "column", "20%": {
gap: "8px", backgroundColor: "#ffffff",
width: "clamp(200px, 100% - 40px, 454px)", },
zIndex: 10, "50%": {
}}> backgroundColor: "#ffffff",
{isChatOpened && transform: "translate(200px, 0)",
<Chat sx={{ },
alignSelf: "start", "80%": {
width: "clamp(200px, 100%, 400px)", backgroundColor: "#ffffff",
}} /> },
}
<Fab "100%": {
variant={"extended"} backgroundColor: "transparent",
onClick={() => setIsChatOpened(prev => !prev)} boxShadow: "none",
sx={{ left: "100%",
pl: "11px", },
pr: !isChatOpened ? "15px" : "11px", },
gap: "11px", };
height: "54px", return (
borderRadius: "27px", <Box
alignSelf: "end", sx={{
}} position: "fixed",
> right: "20px",
<CircleDoubleDown isUp={isChatOpened} /> bottom: "10px",
{!isChatOpened && "Задайте нам вопрос"} display: "flex",
</Fab> flexDirection: "column",
</Box> gap: "8px",
); width: "clamp(200px, 100% - 40px, 454px)",
} zIndex: 10,
}}
>
{isChatOpened && (
<Chat
sx={{
alignSelf: "start",
width: "clamp(200px, 100%, 400px)",
}}
/>
)}
<Fab
disableRipple
sx={{
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.7)",
pl: "11px",
pr: !isChatOpened ? "15px" : "11px",
gap: "11px",
height: "54px",
borderRadius: "27px",
alignSelf: "end",
overflow: "hidden",
"&:hover": {
background: "rgba(255, 255, 255, 0.7)",
},
}}
variant={"extended"}
onClick={() => setIsChatOpened((prev) => !prev)}
>
{!isChatOpened && (
<Box
sx={{
position: "absolute",
bgcolor: "#FFFFFF",
height: "70px",
width: "30px",
animation: "runningStripe linear 6s infinite",
transform: "rotate(45deg) skewX(20deg) skewY(-10deg)",
...animation,
}}
/>
)}
<CircleDoubleDown isUp={isChatOpened} />
{!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
</Fab>
</Box>
);
}

41
src/pages/Landing/Landing.tsx
View File

@ -10,26 +10,27 @@ import darkTheme from "@root/utils/themes/dark";
import Navbar from "@root/components/Navbar/Navbar"; import Navbar from "@root/components/Navbar/Navbar";
interface Props { interface Props {
templaterOnly?: boolean; templaterOnly?: boolean;
} }
export default function Landing({ templaterOnly = false }: Props) { export default function Landing({ templaterOnly = false }: Props) {
return (
return ( <ThemeProvider theme={darkTheme}>
<ThemeProvider theme={darkTheme}> <CssBaseline />
<CssBaseline /> <Box
<Box sx={{ sx={{
position: "relative", position: "relative",
}}> }}
<Navbar isLoggedIn={false} /> >
<Section1 /> <Navbar isLoggedIn={false} />
<Section2 templaterOnly={templaterOnly} /> <Section1 />
<Section3 /> <Section2 templaterOnly={templaterOnly} />
<Section4 /> <Section3 />
<Section5 /> <Section4 />
<Footer /> <Section5 />
<FloatingSupportChat /> <Footer />
</Box> <FloatingSupportChat />
</ThemeProvider> </Box>
); </ThemeProvider>
} );
}