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

style update modal

Browse Source
This commit is contained in:
ArtChaos189 2023-09-07 15:58:10 +03:00
parent 49df352eb6
commit 8044501fc9
3 changed files with 105 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.tsx
View File

@ -6,7 +6,6 @@ import "./index.css";
import { BrowserRouter, Route, Routes } from "react-router-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom";
import lightTheme from "./utils/themes/light"; import lightTheme from "./utils/themes/light";
import { ThemeProvider } from "@mui/material"; import { ThemeProvider } from "@mui/material";
import HorizontalLinearStepper from "./ui_kit/Stepper";
import StartPage from "./pages/startPage/StartPage"; import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"; import Main from "./pages/main";
@ -20,6 +19,8 @@ import MyQuizzes from "./pages/createQuize/MyQuizzes";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull"; import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import ImageCrop from "@ui_kit/Modal/ImageCrop"; import ImageCrop from "@ui_kit/Modal/ImageCrop";
import "./ui_kit/Modal/modal.css";
const routeslink: { path: string; page: JSX.Element; header: boolean; sidebar: boolean }[] = [ const routeslink: { path: string; page: JSX.Element; header: boolean; sidebar: boolean }[] = [
{ path: "/", page: <MyQuizzesFull />, header: false, sidebar: false }, { path: "/", page: <MyQuizzesFull />, header: false, sidebar: false },
{ path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true }, { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },

54
src/ui_kit/Modal/CropModal2.tsx
View File

@ -118,33 +118,6 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
return ( return (
<> <>
{completedCrop && (
<div>
<canvas
ref={previewCanvasRef}
style={{
display: "none",
zIndex: "-999",
border: "1px solid black",
objectFit: "contain",
width: completedCrop.width,
height: completedCrop.height,
}}
/>
</div>
)}
<div>
<a
href="#hidden"
ref={hiddenAnchorRef}
download
style={{
display: "none",
}}
>
Hidden download
</a>
</div>
<Modal <Modal
open={opened} open={opened}
onClose={onClose} onClose={onClose}
@ -272,6 +245,33 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
</Box> </Box>
</Box> </Box>
</Modal> </Modal>
{completedCrop && (
<div>
<canvas
ref={previewCanvasRef}
style={{
display: "none",
zIndex: "-999",
border: "1px solid black",
objectFit: "contain",
width: completedCrop.width,
height: completedCrop.height,
}}
/>
</div>
)}
<div>
<a
href="#hidden"
ref={hiddenAnchorRef}
download
style={{
display: "none",
}}
>
Hidden download
</a>
</div>
</> </>
); );
}; };

76
src/ui_kit/Modal/modal.css Normal file
View File

@ -0,0 +1,76 @@
.ReactCrop__drag-bar,
.ord-e {
background-color: #7e2aea;
}
.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
background-image: none;
}
.ReactCrop__drag-bar.ord-e {
right: 0;
top: 0;
width: 3px;
height: 100%;
margin-right: -3px;
}
.ReactCrop__drag-bar.ord-s {
bottom: 0;
left: 0;
width: 100%;
height: 3px;
margin-bottom: -3px;
}
.ReactCrop__drag-bar.ord-n {
bottom: 0;
left: 0;
width: 100%;
height: 3px;
margin-bottom: -3px;
}
.ReactCrop__drag-bar.ord-w {
top: 0;
left: 0;
width: 3px;
height: 100%;
margin-left: -3px;
}
/* кружочки */
.ReactCrop .ord-nw:after {
background-color: #7e2aea;
}
.ReactCrop .ord-n:after {
background-color: #7e2aea;
}
.ReactCrop .ord-ne:after {
background-color: #7e2aea;
}
.ReactCrop .ord-se:after {
background-color: #7e2aea;
}
.ReactCrop .ord-e:after {
background-color: #7e2aea;
}
.ReactCrop .ord-s:after {
background-color: #7e2aea;
}
.ReactCrop .ord-sw:after {
background-color: #7e2aea;
}
.ReactCrop .ord-w:after {
background-color: #7e2aea;
}
/* кружочки */