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

Merge branch 'fix-buttons' into 'dev'

Browse Source 
fix: buttons and bugs

See merge request frontend/squiz!24
This commit is contained in:
Nastya 2023-10-09 14:44:48 +00:00
commit a5f3fc5cff
7 changed files with 176 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/icons/CrossedEyeIcon.tsx
View File

@ -1,7 +1,16 @@
export default function CrossedEyeIcon() {
import { FC, SVGProps } from "react";
export const CrossedEyeIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
return (
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
<svg
{...props}
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.8125" width="30" height="30" rx="6" fill="#FFF" />
<path
d="M7.5 7.5625L22.5 24.0625"
stroke="#7E2AEA"
@ -39,4 +48,4 @@ export default function CrossedEyeIcon() {
/>
</svg>
);
}
};

12
src/assets/icons/questionsPage/OneIcon.tsx
View File

@ -2,11 +2,17 @@ import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
export const OneIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#EEE4FC" />
<svg
fill="#7E2AEA"
height="1em"
viewBox="0 0 30 30"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect width="30" height="30" rx="15" />
<path
d="M15.864 19.5C15.7707 19.5 15.6913 19.472 15.626 19.416C15.57 19.3507 15.542 19.2713 15.542 19.178V11.338L13.218 13.13C13.1433 13.186 13.064 13.2093 12.98 13.2C12.896 13.1907 12.826 13.1487 12.77 13.074L12.406 12.612C12.35 12.528 12.3267 12.444 12.336 12.36C12.3547 12.276 12.4013 12.206 12.476 12.15L15.528 9.798C15.5933 9.75133 15.654 9.72333 15.71 9.714C15.766 9.70467 15.8267 9.7 15.892 9.7H16.606C16.6993 9.7 16.774 9.73267 16.83 9.798C16.886 9.854 16.914 9.92867 16.914 10.022V19.178C16.914 19.2713 16.886 19.3507 16.83 19.416C16.774 19.472 16.6993 19.5 16.606 19.5H15.864Z"
fill="#7E2AEA"
fill={props.style?.color || "#7E2AEA"}
/>
</svg>
);

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

