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

пофиксив варианты отображение дизайна главной страницы

Browse Source
This commit is contained in:
ArtChaos189 2023-12-18 18:04:09 +03:00
parent e8483ef25e
commit 4b6995c11e
3 changed files with 789 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -142,6 +142,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
overflowWrap: "break-word",
width: "100%",
textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
}}
>
{quiz.name}
@ -150,6 +153,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
sx={{
fontSize: "16px",
m: "16px 0",
overflowWrap: "break-word",
width: "100%",
textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
}}
>
{quiz.config.startpage.description}
@ -172,7 +178,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
<Box
sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
>
<Box>
<Box sx={{ maxWidth: "300px" }}>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
@ -192,7 +198,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
<Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
{quiz.config.info.law}
</Typography>
</Box>
<Box
@ -329,7 +337,16 @@ function QuizPreviewLayoutByType({
}}
>
{quizHeaderBlock}
{backgroundBlock && <Box>{backgroundBlock}</Box>}
{backgroundBlock && (
<Box
sx={{
width: "60%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
)}
{quizMainBlock}
</Box>
);

187
src/pages/startPage/StartPageSettings.tsx
View File

@ -18,7 +18,7 @@ import {
Select,
Typography,
useMediaQuery,
useTheme
useTheme,
} from "@mui/material";
import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -35,27 +35,13 @@ import SelectableIconButton from "./SelectableIconButton";
import { DropZone } from "./dropZone";
import Extra from "./extra";
const designTypes = [
[
"standard",
(color: string) => <LayoutStandartIcon color={color} />,
"Standard",
],
[
"expanded",
(color: string) => <LayoutExpandedIcon color={color} />,
"Expanded",
],
[
"centered",
(color: string) => <LayoutCenteredIcon color={color} />,
"Centered",
],
["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
] as const;
// type DesignType = typeof designTypes[number][0];
export default function StartPageSettings() {
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
@ -75,14 +61,14 @@ export default function StartPageSettings() {
const favIconDropZoneElement = (
<FaviconDropZone
imageUrl={quiz.config.startpage.favIcon}
onImageUploadClick={async file => {
onImageUploadClick={async (file) => {
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.favIcon = null;
});
}}
@ -91,10 +77,7 @@ export default function StartPageSettings() {
return (
<>
<Typography
variant="h5"
sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}
>
<Typography variant="h5" sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}>
Стартовая страница
</Typography>
{isSmallMonitor && (
@ -105,10 +88,7 @@ export default function StartPageSettings() {
fontWeight: 500,
fontSize: "16px",
color: formState === "design" ? "#7E2AEA" : "#7D7E86",
borderBottom:
formState === "design"
? "2px solid #7E2AEA"
: "1px solid transparent",
borderBottom: formState === "design" ? "2px solid #7E2AEA" : "1px solid transparent",
}}
>
Дизайн
@ -120,10 +100,7 @@ export default function StartPageSettings() {
fontWeight: 500,
fontSize: "16px",
color: formState === "content" ? "#7E2AEA" : "#7D7E86",
borderBottom:
formState === "content"
? "2px solid #7E2AEA"
: "1px solid transparent",
borderBottom: formState === "content" ? "2px solid #7E2AEA" : "1px solid transparent",
}}
>
Контент
@ -153,8 +130,7 @@ export default function StartPageSettings() {
<Box
sx={{
pr: "20px",
borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main
}`,
borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main}`,
display: "flex",
flexDirection: "column",
flex: `1 1 361px`,
@ -183,9 +159,11 @@ export default function StartPageSettings() {
variant="outlined"
value={designType}
displayEmpty
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpageType = e.target.value as QuizStartpageType;
})}
})
}
sx={{
height: "48px",
borderRadius: "8px",
@ -240,11 +218,7 @@ export default function StartPageSettings() {
color: theme.palette.grey2.main,
}}
>
{type[1](
type[0] === designType
? theme.palette.orange.main
: theme.palette.grey2.main
)}
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
{type[2]}
</MenuItem>
))}
@ -268,17 +242,21 @@ export default function StartPageSettings() {
>
<SelectableButton
isSelected={quiz.config.startpage.background.type === "image"}
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.type = "image";
})}
})
}
>
Изображение
</SelectableButton>
<SelectableButton
isSelected={quiz.config.startpage.background.type === "video"}
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.type = "video";
})}
})
}
>
Видео
</SelectableButton>
@ -311,19 +289,19 @@ export default function StartPageSettings() {
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.background.desktop}
originalImageUrl={quiz.config.startpage.background.originalDesktop}
onImageUploadClick={file => {
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop = url;
});
}}
onImageSaveClick={file => {
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.desktop = null;
});
}}
@ -331,8 +309,6 @@ export default function StartPageSettings() {
</Box>
<ModalSizeImage />
</Box>
<Box
@ -345,14 +321,15 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="URL видео"
text={quiz.config.startpage.background.video ?? ""}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.video = e.target.value;
})}
})
}
/>
</Box>
{designType !== "centered" &&
{designType !== "centered" && (
<>
<Typography
sx={{
@ -371,31 +348,36 @@ export default function StartPageSettings() {
}}
>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.position = "left";
})}
})
}
isActive={quiz.config.startpage.position === "left"}
Icon={AlignLeftIcon}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.position = "center";
})}
})
}
isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "standard" ? "none" : "flex" }}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.position = "right";
})}
})
}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
</Box>
</>
}
)}
{(isTablet || !isSmallMonitor) && (
<>
<Box
@ -418,19 +400,19 @@ export default function StartPageSettings() {
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => {
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
@ -482,19 +464,19 @@ export default function StartPageSettings() {
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => {
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
@ -528,9 +510,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Имя заголовка об опроснике для подбора табуретки"
text={quiz.name}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.name = e.target.value;
})}
})
}
maxLength={40}
/>
<Typography
sx={{
@ -545,9 +530,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Внимательно заполняйте поля ответов"
text={quiz.config.startpage.description}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.description = e.target.value;
})}
})
}
maxLength={70}
/>
<Typography
sx={{
@ -562,9 +550,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Начать опрос"
text={quiz.config.startpage.button}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.button = e.target.value;
})}
})
}
maxLength={15}
/>
<Typography
sx={{
@ -579,17 +570,22 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="8-800-000-00-00"
text={quiz.config.info.phonenumber}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.phonenumber = e.target.value;
})}
})
}
maxLength={20}
/>
<CustomCheckbox
sx={{ margin: "10px 0" }}
label="Кликабельный"
checked={quiz.config.info.clickable}
handleChange={e => updateQuiz(quiz.id, quiz => {
handleChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.clickable = e.target.checked;
})}
})
}
/>
<Typography
sx={{
@ -604,9 +600,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Только лучшее"
text={quiz.config.info.orgname}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.orgname = e.target.value;
})}
})
}
maxLength={25}
/>
<Typography
sx={{
@ -621,9 +620,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="https://mysite.com"
text={quiz.config.info.site}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.site = e.target.value;
})}
})
}
maxLength={25}
/>
<Typography
sx={{
@ -638,9 +640,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Данные наших документов"
text={quiz.config.info.law}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.law = e.target.value;
})}
})
}
maxLength={45}
/>
<Extra />
</>
@ -694,7 +699,7 @@ export default function StartPageSettings() {
justifyContent: "flex-end",
flexDirection: isTablet ? "column" : "row",
marginTop: "30px",
marginBottom: isTablet ? "90px" : undefined
marginBottom: isTablet ? "90px" : undefined,
}}
>
<FormControlLabel
@ -726,9 +731,11 @@ export default function StartPageSettings() {
borderRadius: 0,
padding: 0,
}}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.noStartPage = e.target.checked;
})}
})
}
checked={quiz.config.noStartPage}
/>
}
@ -740,11 +747,7 @@ export default function StartPageSettings() {
justifyContent: "flex-end",
}}
/>
<Button
variant="contained"
data-cy="setup-questions"
onClick={incrementCurrentStep}
>
<Button variant="contained" data-cy="setup-questions" onClick={incrementCurrentStep}>
Настроить вопросы
</Button>
</Box>

