CLASSROOMIO-T-84: Redesign of Lesson Tab

CLASSROOMIO-T-84: Unresolved Fix

CLASSROOMIO-T-84: Quick fix

CLASSROOMIO-T-84: Unresolved Fix

Merge branch 'main' into CLASSROOMIO-T-84

CLASSROOMIO-T-84: Redesign of Lesson Tab

CLASSROOMIO-T-84: Tabs Testing


Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>
Co-authored-by: tunny17 <tvnji17@gmail.com>


Merge-request: CLASSROOMIO-MR-39
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Course/components/Lesson/Materials/constants.js

@@ -1,17 +1,22 @@
+import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
+
 export const tabs = [
   {
-    label: 'Slide',
+    label: 'Note',
+    icon: Notebook,
     value: 1,
-    badgeValue: 0,
+    badgeValue: 0
   },
   {
-    label: 'Note',
+    label: 'Slide',
+    icon: PresentationFile,
     value: 2,
-    badgeValue: 0,
+    badgeValue: 0
   },
   {
     label: 'Video',
+    icon: Video,
     value: 3,
-    badgeValue: 0,
-  },
+    badgeValue: 0
+  }
 ];

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -139,39 +139,6 @@
 <Tabs {tabs} {currentTab} {onChange}>
   <slot:fragment slot="content">
     <TabContent value={tabs[0].value} index={currentTab}>
-      {#if mode === MODES.edit}
-        <TextField
-          label="Slide link"
-          bind:value={$lesson.materials.slide_url}
-          onChange={() => ($isLessonDirty = true)}
-        />
-      {:else if $lesson.materials.slide_url}
-        <iframe
-          title="Embeded Slides"
-          src={$lesson.materials.slide_url}
-          frameborder="0"
-          width="100%"
-          height="569"
-          class="iframe"
-          allowfullscreen="true"
-          mozallowfullscreen="true"
-          webkitallowfullscreen="true"
-        />
-      {:else}
-        <Box>
-          <div class="flex justify-between flex-col items-center w-96">
-            <img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
-            <h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
-            <p class="text-sm text-center text-slate-500">
-              Share your knowledge with the world by creating engaging slides. Add your slide's link
-              now.
-            </p>
-          </div>
-        </Box>
-      {/if}
-    </TabContent>
-
-    <TabContent value={tabs[1].value} index={currentTab}>
       {#if mode === MODES.edit}
         <EditContent
           writeLabel="Note"
@@ -233,6 +200,39 @@
       {/if}
     </TabContent>
 
+    <TabContent value={tabs[1].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <TextField
+          label="Slide link"
+          bind:value={$lesson.materials.slide_url}
+          onChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.slide_url}
+        <iframe
+          title="Embeded Slides"
+          src={$lesson.materials.slide_url}
+          frameborder="0"
+          width="100%"
+          height="569"
+          class="iframe"
+          allowfullscreen="true"
+          mozallowfullscreen="true"
+          webkitallowfullscreen="true"
+        />
+      {:else}
+        <Box>
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging slides. Add your slide's link
+              now.
+            </p>
+          </div>
+        </Box>
+      {/if}
+    </TabContent>
+
     <TabContent value={tabs[2].value} index={currentTab}>
       {#if mode === MODES.edit && $lesson.materials.videos.length}
         <PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />