mirror of
https://github.com/alexmickelson/canvasManagement.git
synced 2026-03-25 23:28:33 -06:00
who knows how long i have not been pushing...
This commit is contained in:
31
src/app/course/[courseName]/calendar/day/DayItemTooltip.tsx
Normal file
31
src/app/course/[courseName]/calendar/day/DayItemTooltip.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
export const DayItemTooltip: React.FC<{
|
||||
message: ReactNode;
|
||||
targetRef: React.RefObject<HTMLAnchorElement | null>;
|
||||
visible: boolean;
|
||||
}> = ({ message, targetRef, visible }) => {
|
||||
const rect = targetRef.current?.getBoundingClientRect();
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
style={{
|
||||
top: (rect?.bottom ?? 0) + window.scrollY + 10,
|
||||
left: (rect?.left ?? 0) + window.scrollX + (rect?.width ?? 0) / 2,
|
||||
}}
|
||||
className={
|
||||
" absolute -translate-x-1/2 " +
|
||||
" bg-gray-800 text-white text-sm " +
|
||||
" rounded py-1 px-2 " +
|
||||
" transition-all duration-400 " +
|
||||
" border border-slate-700 shadow-[0_0px_10px_0px] shadow-slate-500/50 " +
|
||||
(visible ? " " : " hidden -z-50 ")
|
||||
}
|
||||
role="tooltip"
|
||||
>
|
||||
{message}
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
@@ -1,15 +1,12 @@
|
||||
import { IModuleItem } from "@/models/local/IModuleItem";
|
||||
import { getModuleItemUrl } from "@/services/urlUtils";
|
||||
import Link from "next/link";
|
||||
import { ReactNode, useEffect, useRef, useState } from "react";
|
||||
import { ReactNode, useRef, useState } from "react";
|
||||
import { useCourseContext } from "../../context/courseContext";
|
||||
import {
|
||||
useDraggingContext,
|
||||
DraggableItem,
|
||||
} from "../../context/drag/draggingContext";
|
||||
import { createPortal } from "react-dom";
|
||||
import { DraggableItem } from "../../context/drag/draggingContext";
|
||||
import ClientOnly from "@/components/ClientOnly";
|
||||
import { useDragStyleContext } from "../../context/drag/dragStyleContext";
|
||||
import { DayItemTooltip } from "./DayItemTooltip";
|
||||
|
||||
export function ItemInDay({
|
||||
type,
|
||||
@@ -53,8 +50,7 @@ export function ItemInDay({
|
||||
"draggableItem",
|
||||
JSON.stringify(draggableItem)
|
||||
);
|
||||
setIsDragging(true)
|
||||
|
||||
setIsDragging(true);
|
||||
}}
|
||||
onMouseEnter={() => setTooltipVisible(true)}
|
||||
onMouseLeave={() => setTooltipVisible(false)}
|
||||
@@ -63,7 +59,7 @@ export function ItemInDay({
|
||||
{item.name}
|
||||
</Link>
|
||||
<ClientOnly>
|
||||
<Tooltip
|
||||
<DayItemTooltip
|
||||
message={message}
|
||||
targetRef={linkRef}
|
||||
visible={tooltipVisible && status === "incomplete"}
|
||||
@@ -72,32 +68,3 @@ export function ItemInDay({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Tooltip: React.FC<{
|
||||
message: ReactNode;
|
||||
targetRef: React.RefObject<HTMLElement>;
|
||||
visible: boolean;
|
||||
}> = ({ message, targetRef, visible }) => {
|
||||
const rect = targetRef.current?.getBoundingClientRect();
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
style={{
|
||||
top: (rect?.bottom ?? 0) + window.scrollY + 10,
|
||||
left: (rect?.left ?? 0) + window.scrollX + (rect?.width ?? 0) / 2,
|
||||
}}
|
||||
className={
|
||||
" absolute -translate-x-1/2 " +
|
||||
" bg-gray-800 text-white text-sm " +
|
||||
" rounded py-1 px-2 " +
|
||||
" transition-all duration-400 " +
|
||||
" border border-slate-700 shadow-[0_0px_10px_0px] shadow-slate-500/50 " +
|
||||
(visible ? " " : " hidden -z-50 ")
|
||||
}
|
||||
role="tooltip"
|
||||
>
|
||||
{message}
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
|
||||
@@ -109,11 +109,12 @@ export const useUpdateAssignmentMutation = () => {
|
||||
previousModuleName,
|
||||
}
|
||||
) => {
|
||||
if (moduleName !== previousModuleName)
|
||||
if (moduleName !== previousModuleName) {
|
||||
utils.assignment.getAllAssignments.invalidate({
|
||||
courseName,
|
||||
moduleName: previousModuleName,
|
||||
});
|
||||
}
|
||||
utils.assignment.getAllAssignments.invalidate({ courseName, moduleName });
|
||||
utils.assignment.getAssignment.invalidate({
|
||||
courseName,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import { marked } from "marked";
|
||||
import * as DOMPurify from "isomorphic-dompurify";
|
||||
import DOMPurify from "isomorphic-dompurify";
|
||||
import { LocalCourseSettings } from "@/models/local/localCourseSettings";
|
||||
|
||||
export function extractImageSources(htmlString: string) {
|
||||
|
||||
@@ -90,7 +90,7 @@ export const assignmentRouter = router({
|
||||
assignment.name !== previousAssignmentName ||
|
||||
moduleName !== previousModuleName
|
||||
) {
|
||||
fileStorageService.assignments.delete({
|
||||
await fileStorageService.assignments.delete({
|
||||
courseName,
|
||||
moduleName: previousModuleName,
|
||||
assignmentName: previousAssignmentName,
|
||||
|
||||
@@ -81,7 +81,7 @@ export const pageRouter = router({
|
||||
page.name !== previousPageName ||
|
||||
moduleName !== previousModuleName
|
||||
) {
|
||||
fileStorageService.pages.delete({
|
||||
await fileStorageService.pages.delete({
|
||||
courseName,
|
||||
moduleName: previousModuleName,
|
||||
pageName: previousPageName,
|
||||
|
||||
@@ -84,7 +84,7 @@ export const quizRouter = router({
|
||||
quiz.name !== previousQuizName ||
|
||||
moduleName !== previousModuleName
|
||||
) {
|
||||
fileStorageService.quizzes.delete({
|
||||
await fileStorageService.quizzes.delete({
|
||||
courseName,
|
||||
moduleName: previousModuleName,
|
||||
quizName: previousQuizName,
|
||||
|
||||
Reference in New Issue
Block a user