fix style Card Squiz
This commit is contained in:
parent
b7baa00a20
commit
cd49b5424d
@ -1,22 +1,26 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
|
||||
export default function BackArrowIcon() {
|
||||
|
||||
export default function BackArrowIcon({ color = "black" }: { color?: string }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "24px",
|
||||
width: "24px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M20.25 12H3.75" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.5 5.25L3.75 12L10.5 18.75" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
height: "24px",
|
||||
width: "24px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M20.25 12H3.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path
|
||||
d="M10.5 5.25L3.75 12L10.5 18.75"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
9
src/assets/icons/Burger.tsx
Normal file
9
src/assets/icons/Burger.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const Burger: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 8.15039L3 8.15039" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<path d="M28 16.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<path d="M28 24.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
28
src/assets/icons/EmojiIocns.tsx
Normal file
28
src/assets/icons/EmojiIocns.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const EmojiIcons: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 23C13.0949 22.9993 14.1837 22.8371 15.2313 22.5187L23 12C23 9.82441 22.3549 7.69767 21.1462 5.88873C19.9375 4.07979 18.2195 2.66989 16.2095 1.83733C14.1995 1.00477 11.9878 0.786929 9.85401 1.21137C7.72022 1.6358 5.76021 2.68345 4.22183 4.22183C2.68345 5.76021 1.6358 7.72022 1.21137 9.85401C0.786929 11.9878 1.00477 14.1995 1.83733 16.2095C2.66989 18.2195 4.07979 19.9375 5.88873 21.1462C7.69767 22.3549 9.82441 23 12 23Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.875 11.084C8.63439 11.084 9.25 10.4684 9.25 9.70898C9.25 8.94959 8.63439 8.33398 7.875 8.33398C7.11561 8.33398 6.5 8.94959 6.5 9.70898C6.5 10.4684 7.11561 11.084 7.875 11.084Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.125 11.084C16.8844 11.084 17.5 10.4684 17.5 9.70898C17.5 8.94959 16.8844 8.33398 16.125 8.33398C15.3656 8.33398 14.75 8.94959 14.75 9.70898C14.75 10.4684 15.3656 11.084 16.125 11.084Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.7677 14.75C16.2831 15.5849 15.5878 16.2778 14.7512 16.7595C13.9147 17.2412 12.9663 17.4947 12.001 17.4947C11.0357 17.4947 10.0874 17.2412 9.25084 16.7595C8.41431 16.2778 7.71896 15.5849 7.23438 14.75"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
24
src/assets/icons/ImageAddIcons.tsx
Normal file
24
src/assets/icons/ImageAddIcons.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const ImageAddIcons: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24.9583 1H2.04167C1.46637 1 1 1.44772 1 2V20C1 20.5523 1.46637 21 2.04167 21H24.9583C25.5336 21 26 20.5523 26 20V2C26 1.44772 25.5336 1 24.9583 1Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1 15.9035L7.54948 9.31272C7.64641 9.21368 7.76194 9.13502 7.88936 9.08133C8.01677 9.02765 8.15353 9 8.29167 9C8.4298 9 8.56656 9.02765 8.69398 9.08133C8.82139 9.13502 8.93693 9.21368 9.03385 9.31272L14.8411 15.1567C14.9381 15.2557 15.0536 15.3343 15.181 15.388C15.3084 15.4417 15.4452 15.4694 15.5833 15.4694C15.7215 15.4694 15.8582 15.4417 15.9856 15.388C16.1131 15.3343 16.2286 15.2557 16.3255 15.1567L19.0078 12.4574C19.1047 12.3584 19.2203 12.2797 19.3477 12.2261C19.4751 12.1724 19.6119 12.1447 19.75 12.1447C19.8881 12.1447 20.0249 12.1724 20.1523 12.2261C20.2797 12.2797 20.3953 12.3584 20.4922 12.4574L26 18"
|
||||
stroke="#7E2AEA"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16.5 9C17.3284 9 18 8.32843 18 7.5C18 6.67157 17.3284 6 16.5 6C15.6716 6 15 6.67157 15 7.5C15 8.32843 15.6716 9 16.5 9Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
49
src/assets/icons/PenaLogoIcon.tsx
Normal file
49
src/assets/icons/PenaLogoIcon.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const PenaLogoIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 101 39" fill="none">
|
||||
<g clip-path="url(#clip0_1219_7368)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M14.5445 1.86361C10.4361 1.38772 7.60178 5.80079 4.9654 8.99079C2.65174 11.7903 0.929012 14.9524 0.728914 18.5804C0.516027 22.4402 1.21619 26.46 3.84576 29.2908C6.55435 32.2068 10.6117 34.0492 14.5445 33.4535C18.1507 32.9073 19.7464 28.9471 22.4312 26.4758C25.3464 23.7924 30.7777 22.5443 30.7023 18.5804C30.6269 14.6104 24.8948 13.8333 22.1367 10.9798C19.2798 8.02414 18.6256 2.33634 14.5445 1.86361Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
<ellipse cx="24.765" cy="31.9447" rx="2.26694" ry="2.26694" fill="#7E2AEA" />
|
||||
<ellipse cx="22.4984" cy="6.79328" rx="0.863596" ry="0.863596" fill="#7E2AEA" />
|
||||
<path
|
||||
d="M36.3118 17.6519C36.06 15.2038 34.9082 12.9364 33.0798 11.2892C31.2514 9.64197 28.8765 8.73224 26.4155 8.73634C26.0661 8.7365 25.7169 8.75477 25.3694 8.7911C22.9224 9.04804 20.6573 10.202 19.0108 12.0303C17.3643 13.8586 16.4532 16.2319 16.4531 18.6923V18.6923V32.9152H20.72V26.8705C22.3883 28.0311 24.3726 28.6516 26.4048 28.6483C26.7543 28.6482 27.1034 28.6299 27.4509 28.5936C28.7512 28.4569 30.0119 28.0655 31.1609 27.4416C32.3099 26.8177 33.3248 25.9737 34.1476 24.9576C34.9704 23.9415 35.585 22.7733 35.9564 21.5196C36.3277 20.266 36.4485 18.9515 36.3118 17.6512V17.6519ZM30.8317 22.2744C30.363 22.8566 29.7834 23.34 29.1266 23.6967C28.4697 24.0534 27.7486 24.2762 27.005 24.3523C26.8056 24.373 26.6053 24.3835 26.4048 24.3836C25.1144 24.3824 23.8628 23.9426 22.8553 23.1363C21.8478 22.33 21.1443 21.2051 20.8604 19.9463C20.5764 18.6876 20.7289 17.3696 21.2926 16.2089C21.8564 15.0482 22.7981 14.1136 23.963 13.5585C25.1279 13.0035 26.4469 12.8609 27.7036 13.1543C28.9602 13.4477 30.0797 14.1596 30.8784 15.1731C31.6772 16.1866 32.1076 17.4415 32.0991 18.7319C32.0906 20.0223 31.6437 21.2714 30.8317 22.2744Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M47.4457 8.73633C47.0963 8.73648 46.7471 8.75476 46.3996 8.79109C43.8641 9.0581 41.5277 10.2876 39.8719 12.2262C38.2161 14.1648 37.3671 16.6647 37.4998 19.2108C37.6326 21.7568 38.737 24.1548 40.5855 25.9107C42.4339 27.6666 44.8855 28.6464 47.435 28.6483C47.7844 28.6482 48.1336 28.6299 48.4811 28.5935C50.3092 28.3989 52.0481 27.7035 53.5063 26.5839C54.9644 25.4643 56.0853 23.9639 56.7453 22.248H51.8818L51.8619 22.2729C51.2389 23.0429 50.4257 23.637 49.5027 23.9963C48.5797 24.3556 47.5789 24.4677 46.5993 24.3215C45.6197 24.1753 44.6952 23.7759 43.9173 23.1628C43.1394 22.5497 42.5351 21.7441 42.164 20.8257H57.1691C57.4851 19.3721 57.4718 17.8662 57.1302 16.4184C56.7887 14.9706 56.1275 13.6175 55.1952 12.4584C54.2629 11.2992 53.0831 10.3633 51.7422 9.71932C50.4013 9.07528 48.9332 8.73942 47.4457 8.73633V8.73633ZM42.164 16.5589C42.5524 15.6028 43.193 14.7701 44.0174 14.1494C44.8419 13.5287 45.8193 13.1434 46.8455 13.0345C47.0449 13.0138 47.2452 13.0033 47.4457 13.0032C48.579 13.0013 49.6869 13.339 50.6264 13.9728C51.5659 14.6066 52.294 15.5074 52.7167 16.5589H42.164Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M67.7096 8.73634C66.0788 8.73375 64.479 9.18218 63.0872 10.032V8.73634H58.8203V28.6483H63.0872V17.6256C63.0872 16.3997 63.5742 15.2239 64.441 14.3571C65.3079 13.4902 66.4836 13.0032 67.7096 13.0032C68.9355 13.0032 70.1113 13.4902 70.9781 14.3571C71.845 15.2239 72.332 16.3997 72.332 17.6256V28.6483H76.5989V17.6256C76.5989 15.268 75.6623 13.007 73.9953 11.3399C72.3282 9.67289 70.0672 8.73634 67.7096 8.73634Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M97.9345 19.9646V8.73635H93.6677V10.5142C91.9996 9.3531 90.0152 8.73248 87.9828 8.73635C87.6334 8.7365 87.2842 8.75478 86.9367 8.7911C84.4012 9.05812 82.0648 10.2876 80.409 12.2262C78.7532 14.1648 77.9042 16.6648 78.037 19.2108C78.1697 21.7568 79.2741 24.1549 81.1226 25.9107C82.971 27.6666 85.4226 28.6465 87.9721 28.6483C88.3215 28.6482 88.6707 28.6299 89.0182 28.5936C91.4981 28.3398 93.7905 27.1584 95.4363 25.286C96.7151 26.9969 98.5669 28.1903 100.653 28.6483V24.1752C99.8436 23.8085 99.1566 23.2165 98.6745 22.4698C98.1924 21.7231 97.9355 20.8534 97.9345 19.9646ZM92.399 22.2729C91.9302 22.8551 91.3506 23.3384 90.6937 23.6951C90.0369 24.0518 89.3159 24.2747 88.5723 24.3509C88.3729 24.3716 88.1726 24.382 87.9721 24.3822C86.5144 24.3821 85.1122 23.8225 84.0551 22.8187C82.9979 21.8149 82.3664 20.4437 82.2909 18.9879C82.2153 17.532 82.7015 16.1028 83.6491 14.995C84.5967 13.8872 85.9334 13.1854 87.3833 13.0345C87.5825 13.0138 87.7826 13.0033 87.9828 13.0032C89.0569 13.0041 90.1089 13.3091 91.0169 13.8829C91.925 14.4566 92.652 15.2758 93.114 16.2455C93.576 17.2152 93.754 18.2959 93.6275 19.3625C93.5009 20.4292 93.075 21.4382 92.399 22.2729Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M82.7954 30.8086V33.1847C83.1951 32.7175 83.6727 32.4838 84.2282 32.4838C84.5132 32.4838 84.7704 32.5367 84.9996 32.6425C85.2289 32.7483 85.4008 32.8835 85.5154 33.0481C85.633 33.2127 85.7123 33.3949 85.7535 33.5947C85.7976 33.7946 85.8196 34.1046 85.8196 34.5249V37.2714H84.5808V34.7982C84.5808 34.3074 84.5573 33.9959 84.5103 33.8636C84.4633 33.7314 84.3795 33.6271 84.259 33.5506C84.1415 33.4713 83.993 33.4316 83.8138 33.4316C83.608 33.4316 83.4244 33.4816 83.2627 33.5815C83.1011 33.6814 82.982 33.8328 82.9056 34.0356C82.8322 34.2354 82.7954 34.5323 82.7954 34.9261V37.2714H81.5566V30.8086H82.7954Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M90.1619 37.2714V36.5704C89.9915 36.8203 89.7666 37.0172 89.4874 37.1612C89.2112 37.3052 88.9188 37.3772 88.6102 37.3772C88.2957 37.3772 88.0136 37.3081 87.7637 37.17C87.5139 37.0319 87.3332 36.8379 87.2215 36.5881C87.1098 36.3383 87.054 35.9929 87.054 35.5521V32.5896H88.2928V34.7409C88.2928 35.3993 88.3148 35.8034 88.3589 35.9533C88.4059 36.1002 88.4897 36.2178 88.6102 36.3059C88.7307 36.3912 88.8835 36.4338 89.0686 36.4338C89.2802 36.4338 89.4698 36.3765 89.6373 36.2618C89.8049 36.1443 89.9195 36.0003 89.9812 35.8298C90.0429 35.6564 90.0738 35.2347 90.0738 34.5646V32.5896H91.3125V37.2714H90.1619Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M92.5469 37.2714V30.8086H93.7857V33.1363C94.1677 32.7013 94.6203 32.4838 95.1435 32.4838C95.7136 32.4838 96.1853 32.691 96.5586 33.1054C96.9318 33.5169 97.1185 34.1091 97.1185 34.882C97.1185 35.6814 96.9274 36.2971 96.5454 36.7291C96.1662 37.1612 95.7048 37.3772 95.1611 37.3772C94.8937 37.3772 94.6292 37.3111 94.3676 37.1788C94.109 37.0436 93.8856 36.8452 93.6975 36.5837V37.2714H92.5469ZM93.7769 34.8291C93.7769 35.314 93.8533 35.6726 94.0061 35.9048C94.2206 36.2339 94.5057 36.3985 94.8613 36.3985C95.1347 36.3985 95.3668 36.2824 95.5579 36.0502C95.7519 35.8151 95.8488 35.4463 95.8488 34.9437C95.8488 34.4088 95.7519 34.0238 95.5579 33.7887C95.3639 33.5506 95.1156 33.4316 94.8129 33.4316C94.516 33.4316 94.2691 33.5477 94.0722 33.7799C93.8753 34.0091 93.7769 34.3589 93.7769 34.8291Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1219_7368">
|
||||
<rect width="100.75" height="39" fill="currentColor" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
20
src/assets/icons/questionsPage/DoubleArrowRight.tsx
Normal file
20
src/assets/icons/questionsPage/DoubleArrowRight.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const DoubleArrowRight: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1.5 1.5L5.5 6L1.5 10.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.5 1.5L9.5 6L5.5 10.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
13
src/assets/icons/questionsPage/DoubleTick.tsx
Normal file
13
src/assets/icons/questionsPage/DoubleTick.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const DoubleTick: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.7896 2.20117L8.52644 6.49483M4.31592 6.20898L8.52644 10.2999L16.7896 1.70117M1.21101 6.41495L5.00049 10.0968"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
20
src/assets/icons/questionsPage/VectorQuestions.tsx
Normal file
20
src/assets/icons/questionsPage/VectorQuestions.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const VectorQuestions: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M14.5 3.60156H17V8.60156H14.5M9.30166 8.60156H1V3.60156H9.30166"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.5 10.7039H11.9263M13.35 10.7039H11.9263M11.9263 10.7039V1.30078M11.9263 1.30078H10.5M11.9263 1.30078H13.35"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -9,6 +9,9 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
|
||||
import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions";
|
||||
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
|
||||
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
|
||||
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
@ -19,6 +22,8 @@ interface Props {
|
||||
export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { openedModalSettings } = questionStore();
|
||||
const [openedReallyChangingModal, setOpenedReallyChangingModal] = React.useState<boolean>(false);
|
||||
|
||||
const openedModal = () => {
|
||||
resetSomeField({ openedModalSettings: "open" });
|
||||
console.log(openedModalSettings);
|
||||
@ -26,6 +31,8 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
|
||||
|
||||
const buttonSetting: {
|
||||
icon: JSX.Element;
|
||||
title: string;
|
||||
@ -108,13 +115,14 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
|
||||
sx={{
|
||||
backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
|
||||
minWidth: isMobile ? "30px" : "64px",
|
||||
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
|
||||
|
||||
height: "30px",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
|
||||
{isMobile ? null : title}
|
||||
{isWrappMiniButtonSetting ? null : title}
|
||||
</MiniButtonSetting>
|
||||
</Tooltip>
|
||||
) : (
|
||||
@ -137,6 +145,37 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
<MiniButtonSetting
|
||||
onClick={() => setOpenedReallyChangingModal(true)}
|
||||
sx={{
|
||||
minWidth: "30px",
|
||||
height: "30px",
|
||||
backgroundColor: "#FEDFD0",
|
||||
}}
|
||||
>
|
||||
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => setOpenedReallyChangingModal(true)}
|
||||
sx={{
|
||||
minWidth: "30px",
|
||||
height: "30px",
|
||||
backgroundColor: "#FEDFD0",
|
||||
}}
|
||||
>
|
||||
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => setOpenedReallyChangingModal(true)}
|
||||
sx={{
|
||||
minWidth: "30px",
|
||||
height: "30px",
|
||||
backgroundColor: "#FEDFD0",
|
||||
}}
|
||||
>
|
||||
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
|
||||
</MiniButtonSetting>
|
||||
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
@ -22,6 +22,11 @@ import {
|
||||
removeQuestion,
|
||||
resetSomeField,
|
||||
} from "@root/questions";
|
||||
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
|
||||
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
|
||||
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
|
||||
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
|
||||
|
||||
|
||||
import "./ButtonsOptionsAndPict.css";
|
||||
|
||||
@ -41,8 +46,9 @@ export default function ButtonsOptionsAndPict({
|
||||
const { openedModalSettings } = questionStore();
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const isIconMobile = useMediaQuery(theme.breakpoints.down(930));
|
||||
const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
|
||||
|
||||
const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState<boolean>(false);
|
||||
const openedModal = () => {
|
||||
resetSomeField({ openedModalSettings: "open" });
|
||||
};
|
||||
@ -227,6 +233,38 @@ export default function ButtonsOptionsAndPict({
|
||||
/>
|
||||
{isIconMobile ? null : "Изображение"}
|
||||
</MiniButtonSetting>
|
||||
|
||||
<MiniButtonSetting
|
||||
onClick={() => setOpenedReallyChangingModal(true)}
|
||||
sx={{
|
||||
minWidth: "30px",
|
||||
height: "30px",
|
||||
backgroundColor: "#FEDFD0",
|
||||
}}
|
||||
>
|
||||
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => setOpenedReallyChangingModal(true)}
|
||||
sx={{
|
||||
minWidth: "30px",
|
||||
height: "30px",
|
||||
backgroundColor: "#FEDFD0",
|
||||
}}
|
||||
>
|
||||
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => setOpenedReallyChangingModal(true)}
|
||||
sx={{
|
||||
minWidth: "30px",
|
||||
height: "30px",
|
||||
backgroundColor: "#FEDFD0",
|
||||
}}
|
||||
>
|
||||
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
|
||||
</MiniButtonSetting>
|
||||
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
@ -249,6 +287,7 @@ export default function ButtonsOptionsAndPict({
|
||||
<DeleteIcon color={"#4D4D4D"} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<ReallyChangingModal opened={openedReallyChangingModal} onClose={() => setOpenedReallyChangingModal(false)} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -21,6 +21,8 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
|
||||
const { listQuestions } = questionStore();
|
||||
const theme = useTheme();
|
||||
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
const debounced = useDebouncedCallback((value) => {
|
||||
let clonContent = listQuestions[quizId][totalIndex].content;
|
||||
clonContent.innerName = value;
|
||||
@ -35,9 +37,10 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ pt: "20px", pl: "20px", pb: "20px" }}>
|
||||
<Typography>Настройки календаря</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Выбор диапазона дат"}
|
||||
checked={listQuestions[quizId][totalIndex].content.dateRange}
|
||||
handleChange={({ target }) => {
|
||||
@ -68,6 +71,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
|
||||
>
|
||||
<Typography>Настройки вопросов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={!listQuestions[quizId][totalIndex].required}
|
||||
handleChange={(e) => {
|
||||
|
||||
@ -245,7 +245,6 @@ export default function QuestionsPageCard({
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginLeft: isMobile ? "auto" : "0px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
@ -301,7 +300,7 @@ export default function QuestionsPageCard({
|
||||
<IconButton
|
||||
sx={{
|
||||
position: isMobile ? "absolute" : "relative",
|
||||
left: isMobile ? "0" : null,
|
||||
right: isMobile ? "0" : null,
|
||||
bottom: isMobile ? "0" : null,
|
||||
}}
|
||||
{...draggableProps}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { Box, Link, Typography, useMediaQuery, useTheme, IconButton, InputAdornment, Popover, TextField, TextareaAutosize} from "@mui/material";
|
||||
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
|
||||
import ButtonsOptions from "../ButtonsOptions";
|
||||
import SwitchEmoji from "./switchEmoji";
|
||||
@ -8,6 +8,12 @@ import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
|
||||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||||
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import MessageIcon from "@icons/messagIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||||
import { EmojiIcons } from "@icons/EmojiIocns";
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
}
|
||||
@ -18,6 +24,8 @@ export default function Emoji({ totalIndex }: Props) {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
|
||||
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
@ -25,15 +33,79 @@ export default function Emoji({ totalIndex }: Props) {
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<AnswerDraggableList
|
||||
variants={listQuestions[quizId][totalIndex].content.variants}
|
||||
totalIndex={totalIndex}
|
||||
icon={
|
||||
<Box sx={{ margin: "0 15px 0 5px" }}>
|
||||
<AddEmoji />
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
focused={false}
|
||||
placeholder={"Добавьте ответ"}
|
||||
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<>
|
||||
<InputAdornment position="start">
|
||||
<PointsIcon />
|
||||
</InputAdornment>
|
||||
{!isMobile && <AddEmoji />}
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-describedby="my-popover-id">
|
||||
<MessageIcon />
|
||||
</IconButton>
|
||||
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
|
||||
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
|
||||
</Popover>
|
||||
<IconButton>
|
||||
<DeleteIcon color={theme.palette.grey2.main} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "13.5px",
|
||||
borderRadius: "10px",
|
||||
background: "#ffffff",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
|
||||
}}
|
||||
/>
|
||||
|
||||
{isMobile && (
|
||||
<Box sx={{ display: "flex", alignItems: "center", m: "8px", position: "relative" }}>
|
||||
<Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
|
||||
<EmojiIcons
|
||||
style={{ position: "absolute", color: "#7E2AEA", fontSize: "20px", left: "45%", right: "55%" }}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "20px",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
color: "white",
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<Link
|
||||
component="button"
|
||||
|
||||
@ -36,9 +36,10 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ pt: "20px", pl: "20px", pb: "20px" }}>
|
||||
<Typography>Настройки ответов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Можно несколько"}
|
||||
checked={listQuestions[quizId][totalIndex].content.multi}
|
||||
handleChange={(e) => {
|
||||
@ -48,6 +49,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
||||
}}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={'Вариант "свой ответ"'}
|
||||
checked={listQuestions[quizId][totalIndex].content.own}
|
||||
handleChange={(e) => {
|
||||
@ -76,7 +78,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Box, Link, Typography, ButtonBase, useTheme, useMediaQuery } from "@mui/material";
|
||||
import {Box, Link, Typography, ButtonBase, useTheme, useMediaQuery, InputAdornment, IconButton, Popover, TextareaAutosize, TextField} from "@mui/material";
|
||||
import { useParams } from "react-router-dom";
|
||||
import AddImage from "../../../assets/icons/questionsPage/addImage";
|
||||
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
|
||||
@ -6,6 +6,11 @@ import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||
import SwitchOptionsAndPict from "./switchOptionsAndPict";
|
||||
import React from "react";
|
||||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||||
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import MessageIcon from "@icons/messagIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
@ -16,6 +21,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
const { listQuestions } = questionStore();
|
||||
const quizId = Number(useParams().quizId);
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
const SSHC = (data: string) => {
|
||||
@ -30,8 +36,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
<ButtonBase
|
||||
component="label"
|
||||
sx={{
|
||||
display: isTablet ? "none" : "flex",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
marginBottom: "15px",
|
||||
@ -68,6 +74,81 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
))}
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
display: isTablet ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
focused={false}
|
||||
placeholder={"Добавьте ответ"}
|
||||
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<>
|
||||
<InputAdornment position="start">
|
||||
<PointsIcon />
|
||||
</InputAdornment>
|
||||
{!isMobile && <AddImage sx={{ h: "100%", margin: "0px 20px" }} />}
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-describedby="my-popover-id">
|
||||
<MessageIcon />
|
||||
</IconButton>
|
||||
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
|
||||
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
|
||||
</Popover>
|
||||
<IconButton>
|
||||
<DeleteIcon color={theme.palette.grey2.main} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "13.5px",
|
||||
borderRadius: "10px",
|
||||
background: "#ffffff",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
|
||||
}}
|
||||
/>
|
||||
|
||||
{isMobile && (
|
||||
<Box sx={{ display: "flex", alignItems: "center", m: "8px", position: "relative" }}>
|
||||
<Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
|
||||
<ImageAddIcons
|
||||
style={{ position: "absolute", color: "#7E2AEA", fontSize: "20px", left: "45%", right: "55%" }}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "20px",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
color: "white",
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<Link
|
||||
|
||||
@ -51,11 +51,12 @@ export default function SettingOptionsAndPict({
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px", width: isMobile ? "85%" : "100%" }}>
|
||||
<Box sx={{ pt: "20px", pb: "20px", pl: "20px", width: isMobile ? "85%" : "100%" }}>
|
||||
<Typography sx={{ marginBottom: "15px" }}>
|
||||
Настройки ответов
|
||||
</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={'Вариант "свой ответ"'}
|
||||
checked={listQuestions[quizId][totalIndex].content.own}
|
||||
handleChange={({ target }) => {
|
||||
@ -73,7 +74,7 @@ export default function SettingOptionsAndPict({
|
||||
Текст-заглушка на картинке
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
sx={{ maxWidth: "330px", width: "100%" }}
|
||||
sx={{ maxWidth: "330px", width: "100%", mr: isMobile ? "0px" : "16px" }}
|
||||
placeholder={"Пример текста"}
|
||||
text={listQuestions[quizId][totalIndex].content.replText}
|
||||
onChange={({ target }) => debounced(target.value)}
|
||||
@ -93,6 +94,7 @@ export default function SettingOptionsAndPict({
|
||||
Настройки вопросов
|
||||
</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={listQuestions[quizId][totalIndex].content.required}
|
||||
handleChange={({ target }) => {
|
||||
@ -106,7 +108,7 @@ export default function SettingOptionsAndPict({
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ width: "100%" }}
|
||||
sx={{ width: isMobile ? "90%" : "auto", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={({ target }) => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Link, Typography, Button, useTheme, useMediaQuery } from "@mui/material";
|
||||
import { Box, Link, Typography, Button, useTheme, useMediaQuery, InputAdornment, IconButton, TextareaAutosize, Popover, TextField } from "@mui/material";
|
||||
|
||||
|
||||
import ButtonsOptions from "../ButtonsOptions";
|
||||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||||
@ -10,6 +11,11 @@ import AddImage from "../../../assets/icons/questionsPage/addImage";
|
||||
import SwitchAnswerOptionsPict from "./switchOptionsPict";
|
||||
|
||||
import type { ChangeEvent } from "react";
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import MessageIcon from "@icons/messagIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||||
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
@ -41,21 +47,99 @@ export default function OptionsPicture({ totalIndex }: Props) {
|
||||
<>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}>
|
||||
<Button component="label" sx={{ padding: "0px" }}>
|
||||
<AddImage />
|
||||
<input type="file" hidden onChange={addImage} />
|
||||
</Button>
|
||||
<Typography
|
||||
<input type="file" hidden onChange={addImage} />
|
||||
<Box sx={{ display: isTablet ? "none" : "block" }}>
|
||||
<Button component="label" sx={{ padding: "0px" }}>
|
||||
<AddImage />
|
||||
</Button>
|
||||
<Typography
|
||||
sx={{
|
||||
padding: "0 0 0 20px",
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
padding: "0 0 0 20px",
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
width: "100%",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
display: isTablet ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
focused={false}
|
||||
placeholder={"Добавьте ответ"}
|
||||
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<>
|
||||
<InputAdornment position="start">
|
||||
<PointsIcon />
|
||||
</InputAdornment>
|
||||
{!isMobile && <AddImage sx={{ h: "100%", margin: "0px 20px" }} />}
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-describedby="my-popover-id">
|
||||
<MessageIcon />
|
||||
</IconButton>
|
||||
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
|
||||
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
|
||||
</Popover>
|
||||
<IconButton>
|
||||
<DeleteIcon color={theme.palette.grey2.main} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "13.5px",
|
||||
borderRadius: "10px",
|
||||
background: "#ffffff",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
|
||||
}}
|
||||
/>
|
||||
|
||||
{isMobile && (
|
||||
<Box sx={{ display: "flex", alignItems: "center", m: "8px", position: "relative" }}>
|
||||
<Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
|
||||
<ImageAddIcons
|
||||
style={{ position: "absolute", color: "#7E2AEA", fontSize: "20px", left: "45%", right: "55%" }}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "20px",
|
||||
background: "#EEE4FC",
|
||||
height: "40px",
|
||||
color: "white",
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
+
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
|
||||
@ -113,10 +113,10 @@ export default function SettingOpytionsPict({
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: isTablet ? "column" : null,
|
||||
marginRight: "30px",
|
||||
marginRight: isMobile ? "0px" : "30px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
|
||||
<Typography sx={{ marginBottom: "15px" }}>Пропорции</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
@ -142,7 +142,7 @@ export default function SettingOpytionsPict({
|
||||
</Typography>
|
||||
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block" }}
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Можно несколько"}
|
||||
checked={listQuestions[quizId][totalIndex].content.multi}
|
||||
handleChange={({ target }) =>
|
||||
@ -155,7 +155,7 @@ export default function SettingOpytionsPict({
|
||||
}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block" }}
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Большие картинки"}
|
||||
checked={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
handleChange={({ target }) =>
|
||||
@ -168,7 +168,7 @@ export default function SettingOpytionsPict({
|
||||
}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block" }}
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={'Вариант "свой ответ"'}
|
||||
checked={listQuestions[quizId][totalIndex].content.own}
|
||||
handleChange={({ target }) =>
|
||||
@ -234,9 +234,8 @@ export default function SettingOpytionsPict({
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ width: "100%" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={({ target }) =>
|
||||
|
||||
@ -55,7 +55,7 @@ export default function SettingTextField({
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: isWrapperColumn ? "column" : null,
|
||||
marginRight: "50px",
|
||||
marginRight: isMobile ? "0px" : "50px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
@ -99,6 +99,7 @@ export default function SettingTextField({
|
||||
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
|
||||
<Typography>Настройки вопросов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Автозаполнение адреса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.autofill}
|
||||
handleChange={({ target }) => {
|
||||
@ -108,6 +109,7 @@ export default function SettingTextField({
|
||||
}}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={!listQuestions[quizId][totalIndex].required}
|
||||
handleChange={(e) => {
|
||||
@ -116,8 +118,9 @@ export default function SettingTextField({
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={(e) => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, Tooltip } from "@mui/material";
|
||||
import { Box, Typography, useMediaQuery, useTheme, Tooltip } from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
@ -15,6 +15,9 @@ type SettingPageOptionsProps = {
|
||||
export default function SettingPageOptions({
|
||||
totalIndex,
|
||||
}: SettingPageOptionsProps) {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const debounced = useDebouncedCallback((value) => {
|
||||
@ -26,10 +29,11 @@ export default function SettingPageOptions({
|
||||
}, 1000);
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px" }}>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", pt: "20px", pb: "20px", pl: "20px" }}>
|
||||
<Typography>Настройки вопроса</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={({ target }) =>
|
||||
|
||||
@ -59,7 +59,7 @@ export default function RatingOptions({ totalIndex }: Props) {
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", gap: "25px" }}>
|
||||
<Box sx={{ display: "flex", gap: isMobile ? "10px" : "15px" }}>
|
||||
{Array.from(
|
||||
{ length: listQuestions[quizId][totalIndex].content.steps },
|
||||
(_, index) => index
|
||||
|
||||
@ -62,7 +62,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
|
||||
<Typography sx={{ marginBottom: "15px" }}>
|
||||
Настройки рейтинга
|
||||
</Typography>
|
||||
@ -130,6 +130,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography>Настройки вопросов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={!listQuestions[quizId][totalIndex].required}
|
||||
handleChange={(e) => {
|
||||
@ -138,8 +139,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={(e) => {
|
||||
|
||||
@ -36,7 +36,9 @@ export default function SliderOptions({ totalIndex }: Props) {
|
||||
}}
|
||||
>
|
||||
<Box sx={{ gap: "10px", display: "flex", flexDirection: "column" }}>
|
||||
<Typography>Выбор значения из диапазона</Typography>
|
||||
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>
|
||||
Выбор значения из диапазона
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
|
||||
<CustomNumberField
|
||||
placeholder={"0"}
|
||||
@ -137,11 +139,14 @@ export default function SliderOptions({ totalIndex }: Props) {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "50px",
|
||||
flexDirection: isMobile ? "column-reverse" : "",
|
||||
gap: isMobile ? "15px" : "50px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Typography>Начальное значение</Typography>
|
||||
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>
|
||||
Начальное значение
|
||||
</Typography>
|
||||
<CustomNumberField
|
||||
placeholder={"50"}
|
||||
min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
|
||||
@ -157,7 +162,7 @@ export default function SliderOptions({ totalIndex }: Props) {
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Typography>Шаг</Typography>
|
||||
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>Шаг</Typography>
|
||||
<CustomNumberField
|
||||
min={0}
|
||||
max={100}
|
||||
|
||||
@ -36,9 +36,11 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
|
||||
|
||||
<Typography>Настройки ползунка</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Выбор диапозона (два ползунка)"}
|
||||
checked={listQuestions[quizId][totalIndex].content.chooseRange}
|
||||
handleChange={(e) => {
|
||||
@ -48,9 +50,10 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
|
||||
<Typography>Настройки вопросов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={!listQuestions[quizId][totalIndex].required}
|
||||
handleChange={(e) => {
|
||||
@ -59,8 +62,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={(e) => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, Tooltip } from "@mui/material";
|
||||
import { Box, Typography, useMediaQuery, useTheme, Tooltip } from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
@ -13,6 +13,7 @@ type SettingsUploadProps = {
|
||||
};
|
||||
|
||||
export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
|
||||
const theme = useTheme();
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const debounced = useDebouncedCallback((value) => {
|
||||
@ -20,11 +21,13 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
|
||||
clonContent.innerName = value;
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}, 1000);
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px" }}>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", pt: "20px", pb: "20px", pl: "20px" }}>
|
||||
<Typography>Настройки вопроса</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Автозаполнение адреса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.autofill}
|
||||
handleChange={({ target }) => {
|
||||
@ -34,6 +37,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
|
||||
}}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={!listQuestions[quizId][totalIndex].required}
|
||||
handleChange={(e) => {
|
||||
@ -42,8 +46,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={(e) => {
|
||||
|
||||
@ -34,12 +34,13 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: isTablet ? "column" : "none",
|
||||
marginRight: "30px",
|
||||
marginRight: isMobile ? "0" : "30px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
|
||||
<Box sx={{ pt: "20px", pb: "20px", pl: "20px", display: "flex", flexDirection: "column" }}>
|
||||
<Typography>Настройки ответов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Длинный текстовый ответ"}
|
||||
checked={listQuestions[quizId][totalIndex].content.largeCheck}
|
||||
handleChange={(e) => {
|
||||
@ -54,6 +55,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
}}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Можно несколько"}
|
||||
checked={listQuestions[quizId][totalIndex].content.multi}
|
||||
handleChange={(e) => {
|
||||
@ -63,6 +65,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
}}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={'Вариант "свой ответ"'}
|
||||
checked={listQuestions[quizId][totalIndex].content.own}
|
||||
handleChange={(e) => {
|
||||
@ -75,6 +78,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
|
||||
<Typography>Настройки вопросов</Typography>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Необязательный вопрос"}
|
||||
checked={!listQuestions[quizId][totalIndex].required}
|
||||
handleChange={(e) => {
|
||||
@ -83,8 +87,9 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
label={"Внутреннее название вопроса"}
|
||||
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
|
||||
handleChange={(e) => {
|
||||
@ -111,6 +116,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
sx={{ mr: isMobile ? "0px" : "16px" }}
|
||||
placeholder={"Развёрнутое описание вопроса"}
|
||||
text={listQuestions[quizId][totalIndex].content.innerName}
|
||||
onChange={({ target }) => debounced(target.value)}
|
||||
|
||||
137
src/pages/startPage/Sidebar/SidebarMobile.tsx
Normal file
137
src/pages/startPage/Sidebar/SidebarMobile.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
import BackArrowIcon from "@icons/BackArrowIcon";
|
||||
import { People } from "@mui/icons-material";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { FC } from "react";
|
||||
import { ChartLineUp } from "./icons/ChartLineUp";
|
||||
import { ReturnTime } from "./icons/ReturnTime";
|
||||
import { Question } from "./icons/Question";
|
||||
import { Settings } from "./icons/Settings";
|
||||
import { Pencil } from "./icons/Pencil";
|
||||
import { ArrowDown } from "./icons/ArrowDown";
|
||||
|
||||
interface Iprops {
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
export const SidebarMobile: FC<Iprops> = ({ open }) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: open ? "block" : "none",
|
||||
minHeight: "134px",
|
||||
padding: "20px 16px 16px 16px",
|
||||
background: "#333647",
|
||||
borderTop: "1px solid #9A9AAF",
|
||||
borderBottomLeftRadius: "8px",
|
||||
borderBottomRightRadius: "8px",
|
||||
transitionDuration: "200ms",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
|
||||
<BackArrowIcon color="white" />
|
||||
|
||||
<Box sx={{ ml: "15px", display: "flex", alignItems: "end" }}>
|
||||
<Box>
|
||||
<Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>Название</Typography>
|
||||
<Typography sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}>Название проекта</Typography>
|
||||
</Box>
|
||||
<Pencil style={{ position: "absolute", right: "0", color: "white", fontSize: "24px" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{ width: "100%", justifyContent: "center", display: "flex", marginTop: "20px", flexWrap: "wrap", gap: "5px" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
background: "#262835",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<Pencil style={{ color: "#974BFA", fontSize: "24px" }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
background: "#262835",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<People style={{ color: "#974BFA", fontSize: "24px" }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
background: "#262835",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
background: "#262835",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
background: "#262835",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<Question style={{ color: "#974BFA", fontSize: "24px" }} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
px: "10px",
|
||||
width: "70px",
|
||||
height: "44px",
|
||||
background: "#262835",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #FFFFFF66",
|
||||
marginLeft: "28px",
|
||||
}}
|
||||
>
|
||||
<Settings style={{ color: "#974BFA", fontSize: "24px", marginLeft: "10px" }} />
|
||||
<ArrowDown style={{ color: "#F2F3F7" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
13
src/pages/startPage/Sidebar/icons/ArrowDown.tsx
Normal file
13
src/pages/startPage/Sidebar/icons/ArrowDown.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const ArrowDown: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10.1875 1.125L5.5 5.8125L0.8125 1.125"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
15
src/pages/startPage/Sidebar/icons/ChartLineUp.tsx
Normal file
15
src/pages/startPage/Sidebar/icons/ChartLineUp.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const ChartLineUp: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 19.5H3V4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path
|
||||
d="M19.5 6L12 13.5L9 10.5L3 16.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M19.5 9.75V6H15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
16
src/pages/startPage/Sidebar/icons/Pencil.tsx
Normal file
16
src/pages/startPage/Sidebar/icons/Pencil.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const Pencil: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.69063 20.2499H4.5C4.30109 20.2499 4.11033 20.1709 3.96967 20.0302C3.82902 19.8896 3.75 19.6988 3.75 19.4999V15.3093C3.74966 15.2119 3.76853 15.1154 3.80553 15.0253C3.84253 14.9352 3.89694 14.8533 3.96563 14.7843L15.2156 3.53429C15.2854 3.46343 15.3686 3.40715 15.4603 3.36874C15.5521 3.33033 15.6505 3.31055 15.75 3.31055C15.8495 3.31055 15.9479 3.33033 16.0397 3.36874C16.1314 3.40715 16.2146 3.46343 16.2844 3.53429L20.4656 7.71554C20.5365 7.78533 20.5928 7.86851 20.6312 7.96025C20.6696 8.052 20.6894 8.15046 20.6894 8.24992C20.6894 8.34938 20.6696 8.44784 20.6312 8.53958C20.5928 8.63132 20.5365 8.71451 20.4656 8.78429L9.21563 20.0343C9.1466 20.103 9.06469 20.1574 8.9746 20.1944C8.88452 20.2314 8.78802 20.2503 8.69063 20.2499V20.2499Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M12.75 6L18 11.25" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M15.375 8.625L6.375 17.625" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.95312 20.2031L3.79688 15.0469" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.5 23.5H21" stroke="currentColor" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
10
src/pages/startPage/Sidebar/icons/People.tsx
Normal file
10
src/pages/startPage/Sidebar/icons/People.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const People: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M5.84922 8.77578C5.84922 8.00002 6.15739 7.25604 6.70593 6.70749C7.25448 6.15895 7.99846 5.85078 8.77422 5.85078C9.54998 5.85078 10.294 6.15895 10.8425 6.70749C11.3911 7.25604 11.6992 8.00002 11.6992 8.77578C11.6992 9.55154 11.3911 10.2955 10.8425 10.8441C10.294 11.3926 9.54998 11.7008 8.77422 11.7008C7.99846 11.7008 7.25448 11.3926 6.70593 10.8441C6.15739 10.2955 5.84922 9.55154 5.84922 8.77578ZM8.77422 4.55078C7.65368 4.55078 6.57903 4.99591 5.78669 5.78825C4.99435 6.5806 4.54922 7.65524 4.54922 8.77578C4.54922 9.89632 4.99435 10.971 5.78669 11.7633C6.57903 12.5556 7.65368 13.0008 8.77422 13.0008C9.89476 13.0008 10.9694 12.5556 11.7617 11.7633C12.5541 10.971 12.9992 9.89632 12.9992 8.77578C12.9992 7.65524 12.5541 6.5806 11.7617 5.78825C10.9694 4.99591 9.89476 4.55078 8.77422 4.55078ZM12.9992 14.3008C13.5166 14.3008 13.9976 14.4516 14.4032 14.7116C14.0499 14.9845 13.8019 15.3712 13.7012 15.8062C13.4919 15.6716 13.2481 15.6003 12.9992 15.6008H4.54922C4.20444 15.6008 3.87378 15.7377 3.62998 15.9815C3.38618 16.2253 3.24922 16.556 3.24922 16.9008V17.0022L3.25832 17.1101C3.32876 17.7333 3.55106 18.3296 3.90572 18.8469C4.53882 19.7621 5.86612 20.8008 8.77422 20.8008C11.6823 20.8008 13.0096 19.7621 13.6427 18.8469L13.6492 18.8365V18.8508C13.6492 19.35 13.8364 19.8063 14.1458 20.1508C14.0489 20.2594 13.9643 20.3784 13.8936 20.5057C12.8614 21.4131 11.252 22.1008 8.77422 22.1008C5.50732 22.1008 3.74712 20.9048 2.83582 19.5866C2.35589 18.8875 2.05664 18.0804 1.96482 17.2375C1.95705 17.1618 1.95185 17.086 1.94922 17.01V16.9008C1.94922 16.2112 2.22315 15.5499 2.71074 15.0623C3.19834 14.5747 3.85966 14.3008 4.54922 14.3008H12.9992ZM16.8992 9.75078C16.8992 9.23361 17.1047 8.73762 17.4704 8.37192C17.8361 8.00623 18.332 7.80078 18.8492 7.80078C19.3664 7.80078 19.8624 8.00623 20.2281 8.37192C20.5938 8.73762 20.7992 9.23361 20.7992 9.75078C20.7992 10.268 20.5938 10.7639 20.2281 11.1296C19.8624 11.4953 19.3664 11.7008 18.8492 11.7008C18.332 11.7008 17.8361 11.4953 17.4704 11.1296C17.1047 10.7639 16.8992 10.268 16.8992 9.75078ZM18.8492 6.50078C17.9873 6.50078 17.1606 6.84319 16.5511 7.45268C15.9416 8.06218 15.5992 8.88883 15.5992 9.75078C15.5992 10.6127 15.9416 11.4394 16.5511 12.0489C17.1606 12.6584 17.9873 13.0008 18.8492 13.0008C19.7112 13.0008 20.5378 12.6584 21.1473 12.0489C21.7568 11.4394 22.0992 10.6127 22.0992 9.75078C22.0992 8.88883 21.7568 8.06218 21.1473 7.45268C20.5378 6.84319 19.7112 6.50078 18.8492 6.50078ZM15.5992 15.6008C15.4268 15.6008 15.2615 15.6693 15.1396 15.7912C15.0177 15.9131 14.9492 16.0784 14.9492 16.2508C14.9492 16.4232 15.0177 16.5885 15.1396 16.7104C15.2615 16.8323 15.4268 16.9008 15.5992 16.9008H23.3992C23.5716 16.9008 23.7369 16.8323 23.8588 16.7104C23.9807 16.5885 24.0492 16.4232 24.0492 16.2508C24.0492 16.0784 23.9807 15.9131 23.8588 15.7912C23.7369 15.6693 23.5716 15.6008 23.3992 15.6008H15.5992ZM15.5992 18.2008C15.4268 18.2008 15.2615 18.2693 15.1396 18.3912C15.0177 18.5131 14.9492 18.6784 14.9492 18.8508C14.9492 19.0232 15.0177 19.1885 15.1396 19.3104C15.2615 19.4323 15.4268 19.5008 15.5992 19.5008H23.3992C23.5716 19.5008 23.7369 19.4323 23.8588 19.3104C23.9807 19.1885 24.0492 19.0232 24.0492 18.8508C24.0492 18.6784 23.9807 18.5131 23.8588 18.3912C23.7369 18.2693 23.5716 18.2008 23.3992 18.2008H15.5992ZM15.5992 20.8008C15.4268 20.8008 15.2615 20.8693 15.1396 20.9912C15.0177 21.1131 14.9492 21.2784 14.9492 21.4508C14.9492 21.6232 15.0177 21.7885 15.1396 21.9104C15.2615 22.0323 15.4268 22.1008 15.5992 22.1008H23.3992C23.5716 22.1008 23.7369 22.0323 23.8588 21.9104C23.9807 21.7885 24.0492 21.6232 24.0492 21.4508C24.0492 21.2784 23.9807 21.1131 23.8588 20.9912C23.7369 20.8693 23.5716 20.8008 23.3992 20.8008H15.5992Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
14
src/pages/startPage/Sidebar/icons/Question.tsx
Normal file
14
src/pages/startPage/Sidebar/icons/Question.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const Question: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="11" cy="11" r="10.25" stroke="currentColor" strokeWidth="1.5" />
|
||||
<path
|
||||
d="M8.36133 7.04065C8.54466 6.67398 9.46154 5.7207 10.7815 5.7207C12.4315 5.7207 13.6415 6.4907 13.6415 8.1407C13.6415 10.3407 10.7815 10.8907 10.7815 13.0907"
|
||||
stroke="#974BFA"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle cx="10.8367" cy="15.5652" r="0.825" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
13
src/pages/startPage/Sidebar/icons/ReturnTime.tsx
Normal file
13
src/pages/startPage/Sidebar/icons/ReturnTime.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const ReturnTime: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1.56035 7.88979C2.88223 3.91993 6.65906 1.08711 11.0645 1.15898C16.5017 1.2477 20.8375 5.72731 20.7488 11.1645C20.6601 16.6017 16.1804 20.9374 10.7433 20.8487C5.81063 20.7682 1.78445 17.0739 1.14597 12.3293M1.56035 7.88979L1.2898 2.85973M1.56035 7.88979L6.72167 7.88979M11.0645 6.59296L11.0606 10.9319L14.3148 14.1861"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
24
src/pages/startPage/Sidebar/icons/Settings.tsx
Normal file
24
src/pages/startPage/Sidebar/icons/Settings.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const Settings: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M5.10938 18.8906C4.24688 18.0281 4.81875 16.2187 4.37813 15.1594C3.9375 14.1 2.25 13.1719 2.25 12C2.25 10.8281 3.91875 9.9375 4.37813 8.84063C4.8375 7.74375 4.24688 5.97187 5.10938 5.10938C5.97187 4.24688 7.78125 4.81875 8.84063 4.37813C9.9 3.9375 10.8281 2.25 12 2.25C13.1719 2.25 14.0625 3.91875 15.1594 4.37813C16.2562 4.8375 18.0281 4.24688 18.8906 5.10938C19.7531 5.97187 19.1813 7.78125 19.6219 8.84063C20.0625 9.9 21.75 10.8281 21.75 12C21.75 13.1719 20.0813 14.0625 19.6219 15.1594C19.1625 16.2562 19.7531 18.0281 18.8906 18.8906C18.0281 19.7531 16.2187 19.1813 15.1594 19.6219C14.1 20.0625 13.1719 21.75 12 21.75C10.8281 21.75 9.9375 20.0813 8.84063 19.6219C7.74375 19.1625 5.97187 19.7531 5.10938 18.8906Z"
|
||||
stroke="#974BFA"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 18C12.6213 18 13.125 17.4963 13.125 16.875C13.125 16.2537 12.6213 15.75 12 15.75C11.3787 15.75 10.875 16.2537 10.875 16.875C10.875 17.4963 11.3787 18 12 18Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M12 13.5V12.75C12.5192 12.75 13.0267 12.596 13.4584 12.3076C13.8901 12.0192 14.2265 11.6092 14.4252 11.1295C14.6239 10.6499 14.6758 10.1221 14.5746 9.61289C14.4733 9.10369 14.2233 8.63596 13.8562 8.26885C13.489 7.90173 13.0213 7.65173 12.5121 7.55044C12.0029 7.44915 11.4751 7.50114 10.9955 7.69982C10.5158 7.8985 10.1058 8.23495 9.81739 8.66663C9.52895 9.09831 9.375 9.60583 9.375 10.125"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -10,6 +10,10 @@ import CustomAvatar from "@ui_kit/Header/Avatar";
|
||||
import Sidebar from "@ui_kit/Sidebar";
|
||||
import { quizStore } from "@root/quizes";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Burger } from "@icons/Burger";
|
||||
import { PenaLogoIcon } from "@icons/PenaLogoIcon";
|
||||
import { SidebarMobile } from "./Sidebar/SidebarMobile";
|
||||
|
||||
|
||||
export default function StartPage() {
|
||||
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
|
||||
@ -17,6 +21,10 @@ export default function StartPage() {
|
||||
const activeStep = listQuizes[params].step;
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||||
|
||||
const [mobileSidebar, setMobileSidebar] = React.useState<boolean>(false);
|
||||
|
||||
|
||||
const handleNext = () => {
|
||||
updateQuizesList(params, { step: listQuizes[params].step + 1 });
|
||||
@ -37,17 +45,17 @@ export default function StartPage() {
|
||||
sx={{
|
||||
px: "16px",
|
||||
display: "flex",
|
||||
height: "80px",
|
||||
height: isMobile ? "51px" : "80px",
|
||||
alignItems: "center",
|
||||
bgcolor: "white",
|
||||
bgcolor: isMobile ? "#333647" : "white",
|
||||
borderBottom: "1px solid #E3E3E3",
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
}}
|
||||
>
|
||||
<PenaLogo width={124} />
|
||||
{isMobile ? <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} /> : <PenaLogo width={124} />}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
display: isMobile ? "none" : "flex",
|
||||
alignItems: "center",
|
||||
ml: "37px",
|
||||
}}
|
||||
@ -91,9 +99,16 @@ export default function StartPage() {
|
||||
ml: "auto",
|
||||
}}
|
||||
>
|
||||
<CustomAvatar
|
||||
sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
|
||||
/>
|
||||
{isMobile ? (
|
||||
<Burger
|
||||
onClick={() => setMobileSidebar(!mobileSidebar)}
|
||||
style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
|
||||
/>
|
||||
) : (
|
||||
<CustomAvatar
|
||||
sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
@ -153,10 +168,10 @@ export default function StartPage() {
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
display: isMobile ? "block" : "flex",
|
||||
}}
|
||||
>
|
||||
<Sidebar />
|
||||
{isMobile ? <SidebarMobile open={mobileSidebar} /> : <Sidebar />}
|
||||
<Box
|
||||
sx={{
|
||||
background: theme.palette.background.default,
|
||||
|
||||
48
src/ui_kit/Modal/ReallyChangingModal/ReallyChangingModal.tsx
Normal file
48
src/ui_kit/Modal/ReallyChangingModal/ReallyChangingModal.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { Box, Button, CSSObject, Modal, Typography } from "@mui/material";
|
||||
import { FC } from "react";
|
||||
|
||||
interface Iprops {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const style: CSSObject = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 620,
|
||||
minHeight: 251,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "24",
|
||||
};
|
||||
|
||||
export const ReallyChangingModal: FC<Iprops> = ({ opened, onClose }) => (
|
||||
<Modal open={opened} onClose={onClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
|
||||
<Box sx={style}>
|
||||
<Box sx={{ background: "#F2F3F7", padding: "20px 21px", borderRadius: "12px 12px 0px 0px" }}>
|
||||
<Typography sx={{ fontSize: "24px", fontWeight: "500", color: "#4D4D4D" }}>Точно меняем?</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography sx={{ fontSize: "18px", marginBottom: "30px" }}>
|
||||
Если поменять формат этого вопроса
|
||||
<span style={{ fontWeight: "500" }}> на Варианты ответов </span>, заполненные поля в этом вопросе пропадут, а
|
||||
условия показа вопросов / результатов, зависимые от него, сбросятся.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Button
|
||||
sx={{ borderRadius: "8px", width: "285px", height: "48px", border: "1px solid #9A9AAF", color: "#9A9AAF" }}
|
||||
>
|
||||
Нет, оставить
|
||||
</Button>
|
||||
<Button sx={{ ml: "10px", width: "285px", height: "48px" }} variant="contained">
|
||||
Да, поменять
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user