SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

make button widget preview button interactive

Browse Source
This commit is contained in:
nflnkr 2024-06-08 16:44:25 +03:00
parent b9a285b1bd
commit 8afeaadfcb
8 changed files with 159 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fixed-button-widget-preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 119 KiB

4
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewDesktop.tsx
View File

@ -1,7 +1,7 @@
import TaskIcon from "@/ui_kit/TaskIcon";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Typography } from "@mui/material";
import RunningStripe from "@ui_kit/RunningStripe";
import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";
interface Props {
position: "topleft" | "topright" | "bottomleft" | "bottomright";
@ -108,7 +108,7 @@ export default function BannerWidgetPreviewDesktop({
boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
}}
>
<BannerWidgetPreviewIcon
<TaskIcon
sx={{
width: "auto",
height: "calc(18.57 / 29.5 * 100%)",

4
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewMobile.tsx
View File

@ -1,7 +1,7 @@
import TaskIcon from "@/ui_kit/TaskIcon";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Typography } from "@mui/material";
import RunningStripe from "@ui_kit/RunningStripe";
import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";
interface Props {
position: "topleft" | "topright" | "bottomleft" | "bottomright";
@ -81,7 +81,7 @@ export default function BannerWidgetPreviewMobile({
boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
}}
>
<BannerWidgetPreviewIcon
<TaskIcon
sx={{
width: "auto",
height: "calc(18.57 / 29.5 * 100%)",

4
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
View File

@ -19,7 +19,7 @@ import PenaTextField from "@ui_kit/PenaTextField";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { ReactNode, useState } from "react";
import fixedButtonWidgetPreview from "../../../../../assets/banner-widget-preview.png";
import fixedBannerWidgetPreview from "../../../../../assets/banner-widget-preview.png";
import WidgetScript from "../../WidgetScript";
import { createBannerWidgetScriptText } from "../../createWidgetScriptText";
import { useWidgetUrl } from "../../useWidgetUrl";
@ -113,7 +113,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
}}
>
<img
src={fixedButtonWidgetPreview}
src={fixedBannerWidgetPreview}
style={{
display: "block",
width: "100%",

49
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
View File

@ -26,6 +26,8 @@ import fixedButtonWidgetPreview from "../../../../assets/fixed-button-widget-pre
import WidgetScript from "../WidgetScript";
import { createButtonWidgetScriptText } from "../createWidgetScriptText";
import { useWidgetUrl } from "../useWidgetUrl";
import ButtonWidgetPreviewDesktop from "./ButtonWidgetSetup/ButtonWidgetPreviewDesktop";
import ButtonWidgetPreviewMobile from "./ButtonWidgetSetup/ButtonWidgetPreviewMobile";
interface Props {
step: 2 | 3;
@ -180,14 +182,43 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
pt: "40px",
}}
>
<img
src={fixedButtonWidgetPreview}
style={{
display: "block",
width: "100%",
height: "100%",
<Box
sx={{
position: "relative",
}}
/>
>
<img
src={fixedButtonWidgetPreview}
style={{
display: "block",
width: "100%",
height: "100%",
}}
/>
<Box
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
containerType: "size",
}}
>
<ButtonWidgetPreviewDesktop
fixedSide={fixedSide}
buttonBackgroundColor={buttonBackgroundColor}
buttonTextColor={buttonTextColor}
buttonFlash={buttonFlash}
buttonText={buttonText}
rounded={rounded}
withShadow={withShadow}
/>
{!hideOnMobile && (
<ButtonWidgetPreviewMobile fixedSide={fixedSide} buttonBackgroundColor={buttonBackgroundColor} />
)}
</Box>
</Box>
</Box>
)}
</Box>
@ -271,7 +302,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
checked={fixedSide !== null}
handleChange={(e) => setFixedSide(e.target.checked ? "left" : null)}
/>
{fixedSide && (
<Collapse in={fixedSide !== null}>
<FormControl>
<RadioGroup
sx={{
@ -302,7 +333,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
/>
</RadioGroup>
</FormControl>
)}
</Collapse>
<Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
<PenaTextField
value={buttonText}

67
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewDesktop.tsx Normal file
View File

@ -0,0 +1,67 @@
import RunningStripe from "@/ui_kit/RunningStripe";
import TaskIcon from "@/ui_kit/TaskIcon";
import { Box, Typography } from "@mui/material";
interface Props {
buttonBackgroundColor: string;
rounded: boolean;
withShadow: boolean;
fixedSide: "left" | "right";
buttonTextColor: string;
buttonText: string;
buttonFlash: boolean;
}
export default function ButtonWidgetPreviewDesktop({
buttonBackgroundColor,
buttonFlash,
buttonText,
buttonTextColor,
fixedSide,
rounded,
withShadow,
}: Props) {
return (
<Box
sx={[
{
position: "absolute",
height: "calc(20 / 262 * 100%)",
px: "calc(1%)",
display: "flex",
alignItems: "center",
backgroundColor: buttonBackgroundColor,
borderRadius: rounded ? "30px" : 0,
transform: "rotate(-90deg)",
transformOrigin: "left",
transitionProperty: "width, height, top, left",
transitionDuration: "0.5s",
transitionTimingFunction: "ease",
whiteSpace: "nowrap",
overflow: "hidden",
boxShadow: withShadow ? "2px 5px 20px 2px rgba(25, 6, 50, 0.4), 0 2px 10px 0 rgba(35, 17, 58, 0.1)" : "none",
},
fixedSide === "left" && {
top: "calc(57%)",
left: "calc(55 / 520 * 100%)",
},
fixedSide === "right" && {
top: "calc(57%)",
left: "calc(383 / 520 * 100%)",
},
]}
>
<TaskIcon
sx={{
width: "auto",
height: "calc(18.57 / 29.5 * 100%)",
aspectRatio: 1,
}}
/>
<Typography fontSize="calc(3cqh)" lineHeight="120%" ml="3px" color={buttonTextColor}>
{buttonText || "Пройти тест"}
</Typography>
{buttonFlash && <RunningStripe />}
</Box>
);
}

45
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewMobile.tsx Normal file
View File

@ -0,0 +1,45 @@
import TaskIcon from "@/ui_kit/TaskIcon";
import { Box } from "@mui/material";
interface Props {
fixedSide: "left" | "right";
buttonBackgroundColor: string;
}
export default function ButtonWidgetPreviewMobile({ buttonBackgroundColor, fixedSide }: Props) {
return (
<Box
sx={[
{
position: "absolute",
width: "calc(22 / 520 * 100%)",
height: "calc(22 / 262 * 100%)",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: buttonBackgroundColor,
borderRadius: "50%",
transitionProperty: "width, height, top, left",
transitionDuration: "0.5s",
transitionTimingFunction: "ease",
},
fixedSide === "left" && {
top: "calc(88%)",
left: "calc(82%)",
},
fixedSide === "right" && {
top: "calc(88%)",
left: "calc(94%)",
},
]}
>
<TaskIcon
sx={{
width: "auto",
height: "calc(80%)",
aspectRatio: 1,
}}
/>
</Box>
);
}

2
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewIcon.tsx → src/ui_kit/TaskIcon.tsx
View File

@ -4,7 +4,7 @@ interface Props {
sx?: SxProps<Theme>;
}
export default function BannerWidgetPreviewIcon({ sx = [] }: Props) {
export default function TaskIcon({ sx = [] }: Props) {
return (
<Box
sx={[