alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 15:48:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

updating spinner to be smaller and different colors

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-18 08:59:44 -06:00
parent 3eca338db2
commit 11f9fd81bd
3 changed files with 68 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
View File

@@ -15,6 +15,9 @@ import {
import { Spinner } from "@/components/Spinner"; import { Spinner } from "@/components/Spinner";
import { baseCanvasUrl, canvasApi } from "@/services/canvas/canvasServiceUtils"; import { baseCanvasUrl, canvasApi } from "@/services/canvas/canvasServiceUtils";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks"; import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { getCourseUrl } from "@/services/urlUtils";
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
import Link from "next/link";
export default function EditQuiz({ export default function EditQuiz({
moduleName, moduleName,
@@ -82,39 +85,48 @@ function QuizButtons({
const { data: canvasQuizzes } = useCanvasQuizzesQuery(); const { data: canvasQuizzes } = useCanvasQuizzesQuery();
const { data: quiz } = useQuizQuery(moduleName, quizName); const { data: quiz } = useQuizQuery(moduleName, quizName);
const { data: settings } = useLocalCourseSettingsQuery(); const { data: settings } = useLocalCourseSettingsQuery();
const { courseName } = useCourseContext();
const addToCanvas = useAddQuizToCanvasMutation(); const addToCanvas = useAddQuizToCanvasMutation();
const deleteFromCanvas = useDeleteQuizFromCanvasMutation(); const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName); const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);
return ( return (
<div className="p-5"> <div className="p-5 flex flex-row gap-3 justify-end">
{!quizInCanvas && ( {(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />}
<button {quizInCanvas && !quizInCanvas.published && (
disabled={addToCanvas.isPending} <div className="text-rose-300 my-auto">Not Published</div>
onClick={() => addToCanvas.mutate(quiz)} )}
> {!quizInCanvas && (
Add to canvas.... <button
</button> disabled={addToCanvas.isPending}
)} onClick={() => addToCanvas.mutate(quiz)}
{quizInCanvas && ( >
<a Add to canvas....
className="btn" </button>
target="_blank" )}
href={`${baseCanvasUrl}/courses/${settings.canvasId}/quizzes/${quizInCanvas.id}`} {quizInCanvas && (
> <a
View in Canvas className="btn"
</a> target="_blank"
)} href={`${baseCanvasUrl}/courses/${settings.canvasId}/quizzes/${quizInCanvas.id}`}
{quizInCanvas && ( >
<button View in Canvas
disabled={deleteFromCanvas.isPending} </a>
onClick={() => deleteFromCanvas.mutate(quizInCanvas.id)} )}
> {quizInCanvas && (
Delete from Canvas <button
</button> className="btn-danger"
)} disabled={deleteFromCanvas.isPending}
{(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />} onClick={() => deleteFromCanvas.mutate(quizInCanvas.id)}
>
Delete from Canvas
</button>
)}
<Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
Go Back
</Link>
</div> </div>
); );
} }

4
nextjs/src/components/Spinner.tsx
View File

@@ -3,8 +3,8 @@ import "./spinner.css"
export const Spinner = () => { export const Spinner = () => {
return ( return (
<div className="text-center m-3"> <div className="text-center h-full">
<span className="loader"></span> <span className="loader my-auto "></span>
</div> </div>
); );
}; };

37
nextjs/src/components/spinner.css
View File

@@ -1,17 +1,29 @@
:root {
/* --spinner-size-1: 48px;
--spinner-size-2: 32px; */
--spinner-size-1: 33px;
--spinner-size-2: 22px;
/* --spinner-size-3: 40px; */
--spinner-color-1: #305576;
--spinner-color-2: #714199;
}
.loader { .loader {
width: 48px; width: var(--spinner-size-1);
height: 48px; height: var(--spinner-size-1);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 3px solid; border: 3px solid;
border-color: #6c757d #6c757d transparent transparent; border-color: var(--spinner-color-1) var(--spinner-color-1) transparent
transparent;
box-sizing: border-box; box-sizing: border-box;
animation: rotation 2s linear infinite; animation: rotation 2s linear infinite;
} }
.loader::after, .loader::after,
.loader::before { .loader::before {
content: ''; content: "";
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
left: 0; left: 0;
@@ -20,20 +32,22 @@
bottom: 0; bottom: 0;
margin: auto; margin: auto;
border: 3px solid; border: 3px solid;
border-color: transparent transparent #092565 #092565; border-color: transparent transparent var(--spinner-color-2)
width: 40px; var(--spinner-color-2);
height: 40px; /* width: var(--spinner-size-3);
height: var(--spinner-size-3); */
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
animation: rotationBack 1s linear infinite; animation: rotationBack 1s linear infinite;
transform-origin: center center; transform-origin: center center;
} }
/* #092565 */ /* var(--spinner-color-2) */
/* #3a0647 */ /* #3a0647 */
.loader::before { .loader::before {
width: 32px; width: var(--spinner-size-2);
height: 32px; height: var(--spinner-size-2);
border-color: #6c757d #6c757d transparent transparent; border-color: var(--spinner-color-1) var(--spinner-color-1) transparent
transparent;
animation: rotation 3s linear infinite; animation: rotation 3s linear infinite;
} }
@@ -53,4 +67,3 @@
transform: rotate(-360deg); transform: rotate(-360deg);
} }
} }