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

Mobile version adaptive

Browse Source
This commit is contained in:
ArtChaos189 2023-10-03 17:41:12 +03:00
parent ed600b94a5
commit b7f3030f0b
18 changed files with 168 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -40,12 +40,12 @@ export const AnswerItem = ({
variant,
additionalContent,
additionalMobile,
icon
icon,
}: AnswerItemProps) => {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(790));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const debounced = useDebouncedCallback((value) => {
const answerNew = variants.slice();
answerNew[index].answer = value;
@ -114,13 +114,7 @@ export const AnswerItem = ({
key={index}
fullWidth
variant="standard"
sx={{ padding: isTablet ? " 20px 0 20px 0" : "0 0 18px 0" }}
// sx={{
// margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0",
// borderRadius: "10px",
// border: "1px solid rgba(0, 0, 0, 0.23)",
// background: "white",
// }}
sx={{ padding: isMobile ? " 15px 0 15px 0" : "0 0 18px 0" }}
>
<TextField
defaultValue={variant.answer}
@ -140,7 +134,7 @@ export const AnswerItem = ({
<InputAdornment {...provided.dragHandleProps} position="start">
<PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</InputAdornment>
{additionalContent}
{icon && icon}
</>
),
endAdornment: (
@ -149,13 +143,11 @@ export const AnswerItem = ({
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton>
<Popover
id="my-popover-id"
open={isOpen}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<TextareaAutosize
style={{ margin: "10px" }}
@ -172,22 +164,17 @@ export const AnswerItem = ({
),
}}
sx={{
padding: isTablet ? "10px 0px" : 0,
"& .MuiInputBase-root": {
padding: icon ? "5px 13.5px" : "13.5px 13.5px 13.5px 9px",
borderRadius: "8px",
height: "48px",
background: "#ffffff",
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
},
}}
inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
}}
/>
{additionalMobile}
</FormControl>
</Box>
)}

4
src/pages/Questions/DataOptions/DataOptions.tsx
View File

@ -43,7 +43,7 @@ export default function DataOptions({ totalIndex }: Props) {
gap: isMobile ? "18px" : "20px",
}}
>
<Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
<Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap", mt: isMobile ? "25px" : "0px" }}>
<SelectableButton
isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
onClick={() => {
@ -67,7 +67,7 @@ export default function DataOptions({ totalIndex }: Props) {
Использовать маску
</SelectableButton>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px", mb: "20px" }}>
<Box sx={{ display: "flex", alignItems: "flex-start", gap: "12px", mb: "20px" }}>
<Typography
sx={{
fontWeight: 400,

12
src/pages/Questions/DataOptions/settingData.tsx
View File

@ -34,7 +34,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
>
<Box
sx={{
pt: isMobile ? "25px" : "20px",
pt: "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
display: "flex",
@ -76,7 +76,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
width: isMobile ? "auto" : "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
@ -92,9 +92,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
});
}}
/>
<Box sx={{ width: isMobile ? "93%" : "auto", display: "flex", alignItems: "center" }}>
<Box sx={{ width: isMobile ? "93%" : "auto", display: "flex", alignItems: "flex-start" }}>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }}
sx={{
mr: isMobile ? "0px" : "16px",
height: isMobile ? "100%" : "26px",
alignItems: isMobile ? "flex-start" : "center",
}}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {

6
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -120,7 +120,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: isTablet ? (isMobile ? "20px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
padding: isTablet ? (isMobile ? "10px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
flexDirection: isMobile ? "column-reverse" : null,
}}
>
@ -243,9 +243,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
onClick={() => {
const removedId = listQuestions[quizId][totalIndex].id;
if (listQuestions[quizId][totalIndex].deleteTimeoutId) {
clearTimeout(
listQuestions[quizId][totalIndex].deleteTimeoutId
);
clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId);
}
removeQuestion(quizId, totalIndex);

8
src/pages/Questions/DropDown/DropDown.tsx
View File

@ -59,7 +59,7 @@ export default function DropDown({ totalIndex }: Props) {
sx={{
display: "flex",
alignItems: "center",
marginBottom: "17px",
marginBottom: "20px",
}}
>
<Link
@ -93,11 +93,7 @@ export default function DropDown({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
</>
);

9
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -99,8 +99,8 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
pr: isFigmaTablte ? "19px" : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
gap: "14px",
width: isMobile ? "auto" : "100%",
}}
>
<Typography
@ -117,8 +117,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
});
}}
/>
<Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
<Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>
<CustomCheckbox
sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {
@ -144,7 +145,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
</Box>
<Box
sx={{
width: "85%",
width: "100%",
pt: "20px",
display: isMobile ? "block" : "none",
}}

21
src/pages/Questions/Emoji/Emoji.tsx
View File

@ -34,9 +34,7 @@ interface Props {
export default function Emoji({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState<string>("setting");
const [open, setOpen] = useState<boolean>(false);
const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(
null
);
const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);
const [currentIndex, setCurrentIndex] = useState<number>(0);
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
@ -157,7 +155,7 @@ export default function Emoji({ totalIndex }: Props) {
)}
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginBottom: "20px" }}> */}
<Box sx={{ padding: "20px" }}>
<Box sx={{ padding: "0 20px 0px 20px" }}>
<AnswerDraggableList
variants={listQuestions[quizId][totalIndex].content.variants}
totalIndex={totalIndex}
@ -288,9 +286,7 @@ export default function Emoji({ totalIndex }: Props) {
<EmojiPicker
onEmojiSelect={({ native }) => {
setOpen(false);
const cloneVariants = [
...listQuestions[quizId][totalIndex].content.variants,
];
const cloneVariants = [...listQuestions[quizId][totalIndex].content.variants];
cloneVariants[currentIndex] = {
...cloneVariants[currentIndex],
@ -306,14 +302,13 @@ export default function Emoji({ totalIndex }: Props) {
}}
/>
</Popover>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: isMobile ? "17px" : "20px" }}>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
onClick={() => {
const answerNew =
listQuestions[quizId][totalIndex].content.variants.slice();
const answerNew = listQuestions[quizId][totalIndex].content.variants.slice();
answerNew.push({ answer: "", hints: "", emoji: "" });
updateQuestionsList(quizId, totalIndex, {
@ -343,11 +338,7 @@ export default function Emoji({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
</>
);

12
src/pages/Questions/Emoji/settingEmoji.tsx
View File

@ -77,8 +77,8 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
pr: isFigmaTablte ? "30px" : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
gap: "14px",
width: isMobile ? "auto" : "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
@ -94,9 +94,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
});
}}
/>
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }}
sx={{
mr: isMobile ? "0px" : "16px",
height: isMobile ? "100%" : "26px",
alignItems: isMobile ? "flex-start" : "center",
}}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {

33
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -90,7 +90,15 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
justifyContent: "space-between",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
maxHeight: "98px",
}}
>
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
@ -179,15 +187,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton>
<Popover
id="my-popover-id"
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={false}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
/>
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
</Popover>
<IconButton sx={{ padding: "0" }}>
<DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
@ -200,7 +201,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
padding: "13.5px",
borderRadius: "10px",
background: "#ffffff",
height: "48px",
height: isMobile ? "41px" : "48px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
@ -220,9 +221,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
position: "relative",
}}
>
<Box
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
/>
<Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
<ImageAddIcons
style={{
position: "absolute",
@ -293,11 +292,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptionsAndPict
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
</>
);

9
src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
View File

@ -46,7 +46,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
>
<Box
sx={{
pt: isMobile ? "25px" : "20px",
pt: isMobile ? "30px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
display: "flex",
@ -105,7 +105,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
width: isMobile ? "auto" : "100%",
}}
>
<Typography
@ -128,7 +128,10 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
/>
<Box sx={{ display: "flex", alignItems: "center" }}>
<CustomCheckbox
sx={{ width: isMobile ? "90%" : "auto", mr: isMobile ? "0px" : "16px" }}
sx={{
mr: isMobile ? "0px" : "16px",
height: isMobile ? "100%" : "26px",
}}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={({ target }) => {

39
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -53,7 +53,6 @@ export default function OptionsPicture({ totalIndex }: Props) {
}
};
return (
<>
<Box sx={{ pl: "20px", pr: "20px" }}>
@ -78,7 +77,15 @@ export default function OptionsPicture({ totalIndex }: Props) {
justifyContent: "space-between",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
maxHeight: "98px",
}}
>
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
@ -166,15 +173,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
<IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton>
<Popover
id="my-popover-id"
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={false}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
/>
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
</Popover>
<IconButton sx={{ padding: "0" }}>
<DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
@ -187,7 +187,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
padding: "13.5px",
borderRadius: "10px",
background: "#ffffff",
height: "48px",
height: isMobile ? "41px" : "48px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
@ -207,9 +207,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
position: "relative",
}}
>
<Box
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
/>
<Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
<ImageAddIcons
style={{
position: "absolute",
@ -275,15 +273,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptionsPict
switchState={switchState}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
</>
);
}

