fix: icons

This commit is contained in:
IlyaDoronin 2023-12-14 16:36:00 +03:00
parent 141614cb72
commit da7bcc842a
9 changed files with 250 additions and 119 deletions

@ -173,9 +173,9 @@ export default function Notebook({ color }: Props) {
width="0.998971" width="0.998971"
height="1.57978" height="1.57978"
filterUnits="userSpaceOnUse" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB" colorInterpolationFilters="sRGB"
> >
<feFlood flood-opacity="0" result="BackgroundImageFix" /> <feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend <feBlend
mode="normal" mode="normal"
in="SourceGraphic" in="SourceGraphic"
@ -194,9 +194,9 @@ export default function Notebook({ color }: Props) {
width="2.51719" width="2.51719"
height="2.51694" height="2.51694"
filterUnits="userSpaceOnUse" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB" colorInterpolationFilters="sRGB"
> >
<feFlood flood-opacity="0" result="BackgroundImageFix" /> <feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend <feBlend
mode="normal" mode="normal"
in="SourceGraphic" in="SourceGraphic"
@ -215,9 +215,9 @@ export default function Notebook({ color }: Props) {
width="1.11616" width="1.11616"
height="1.57978" height="1.57978"
filterUnits="userSpaceOnUse" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB" colorInterpolationFilters="sRGB"
> >
<feFlood flood-opacity="0" result="BackgroundImageFix" /> <feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend <feBlend
mode="normal" mode="normal"
in="SourceGraphic" in="SourceGraphic"
@ -236,9 +236,9 @@ export default function Notebook({ color }: Props) {
width="1.22643" width="1.22643"
height="0.993766" height="0.993766"
filterUnits="userSpaceOnUse" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB" colorInterpolationFilters="sRGB"
> >
<feFlood flood-opacity="0" result="BackgroundImageFix" /> <feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend <feBlend
mode="normal" mode="normal"
in="SourceGraphic" in="SourceGraphic"
@ -257,9 +257,9 @@ export default function Notebook({ color }: Props) {
width="279" width="279"
height="12.0981" height="12.0981"
filterUnits="userSpaceOnUse" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB" colorInterpolationFilters="sRGB"
> >
<feFlood flood-opacity="0" result="BackgroundImageFix" /> <feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend <feBlend
mode="normal" mode="normal"
in="SourceGraphic" in="SourceGraphic"

@ -38,9 +38,9 @@ export default function YoutobeIcon({ color, width }: Props) {
width="155.738" width="155.738"
height="115.205" height="115.205"
filterUnits="userSpaceOnUse" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB" colorInterpolationFilters="sRGB"
> >
<feFlood flood-opacity="0" result="BackgroundImageFix" /> <feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix <feColorMatrix
in="SourceAlpha" in="SourceAlpha"
type="matrix" type="matrix"

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

@ -1,36 +1,86 @@
import { useTheme } from "@mui/material"; import { useTheme } from "@mui/material";
interface Props { interface Props {
width?: number; width?: number;
} }
export default function CloseBold({ width }: Props) { export default function CloseBold({ width }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<g id="Close"> width="35"
<g id="Rectangle 57" opacity="0.3" filter="url(#filter0_d_4080_12482)"> height="33"
<rect x="6" y="4" width="24" height="24" rx="12" fill="#9A9AAF"/> viewBox="0 0 35 33"
</g> fill="none"
<g id="Group 331"> xmlns="http://www.w3.org/2000/svg"
<path id="Vector 586" d="M22.8516 10.9517L12.9521 20.8512" stroke="#FDFDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> >
<path id="Vector 587" d="M22.8516 20.8462L12.9521 10.9467" stroke="#FDFDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <g id="Close">
</g> <g id="Rectangle 57" opacity="0.3" filter="url(#filter0_d_4080_12482)">
</g> <rect x="6" y="4" width="24" height="24" rx="12" fill="#9A9AAF" />
<defs> </g>
<filter id="filter0_d_4080_12482" x="0" y="0" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <g id="Group 331">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <path
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> id="Vector 586"
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4080_12482"/> d="M22.8516 10.9517L12.9521 20.8512"
<feOffset dy="2"/> stroke="#FDFDFF"
<feGaussianBlur stdDeviation="2.5"/> strokeWidth="1.5"
<feComposite in2="hardAlpha" operator="out"/> strokeLinecap="round"
<feColorMatrix type="matrix" values="0 0 0 0 0.416562 0 0 0 0 0.452406 0 0 0 0 0.775 0 0 0 0.18 0"/> strokeLinejoin="round"
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4080_12482"/> />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4080_12482" result="shape"/> <path
</filter> id="Vector 587"
</defs> d="M22.8516 20.8462L12.9521 10.9467"
</svg> stroke="#FDFDFF"
)} strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</g>
<defs>
<filter
id="filter0_d_4080_12482"
x="0"
y="0"
width="36"
height="36"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect1_dropShadow_4080_12482"
/>
<feOffset dy="2" />
<feGaussianBlur stdDeviation="2.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.416562 0 0 0 0 0.452406 0 0 0 0 0.775 0 0 0 0.18 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_4080_12482"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_4080_12482"
result="shape"
/>
</filter>
</defs>
</svg>
);
}

@ -1,18 +1,37 @@
import { useTheme, SxProps, Box } from "@mui/material"; import { useTheme, SxProps, Box } from "@mui/material";
interface Props { interface Props {
sx?: SxProps; sx?: SxProps;
} }
export default function ExpandIcon({ sx }: Props) { export default function ExpandIcon({ sx }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ ...sx, display: "flex", alignItems:"center", justifyContent: "center" }}> <Box
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> sx={{
<rect width="30" height="30" rx="6" fill="#EEE4FC" /> ...sx,
<path d="M22.5 11.25L15 18.75L7.5 11.25" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" strokeLinejoin="round" /> display: "flex",
</svg> alignItems: "center",
</Box> justifyContent: "center",
); }}
} >
<svg
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="30" height="30" rx="6" fill="#EEE4FC" />
<path
d="M22.5 11.25L15 18.75L7.5 11.25"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 -2.62268e-07C21.3137 -1.17422e-07 24 2.68629 24 6L24 18C24 21.3137 21.3137 24 18 24L6 24C2.68629 24 -9.31652e-07 21.3137 -7.86805e-07 18L-5.24537e-07 12L-2.62268e-07 6C-1.17422e-07 2.68629 2.68629 -9.31652e-07 6 -7.86805e-07L18 -2.62268e-07Z" fill="#9A9AAF" fill-opacity="0.7"/> <path d="M18 -2.62268e-07C21.3137 -1.17422e-07 24 2.68629 24 6L24 18C24 21.3137 21.3137 24 18 24L6 24C2.68629 24 -9.31652e-07 21.3137 -7.86805e-07 18L-5.24537e-07 12L-2.62268e-07 6C-1.17422e-07 2.68629 2.68629 -9.31652e-07 6 -7.86805e-07L18 -2.62268e-07Z" fill="#9A9AAF" fill-opacity="0.7"/>
<path d="M7 11.5L11.2857 15.5L17 8" stroke="white" stroke-linecap="round" strokeLinejoin="round"/> <path d="M7 11.5L11.2857 15.5L17 8" stroke="white" strokeLinecap="round" strokeLinejoin="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 494 B

After

Width:  |  Height:  |  Size: 493 B

@ -1,21 +1,64 @@
import { useTheme, SxProps, Box } from "@mui/material"; import { useTheme, SxProps, Box } from "@mui/material";
interface Props { interface Props {
sx?: SxProps; sx?: SxProps;
} }
export default function Trash({ sx }: Props) { export default function Trash({ sx }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ ...sx, display: "flex", alignItems: "center", justifyContent: "center" }}> <Box
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> sx={{
<path d="M20.25 5.73438H3.75" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> ...sx,
<path d="M9.75 10.2344V16.2344" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> display: "flex",
<path d="M14.25 10.2344V16.2344" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> alignItems: "center",
<path d="M18.75 5.73438V19.9844C18.75 20.1833 18.671 20.3741 18.5303 20.5147C18.3897 20.6554 18.1989 20.7344 18 20.7344H6C5.80109 20.7344 5.61032 20.6554 5.46967 20.5147C5.32902 20.3741 5.25 20.1833 5.25 19.9844V5.73438" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> justifyContent: "center",
<path d="M15.75 5.73438V4.23438C15.75 3.83655 15.592 3.45502 15.3107 3.17371C15.0294 2.89241 14.6478 2.73438 14.25 2.73438H9.75C9.35218 2.73438 8.97064 2.89241 8.68934 3.17371C8.40804 3.45502 8.25 3.83655 8.25 4.23438V5.73438" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> }}
</svg> >
</Box> <svg
); width="24"
} height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.25 5.73438H3.75"
stroke="#4D4D4D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.75 10.2344V16.2344"
stroke="#4D4D4D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.25 10.2344V16.2344"
stroke="#4D4D4D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.75 5.73438V19.9844C18.75 20.1833 18.671 20.3741 18.5303 20.5147C18.3897 20.6554 18.1989 20.7344 18 20.7344H6C5.80109 20.7344 5.61032 20.6554 5.46967 20.5147C5.32902 20.3741 5.25 20.1833 5.25 19.9844V5.73438"
stroke="#4D4D4D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.75 5.73438V4.23438C15.75 3.83655 15.592 3.45502 15.3107 3.17371C15.0294 2.89241 14.6478 2.73438 14.25 2.73438H9.75C9.35218 2.73438 8.97064 2.89241 8.68934 3.17371C8.40804 3.45502 8.25 3.83655 8.25 4.23438V5.73438"
stroke="#4D4D4D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

