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/styled": "^11.10.5",
"@frontend/kitui": "^1.0.82",
"@frontend/squzanswerer": "^1.0.43",
"@frontend/squzanswerer": "^1.0.44",
"@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14",
"@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 [quizHeaderText, setQuizHeaderText] = useState<string>("");
const [pulsation, setPulsation] = useState<boolean>(false);
const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null;
@ -77,8 +78,9 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
appealText: appealText || undefined,
quizHeaderText: quizHeaderText || undefined,
pulsation: pulsation || undefined,
fullScreen: fullScreen || undefined,
dialogDimensions:
widgetWidth || widgetHeight
!fullScreen && (widgetWidth || widgetHeight)
? {
width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%",
@ -234,49 +236,56 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
flex: "1 1 0",
}}
>
<Box
sx={{
display: "flex",
gap: "40px",
}}
>
<CustomCheckbox
label="Квиз на весь экран"
checked={fullScreen}
handleChange={(e) => setFullScreen(e.target.checked)}
/>
<Collapse in={!fullScreen}>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
gap: "40px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина окна (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
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>
</Collapse>
<Typography sx={{ color: theme.palette.grey2.main }}>
Текст-призыв
</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<
null | ButtonWidgetFixedParams["fixedSide"]
>(null);
const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null;
if (step === 3) {
const genericParams = {
quizId: quiz.qid,
fullScreen: fullScreen || undefined,
dialogDimensions:
widgetWidth || widgetHeight
!fullScreen && (widgetWidth || widgetHeight)
? {
width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%",
@ -206,32 +208,39 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
<Typography fontWeight={500} color="#4D4D4D">
1. Задайте размеры окна квиза (опционально)
</Typography>
<Box sx={{ display: "flex", gap: "40px" }}>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина (px)
</Typography>
<PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
<CustomCheckbox
label="Квиз на весь экран"
checked={fullScreen}
handleChange={(e) => setFullScreen(e.target.checked)}
/>
<Collapse in={!fullScreen}>
<Box sx={{ display: "flex", gap: "40px" }}>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина (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 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>
</Collapse>
<Box
sx={{
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 CustomCheckbox from "@ui_kit/CustomCheckbox";
import PenaTextField from "@ui_kit/PenaTextField";
@ -21,6 +27,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null;
@ -30,8 +37,9 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
hideOnMobile: hideOnMobile || undefined,
autoShowQuizTime: autoShowQuizTime,
openOnLeaveAttempt: openOnLeaveAttempt || undefined,
fullScreen: fullScreen || undefined,
dialogDimensions:
widgetWidth || widgetHeight
!fullScreen && (widgetWidth || widgetHeight)
? {
width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%",
@ -120,49 +128,56 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
flex: "1 1 0",
}}
>
<Box
sx={{
display: "flex",
gap: "40px",
}}
>
<CustomCheckbox
label="Квиз на весь экран"
checked={fullScreen}
handleChange={(e) => setFullScreen(e.target.checked)}
/>
<Collapse in={!fullScreen}>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
gap: "40px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина окна (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
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>
</Collapse>
<Box
sx={{
display: "flex",

8
yarn.lock
View File

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