From 84b77f6eb6b5fc7187fe56c01b6eab6f1016318b Mon Sep 17 00:00:00 2001 From: Tamara Date: Fri, 23 Jun 2023 16:42:35 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83?= =?UTF-8?q?=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/AlignCenterIcon.tsx | 29 ++++++ src/index.tsx | 2 +- src/pages/startPage/ModalSizeImage.tsx | 103 ++++++++++++++++++- src/pages/startPage/SelectableIconButton.tsx | 6 +- src/pages/startPage/StartPageSettings.tsx | 55 +++++----- src/pages/startPage/extra.tsx | 97 +++++++++++++++++ 6 files changed, 256 insertions(+), 36 deletions(-) diff --git a/src/assets/icons/AlignCenterIcon.tsx b/src/assets/icons/AlignCenterIcon.tsx index e69de29b..bddd42cd 100644 --- a/src/assets/icons/AlignCenterIcon.tsx +++ b/src/assets/icons/AlignCenterIcon.tsx @@ -0,0 +1,29 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function AlignCenterIcon({ color }: Props) { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index d1232905..50e6d9ef 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -26,7 +26,7 @@ const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: bo {path: "/list-empty", page: , header: false, sidebar: false}, {path: "/list-full", page: , header: false, sidebar: false}, {path: "/list-short", page: , header: false, sidebar: false}, - {path: "/questions", page: , header: true, sidebar: true}, + {path: "/questions/:quizId", page: , header: true, sidebar: true}, {path: "/contacts", page: , header: true, sidebar: true}, {path: "/result", page: , header: true, sidebar: true}, {path: "/settings", page: , header: true, sidebar: true}, diff --git a/src/pages/startPage/ModalSizeImage.tsx b/src/pages/startPage/ModalSizeImage.tsx index aea89682..dc4803d4 100644 --- a/src/pages/startPage/ModalSizeImage.tsx +++ b/src/pages/startPage/ModalSizeImage.tsx @@ -1,4 +1,15 @@ -import {Button, Modal, Box, useTheme, Typography} from "@mui/material"; +import { + Button, + Modal, + Box, + useTheme, + Typography, + Table, + TableCell, + TableBody, + TableContainer, + TableRow, +} from "@mui/material"; import * as React from "react"; import {useState} from "react"; @@ -7,6 +18,35 @@ export default function ModalSizeImage () { const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); + + function createData( + name: string, + size: string + ) { + return { name, size }; + } + + const rows = [ + createData('Прямая ссылка/домен', "1792х1509 px"), + createData('Модальное окно', "1380х1300 px"), + createData('Во ВКонтакте', "1166х1200 px"), + createData('Версия для планшета', "767х220 px"), + createData('Мобильная версия', "400х220 px"), + createData('Картинка для дизайна Centered', "900х490 px"), + createData('Картинка для дизайна Expanded', "1920х1080 px"), + ]; + + const rows2 = [ + createData('Вертикальный вариант', "180х240 px"), + createData('Квадратные', "240х240 px"), + createData('Варианты и картинка', "380х307 px"), + createData('Консультант', "140х140 px"), + createData('Логотип', "107х37 px"), + createData('Результаты',"1100х600 px"), + createData('Бонус', "200х60 px"), + createData('Картинка для формата вопроса "Страница"', "860х1250 px"), + ]; + return ( <> - - + + Рекомендованный размер зависит от того, как вы будете чаще использовать квиз: + + + + + {rows2.map((row) => ( + + + {row.name} + + {row.size} + + ))} + +
+ + + + + + Размеры изображений в квизе - + + + + {rows.map((row) => ( + + + {row.name} + + {row.size} + + ))} + +
+ diff --git a/src/pages/startPage/SelectableIconButton.tsx b/src/pages/startPage/SelectableIconButton.tsx index 12d548fd..95f39d4a 100755 --- a/src/pages/startPage/SelectableIconButton.tsx +++ b/src/pages/startPage/SelectableIconButton.tsx @@ -1,12 +1,13 @@ -import {Button, useTheme} from "@mui/material"; +import {Button, SxProps, Theme, useTheme} from "@mui/material"; interface Props { Icon: React.ElementType; isActive?: boolean; onClick: () => void; + sx?: SxProps; } -export default function SelectableIconButton({ Icon, isActive = false, onClick }: Props) { +export default function SelectableIconButton({ Icon, isActive = false, onClick, sx }: Props) { const theme = useTheme(); return ( @@ -28,6 +29,7 @@ export default function SelectableIconButton({ Icon, isActive = false, onClick } "&:hover": { borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main, }, + ...sx }} /> ); diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index 6ac2ca59..5157fc4d 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -26,10 +26,12 @@ import SelectableIconButton from "./SelectableIconButton"; import UploadBox from "@ui_kit/UploadBox"; import CustomTextField from "@ui_kit/CustomTextField"; import {quizStore} from "@root/quizes"; -import {useParams} from "react-router-dom"; +import {useNavigate, useParams} from "react-router-dom"; import * as React from "react"; import ModalSizeImage from "./ModalSizeImage"; import DropZone from "./dropZone"; +import Extra from "./extra"; +import AlignCenterIcon from "@icons/AlignCenterIcon"; const designTypes = [ @@ -40,11 +42,12 @@ const designTypes = [ // type DesignType = typeof designTypes[number][0]; type BackgroundType = "image" | "video"; -type AlignType = "left" | "right"; +type AlignType = "left" | "right" | "center"; export default function StartPageSettings() { const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); const params = Number(useParams().quizId); + const navigate = useNavigate() const theme = useTheme(); const designType = listQuizes[params].startpage const StartPageClone = listQuizes[params] @@ -95,9 +98,9 @@ export default function StartPageSettings() { updateQuizesList(params, {config: SPageClone }) } - const mutationOrgMetaHC = (e: any) => { + const mutationPositionHC = (e: any) => { let SPageClone = listQuizes[params].config - SPageClone.meta = e.target.value + SPageClone.startpage.position = e.target.value updateQuizesList(params, {config: SPageClone }) } @@ -311,8 +314,24 @@ export default function StartPageSettings() { display: "flex", gap: "10px", }}> - setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} /> - setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} /> + { + setAlignType("left") + let SPageClone = listQuizes[params].config + SPageClone.startpage.position = "ltr" + updateQuizesList(params, {config: SPageClone }) + }} isActive={alignType === "left"} Icon={AlignLeftIcon} /> + { + setAlignType("center") + let SPageClone = listQuizes[params].config + SPageClone.startpage.position = "cnt" + updateQuizesList(params, {config: SPageClone }) + }} isActive={alignType === "center"} Icon={AlignCenterIcon} sx={{display: designType === "centered" ? "flex" : "none"}}/> + { + setAlignType("right") + let SPageClone = listQuizes[params].config + SPageClone.startpage.position = "rtl" + updateQuizesList(params, {config: SPageClone }) + }} isActive={alignType === "right"} Icon={AlignRightIcon} /> - Дополнительно - Mета заголовок - - - Текст-заполнитель — - это текст, который имеет Текст-заполнитель — - это текст, который имеет Текст-заполнитель — - это текст, который имеет Текст-заполнитель — - это текст, который имеет Текст-заполнитель - + Настроить вопросы diff --git a/src/pages/startPage/extra.tsx b/src/pages/startPage/extra.tsx index e69de29b..5a2e5682 100644 --- a/src/pages/startPage/extra.tsx +++ b/src/pages/startPage/extra.tsx @@ -0,0 +1,97 @@ +import {Box, Link, Typography, useMediaQuery, useTheme} from "@mui/material"; +import React, {useState} from "react"; +import CustomTextField from "@ui_kit/CustomTextField"; +import {quizStore} from "@root/quizes"; +import {useParams} from "react-router-dom"; + + + +export default function Extra () { + const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); + const params = Number(useParams().quizId); + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + const upSm = useMediaQuery(theme.breakpoints.up("sm")); + const [isExpanded, setIsExpanded] = useState(false); + + const expandedHC = (bool:boolean) => { + setIsExpanded(bool) + } + const mutationOrgMetaHC = (e: any) => { + let SPageClone = listQuizes[params].config + SPageClone.meta = e.target.value + updateQuizesList(params, {config: SPageClone }) + } + return ( + + + expandedHC(!isExpanded)} + sx={{ + paddingTop: "15px", + paddingRight: "20px", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + userSelect: "none", + }} + > + Дополнительно + + + {isExpanded && ( + + Mета заголовок + + + Текст-заполнитель — + это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель + + + + ) + } + + + ) +} \ No newline at end of file