Merge pull request #330 from EscolaLMS/feature/SPRAW-75

Add autoscroll to nerest topic element.
EscolaLMS · Mar 4, 2024 · 2d83b0b · 2d83b0b
2 parents 8cc6066 + aa9d7e8
commit 2d83b0b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/src/components/atoms/ProgressBar/ProgressBar.tsx b/src/components/atoms/ProgressBar/ProgressBar.tsx
@@ -6,16 +6,24 @@ import { ExtendableStyledComponent } from "types/component";
 import { getFontFromTheme } from "../../../theme/provider";
 import { calcPercentage, getStylesBasedOnTheme } from "../../../utils/utils";
 
+const VariantTypes = {
+  ROUNDED: "rounded",
+  SQUARE: "square",
+} as const;
+
+type VariantTypeProp = typeof VariantTypes[keyof typeof VariantTypes];
+
 export interface ProgressBarProps
   extends React.HTMLAttributes<HTMLDivElement>,
     ExtendableStyledComponent {
+  variant?: VariantTypeProp;
   hideLabel?: boolean;
   label?: string | React.ReactNode;
   currentProgress: number;
   maxProgress: number;
 }
 
-const StyledDiv = styled.div`
+const StyledDiv = styled.div<{ $variant?: VariantTypeProp }>`
   margin: 0;
   padding: 0;
   color: ${({ theme }) =>
@@ -33,16 +41,17 @@ const StyledDiv = styled.div`
 
     .label-value {
       width: 95%;
+      font-size: 13px;
     }
 
     .percentage-value {
-      font-size: 14px;
+      font-size: 13px;
       margin-left: auto;
       height: 22px;
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      font-weight: bold;
+      font-weight: ${({ $variant }) => $variant === VariantTypes.SQUARE ? 'bold' : 'normal'};
       width: 5%;
     }
   }
@@ -57,12 +66,13 @@ const StyledDiv = styled.div`
     align-items: center;
     .progress-bars {
       flex: 1;
-      height: 3px;
+      height: ${({ $variant }) => $variant === VariantTypes.SQUARE ? '3px' : '6px'};
       position: relative;
       .empty {
         display: block;
         background: ${({ theme }) => theme.positive2};
         height: 100%;
+        border-radius: ${({ $variant }) => $variant === VariantTypes.ROUNDED ? '5px' : ''};
       }
       .filled {
         position: absolute;
@@ -71,6 +81,7 @@ const StyledDiv = styled.div`
         display: block;
         height: 100%;
         transition: 0.2s width ease-in-out;
+        border-radius: ${({ $variant }) => $variant === VariantTypes.ROUNDED ? '5px' : ''};
       }
     }
   }
@@ -79,6 +90,7 @@ const StyledDiv = styled.div`
 export const ProgressBar: React.FC<ProgressBarProps> = (props) => {
   const { t } = useTranslation();
   const {
+    variant = VariantTypes.ROUNDED,
     currentProgress,
     maxProgress,
     hideLabel,
@@ -102,6 +114,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = (props) => {
     <StyledDiv
       {...props}
       className={`wellms-component lms-progress-bar ${className}`}
+      $variant={variant}
     >
       <div className="label-container">
         {renderLabel()}

diff --git a/src/components/molecules/CourseTopNav/CourseTopNav.tsx b/src/components/molecules/CourseTopNav/CourseTopNav.tsx
@@ -34,6 +34,7 @@ export interface CourseTopNavProps
   onNext: () => void;
   onPrev: () => void;
   onFinish: () => void;
+  allButtonsDisabled?: boolean;
   isMarkBtnDisabled?: boolean;
   currentNote?: NoteData;
   newNoteData?: NewNoteData;
@@ -104,6 +105,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
     isLast = false,
     hasNext = true,
     hasPrev = true,
+    allButtonsDisabled = false,
     onNext,
     onPrev,
     onFinish,
@@ -128,7 +130,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
           mode={"primary"}
           className="icon-btn next-btn"
           onClick={() => onNext && onNext()}
-          disabled={!hasNext}
+          disabled={!hasNext || allButtonsDisabled}
           aria-label={t<string>("Actions.ShowNext")}
         >
           {!mobile && <>{t<string>("CourseTopNav.next")} </>}
@@ -146,6 +148,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
             }
           }}
           aria-label={t("Course.finishCourse")}
+          disabled={allButtonsDisabled}
         >
           {t("Course.finishCourse")}
         </Button>
@@ -160,15 +163,15 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
             onFinish && onFinish();
           }}
           aria-label={t("Course.markAsFinished")}
-          disabled={isMarkBtnDisabled}
+          disabled={isMarkBtnDisabled || allButtonsDisabled}
         >
           <Icon name="finished" />
           {t("Course.markAsFinished")}
         </Button>
       );
     }
     return <></>;
