ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-84: Redesign of Lesson Tab

Browse Source
This commit is contained in:
tunny17
2023-08-10 00:35:45 +01:00
parent 392237cd53
commit e3194f950b
2 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Course/components/Lesson/Materials/index.svelte
+33 -33
View File
@@ -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/Tabs/index.svelte
+22 -6
View File
@@ -1,26 +1,42 @@
<script>
import Chip from '../Chip/index.svelte';
import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
export let tabs = [];
export let currentTab;
export let onChange;
</script>
<div class="w-full flex flex-col">
<div class="flex items-center">
<div class="flex items-center border-b-2 w-full">
{#each tabs as tab}
<button
class="relative {currentTab === tab.value
? 'text-blue-500 font-semibold dark:bg-gray-700'
: 'dark:bg-gray-500'} focus:outline-none w-32 text-left p-3"
? '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 tab.value === 1}
<div class="grid grid-cols-3 gap-4 items-center">
<Notebook />
{tab.label}
</div>
{:else if tab.value === 2}
<div class="grid grid-cols-3 gap-4 items-center">
<PresentationFile />
{tab.label}
</div>
{:else}
<div class="grid grid-cols-3 gap-4 items-center">
<Video />
{tab.label}
</div>
{/if}
<!-- {tab.label} -->
<!-- {#if typeof tab.badgeValue === 'number'}
<Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
{/if} -->
{#if currentTab === tab.value}
<span class="absolute w-2/4 bottom-0 left-0 h-1 bg-blue-500" />
<span class="absolute w-full bottom-0 left-0 h-1 bg-blue-500 rounded-md" />
{/if}
</button>
{/each}