From cd044575016bb860751d6041f2c6b08d3e61704e Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Wed, 13 Dec 2023 10:51:59 +0300 Subject: [PATCH 01/15] feat: variant checkbox icon --- package.json | 2 - src/assets/icons/Checkbox.tsx | 43 ++++++++++++ .../ViewPublicationPage/questions/Date.tsx | 2 - .../ViewPublicationPage/questions/Variant.tsx | 5 +- src/ui_kit/CustomCheckbox.tsx | 45 ++----------- yarn.lock | 65 +------------------ 6 files changed, 53 insertions(+), 109 deletions(-) create mode 100644 src/assets/icons/Checkbox.tsx diff --git a/package.json b/package.json index 13a78c9e..d27ff52f 100755 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-cytoscapejs": "^2.0.0", - "react-datepicker": "^4.24.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", @@ -78,7 +77,6 @@ "@types/cytoscape-popper": "^2.0.4", "@types/react-beautiful-dnd": "^13.1.4", "@types/react-cytoscapejs": "^1.2.4", - "@types/react-datepicker": "^4.19.3", "craco-alias": "^3.0.1", "cypress": "^13.4.0" } diff --git a/src/assets/icons/Checkbox.tsx b/src/assets/icons/Checkbox.tsx new file mode 100644 index 00000000..265b62e3 --- /dev/null +++ b/src/assets/icons/Checkbox.tsx @@ -0,0 +1,43 @@ +import { Box, useTheme } from "@mui/material"; + +type CheckboxIconProps = { + checked?: boolean; +}; + +export const CheckboxIcon = ({ checked = false }: CheckboxIconProps) => { + const theme = useTheme(); + + return ( + + {checked && ( + + + + )} + + ); +}; diff --git a/src/pages/ViewPublicationPage/questions/Date.tsx b/src/pages/ViewPublicationPage/questions/Date.tsx index 030621f7..0f33e19f 100644 --- a/src/pages/ViewPublicationPage/questions/Date.tsx +++ b/src/pages/ViewPublicationPage/questions/Date.tsx @@ -4,8 +4,6 @@ import { Box, Typography } from "@mui/material"; import { useQuizViewStore, updateAnswer } from "@root/quizView"; -// import "react-datepicker/dist/react-datepicker.css"; - import type { QuizQuestionDate } from "../../../model/questionTypes/date"; import CalendarIcon from "@icons/CalendarIcon"; diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx index 44e444d3..e8486b5a 100644 --- a/src/pages/ViewPublicationPage/questions/Variant.tsx +++ b/src/pages/ViewPublicationPage/questions/Variant.tsx @@ -13,6 +13,7 @@ import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; +import { CheckboxIcon } from "@icons/Checkbox"; import type { QuizQuestionVariant } from "../../../model/questionTypes/variant"; @@ -77,8 +78,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => { currentQuestion.content.multi ? ( } - icon={} + checkedIcon={} + icon={} /> ) : ( } icon={} /> diff --git a/src/ui_kit/CustomCheckbox.tsx b/src/ui_kit/CustomCheckbox.tsx index b66fc1e7..32b7d4ef 100755 --- a/src/ui_kit/CustomCheckbox.tsx +++ b/src/ui_kit/CustomCheckbox.tsx @@ -1,6 +1,8 @@ import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material"; import React from "react"; +import { CheckboxIcon } from "@icons/Checkbox"; + import type { SxProps } from "@mui/material"; interface Props { @@ -21,8 +23,8 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC } - checkedIcon={} + icon={} + checkedIcon={} onChange={handleChange} checked={checked} data-cy={dataCy} @@ -37,42 +39,3 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC /> ); } - -function Icon() { - const theme = useTheme(); - - return ( - - ); -} - -function CheckedIcon() { - const theme = useTheme(); - - return ( - - - - - - ); -} diff --git a/yarn.lock b/yarn.lock index 55e74472..d1d931cd 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1034,7 +1034,7 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.11" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.23.2" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz" integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== @@ -1868,7 +1868,7 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.0.0", "@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2": +"@popperjs/core@^2.0.0", "@popperjs/core@^2.11.8": version "2.11.8" resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== @@ -2412,16 +2412,6 @@ "@types/cytoscape" "*" "@types/react" "*" -"@types/react-datepicker@^4.19.3": - version "4.19.3" - resolved "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.19.3.tgz" - integrity sha512-85F9eKWu9fGiD9r4KVVMPYAdkJJswR3Wci9PvqplmB6T+D+VbUqPeKtifg96NZ4nEhufjehW+SX4JLrEWVplWw== - dependencies: - "@popperjs/core" "^2.9.2" - "@types/react" "*" - date-fns "^2.0.1" - react-popper "^2.2.5" - "@types/react-dnd@^3.0.2": version "3.0.2" resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz" @@ -3610,11 +3600,6 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== -classnames@^2.2.6: - version "2.3.2" - resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz" - integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== - clean-css@^5.2.2: version "5.3.1" resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz" @@ -4214,13 +4199,6 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" -date-fns@^2.0.1, date-fns@^2.30.0: - version "2.30.0" - resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz" - integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw== - dependencies: - "@babel/runtime" "^7.21.0" - dayjs@^1.10.4, dayjs@^1.11.10: version "1.11.10" resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz" @@ -7115,7 +7093,7 @@ log-update@^4.0.0: slice-ansi "^4.0.0" wrap-ansi "^6.2.0" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -8544,18 +8522,6 @@ react-cytoscapejs@^2.0.0: dependencies: prop-types "^15.8.1" -react-datepicker@^4.24.0: - version "4.24.0" - resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.24.0.tgz" - integrity sha512-2QUC2pP+x4v3Jp06gnFllxKsJR0yoT/K6y86ItxEsveTXUpsx+NBkChWXjU0JsGx/PL8EQnsxN0wHl4zdA1m/g== - dependencies: - "@popperjs/core" "^2.11.8" - classnames "^2.2.6" - date-fns "^2.30.0" - prop-types "^15.7.2" - react-onclickoutside "^6.13.0" - react-popper "^2.3.0" - react-dev-utils@^12.0.1: version "12.0.1" resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz" @@ -8645,11 +8611,6 @@ react-fast-compare@^2.0.1: resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-fast-compare@^3.0.1: - version "3.2.2" - resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz" - integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== - react-image-crop@^10.1.5: version "10.1.8" resolved "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz" @@ -8675,19 +8636,6 @@ react-is@^18.0.0, react-is@^18.2.0: resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-onclickoutside@^6.13.0: - version "6.13.0" - resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz" - integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A== - -react-popper@^2.2.5, react-popper@^2.3.0: - version "2.3.0" - resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz" - integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q== - dependencies: - react-fast-compare "^3.0.1" - warning "^4.0.2" - react-redux@^7.2.0: version "7.2.9" resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz" @@ -10260,13 +10208,6 @@ walker@^1.0.7: dependencies: makeerror "1.0.12" -warning@^4.0.2: - version "4.0.3" - resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz" - integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== - dependencies: - loose-envify "^1.0.0" - watchpack@^2.4.0: version "2.4.0" resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz" From fb176e074038d92e53d0bfc7de1cfd458b1f8d65 Mon Sep 17 00:00:00 2001 From: Tamara Date: Wed, 13 Dec 2023 12:34:52 +0300 Subject: [PATCH 02/15] =?UTF-8?q?=D0=BC=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B8=20=D0=B8=D1=81?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA?= =?UTF-8?q?=D0=BE=D1=81=D1=8F=D0=BA=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Questions/BranchingPanel/index.tsx | 2 +- .../Questions/QuestionSwitchWindowTool.tsx | 8 +- .../Questions/SwitchBranchingPanel/index.tsx | 2 +- .../ViewPublicationPage/questions/File.tsx | 87 +++++++++++++++---- .../ViewPublicationPage/questions/Number.tsx | 1 + src/pages/startPage/EditPage.tsx | 7 +- 6 files changed, 81 insertions(+), 26 deletions(-) diff --git a/src/pages/Questions/BranchingPanel/index.tsx b/src/pages/Questions/BranchingPanel/index.tsx index 7e893b1e..3c60e56b 100644 --- a/src/pages/Questions/BranchingPanel/index.tsx +++ b/src/pages/Questions/BranchingPanel/index.tsx @@ -26,7 +26,7 @@ export const BranchingPanel = (sx?: SxProps) => { }} > { updateOpenBranchingPanel(value) }} diff --git a/src/pages/Questions/QuestionSwitchWindowTool.tsx b/src/pages/Questions/QuestionSwitchWindowTool.tsx index f7531dbb..aa2943b4 100644 --- a/src/pages/Questions/QuestionSwitchWindowTool.tsx +++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx @@ -1,7 +1,7 @@ import { - Box, - } from "@mui/material"; + Box, useMediaQuery, useTheme, +} from "@mui/material"; import { DraggableList } from "./DraggableList"; import { SwitchBranchingPanel } from "./SwitchBranchingPanel"; import { BranchingMap } from "./BranchingMap"; @@ -10,9 +10,11 @@ import {useQuestionsStore} from "@root/questions/store"; export const QuestionSwitchWindowTool = () => { const {openBranchingPanel, questions} = useQuestionsStore.getState() + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); console.log("questions ", questions) return ( - + {openBranchingPanel? : } diff --git a/src/pages/Questions/SwitchBranchingPanel/index.tsx b/src/pages/Questions/SwitchBranchingPanel/index.tsx index 4011c4b7..2c0b5bd7 100644 --- a/src/pages/Questions/SwitchBranchingPanel/index.tsx +++ b/src/pages/Questions/SwitchBranchingPanel/index.tsx @@ -25,7 +25,7 @@ export const SwitchBranchingPanel = () => { }} > { updateOpenBranchingPanel(value) }} diff --git a/src/pages/ViewPublicationPage/questions/File.tsx b/src/pages/ViewPublicationPage/questions/File.tsx index eeb7863c..6a456c1b 100644 --- a/src/pages/ViewPublicationPage/questions/File.tsx +++ b/src/pages/ViewPublicationPage/questions/File.tsx @@ -41,17 +41,77 @@ export const File = ({ currentQuestion }: FileProps) => { maxWidth: answer?.split("|")[0] ? "640px" : "550px" }} > - - - } text="5 MB максимум" /> - - {answer && currentQuestion.content.type === "picture" && ( + {answer?.split("|")[0] && ( + + Вы загрузили: + + + {answer?.split("|")[0]} + + {updateAnswer(currentQuestion.content.id, "");}} + > + + + + + + + )} + + {!answer?.split("|")[0] && ( + + + ) => event.preventDefault()} + sx={{ + width: "100%", + height: "120px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + padding: "33px 44px 33px 55px", + backgroundColor: theme.palette.background.default, + border: `1px solid ${theme.palette.grey2.main}`, + borderRadius: "8px", + }} + > + + + Добавить видео + + Принимает .mp4 и .mov формат — максимум 100мб + + + + + + )} + {answer && currentQuestion.content.type === "picture" && ( { }} /> )} - {answer?.split("|")[0] && ( - - {answer?.split("|")[0]} - - )} ); diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index effdc697..c5a39293 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -7,6 +7,7 @@ import CustomTextField from "@ui_kit/CustomTextField"; import { useQuizViewStore, updateAnswer } from "@root/quizView"; import type { QuizQuestionNumber } from "../../../model/questionTypes/number"; +import {CustomSlider} from "@ui_kit/CustomSlider"; type NumberProps = { currentQuestion: QuizQuestionNumber; diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 3bda5a94..b9402d82 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -213,7 +213,7 @@ export default function EditPage() { sx={{ background: theme.palette.background.default, width: "100%", - padding: isMobile ? "16px" : "25px", + padding: isMobile ? "16px 16px 140px 16px" : "25px", height: "calc(100vh - 80px)", overflow: "auto", boxSizing: "border-box", @@ -258,7 +258,7 @@ export default function EditPage() { }} > { updateOpenBranchingPanel(value) }} @@ -310,9 +310,6 @@ export default function EditPage() { Логика ветвления - - Настройте связи между вопросами - - - - - - {quiz?.config.info.phonenumber} - - - {quiz?.config.info.law} - - - - {!isTablet && isMediaFileExist && ( - - {quiz?.config.startpage.background.mobile && ( - - )} - {quiz.config.startpage.background.type === "video" && - quiz.config.startpage.background.video && ( - - )} - + + {quiz.config.info.orgname} + + + + + {quiz.config.info.site} + + + } + quizMainBlock={<> + + {quiz.name} + + {quiz.config.startpage.description} + + + + + + + {quiz.config.info.clickable ? ( + isMobileDevice ? ( + + + {quiz.config.info.phonenumber} + + + ) : ( + + + {quiz.config.info.phonenumber} + + + ) + ) : ( + + {quiz.config.info.phonenumber} + + )} + + {quiz.config.info.law} + + + } + backgroundBlock={background} + startpageType={quiz.config.startpageType} + alignType={quiz.config.startpage.position} + /> + ); +} + +function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: { + quizHeaderBlock: JSX.Element; + quizMainBlock: JSX.Element; + backgroundBlock: JSX.Element | null; + startpageType: QuizStartpageType; + alignType: QuizStartpageAlignType; +}) { + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(630)); + + switch (startpageType) { + case null: + case "standard": { + return ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ); + } + case "expanded": { + return ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ); + } + case "centered": { + return ( + + {quizHeaderBlock} + {backgroundBlock && + + {backgroundBlock} + + } + {quizMainBlock} + + ); + } + default: notReachable(startpageType); + } +} + +const startpageAlignTypeToJustifyContent: Record = { + left: "start", + center: "center", + right: "end", }; diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index 38911b8f..66a521cc 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -5,11 +5,29 @@ import { StartPageViewPublication } from "./StartPageViewPublication"; import { Question } from "./Question"; import { useQuestions } from "@root/questions/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks"; +import useSWR from "swr"; +import { quizApi } from "@api/quiz"; +import { setQuizes } from "@root/quizes/actions"; +import { isAxiosError } from "axios"; +import { devlog } from "@frontend/kitui"; import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared"; +import { enqueueSnackbar } from "notistack"; export const ViewPage = () => { + useSWR("quizes", () => quizApi.getList(), { + onSuccess: setQuizes, + onError: error => { + const message = isAxiosError(error) ? (error.response?.data ?? "") : ""; + + devlog("Error getting quiz list", error); + enqueueSnackbar(`Не удалось получить квизы. ${message}`); + }, +}); + + const quiz = useCurrentQuiz(); + console.log(quiz) const { questions } = useQuestions(); const [visualStartPage, setVisualStartPage] = useState( !quiz?.config.noStartPage @@ -30,10 +48,7 @@ export const ViewPage = () => { return ( {visualStartPage ? ( - + ) : ( )} diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index cf279d3c..fa64b178 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -331,74 +331,7 @@ export default function StartPageSettings() { - - } - checkedIcon={} - /> - } - label="мобильная версия" - sx={{ - color: theme.palette.brightPurple.main, - textDecorationLine: "underline", - textDecorationColor: theme.palette.brightPurple.main, - ml: "-9px", - userSelect: "none", - "& .css-14o5ia4-MuiTypography-root": { - fontSize: "16px" - } - }} - onClick={() => { - MobileVersionHC(!mobileVersion); - }} - /> - {mobileVersion ? ( - - - Изображение для мобильной версии - - { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - quiz.config.startpage.background.originalMobile = url; - }); - }} - onImageSaveClick={file => { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - }); - }} - onDeleteClick={() => { - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.background.mobile = null; - }); - }} - /> - - ) : ( - <> - )} - + - - Настройки видео - - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.background.cycle = e.target.checked; - })} - /> - - Изображение для мобильной версии - - { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - quiz.config.startpage.background.originalMobile = url; - }); - }} - onImageSaveClick={file => { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - }); - }} - onDeleteClick={() => { - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.background.mobile = null; - }); - }} - /> + - - Расположение элементов - {designType !== "centered" && - - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.position = "left"; - })} - isActive={quiz.config.startpage.position === "left"} - Icon={AlignLeftIcon} - /> - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.position = "center"; - })} - isActive={quiz.config.startpage.position === "center"} - Icon={AlignCenterIcon} - sx={{ display: designType === "standard" ? "none" : "flex" }} - /> - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.position = "right"; - })} - isActive={quiz.config.startpage.position === "right"} - Icon={AlignRightIcon} - /> - + <> + + Расположение элементов + + + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.position = "left"; + })} + isActive={quiz.config.startpage.position === "left"} + Icon={AlignLeftIcon} + /> + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.position = "center"; + })} + isActive={quiz.config.startpage.position === "center"} + Icon={AlignCenterIcon} + sx={{ display: designType === "standard" ? "none" : "flex" }} + /> + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.position = "right"; + })} + isActive={quiz.config.startpage.position === "right"} + Icon={AlignRightIcon} + /> + + + } {(isTablet || !isSmallMonitor) && ( <> diff --git a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx index 5e83bf19..677690e5 100644 --- a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx +++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx @@ -1,12 +1,13 @@ -import { Box } from "@mui/material"; +import { Box, SxProps } from "@mui/material"; interface Props { videoUrl: string; + containerSX?: SxProps; } -export default function YoutubeEmbedIframe({ videoUrl }: Props) { +export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) { const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi; const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1]; if (!videoId) return null; @@ -21,7 +22,8 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) { "& iframe": { width: "100%", height: "100%", - } + }, + ...containerSX }}>