From 76324bc257c10a2dd5d0203b73792f34aa13c219 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 24 Apr 2023 22:51:33 +0200
Subject: [PATCH] feat: improve chapters and courses indicators

---
 .../[courseid]/activity/[activityid]/page.tsx | 32 ++++++++-------
 .../(withmenu)/course/[courseid]/page.tsx     | 40 ++++++++++++-------
 front/components/Editor/Editor.tsx            |  1 -
 .../Editor/Toolbar/ToolbarButtons.tsx         |  2 +-
 front/components/UI/Tooltip/Tooltip.tsx       | 22 +++++++---
 5 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
index 98df7ec9..92591a79 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
@@ -5,13 +5,14 @@ import React, { useMemo } from "react";
 import { getActivity } from "@services/courses/activities";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
 import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
-import styled from "styled-components"; 
+import styled from "styled-components";
 import { getCourse } from "@services/courses/courses";
 import VideoActivity from "@components/Pages/Activities/Video/Video";
 import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { markActivityAsComplete } from "@services/courses/activity";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 function ActivityPage(params: any) {
   const activityid = params.params.activityid;
@@ -37,7 +38,7 @@ function ActivityPage(params: any) {
         <ActivityLayout>
           <ActivityTopWrapper>
             <ActivityThumbnail>
-              <Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}`}>
+              <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
                 <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
               </Link>
             </ActivityThumbnail>
@@ -53,11 +54,14 @@ function ActivityPage(params: any) {
                   <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
                     {chapter.activities.map((activity: any) => {
                       return (
-                        <>
-                          <Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                            <ChapterIndicator key={activity.id} />
-                          </Link>{" "}
-                        </>
+                        <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
+                          <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
+                            <ChapterIndicator
+                              done={course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
+                              active={"activity_" + activityid === activity.id ? true : false} key={activity.id}
+                            />
+                          </Link>
+                        </ToolTip>
                       );
                     })}
                   </div>
@@ -74,10 +78,10 @@ function ActivityPage(params: any) {
               {activity.type == "video" && <VideoActivity course={course} activity={activity} />}
 
               <ActivityMarkerWrapper>
-                
+
                 {course.trail.activities_marked_complete &&
-                course.trail.activities_marked_complete.includes("activity_" + activityid) &&
-                course.trail.status == "ongoing" ? (
+                  course.trail.activities_marked_complete.includes("activity_" + activityid) &&
+                  course.trail.status == "ongoing" ? (
                   <button style={{ backgroundColor: "green" }}>
                     <i>
                       <Check size={20}></Check>
@@ -131,28 +135,26 @@ const ChaptersWrapper = styled.div`
   display: flex;
   // row
   flex-direction: row;
-  justify-content: space-around;
   width: 100%;
   width: 1300px;
   margin: 0 auto;
 `;
 
-const ChapterIndicator = styled.div`
+const ChapterIndicator = styled.div < { active?: boolean, done?: boolean } > `
   border-radius: 20px;
   height: 5px;
   background: #151515;
   border-radius: 3px;
 
   width: 35px;
-  background-color: black;
+  background-color: ${props => props.done ? "green" : (props.active ? "#9d9d9d" : "black")};
   margin: 10px;
   margin-bottom: 0px;
   margin-left: 0px;
-  transition: all 0.2s ease;
 
   &:hover {
-    width: 50px;
     cursor: pointer;
+    background-color: #9d9d9d;
   }
 `;
 
diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
index f098e2b6..b896e1da 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
@@ -8,12 +8,13 @@ import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { useRouter } from "next/navigation";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 const CourseIdPage = (params: any) => {
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
   const router = useRouter();
-  
+
   const { data: course, error: error } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`,
     (url: string, body: any) => swrFetcher(url, body, router)
   );
@@ -54,18 +55,22 @@ const CourseIdPage = (params: any) => {
           <ChaptersWrapper>
             {course.chapters.map((chapter: any) => {
               return (
-                <>
+                <ChapterSeparator key={chapter}>
                   {chapter.activities.map((activity: any) => {
                     return (
                       <>
-                        <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                          <ChapterIndicator />
-                        </Link>{" "}
+                        <ToolTip sideOffset={-18} slateBlack content={activity.name}>
+                          <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
+                          <CourseIndicator
+                              done={course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
+                             />
+                          </Link>
+                        </ToolTip>
+                        
                       </>
                     );
                   })}
-                  &nbsp;&nbsp;&nbsp;&nbsp;
-                </>
+                </ChapterSeparator>
               );
             })}
           </ChaptersWrapper>
@@ -93,12 +98,12 @@ const CourseIdPage = (params: any) => {
                 {course.chapters.map((chapter: any) => {
                   return (
                     <>
-                      <h3>Chapter : {chapter.name}</h3>
+                      <h3>{chapter.name}</h3>
                       {chapter.activities.map((activity: any) => {
                         return (
                           <>
                             <p>
-                              Activity {activity.name}
+                              {activity.name}
                               <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
                                 <EyeOpenIcon />
                               </Link>{" "}
@@ -161,28 +166,33 @@ const CoursePageLayout = styled.div`
 
 const ChaptersWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
   width: 100%;
 `;
-const ChapterIndicator = styled.div`
+const CourseIndicator = styled.div< { active?: boolean, done?: boolean } >`
   border-radius: 20px;
   height: 5px;
   background: #151515;
   border-radius: 3px;
 
-  width: 35px;
-  background-color: black;
+  background-color: ${props => props.done ? "green" : "black"};
+
+  width: 40px;
   margin: 10px;
   margin-bottom: 20px;
   margin-left: 0px;
-  transition: all 0.2s ease;
 
   &:hover {
-    width: 50px;
     cursor: pointer;
+    background-color: #9d9d9d;
   }
 `;
 
+const ChapterSeparator = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding-right: 7px;
+`;
+
 const BoxWrapper = styled.div`
   background: #ffffff;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx
index 455f1a71..8f46b34a 100644
--- a/front/components/Editor/Editor.tsx
+++ b/front/components/Editor/Editor.tsx
@@ -20,7 +20,6 @@ import Youtube from "@tiptap/extension-youtube";
 import VideoBlock from "./Extensions/Video/VideoBlock";
 import { Save } from "lucide-react";
 import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
-import PDFBlockComponent from "./Extensions/PDF/PDFBlockComponent";
 import PDFBlock from "./Extensions/PDF/PDFBlock";
 import QuizBlock from "./Extensions/Quiz/QuizBlock";
 
diff --git a/front/components/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Editor/Toolbar/ToolbarButtons.tsx
index 3230a6a9..865342ca 100644
--- a/front/components/Editor/Toolbar/ToolbarButtons.tsx
+++ b/front/components/Editor/Toolbar/ToolbarButtons.tsx
@@ -56,7 +56,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         <option value="6">Heading 6</option>
       </ToolSelect>
       {/* TODO: fix this : toggling only works one-way */}
-      <DividerVerticalIcon style={{margin:"auto", color : "grey"}}/>
+      <DividerVerticalIcon style={{marginTop:"auto", marginBottom:"auto", color : "grey"}}/>
       <ToolTip content={"Info Callout"}>
         <ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutInfo").run()}>
           <AlertCircle size={15} />
diff --git a/front/components/UI/Tooltip/Tooltip.tsx b/front/components/UI/Tooltip/Tooltip.tsx
index 56b6ae7e..c2291a3d 100644
--- a/front/components/UI/Tooltip/Tooltip.tsx
+++ b/front/components/UI/Tooltip/Tooltip.tsx
@@ -5,22 +5,24 @@ import { violet, blackA } from '@radix-ui/colors';
 import { PlusIcon } from '@radix-ui/react-icons';
 
 
-type TooltipParams = {
+type TooltipProps = {
     sideOffset?: number;
     content: React.ReactNode;
     children: React.ReactNode;
+    slateBlack?: boolean;
 };
 
-const ToolTip = (params: TooltipParams) => {
+const ToolTip = (props: TooltipProps) => {
+  
   return (
     <Tooltip.Provider delayDuration={200}>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          {params.children}
+          {props.children}
         </Tooltip.Trigger>
         <Tooltip.Portal>
-          <TooltipContent side="bottom" sideOffset={params.sideOffset}>
-            {params.content}
+          <TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
+            {props.content}
             <TooltipArrow />
           </TooltipContent>
         </Tooltip.Portal>
@@ -55,6 +57,16 @@ const closeAndFade = keyframes({
 });
 
 const TooltipContent = styled(Tooltip.Content, {
+
+  variants : {
+    slateBlack: {
+      true: {
+        backgroundColor:" #5a5a5a",
+        color: 'white',
+      },
+    },
+  },
+
   borderRadius: 4,
   padding: '5px 10px',
   fontSize: 12,