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

add widgets fullscreen param

Browse Source
This commit is contained in:
nflnkr 2024-05-27 17:32:08 +03:00
parent 59d4678afd
commit 643c62b32a
5 changed files with 141 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -7,7 +7,7 @@
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5", "@emotion/styled": "^11.10.5",
"@frontend/kitui": "^1.0.82", "@frontend/kitui": "^1.0.82",
"@frontend/squzanswerer": "^1.0.43", "@frontend/squzanswerer": "^1.0.44",
"@mui/icons-material": "^5.10.14", "@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14", "@mui/material": "^5.10.14",
"@mui/x-charts": "^6.19.5", "@mui/x-charts": "^6.19.5",

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

@ -57,6 +57,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
const [appealText, setAppealText] = useState<string>(""); const [appealText, setAppealText] = useState<string>("");
const [quizHeaderText, setQuizHeaderText] = useState<string>(""); const [quizHeaderText, setQuizHeaderText] = useState<string>("");
const [pulsation, setPulsation] = useState<boolean>(false); const [pulsation, setPulsation] = useState<boolean>(false);
const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null; if (!quiz) return null;
@ -77,8 +78,9 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
appealText: appealText || undefined, appealText: appealText || undefined,
quizHeaderText: quizHeaderText || undefined, quizHeaderText: quizHeaderText || undefined,
pulsation: pulsation || undefined, pulsation: pulsation || undefined,
fullScreen: fullScreen || undefined,
dialogDimensions: dialogDimensions:
widgetWidth || widgetHeight !fullScreen && (widgetWidth || widgetHeight)
? { ? {
width: widgetWidth ? `${widgetWidth}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%", height: widgetHeight ? `${widgetHeight}px` : "100%",
@ -234,49 +236,56 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
flex: "1 1 0", flex: "1 1 0",
}} }}
> >
<Box <CustomCheckbox
sx={{ label="Квиз на весь экран"
display: "flex", checked={fullScreen}
gap: "40px", handleChange={(e) => setFullScreen(e.target.checked)}
}} />
> <Collapse in={!fullScreen}>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", gap: "40px",
gap: "20px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Box
Ширина окна (px) sx={{
</Typography> display: "flex",
<PenaTextField flexDirection: "column",
type="number" gap: "20px",
value={widgetWidth} }}
onChange={(e) => setWidgetWidth(e.target.value)} >
FormControlSx={{ maxWidth: "160px" }} <Typography sx={{ color: theme.palette.grey2.main }}>
placeholder="auto" Ширина окна (px)
/> </Typography>
<PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box> </Box>
<Box </Collapse>
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box>
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>
Текст-призыв Текст-призыв
</Typography> </Typography>

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

@ -57,14 +57,16 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
const [fixedSide, setFixedSide] = useState< const [fixedSide, setFixedSide] = useState<
null | ButtonWidgetFixedParams["fixedSide"] null | ButtonWidgetFixedParams["fixedSide"]
>(null); >(null);
const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null; if (!quiz) return null;
if (step === 3) { if (step === 3) {
const genericParams = { const genericParams = {
quizId: quiz.qid, quizId: quiz.qid,
fullScreen: fullScreen || undefined,
dialogDimensions: dialogDimensions:
widgetWidth || widgetHeight !fullScreen && (widgetWidth || widgetHeight)
? { ? {
width: widgetWidth ? `${widgetWidth}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%", height: widgetHeight ? `${widgetHeight}px` : "100%",
@ -206,32 +208,39 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
<Typography fontWeight={500} color="#4D4D4D"> <Typography fontWeight={500} color="#4D4D4D">
1. Задайте размеры окна квиза (опционально) 1. Задайте размеры окна квиза (опционально)
</Typography> </Typography>
<Box sx={{ display: "flex", gap: "40px" }}> <CustomCheckbox
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}> label="Квиз на весь экран"
<Typography sx={{ color: theme.palette.grey2.main }}> checked={fullScreen}
Ширина (px) handleChange={(e) => setFullScreen(e.target.checked)}
</Typography> />
<PenaTextField <Collapse in={!fullScreen}>
type="number" <Box sx={{ display: "flex", gap: "40px" }}>
value={widgetWidth} <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
onChange={(e) => setWidgetWidth(e.target.value)} <Typography sx={{ color: theme.palette.grey2.main }}>
FormControlSx={{ maxWidth: "160px" }} Ширина (px)
placeholder="auto" </Typography>
/> <PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box> </Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}> </Collapse>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

93
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
View File

@ -1,4 +1,10 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import {
Box,
Collapse,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import PenaTextField from "@ui_kit/PenaTextField"; import PenaTextField from "@ui_kit/PenaTextField";
@ -21,6 +27,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false); const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10); const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false); const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null; if (!quiz) return null;
@ -30,8 +37,9 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
hideOnMobile: hideOnMobile || undefined, hideOnMobile: hideOnMobile || undefined,
autoShowQuizTime: autoShowQuizTime, autoShowQuizTime: autoShowQuizTime,
openOnLeaveAttempt: openOnLeaveAttempt || undefined, openOnLeaveAttempt: openOnLeaveAttempt || undefined,
fullScreen: fullScreen || undefined,
dialogDimensions: dialogDimensions:
widgetWidth || widgetHeight !fullScreen && (widgetWidth || widgetHeight)
? { ? {
width: widgetWidth ? `${widgetWidth}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%", height: widgetHeight ? `${widgetHeight}px` : "100%",
@ -120,49 +128,56 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
flex: "1 1 0", flex: "1 1 0",
}} }}
> >
<Box <CustomCheckbox
sx={{ label="Квиз на весь экран"
display: "flex", checked={fullScreen}
gap: "40px", handleChange={(e) => setFullScreen(e.target.checked)}
}} />
> <Collapse in={!fullScreen}>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", gap: "40px",
gap: "20px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Box
Ширина окна (px) sx={{
</Typography> display: "flex",
<PenaTextField flexDirection: "column",
type="number" gap: "20px",
value={widgetWidth} }}
onChange={(e) => setWidgetWidth(e.target.value)} >
FormControlSx={{ maxWidth: "160px" }} <Typography sx={{ color: theme.palette.grey2.main }}>
placeholder="auto" Ширина окна (px)
/> </Typography>
<PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box> </Box>
<Box </Collapse>
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

8
yarn.lock
View File

@ -1527,10 +1527,10 @@
immer "^10.0.2" immer "^10.0.2"
reconnecting-eventsource "^1.6.2" reconnecting-eventsource "^1.6.2"
"@frontend/squzanswerer@^1.0.43": "@frontend/squzanswerer@^1.0.44":
version "1.0.43" version "1.0.44"
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.43.tgz#923c08113256570278babb23f3fdfb89e4ae35b7" resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.44.tgz#12c19b23a1e1eff4d0cbfeffbc9ed1160c49cde2"
integrity sha1-kjwIETJWVwJ4ursj8/37ieSuNbc= integrity sha1-EsGbI6Hh7/TQy/7/vJ7RFgxJzeI=
dependencies: dependencies:
bowser "1.9.4" bowser "1.9.4"
country-flag-emoji-polyfill "^0.1.8" country-flag-emoji-polyfill "^0.1.8"