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>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Tunji Adeyemi
Tunji Adeyemi
parent
e41b5960b8
commit
ef29fb575f
@@ -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
|
||||
}
|
||||
];
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 ===
|
||||
tab.value
|
||||
? 'text-black font-bold bg-gray-100 dark:bg-gray-700'
|
||||
: 'bg-gray-200 dark:bg-gray-500 text-gray'} focus:outline-none w-40 text-left p-3"
|
||||
class="relative {currentTab === tab.value
|
||||
? 'text-blue-500 dark:bg-gray-700'
|
||||
: 'dark:bg-gray-500 text-black'} font-semibold focus:outline-none w-16 text-left py-3 mr-10"
|
||||
on:click={onChange(tab.value)}
|
||||
>
|
||||
{tab.label}
|
||||
{#if typeof tab.badgeValue === 'number'}
|
||||
<Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
|
||||
{/if}
|
||||
<div class="grid grid-cols-3 gap-4 items-center">
|
||||
<svelte:component this={tab.icon} />
|
||||
{tab.label}
|
||||
</div>
|
||||
|
||||
{#if currentTab === tab.value}
|
||||
<span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />
|
||||
{/if}
|
||||
<!-- {#if typeof tab.badgeValue === 'number'}
|
||||
<Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
|
||||
{/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>
|
||||
|
||||
Reference in New Issue
Block a user