модальные окна для страничи вопросов

2023-03-19 00:35:09 +03:00 · 2023-03-19 00:35:09 +03:00 · fdff494b97
commit fdff494b97
parent d264234385
7 changed files with 230 additions and 80 deletions
--- a/src/components/CreateQuiz/SelectableButton.tsx
+++ b/src/components/CreateQuiz/SelectableButton.tsx
@ -5,20 +5,21 @@ import CustomButton from "../CustomButton";
 interface Props {
    children?: React.ReactNode;
    isSelected?: boolean;
+    isSelectedModal?: boolean;
    onClick: () => void;
 }

-export default function SelectableButton({ children, isSelected = false, onClick }: Props) {
+export default function SelectableButton({ children, isSelected = false, isSelectedModal = false, onClick }: Props) {
    const theme = useTheme();

    return (
        <CustomButton
            onClick={onClick}
            sx={{
-                backgroundColor: isSelected ? theme.palette.brightPurple.main : theme.palette.background.default,
-                border: isSelected ? "none" : `1px solid ${theme.palette.grey2.main}`,
-                color: isSelected ? "white" : theme.palette.grey2.main,
-                py: isSelected ? "12px" : "11px",
+                backgroundColor: isSelected || isSelectedModal ? theme.palette.brightPurple.main : theme.palette.background.default,
+                border: isSelected || isSelectedModal ? "none" : `1px solid ${theme.palette.grey2.main}`,
+                color: isSelected || isSelectedModal ? "white" : theme.palette.grey2.main,
+                py: isSelected || isSelectedModal ? "12px" : "11px",
                width: "auto",
                flex: "1 1 auto",
                "&:hover": {
--- a/src/components/CreateQuiz/UploadBox.tsx
+++ b/src/components/CreateQuiz/UploadBox.tsx
@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import {Box, IconButton, Typography, useTheme} from "@mui/material";
 import { SxProps, Theme } from "@mui/material/styles";


@ -24,7 +24,8 @@ export default function UploadBox({ sx, icon, text }: Props) {
            borderRadius: "8px",
            ...sx,
        }}>
-            {icon}
+                {icon}
+
            <Typography sx={{
                position: "absolute",
                right: "10px",
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -9,15 +9,18 @@ import HideIcon from "../../components/icons/questionsPage/hideIcon";
 import CopyIcon from "../../components/icons/questionsPage/CopyIcon";
 import DeleteIcon from "../../components/icons/questionsPage/deleteIcon";

+interface Props {
+    switchState: string
+    SSHC: (data:string) => void
+}

-export default function ButtonsOptions () {
-    // const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
-    //     {icon: <SettingIcon/>, title: 'Настройки', value: 'setting'},
-    //     {icon: <Clue/>, title: 'Подсказка', value: 'help'},
-    //     {icon: <Branching/>, title: 'Ветвление', value: 'branching'},
-    //     {icon: <ImgIcon/>, title: 'Изображение', value: 'image'},
-    // ]
-   const [switchState, setSwitchState] = React.useState('setting');
+export default function ButtonsOptions ({SSHC, switchState}:Props) {
+    const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
+        {icon: <SettingIcon/>, title: 'Настройки', value: 'setting'},
+        {icon: <Clue/>, title: 'Подсказка', value: 'help'},
+        {icon: <Branching/>, title: 'Ветвление', value: 'branching'},
+        {icon: <ImgIcon/>, title: 'Изображение', value: 'image'},
+    ]
    const theme = useTheme();
    return (
        <Box sx={{
@ -33,51 +36,51 @@ export default function ButtonsOptions () {
                    gap: '10px'
                }}
            >
-                {/*{buttonSetting.map( (e,i) => (*/}
-                {/*    <MiniButtonSetting*/}
-                {/*        key={i}*/}
-                {/*        onClick={()=>{setSwitchState({e.value})}}*/}
-                {/*        sx={{backgroundColor: switchState === {e.value} ? theme.palette.brightPurple.main : 'transparent',*/}
-                {/*            color: switchState === {e.value} ? '#ffffff' : theme.palette.grey3.main,*/}
-                {/*        }}*/}
-                {/*    >*/}
-                {/*        {e.icon}*/}
-                {/*        {e.title}*/}
-                {/*    </MiniButtonSetting>*/}
-                {/*))}*/}
-                <MiniButtonSetting
-                    onClick={()=>{setSwitchState('setting')}}
-                    sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',
-                        color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,
-                    }}
-                >
-                    <SettingIcon/>
-                    Настройки
-                </MiniButtonSetting>
-                <MiniButtonSetting
-                    onClick={()=>{setSwitchState('help')}}
-                    sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',
-                        color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,
-                    }}
-                >
-                    <Clue/> Подсказка
-                </MiniButtonSetting>
-                <MiniButtonSetting
-                    onClick={()=>{setSwitchState('branching')}}
-                    sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',
-                        color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,
-                    }}
-                >
-                    <Branching/> Ветвление
-                </MiniButtonSetting>
-                <MiniButtonSetting
-                    onClick={()=>{setSwitchState('image')}}
-                    sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',
-                        color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,
-                    }}
-                >
-                    <ImgIcon/> Изображение
-                </MiniButtonSetting>
+                {buttonSetting.map( (e,i) => (
+                    <MiniButtonSetting
+                        key={i}
+                        onClick={()=>{SSHC(e.value)}}
+                        sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
+                            color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main,
+                        }}
+                    >
+                        {e.icon}
+                        {e.title}
+                    </MiniButtonSetting>
+                ))}
+                {/*<MiniButtonSetting*/}
+                {/*    onClick={()=>{setSwitchState('setting')}}*/}
+                {/*    sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',*/}
+                {/*        color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,*/}
+                {/*    }}*/}
+                {/*>*/}
+                {/*    <SettingIcon/>*/}
+                {/*    Настройки*/}
+                {/*</MiniButtonSetting>*/}
+                {/*<MiniButtonSetting*/}
+                {/*    onClick={()=>{setSwitchState('help')}}*/}
+                {/*    sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',*/}
+                {/*        color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,*/}
+                {/*    }}*/}
+                {/*>*/}
+                {/*    <Clue/> Подсказка*/}
+                {/*</MiniButtonSetting>*/}
+                {/*<MiniButtonSetting*/}
+                {/*    onClick={()=>{setSwitchState('branching')}}*/}
+                {/*    sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',*/}
+                {/*        color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,*/}
+                {/*    }}*/}
+                {/*>*/}
+                {/*    <Branching/> Ветвление*/}
+                {/*</MiniButtonSetting>*/}
+                {/*<MiniButtonSetting*/}
+                {/*    onClick={()=>{setSwitchState('image')}}*/}
+                {/*    sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',*/}
+                {/*        color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,*/}
+                {/*    }}*/}
+                {/*>*/}
+                {/*    <ImgIcon/> Изображение*/}
+                {/*</MiniButtonSetting>*/}

            </Box>
            <Box
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@ -12,7 +12,6 @@ import AddPlus from "../../components/icons/questionsPage/addPlus";
 import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
 import TypeQuestions from "./TypeQuestions";
 import AnswerOptions from "./answerOptions/AnswerOptions";
