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

@@ -141,39 +141,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"
@@ -235,6 +202,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 && videoUrls.length}
         <PrimaryButton label="Add/Edit Video" onClick={openAddVideoModal} className="mb-2" />

src/lib/components/Navigation/app.svelte

@@ -36,7 +36,7 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-500">
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
       {#if isCoursePage}

src/lib/components/Tabs/index.svelte

@@ -1,28 +1,33 @@
 <script>
-  import Chip from '../Chip/index.svelte';
   export let tabs = [];
   export let currentTab;
   export let onChange;
 </script>
 
 <div class="w-full flex flex-col">
-  <div class="flex items-center justify-center">
+  <div class="flex items-center border-b-2 w-full">
     {#each tabs as tab}
       <button
-        class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
+        class="relative {currentTab === tab.value
-        tab.value
+          ? 'text-blue-500 dark:bg-gray-700'
-          ? 'text-black font-bold bg-gray-100 dark:bg-gray-700'
+          : 'dark:bg-gray-500 text-black'} font-semibold focus:outline-none w-16 text-left py-3 mr-10"
-          : 'bg-gray-200 dark:bg-gray-500 text-gray'} focus:outline-none w-40 text-left p-3"
         on:click={onChange(tab.value)}
       >
-        {tab.label}
+        <div class="grid grid-cols-3 gap-4 items-center">
-        {#if typeof tab.badgeValue === 'number'}
+          <svelte:component this={tab.icon} />
-          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
+          {tab.label}
-        {/if}
+        </div>
 
-        {#if currentTab === tab.value}
+        <!-- {#if typeof tab.badgeValue === 'number'}
-          <span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />
+          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
-        {/if}
+        {/if} -->
+
+        <span
+          class="absolute bottom-0 left-0 h-1 bg-blue-500 rounded-md transition-all ease-in-out duration-500 {currentTab ===
+          tab.value
+            ? 'w-full'
+            : 'w-0'}"
+        />
       </button>
     {/each}
   </div>