@ -174,10 +174,13 @@ export default function ButtonsOptions({
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
</Tooltip>
@ -199,6 +202,10 @@ export default function ButtonsOptions({
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}

4
src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
View File

@ -129,9 +129,9 @@ export const ChooseAnswerModal = ({
onClick={() => {
setOpenModal(false);
const question = listQuestions[quizId][totalIndex];
const question = { ...listQuestions[quizId][totalIndex] };
removeQuestionForce(quizId, totalIndex);
removeQuestionForce(quizId, question.id);
createQuestion(quizId, selectedValue, totalIndex);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: question.expanded,

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

@ -32,7 +32,7 @@ import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { OneIcon } from "@icons/questionsPage/OneIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import { HideIcon } from "@icons/questionsPage/hideIcon";
import Answer from "@icons/questionsPage/answer";
import OptionsPict from "@icons/questionsPage/options_pict";
@ -62,77 +62,77 @@ const IconAndrom = (isExpanded: boolean, switchState: string) => {
case "variant":
return (
<Answer
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "images":
return (
<OptionsPict
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "varimg":
return (
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji":
return (
<Emoji
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "text":
return (
<Input
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "select":
return (
<DropDown
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "date":
return (
<Date
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "number":
return (
<Slider
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "file":
return (
<Download
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "page":
return (
<Page
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "rating":
return (
<RatingIcon
color={isExpanded ? "#9A9AAF" : "white"}
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
@ -171,21 +171,18 @@ export default function QuestionsPageCard({
sx={{
maxWidth: "796px",
width: "100%",
borderRadius: "8px",
backgroundColor: question.expanded ? "white" : "#333647",
borderRadius: "12px",
boxShadow: "none",
backgroundColor: question.expanded ? "white" : "#EEE4FC",
border: question.expanded ? "none" : "1px solid #9A9AAF",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: isTablet
? isMobile
? "20px 20px 0px 20px"
: "20px 10px 20px 20px "
: "20px 10px 20px 20px",
flexDirection: isMobile ? "column-reverse" : null,
padding: isMobile ? "10px" : "20px 10px 20px 20px",
flexDirection: isMobile ? "column" : null,
}}
>
<FormControl
@ -223,8 +220,9 @@ export default function QuestionsPageCard({
),
}}
sx={{
margin: isMobile ? "10px 0" : 0,
"& .MuiInputBase-root": {
color: question.expanded ? "#9A9AAF" : "white",
color: question.expanded ? "#9A9AAF" : "#4D4D4D",
backgroundColor: question.expanded
? theme.palette.background.default
: "transparent",
@ -232,6 +230,11 @@ export default function QuestionsPageCard({
borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": {
borderWidth: "1px !important",
border: !question.expanded ? "none" : null,
},
"& .MuiInputBase-input::placeholder": {
color: "#4D4D4D",
opacity: 0.8,
},
},
}}
@ -248,101 +251,132 @@ export default function QuestionsPageCard({
<Box
sx={{
display: "flex",
alignItems: "flex-start",
alignItems: "center",
justifyContent: "flex-end",
width: isMobile ? "100%" : "auto",
position: "relative",
height: "30px",
marginBottom: "10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
<IconButton
sx={{ padding: "0", margin: "5px" }}
disableRipple
onClick={() =>
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: !question.expanded,
})
}
>
<IconButton
sx={{ paddingBottom: isMobile ? "0" : "" }}
disableRipple
onClick={() =>
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: !question.expanded,
})
}
>
{question.expanded ? (
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<ExpandLessIcon fill="#7E2AEA" />
)}
</IconButton>
{question.expanded ? (
<></>
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<Box sx={{ display: "flex", borderRight: "solid 1px white" }}>
<FormControlLabel
control={
<Checkbox
icon={<HideIcon style={{ color: "#7E2AEA" }} />}
checkedIcon={<CrossedEyeIcon />}
/>
}
label={""}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
mr: 0,
userSelect: "none",
}}
/>
<IconButton onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon style={{ color: "white" }} />
</IconButton>
<IconButton
sx={{
cursor: "pointer",
borderRadius: "6px",
padding: "2px",
}}
onClick={() => {
const removedId = question.id;
if (question.deleteTimeoutId) {
clearTimeout(question.deleteTimeoutId);
}
removeQuestion(quizId, totalIndex);
const newTimeoutId = window.setTimeout(() => {
removeQuestionForce(quizId, removedId);
}, 5000);
updateQuestionsList<QuizQuestionBase>(
quizId,
totalIndex,
{
...question,
deleteTimeoutId: newTimeoutId,
}
);
}}
>
<DeleteIcon style={{ color: "white" }} />
</IconButton>
</Box>
<ExpandLessIcon
sx={{
boxSizing: "border-box",
fill: theme.palette.brightPurple.main,
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
}}
/>
)}
</IconButton>
{question.expanded ? (
<></>
) : (
<Box
sx={{
display: "flex",
height: "30px",
borderRight: "solid 1px #4D4D4D",
}}
>
<FormControlLabel
control={
<Checkbox
icon={
<HideIcon
style={{
boxSizing: "border-box",
color: "#7E2AEA",
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
padding: "3px",
}}
/>
}
checkedIcon={<CrossedEyeIcon />}
/>
}
label={""}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
mr: 0,
userSelect: "none",
}}
/>
<IconButton
sx={{ padding: "0" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon
style={{ color: theme.palette.brightPurple.main }}
/>
</IconButton>
<IconButton
sx={{
cursor: "pointer",
borderRadius: "6px",
padding: "0",
margin: "0 5px 0 10px",
}}
onClick={() => {
const removedId = question.id;
if (question.deleteTimeoutId) {
clearTimeout(question.deleteTimeoutId);
}
<OneIcon style={{ fontSize: "30px", marginRight: "-2px" }} />
</Box>
removeQuestion(quizId, totalIndex);
const newTimeoutId = window.setTimeout(() => {
removeQuestionForce(quizId, removedId);
}, 5000);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
...question,
deleteTimeoutId: newTimeoutId,
});
}}
>
<DeleteIcon
style={{ color: theme.palette.brightPurple.main }}
/>
</IconButton>
</Box>
)}
<OneIcon
style={{
fontSize: "30px",
marginLeft: "3px",
color: !question.expanded ? "#FFF" : "",
fill: question.expanded
? "#EEE4FC"
: theme.palette.brightPurple.main,
}}
/>
<IconButton
disableRipple
sx={{
padding: isMobile ? "0" : "5px 10px 8px 8px",
position: isMobile ? "absolute" : "relative",
padding: isMobile ? "0" : "0 5px",
right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}

7
src/pages/Questions/TypeQuestions.tsx
View File

@ -17,7 +17,7 @@ import {
questionStore,
updateQuestionsList,
createQuestion,
removeQuestion,
removeQuestionForce,
} from "@root/questions";
import type {
@ -110,12 +110,13 @@ export default function TypeQuestions({ totalIndex }: Props) {
<QuestionsMiniButton
key={title}
onClick={() => {
const question = listQuestions[quizId][totalIndex];
const question = { ...listQuestions[quizId][totalIndex] };
removeQuestion(quizId, totalIndex);
removeQuestionForce(quizId, question.id);
createQuestion(quizId, value, totalIndex);
updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
expanded: question.expanded,
type: value,
});
}}
icon={icon}

2
src/ui_kit/CustomWrapper.tsx
View File

@ -1,7 +1,7 @@
import { useState } from "react";
import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import CopyIcon from "@icons/CopyIcon";
import TrashIcon from "@icons/TrashIcon";
import CountIcon from "@icons/CountIcon";