move static assests

src/Tools/_framework/Logo.jsx

@@ -6,7 +6,7 @@ import { pageToolViewAtom } from './NewToolRoot';
 
 const LogoButton = styled.button`
   background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
-    url('/media/Doenet_Logo_cloud_only.png');
+    url('./Doenet_Logo_cloud_only.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 50px 25px;

src/Tools/_framework/MenuPanelCaps/AssignmentInfoCap.jsx

@@ -1,47 +1,46 @@
 import React, { useEffect, useState } from 'react';
-import { find_image_label, find_color_label } from './util'
+import { find_image_label, find_color_label } from './util';
 import { useRecoilValue } from 'recoil';
 // import { loadAssignmentSelector } from '../../../_reactComponents/Drive/NewDrive';
 // import { searchParamAtomFamily, pageToolViewAtom } from '../NewToolRoot';
 // import axios from 'axios';
 // import { currentAttemptNumber } from '../ToolPanels/AssignmentViewer';
-import { 
-  // itemByDoenetId, 
-  courseIdAtom, 
-  coursePermissionsAndSettingsByCourseId, 
-  // useCourse 
+import {
+  // itemByDoenetId,
+  courseIdAtom,
+  coursePermissionsAndSettingsByCourseId,
+  // useCourse
 } from '../../../_reactComponents/Course/CourseActions';
 
-
-export default function AssignmentInfoCap(){
+export default function AssignmentInfoCap() {
   const courseId = useRecoilValue(courseIdAtom);
 
   let course = useRecoilValue(coursePermissionsAndSettingsByCourseId(courseId));
 
-if (!course || Object.keys(course).length == 0){
-  return null;
-}
-// let roles = [...course.roleLabels];
-let color = course.color;
-let image = course.image;
-// let label = course.label;
-
-let accessible_name = "course"
+  if (!course || Object.keys(course).length == 0) {
+    return null;
+  }
+  // let roles = [...course.roleLabels];
+  let color = course.color;
+  let image = course.image;
+  // let label = course.label;
 
- if (image != 'none'){
-  accessible_name = find_image_label(image);
-  image = 'url(/media/drive_pictures/' + image + ')';
- }
+  let accessible_name = 'course';
 
- if (color != 'none'){
-  accessible_name = find_color_label(color);
-  color = '#' + color;
- }
+  if (image != 'none') {
+    accessible_name = find_image_label(image);
+    image = 'url(./drive_pictures/' + image + ')';
+  }
+
+  if (color != 'none') {
+    accessible_name = find_color_label(color);
+    color = '#' + color;
+  }
   // let doenetId = useRecoilValue(searchParamAtomFamily('doenetId'));
   // let { page } = useRecoilValue(pageToolViewAtom);
   // const { numberOfAttemptsAllowed } = useRecoilValue(loadAssignmentSelector(doenetId));
   // const recoilAttemptNumber = useRecoilValue(currentAttemptNumber);
-  
+
   // let [courseId,setCourseId] = useState("");
   // let [contentLabel,setContentLabel] = useState("");
   // const { image, label: courseLabel}  = useCourse(courseId);
@@ -62,30 +61,48 @@ let accessible_name = "course"
   //   } else if (page === 'course') {
   //     setContentLabel(itemLabel)
   //   }
-
 
   // },[doenetId, itemLabel, page])
 
-//  let attemptsAllowedDescription = numberOfAttemptsAllowed;
-//  if (!numberOfAttemptsAllowed){
-//   attemptsAllowedDescription = "Unlimited";
-//  }
+  //  let attemptsAllowedDescription = numberOfAttemptsAllowed;
+  //  if (!numberOfAttemptsAllowed){
+  //   attemptsAllowedDescription = "Unlimited";
+  //  }
 
-//  let attemptInfo = null;
-//  if (recoilAttemptNumber){
-//   attemptInfo = <div>{recoilAttemptNumber} out of {attemptsAllowedDescription}</div>
-//  }
+  //  let attemptInfo = null;
+  //  if (recoilAttemptNumber){
+  //   attemptInfo = <div>{recoilAttemptNumber} out of {attemptsAllowedDescription}</div>
+  //  }
   //TODO: image and color defaults
   return (
-  <div>
-    <div style={{ position: "relative", width: "100%", height: "165px", overflow: "hidden"}}>
-      <img aria-label={accessible_name} style={{ position: "absolute", width: "100%", height: "100%", backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: image, backgroundColor: color }}  />
-    </div>
-    <b>Assignment</b>
-    {/* <div style={{ padding:'16px 12px' }}>
+    <div>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '165px',
+          overflow: 'hidden',
+        }}
+      >
+        <img
+          aria-label={accessible_name}
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: image,
+            backgroundColor: color,
+          }}
+        />
+      </div>
+      <b>Assignment</b>
+      {/* <div style={{ padding:'16px 12px' }}>
       <span style={{ marginBottom: "15px" }}>{courseLabel ?? ''}</span> <br />
       <span style={{ marginBottom: "15px" }}>{contentLabel}</span> <br />
       <span>{ attemptInfo }</span>
     </div> */}
-  </div>)
-}
+    </div>
+  );
+}

src/Tools/_framework/MenuPanelCaps/ContentInfoCap.jsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import { itemByDoenetId, courseIdAtom, useCourse, useInitCourseItems } from '../../../_reactComponents/Course/CourseActions';
+import {
+  itemByDoenetId,
+  courseIdAtom,
+  useCourse,
+  useInitCourseItems,
+} from '../../../_reactComponents/Course/CourseActions';
 import { searchParamAtomFamily } from '../NewToolRoot';
-import { find_image_label, find_color_label } from './util'
+import { find_image_label, find_color_label } from './util';
 
-export default function ContentInfoCap(){
+export default function ContentInfoCap() {
   const courseId = useRecoilValue(courseIdAtom);
   const doenetId = useRecoilValue(searchParamAtomFamily('doenetId'));
-  let {color, image, label:course_label} = useCourse(courseId);
+  let { color, image, label: course_label } = useCourse(courseId);
   // const {getDataAndSetRecoil} = useInitCourseItems(courseId);
 
   const activityInfo = useRecoilValue(itemByDoenetId(doenetId));
@@ -16,36 +21,62 @@ export default function ContentInfoCap(){
   //   getDataAndSetRecoil(courseId);
   // }
 
-// console.log("activityInfo",activityInfo);
+  // console.log("activityInfo",activityInfo);
 
-  let accessible_name = "course";
+  let accessible_name = 'course';
 
-  if (!image){ return null;}
+  if (!image) {
+    return null;
+  }
 
- if (image != 'none'){
-  accessible_name = find_image_label(image);
-  image = 'url(/media/drive_pictures/' + image + ')';
- }
- if (color != 'none'){
-  accessible_name = find_color_label(color);
-  color = '#' + color;
- }
+  if (image != 'none') {
+    accessible_name = find_image_label(image);
+    image = 'url(./drive_pictures/' + image + ')';
+  }
+  if (color != 'none') {
+    accessible_name = find_color_label(color);
+    color = '#' + color;
+  }
 
+  let activityPageJSX = (
+    <>
+      <div style={{ marginBottom: '1px', marginTop: '5px' }}>Activity</div>
+      <div style={{ marginBottom: '5px', padding: '1px 5px' }}>
+        {activityInfo?.label}
+      </div>
+    </>
+  );
 
- let activityPageJSX = <>
-  <div style={{ marginBottom: "1px", marginTop:"5px" }}>Activity</div> 
-  <div style={{ marginBottom: "5px",padding:'1px 5px' }}>{activityInfo?.label}</div> 
-  </>
-
-
-  return <>
-    <div style={{ position: "relative", width: "100%", height: "165px", overflow: "hidden"}}>
-      <img aria-label={accessible_name} style={{ position: "absolute", width: "100%", height: "100%", backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: image, backgroundColor: color }}  />
-    </div>
-      <div style={{ marginBottom: "1px", marginTop:"5px" }}>Course</div> 
-      <div style={{ marginBottom: "5px",padding:'1px 5px' }}>{course_label}</div> 
+  return (
+    <>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '165px',
+          overflow: 'hidden',
+        }}
+      >
+        <img
+          aria-label={accessible_name}
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: image,
+            backgroundColor: color,
+          }}
+        />
+      </div>
+      <div style={{ marginBottom: '1px', marginTop: '5px' }}>Course</div>
+      <div style={{ marginBottom: '5px', padding: '1px 5px' }}>
+        {course_label}
+      </div>
       {activityPageJSX}
-    {/* <ClipboardLinkButtons doenetId={doenetId}/> */}
-    {/* <div>Last saved (comming soon)</div> */}
-  </>
-}
+      {/* <ClipboardLinkButtons doenetId={doenetId}/> */}
+      {/* <div>Last saved (comming soon)</div> */}
+    </>
+  );
+}

src/Tools/_framework/MenuPanelCaps/DataCap.jsx

@@ -1,48 +1,68 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import {  coursePermissionsAndSettingsByCourseId } from '../../../_reactComponents/Course/CourseActions';
+import { coursePermissionsAndSettingsByCourseId } from '../../../_reactComponents/Course/CourseActions';
 import { searchParamAtomFamily } from '../NewToolRoot';
 import { find_image_label, find_color_label } from './util';
 
-export default function DataCap(){
+export default function DataCap() {
   const courseId = useRecoilValue(searchParamAtomFamily('courseId'));
   const tool = useRecoilValue(searchParamAtomFamily('tool'));
   let course = useRecoilValue(coursePermissionsAndSettingsByCourseId(courseId));
 
-if (!course || Object.keys(course).length == 0){
-  return null;
-}
-let color = course.color;
-let image = course.image;
-let label = course.label;
+  if (!course || Object.keys(course).length == 0) {
+    return null;
+  }
+  let color = course.color;
+  let image = course.image;
+  let label = course.label;
+
+  let accessible_name = 'course';
 
-let accessible_name = "course";
-
- if (image != 'none'){
-  accessible_name = find_image_label(image);
-  image = 'url(/media/drive_pictures/' + image + ')';
- }
- if (color != 'none'){
-  accessible_name = find_color_label(color);
-  color = '#' + color;
- }
+  if (image != 'none') {
+    accessible_name = find_image_label(image);
+    image = 'url(./drive_pictures/' + image + ')';
+  }
+  if (color != 'none') {
+    accessible_name = find_color_label(color);
+    color = '#' + color;
+  }
 
- let toolText = ""
- if (tool == "navigation"){
-   toolText = "Course Navigation"
- }else if (tool == "dashboard"){
-   toolText = "Dashboard"
- }else if (tool == "data"){
-    toolText = "Data"
- }
-
- return <>
-    <div style={{ position: "relative", width: "100%", height: "165px", overflow: "hidden"}}>
-      <img aria-label={accessible_name} style={{ position: "absolute", width: "100%", height: "100%", backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: image, backgroundColor: color }}  />
-    </div>
-    <b>{toolText}</b>
-    <div style={{ padding:'16px 12px' }}>
-      <span style={{ marginBottom: "15px" }}>{label}</span> <br />
-    </div>
-  </>
-}
+  let toolText = '';
+  if (tool == 'navigation') {
+    toolText = 'Course Navigation';
+  } else if (tool == 'dashboard') {
+    toolText = 'Dashboard';
+  } else if (tool == 'data') {
+    toolText = 'Data';
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '165px',
+          overflow: 'hidden',
+        }}
+      >
+        <img
+          aria-label={accessible_name}
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: image,
+            backgroundColor: color,
+          }}
+        />
+      </div>
+      <b>{toolText}</b>
+      <div style={{ padding: '16px 12px' }}>
+        <span style={{ marginBottom: '15px' }}>{label}</span> <br />
+      </div>
+    </>
+  );
+}