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 02:42:47 +03:00
parent fdff494b97
commit 470175b26e
3 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,21 +5,20 @@ import CustomButton from "../CustomButton";
interface Props {
children?: React.ReactNode;
isSelected?: boolean;
isSelectedModal?: boolean;
onClick: () => void;
}
export default function SelectableButton({ children, isSelected = false, isSelectedModal = false, onClick }: Props) {
export default function SelectableButton({ children, isSelected = false, onClick }: Props) {
const theme = useTheme();
return (
<CustomButton
onClick={onClick}
sx={{
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",
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",
width: "auto",
flex: "1 1 auto",
"&:hover": {

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

@ -9,11 +9,23 @@ export default function UploadImage () {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const imgHC = (imgInp:any) => {
const [file] = imgInp.files
setImg(URL.createObjectURL(file))
handleClose()
}
const [img, setImg] = React.useState("");
return (
<Box sx={{padding: '20px'}}>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Загрузить изображение</Typography>
<ButtonBase onClick={handleOpen} sx={{width: "100%", maxWidth: "260px"}}>
<UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
{img ?
<img width="400" src={img}/>
:
<UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
}
</ButtonBase>
<Modal
open={open}
@ -42,7 +54,7 @@ export default function UploadImage () {
>
<Typography>Добавьте изображение</Typography>
<ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
<input hidden accept="image/*" multiple type="file" />
<input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
<Box
sx={{
width: '580px',

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

@ -18,6 +18,13 @@ export default function HelpAnswerOptions() {
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
const theme = useTheme()
const videoHC = (videoInp:any) => {
const [file] = videoInp.files
setVideo(URL.createObjectURL(file))
handleClose()
}
const [video, setVideo] = React.useState("");
return (
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
<Typography>Подсказка консультанта</Typography>
@ -40,14 +47,19 @@ export default function HelpAnswerOptions() {
<Box>
<Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
<ButtonBase onClick={handleOpen} sx={{justifyContent: 'flex-start'}} >
{video ?
<video src={video} width="400" controls/>
:
<>
<UploadBox
icon={<UploadIcon />}
sx={{
height: "48px",
width: "48px",
}}
/>
</>
}
</ButtonBase>
<Modal
open={open}
@ -85,10 +97,10 @@ export default function HelpAnswerOptions() {
>Готово</CustomButton>
</Box>
<Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
<SelectableButton isSelectedModal={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
<SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
Ссылка на видео
</SelectableButton>
<SelectableButton isSelectedModal={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
<SelectableButton isSelected={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
Загрузить свое
</SelectableButton>
</Box>
@ -101,7 +113,7 @@ export default function HelpAnswerOptions() {
<Box sx={{padding: '20px'}}>
<Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
<ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
<input hidden accept="video/*" multiple type="file" />
<input onChange={event => videoHC(event.target) } hidden accept="video/*" multiple type="file" />
<Box
sx={{
width: '580px',