-import ButtonsOptions from "./ButtonsOptions";

 export default function QuestionsPage() {

@ -51,7 +50,6 @@ export default function QuestionsPage() {
                <AccordionDetails sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}>
                    <TypeQuestions/>
                    <AnswerOptions/>
-                    {/*<ButtonsOptions/>*/}
                </AccordionDetails>
            </Accordion>
            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
--- a/src/pages/Questions/answerOptions/AnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx
@ -2,15 +2,15 @@ import {Box, Typography, Link, useTheme} from "@mui/material";
 import React from "react";
 import EnterIcon from "../../../components/icons/questionsPage/enterIcon";
 import ButtonsOptions from "../ButtonsOptions";
-import ResponseSettings from "./responseSettings";
-import HelpAnswerOptions from "./helpAnswerOptions";
-import UploadImage from "./UploadImage";
 import SwitchAnswerOptions from "./switchAnswerOptions";


 export default function AnswerOptions() {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
+    const SSHC = (data: string) => {
+        setSwitchState(data)
+    }
    return (
        <>
            <Box sx={{ padding: '20px'}}>
@ -47,7 +47,7 @@ export default function AnswerOptions() {
                    <EnterIcon/>
                </Box>
            </Box>
-            <ButtonsOptions />
+            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
            <SwitchAnswerOptions switchState={switchState}/>
            {/**/}
            {/*<ResponseSettings/>*/}
--- a/src/pages/Questions/answerOptions/UploadImage.tsx
+++ b/src/pages/Questions/answerOptions/UploadImage.tsx
@ -1,14 +1,72 @@
-import {Typography, Box, useTheme} from "@mui/material";
+import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material";
 import UploadBox from "../../../components/CreateQuiz/UploadBox";
 import UploadIcon from "../../../components/icons/UploadIcon";
+import * as React from "react";


 export default function UploadImage () {
    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
    return (
-        <Box>
+        <Box sx={{padding: '20px'}}>
            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Загрузить изображение</Typography>
-            <UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
+            <ButtonBase onClick={handleOpen} sx={{width: "100%", maxWidth: "260px"}}>
+                <UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
+            </ButtonBase>
+            <Modal
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="modal-modal-title"
+                aria-describedby="modal-modal-description"
+            >
+                <Box sx={{
+                    position: 'absolute' as 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    maxWidth: '690px',
+                    bgcolor: 'background.paper',
+                    borderRadius: '12px',
+
+                    boxShadow: 24,
+                    p: 0,}}>
+                    <Box
+                        sx={{display: 'flex',
+
+                            flexDirection: 'column',
+                            padding: '20px',
+                            background: theme.palette.background.default,
+                        }}
+                    >
+                        <Typography>Добавьте изображение</Typography>
+                        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                            <input hidden accept="image/*" multiple type="file" />
+                            <Box
+                                sx={{
+                                    width: '580px',
+                                    padding: '33px',
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    backgroundColor: theme.palette.background.default,
+                                    border: `1px solid ${theme.palette.grey2.main}`,
+                                    borderRadius: "8px",
+                                }}
+
+                            >
+                                <UploadIcon />
+                                <Box>
+                                    <Typography>Загрузите или перетяните сюда файл</Typography>
+                                    <Typography>Принимает JPG, PNG, и GIF формат — максимум 5mb</Typography>
+                                </Box>
+                            </Box>
+                        </ButtonBase>
+                        <Typography>Или выберите на фотостоке</Typography>
+                    </Box>
+                </Box>
+            </Modal>
        </Box>
    )
 }
--- a/src/pages/Questions/answerOptions/helpAnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/helpAnswerOptions.tsx
@ -1,14 +1,23 @@
-import {Box, Typography, useTheme} from "@mui/material";
+import {Box, Button, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
+import * as React from 'react';
 import SelectableButton from "../../../components/CreateQuiz/SelectableButton";
 import CustomTextField from "@ui_kit/CustomTextField";
 import {useState} from "react";
 import UploadIcon from "../../../components/icons/UploadIcon";
 import UploadBox from "../../../components/CreateQuiz/UploadBox";
+import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
+import CustomButton from "../../../components/CustomButton";

 type BackgroundType = "text" | "video";
+type BackgroundTypeModal = "linkVideo" | "ownVideo"

 export default function HelpAnswerOptions() {
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
    const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
+    const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
+    const theme = useTheme()
    return (
        <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
            <Typography>Подсказка консультанта</Typography>
@ -28,16 +37,96 @@ export default function HelpAnswerOptions() {
                    <CustomTextField placeholder={"Текст консультанта"} text={""}/>
                </>
                :
-                <>
-                    <Typography>Загрузите видео</Typography>
-                    <UploadBox
-                        icon={<UploadIcon />}
-                        sx={{
-                            height: "48px",
-                            width: "48px",
-                        }}
-                    />
-                </>
+                <Box>
+                    <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
+                    <ButtonBase onClick={handleOpen} sx={{justifyContent: 'flex-start'}} >
+                        <UploadBox
+                            icon={<UploadIcon />}
+
+                            sx={{
+                                height: "48px",
+                                width: "48px",
+                            }}
+                        />
+                    </ButtonBase>
+                    <Modal
+                        open={open}
+                        onClose={handleClose}
+                        aria-labelledby="modal-modal-title"
+                        aria-describedby="modal-modal-description"
+                    >
+                        <Box sx={{position: 'absolute' as 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            maxWidth: '690px',
+                            bgcolor: 'background.paper',
+                            borderRadius: '12px',
+
+                            boxShadow: 24,
+                            p: 0,}}>
+                            <Box
+                                sx={{display: 'flex',
+                                    padding: '20px',
+                                    background: theme.palette.background.default,
+                                }}
+                            >
+                                <Typography>Видео можно вставить с любого хостинга:
+                                    YouTube, Vimeo или загрузить собственное</Typography>
+                                <CustomButton
+                                    variant="contained"
+                                    sx={{
+                                        backgroundColor: theme.palette.brightPurple.main,
+                                        color: "white",
+                                        width: "auto",
+                                        px: "20px",
+                                        py: "9px",
+                                    }}
+                                >Готово</CustomButton>
+                            </Box>
+                            <Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
+                                <SelectableButton isSelectedModal={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
+                                    Ссылка на видео
+                                </SelectableButton>
+                                <SelectableButton isSelectedModal={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
+                                    Загрузить свое
+                                </SelectableButton>
+                            </Box>
+                            {backgroundTypeModal === "linkVideo" ?
+                                <Box sx={{padding: '20px'}}>
+                                    <Typography sx={{paddingBottom: '15px'}}>Ссылка на видео</Typography>
+                                    <CustomTextField placeholder={"http://example.com"} text={""}/>
+                                </Box>
+                                :
+                                <Box sx={{padding: '20px'}}>
+                                    <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
+                                    <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                                        <input hidden accept="video/*" multiple type="file" />
+                                        <Box
+                                            sx={{
+                                                width: '580px',
+                                                padding: '33px',
+                                                display: "flex",
+                                                justifyContent: "space-between",
+                                                alignItems: "center",
+                                                backgroundColor: theme.palette.background.default,
+                                                border: `1px solid ${theme.palette.grey2.main}`,
+                                                borderRadius: "8px",
+                                            }}
+
+                                        >
+                                            <UploadIcon />
+                                            <Box>
+                                                <Typography>Добавить видео</Typography>
+                                                <Typography>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
+                                            </Box>
+                                        </Box>
+                                    </ButtonBase>
+                                </Box>
+                            }
+                        </Box>
+                    </Modal>
+                </Box>
            }
        </Box>
    );