64
src/ui_kit/CustomTextField.tsx
View File

@ -1,7 +1,7 @@
import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
import React, { useState } from "react";
import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material";
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
import type { InputProps } from "@mui/material";
import type { InputProps, SxProps, Theme } from "@mui/material";
interface CustomTextFieldProps {
placeholder: string;
@ -11,6 +11,7 @@ interface CustomTextFieldProps {
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
text?: string;
maxLength?: number;
sx?: SxProps<Theme>;
InputProps?: Partial<InputProps>;
}
@ -18,28 +19,54 @@ interface CustomTextFieldProps {
export default function CustomTextField({
placeholder,
value,
text,
sx,
error,
onChange,
onKeyDown,
onBlur,
text,
sx,
error,
InputProps,
maxLength = 200,
}: CustomTextFieldProps) {
const theme = useTheme();
const [inputValue, setInputValue] = useState(value || "");
const [isInputActive, setIsInputActive] = useState(false);
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = event.target.value;
setInputValue(inputValue);
if (onChange) {
onChange(event);
}
};
const handleInputFocus = () => {
setIsInputActive(true);
};
const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
setIsInputActive(false);
if (onBlur) {
onBlur(event);
}
};
return (
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
<TextField
defaultValue={text}
fullWidth
value={value}
value={inputValue}
placeholder={placeholder}
onChange={handleInputChange}
error={!!error}
label={error}
onChange={onChange}
onFocus={handleInputFocus}
onBlur={handleInputBlur}
onKeyDown={onKeyDown}
onBlur={onBlur}
sx={{
"& .MuiInputBase-root": {
backgroundColor: theme.palette.background.default,
@ -50,19 +77,36 @@ export default function CustomTextField({
fontSize: "13.5px",
marginTop: "3px",
},
...sx,
}}
InputProps={InputProps}
inputProps={{
maxLength: maxLength,
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
},
...sx,
}}
data-cy="textfield"
/>
{isInputActive && inputValue.length >= maxLength - 7 && (
<Box
sx={{
display: "flex",
marginTop: "5px",
marginLeft: "auto",
position: "absolute",
bottom: "-25px",
right: "0",
}}
>
<Typography fontSize="14px">{inputValue.length}</Typography>
<span>/</span>
<Typography fontSize="14px">{maxLength}</Typography>
</Box>
)}
</FormControl>
);
}