-  }, [isFinished, t, onFinish, mobile, isLast]);
+  }, [isFinished, t, onFinish, mobile, isLast, allButtonsDisabled]);
 
   const renderNoteButton = React.useCallback(() => {
     return (
@@ -177,12 +180,13 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
         className="icon-btn"
         onClick={() => setShowNoteModal(true)}
         aria-label={t("CourseTopNav.addNote")}
+        disabled={allButtonsDisabled}
       >
         <Icon name="note" />
         {t("CourseTopNav.addNote")}
       </Button>
     );
-  }, [mobile, t, setShowNoteModal]);
+  }, [mobile, t, setShowNoteModal, allButtonsDisabled]);
 
   const renderBookmarkButton = React.useCallback(() => {
     return (
@@ -191,12 +195,13 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
         className="icon-btn"
         onClick={() => onBookmarkClick && onBookmarkClick()}
         aria-label={t(`CourseTopNav.${bookmarkBtnText}`)}
+        disabled={allButtonsDisabled}
       >
         <Icon name="bookmark" />
         {t(`CourseTopNav.${bookmarkBtnText}`)}
       </Button>
     );
-  }, [mobile, onBookmarkClick, bookmarkBtnText]);
+  }, [mobile, onBookmarkClick, bookmarkBtnText, allButtonsDisabled]);
 
   return (
     <>
@@ -216,7 +221,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
             className="icon-btn prev-btn"
             mode="gray"
             onClick={() => onPrev && onPrev()}
-            disabled={!hasPrev}
+            disabled={!hasPrev || allButtonsDisabled}
             aria-label={t<string>("Actions.ShowPrevious")}
           >
             <Icon name="chevronLeft" />

diff --git a/src/components/organisms/CourseAgenda/_components/CourseAgendaTopic.tsx b/src/components/organisms/CourseAgenda/_components/CourseAgendaTopic.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { API } from "@escolalms/sdk/lib";
 import { ThemeContext } from "styled-components";
 
@@ -13,10 +13,10 @@ export interface CourseAgendaTopicProps {
 }
 
 enum StateTypes {
-  CURRENT = 'current',
-  AVAILABLE = 'available',
-  FINISHED = 'finished',
-  LOCKED = 'locked',
+  CURRENT = "current",
+  AVAILABLE = "available",
+  FINISHED = "finished",
+  LOCKED = "locked",
 }
 
 const TopicIcon: React.FC<{ state: StateTypes }> = ({ state }) => {
@@ -29,7 +29,7 @@ const TopicIcon: React.FC<{ state: StateTypes }> = ({ state }) => {
     case StateTypes.AVAILABLE:
       return <></>;
     default:
-      return <Icon name='lock' />;
+      return <Icon name="lock" />;
   }
 };
 
@@ -41,8 +41,9 @@ const CourseAgendaTopic: React.FC<CourseAgendaTopicProps> = ({
     onTopicClick,
     finishedTopicIds,
     currentNotLockedTopicId,
-    availableTopicsIds
+    availableTopicsIds,
   } = useCourseAgendaContext();
+  const ref = useRef<HTMLLIElement | null>(null);
 
   const isFinished = useMemo(
     () => finishedTopicIds.includes(topic.id),
@@ -53,6 +54,15 @@ const CourseAgendaTopic: React.FC<CourseAgendaTopicProps> = ({
     [currentNotLockedTopicId, topic.id]
   );
 
+  useEffect(() => {
+    if (isCurrent) {
+      ref?.current?.scrollIntoView({
+        behavior: "smooth",
+        block: 'nearest',
+      });
+    }
+  }, [ref?.current, isCurrent]);
+
   const state: StateTypes = useMemo(() => {
     if (isCurrent) {
       return StateTypes.CURRENT;
@@ -74,7 +84,7 @@ const CourseAgendaTopic: React.FC<CourseAgendaTopicProps> = ({
   }, [isCurrent, state]);
 
   return (
-    <li className={`lesson__topic lesson__topic--${state}`}>
+    <li ref={ref} className={`lesson__topic lesson__topic--${state}`}>
       <div
         className="lesson__description"
         tabIndex={clickable ? 0 : -1}