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

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

Browse Source
This commit is contained in:
tamara 2023-03-19 00:35:09 +03:00
parent d264234385
commit fdff494b97
7 changed files with 230 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/CreateQuiz/SelectableButton.tsx
View File

@ -5,20 +5,21 @@ import CustomButton from "../CustomButton";
interface Props { interface Props {
children?: React.ReactNode; children?: React.ReactNode;
isSelected?: boolean; isSelected?: boolean;
isSelectedModal?: boolean;
onClick: () => void; 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(); const theme = useTheme();
return ( return (
<CustomButton <CustomButton
onClick={onClick} onClick={onClick}
sx={{ sx={{
backgroundColor: isSelected ? theme.palette.brightPurple.main : theme.palette.background.default, backgroundColor: isSelected || isSelectedModal ? theme.palette.brightPurple.main : theme.palette.background.default,
border: isSelected ? "none" : `1px solid ${theme.palette.grey2.main}`, border: isSelected || isSelectedModal ? "none" : `1px solid ${theme.palette.grey2.main}`,
color: isSelected ? "white" : theme.palette.grey2.main, color: isSelected || isSelectedModal ? "white" : theme.palette.grey2.main,
py: isSelected ? "12px" : "11px", py: isSelected || isSelectedModal ? "12px" : "11px",
width: "auto", width: "auto",
flex: "1 1 auto", flex: "1 1 auto",
"&:hover": { "&:hover": {

5
src/components/CreateQuiz/UploadBox.tsx
View File

@ -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"; import { SxProps, Theme } from "@mui/material/styles";
@ -24,7 +24,8 @@ export default function UploadBox({ sx, icon, text }: Props) {
borderRadius: "8px", borderRadius: "8px",
...sx, ...sx,
}}> }}>
{icon} {icon}
<Typography sx={{ <Typography sx={{
position: "absolute", position: "absolute",
right: "10px", right: "10px",

109
src/pages/Questions/ButtonsOptions.tsx
View File

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

2
src/pages/Questions/QuestionsPage.tsx
View File

@ -12,7 +12,6 @@ import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft"; import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import TypeQuestions from "./TypeQuestions"; import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions"; import AnswerOptions from "./answerOptions/AnswerOptions";
import ButtonsOptions from "./ButtonsOptions";
export default function QuestionsPage() { export default function QuestionsPage() {
@ -51,7 +50,6 @@ export default function QuestionsPage() {
<AccordionDetails sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}> <AccordionDetails sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}>
<TypeQuestions/> <TypeQuestions/>
<AnswerOptions/> <AnswerOptions/>
{/*<ButtonsOptions/>*/}
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}> <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>

8
src/pages/Questions/answerOptions/AnswerOptions.tsx
View File

@ -2,15 +2,15 @@ import {Box, Typography, Link, useTheme} from "@mui/material";
import React from "react"; import React from "react";
import EnterIcon from "../../../components/icons/questionsPage/enterIcon"; import EnterIcon from "../../../components/icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import ResponseSettings from "./responseSettings";
import HelpAnswerOptions from "./helpAnswerOptions";
import UploadImage from "./UploadImage";
import SwitchAnswerOptions from "./switchAnswerOptions"; import SwitchAnswerOptions from "./switchAnswerOptions";
export default function AnswerOptions() { export default function AnswerOptions() {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return ( return (
<> <>
<Box sx={{ padding: '20px'}}> <Box sx={{ padding: '20px'}}>
@ -47,7 +47,7 @@ export default function AnswerOptions() {
<EnterIcon/> <EnterIcon/>
</Box> </Box>
</Box> </Box>
<ButtonsOptions /> <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchAnswerOptions switchState={switchState}/> <SwitchAnswerOptions switchState={switchState}/>
{/**/} {/**/}
{/*<ResponseSettings/>*/} {/*<ResponseSettings/>*/}

64
src/pages/Questions/answerOptions/UploadImage.tsx
View File

@ -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 UploadBox from "../../../components/CreateQuiz/UploadBox";
import UploadIcon from "../../../components/icons/UploadIcon"; import UploadIcon from "../../../components/icons/UploadIcon";
import * as React from "react";
export default function UploadImage () { export default function UploadImage () {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return ( return (
<Box> <Box sx={{padding: '20px'}}>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Загрузить изображение</Typography> <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> </Box>
) )
} }

111
src/pages/Questions/answerOptions/helpAnswerOptions.tsx
View File

@ -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 SelectableButton from "../../../components/CreateQuiz/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import {useState} from "react"; import {useState} from "react";
import UploadIcon from "../../../components/icons/UploadIcon"; import UploadIcon from "../../../components/icons/UploadIcon";
import UploadBox from "../../../components/CreateQuiz/UploadBox"; import UploadBox from "../../../components/CreateQuiz/UploadBox";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import CustomButton from "../../../components/CustomButton";
type BackgroundType = "text" | "video"; type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo"
export default function HelpAnswerOptions() { 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 [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
const theme = useTheme()
return ( return (
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}> <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
<Typography>Подсказка консультанта</Typography> <Typography>Подсказка консультанта</Typography>
@ -28,16 +37,96 @@ export default function HelpAnswerOptions() {
<CustomTextField placeholder={"Текст консультанта"} text={""}/> <CustomTextField placeholder={"Текст консультанта"} text={""}/>
</> </>
: :
<> <Box>
<Typography>Загрузите видео</Typography> <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
<UploadBox <ButtonBase onClick={handleOpen} sx={{justifyContent: 'flex-start'}} >
icon={<UploadIcon />} <UploadBox
sx={{ icon={<UploadIcon />}
height: "48px",
width: "48px", 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> </Box>
); );