@ -13,10 +13,12 @@ export const BranchingQuestionsModal = ({
openedModalQuestions, openedModalQuestions,
setOpenedModalQuestions, setOpenedModalQuestions,
setModalQuestionTargetContentId, setModalQuestionTargetContentId,
setModalQuestionParentContentId setModalQuestionParentContentId,
}: Props) => { }: Props) => {
const trashQuestions = useQuestionsStore().questions const trashQuestions = useQuestionsStore().questions;
const questions = trashQuestions.filter((question) => question.type !== "result") const questions = trashQuestions.filter(
(question) => question.type !== "result"
);
const handleClose = () => { const handleClose = () => {
setOpenedModalQuestions(false); setOpenedModalQuestions(false);
@ -62,7 +64,7 @@ export const BranchingQuestionsModal = ({
borderRadius: "8px", borderRadius: "8px",
marginBottom: "20px", marginBottom: "20px",
boxShadow: "0px 10px 30px #e7e7e7", boxShadow: "0px 10px 30px #e7e7e7",
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
border-radius: 8px;`, border-radius: 8px;`,
"&:last-child": { marginBottom: 0 }, "&:last-child": { marginBottom: 0 },
}} }}

@ -3,12 +3,18 @@ import { Box, Button, IconButton, Typography } from "@mui/material";
import { ReactComponent as CheckedIcon } from "@icons/checked.svg"; import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
import { useQuestionsStore } from "@root/questions/store"; import { useQuestionsStore } from "@root/questions/store";
import { useEffect } from "react"; import { useEffect } from "react";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared"; import {
AnyTypedQuizQuestion,
UntypedQuizQuestion,
} from "@model/questionTypes/shared";
import { Pencil } from "../../startPage/Sidebar/icons/Pencil"; import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
import { updateOpenBranchingPanel, updateEditSomeQuestion, updateDragQuestionContentId } from "@root/uiTools/actions" import {
updateOpenBranchingPanel,
updateEditSomeQuestion,
updateDragQuestionContentId,
} from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store"; import { useUiTools } from "@root/uiTools/store";
const getItemStyle = (isDragging: any, draggableStyle: any) => ({ const getItemStyle = (isDragging: any, draggableStyle: any) => ({
// some basic styles to make the items look a bit nicer // some basic styles to make the items look a bit nicer
userSelect: "none", userSelect: "none",
@ -19,14 +25,16 @@ const getItemStyle = (isDragging: any, draggableStyle: any) => ({
background: isDragging ? "lightgreen" : "grey", background: isDragging ? "lightgreen" : "grey",
// styles we need to apply on draggables // styles we need to apply on draggables
...draggableStyle ...draggableStyle,
}); });
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion;
export const QuestionsList = () => { export const QuestionsList = () => {
const { desireToOpenABranchingModal } = useUiTools() const { desireToOpenABranchingModal } = useUiTools();
const trashQuestions = useQuestionsStore().questions const trashQuestions = useQuestionsStore().questions;
const questions = trashQuestions.filter((question) => question.type !== "result") const questions = trashQuestions.filter(
(question) => question.type !== "result"
);
return ( return (
<Box sx={{ padding: "15px" }}> <Box sx={{ padding: "15px" }}>
@ -55,47 +63,56 @@ export const QuestionsList = () => {
}} }}
> >
{/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/} {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
{questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => ( {questions
<Button .filter((q: AnyQuestion) => q.type)
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево) .map(({ title, content }, index) => (
if (!content.rule.parentId) updateDragQuestionContentId(content.id) <Button
}} onMouseDown={() => {
key={index} //Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
sx={{ if (!content.rule.parentId)
width: "100%", updateDragQuestionContentId(content.id);
cursor: "pointer", }}
display: "flex", key={index}
justifyContent: "space-between", sx={{
alignItems: "center", width: "100%",
padding: "12px", cursor: "pointer",
background: "#FFFFFF", display: "flex",
borderRadius: "8px", justifyContent: "space-between",
border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none", alignItems: "center",
marginBottom: "20px", padding: "12px",
boxShadow: "0px 10px 30px #e7e7e7", background: "#FFFFFF",
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); borderRadius: "8px",
border:
desireToOpenABranchingModal === content.id
? "4px solid #7e2aea"
: "none",
marginBottom: "20px",
boxShadow: "0px 10px 30px #e7e7e7",
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
border-radius: 8px;`, border-radius: 8px;`,
"&:last-child": { marginBottom: 0 }, "&:last-child": { marginBottom: 0 },
}}
>
<Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
{title || "нет заголовка"}
</Typography>
<IconButton
onClick={() => {
updateOpenBranchingPanel(false)
updateEditSomeQuestion(content.id)
}} }}
> >
<Pencil style={{color: "#7e2aea"}}/> <Typography
</IconButton> sx={{
{content.rule.parentId && <CheckedIcon />} width: "100%",
</Button> color: content.rule.parentId ? "#9A9AAF" : "#000",
}}
>
))} {title || "нет заголовка"}
</Typography>
<IconButton
onClick={() => {
updateOpenBranchingPanel(false);
updateEditSomeQuestion(content.id);
}}
>
<Pencil style={{ color: "#7e2aea" }} />
</IconButton>
{content.rule.parentId && <CheckedIcon />}
</Button>
))}
</Box> </Box>
</Box> </Box>
); );
} };