15
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -163,6 +163,19 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
}
/>
)}
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Большие картинки"}
checked={listQuestions[quizId][totalIndex].content.own}
handleChange={({ target }) =>
updateQuestionsList(quizId, totalIndex, {
content: {
...listQuestions[quizId][totalIndex].content,
own: target.checked,
},
})
}
/>
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={'Вариант "свой ответ"'}
@ -227,6 +240,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
</Box>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки вопросов</Typography>
<CustomCheckbox
sx={{ alignItems: isMobile ? "flex-start" : "" }}
label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required}
handleChange={({ target }) =>
@ -246,6 +260,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
}}
>
<CustomCheckbox
sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={({ target }) =>

6
src/pages/Questions/OwnTextField/OwnTextField.tsx
View File

@ -39,7 +39,7 @@ export default function OwnTextField({ totalIndex }: Props) {
width: "auto",
maxWidth: "745px",
display: "flex",
pb: "15px",
pb: "20px",
pl: "20px",
pr: "20px",
flexDirection: "column",
@ -50,9 +50,9 @@ export default function OwnTextField({ totalIndex }: Props) {
placeholder={"Пример ответа"}
text={listQuestions[quizId][totalIndex].content.placeholder}
onChange={({ target }) => debounced(target.value)}
sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%" }}
sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%", mt: isMobile ? "15px" : "0px" }}
/>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Box sx={{ display: "flex", alignItems: isMobile ? "flex-start" : "center", gap: "12px" }}>
<Typography
sx={{
fontWeight: 400,

25
src/pages/Questions/OwnTextField/settingTextField.tsx
View File

@ -107,17 +107,21 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
pt: isMobile ? "0px" : "20px",
pb: "20px",
pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
pr: isFigmaTablte ? "14px" : "20px",
pr: "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
gap: "14px",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопросов
</Typography>
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
sx={{
display: isMobile ? "flex" : "block",
mr: isMobile ? "0px" : "16px",
alignItems: isMobile ? "flex-end" : "center",
}}
label={"Автозаполнение адреса"}
checked={listQuestions[quizId][totalIndex].content.autofill}
handleChange={({ target }) => {
@ -127,7 +131,11 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
}}
/>
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
sx={{
display: isMobile ? "flex" : "block",
mr: isMobile ? "0px" : "16px",
alignItems: isMobile ? "flex-end" : "center",
}}
label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required}
handleChange={(e) => {
@ -136,9 +144,14 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
});
}}
/>
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "flex-start" }}>
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
sx={{
alignItems: isMobile ? "flex-start" : "center",
display: isMobile ? "flex" : "block",
mr: isMobile ? "0px" : "16px",
height: isMobile ? "100%" : "26px",
}}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {

88
src/pages/Questions/SliderOptions/SliderOptions.tsx
View File

@ -31,30 +31,34 @@ export default function SliderOptions({ totalIndex }: Props) {
maxWidth: "673.8px",
display: "flex",
pl: "20px",
pr: "20px",
pr: isMobile ? "13px" : "20px",
pb: isMobile ? "30px" : "20px",
flexDirection: "column",
gap: "20px",
gap: isMobile ? "25px" : "20px",
}}
>
<Box
sx={{
gap: isMobile ? "10px" : "14px",
mt: isMobile ? "25px" : "0px",
display: "flex",
flexDirection: "column",
marginRight: isMobile ? "10px" : "0px",
}}
>
<Box sx={{ gap: "14px", display: "flex", flexDirection: "column" }}>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
Выбор значения из диапазона
</Typography>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: "20px" }}>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"0"}
min={0}
max={99}
value={
listQuestions[quizId][totalIndex].content.range.split("—")[0]
}
value={listQuestions[quizId][totalIndex].content.range.split("—")[0]}
onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${target.value}—${
listQuestions[quizId][totalIndex].content.range.split("—")[1]
}`;
clonContent.range = `${target.value}—${listQuestions[quizId][totalIndex].content.range.split("—")[1]}`;
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
@ -62,16 +66,12 @@ export default function SliderOptions({ totalIndex }: Props) {
onBlur={({ target }) => {
const start = listQuestions[quizId][totalIndex].content.start;
const min = Number(target.value);
const max = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
);
const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
if (min >= max) {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${
listQuestions[quizId][totalIndex].content.range.split(
"—"
)[1]
listQuestions[quizId][totalIndex].content.range.split("—")[1]
}`;
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
@ -94,14 +94,10 @@ export default function SliderOptions({ totalIndex }: Props) {
placeholder={"100"}
min={0}
max={100}
value={
listQuestions[quizId][totalIndex].content.range.split("—")[1]
}
value={listQuestions[quizId][totalIndex].content.range.split("—")[1]}
onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${
listQuestions[quizId][totalIndex].content.range.split("—")[0]
}—${target.value}`;
clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${target.value}`;
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
@ -109,19 +105,15 @@ export default function SliderOptions({ totalIndex }: Props) {
onBlur={({ target }) => {
const start = listQuestions[quizId][totalIndex].content.start;
const step = listQuestions[quizId][totalIndex].content.step;
const min = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[0]
);
const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
const max = Number(target.value);
const range = max - min;
if (max <= min) {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.range = `${
listQuestions[quizId][totalIndex].content.range.split(
"—"
)[0]
}—${min + 1 >= 100 ? 100 : min + 1}`;
clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${
min + 1 >= 100 ? 100 : min + 1
}`;
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
@ -145,11 +137,7 @@ export default function SliderOptions({ totalIndex }: Props) {
});
if (range % step) {
setStepError(
`Шаг должен делить без остатка диапазон ${max} - ${min} = ${
max - min
}`
);
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
@ -168,18 +156,14 @@ export default function SliderOptions({ totalIndex }: Props) {
}}
>
<Box sx={{ width: "100%" }}>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "14px" }}>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
Начальное значение
</Typography>
<CustomNumberField
sx={{ maxWidth: "310px", width: "100%" }}
placeholder={"50"}
min={Number(
listQuestions[quizId][totalIndex].content.range.split("—")[0]
)}
max={Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
)}
min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
max={Number(listQuestions[quizId][totalIndex].content.range.split("—")[1])}
value={String(listQuestions[quizId][totalIndex].content.start)}
onChange={({ target }) => {
const clonContent = listQuestions[quizId][totalIndex].content;
@ -216,12 +200,8 @@ export default function SliderOptions({ totalIndex }: Props) {
});
}}
onBlur={({ target }) => {
const min = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[0]
);
const max = Number(
listQuestions[quizId][totalIndex].content.range.split("—")[1]
);
const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
const range = max - min;
const step = Number(target.value);
@ -235,11 +215,7 @@ export default function SliderOptions({ totalIndex }: Props) {
}
if (range % step) {
setStepError(
`Шаг должен делить без остатка диапазон ${max} - ${min} = ${
max - min
}`
);
setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
} else {
setStepError("");
}
@ -248,11 +224,7 @@ export default function SliderOptions({ totalIndex }: Props) {
</Box>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchSlider switchState={switchState} totalIndex={totalIndex} />
</>
);

24
src/pages/Questions/SliderOptions/settingSlider.tsx
View File

@ -34,19 +34,23 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
<Box
sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pb: isMobile ? "30px" : "20px",
pl: "20px",
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
width: isMobile ? "auto" : "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки ползунка
</Typography>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }}
sx={{
mr: isMobile ? "0px" : "16px",
height: isMobile ? "100%" : "auto",
alignItems: isMobile ? "flex-start" : "center",
}}
label={"Выбор диапозона (два ползунка)"}
checked={listQuestions[quizId][totalIndex].content.chooseRange}
handleChange={(e) => {
@ -64,15 +68,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
pr: isFigmaTablte ? (isMobile ? "20px" : "12px") : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
gap: "14px",
width: isMobile ? "auto" : "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопросов
</Typography>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }}
sx={{ mr: isMobile ? "0px" : "16px", alignItems: isMobile ? "flex-end" : "center" }}
label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required}
handleChange={(e) => {
@ -85,11 +89,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
sx={{
width: isMobile ? "90%" : "auto",
display: "flex",
alignItems: "center",
alignItems: "flex-start",
}}
>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px", whiteSpace: isFigmaTablte ? "nowrap" : "" }}
sx={{
mr: isMobile ? "0px" : "16px",
height: isMobile ? "100%" : "auto",
alignItems: isMobile ? "flex-start" : "center",
}}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {

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

@ -92,11 +92,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
)}
</Box>
</Box>
<ButtonsOptionsAndPict
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
</>
);

10
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -15,6 +15,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
const { listQuestions } = questionStore();
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(900));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const debounced = useDebouncedCallback((value) => {
@ -86,11 +87,11 @@ export default function ResponseSettings({ totalIndex }: Props) {
sx={{
pt: isMobile ? "0px" : "20px",
pb: "20px",
pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px",
pr: isFigmaTablte ? "19px" : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
gap: "14px",
width: "100%",
}}
>
@ -125,14 +126,13 @@ export default function ResponseSettings({ totalIndex }: Props) {
});
}}
/>
{isMobile ||
(!isFigmaTablte && (
{isMobile && (
<Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
<Box>
<InfoIcon />
</Box>
</Tooltip>
))}
)}
</Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField