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

CLASSROOMIO-T-206:clicking the send icon opens the appside bar

Browse Source 
CLASSROOMIO-T-206:Updated the code

Merge branch 'main' into CLASSROOMIO-T-206

CLASSROOMIO-T-206:Clicking the send Icon opens the appside bar

CLASSROOMIO-T-206:Wroking on the icon


Co-authored-by: Ifeanyi Nwosu <[email protected]>


Merge-request: CLASSROOMIO-MR-89
Merged-by: Best Admin <[email protected]>
This commit is contained in:
emmanuel
2023-10-06 12:49:40 +00:00
committed by Space Cloud
parent c0bf45283e
commit 367c1f968d
5 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Apps/index.svelte
+30 -20
View File
@@ -16,7 +16,6 @@
import APPS_CONSTANTS from './constants'; import APPS_CONSTANTS from './constants';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
let selectedApp;
let resize = false; let resize = false;
let isDragging = false; let isDragging = false;
let startX; let startX;
@@ -24,6 +23,8 @@
let appBarRef; let appBarRef;
let appContentRef; let appContentRef;
let topPadding = $apps.isStudent ? '48px' : '109px';
const getResizableSidebar = () => { const getResizableSidebar = () => {
if (!browser) return; if (!browser) return;
@@ -31,31 +32,33 @@
}; };
function handleClose() { function handleClose() {
selectedApp = null; $apps.selectedApp = null;
if (getResizableSidebar()) { if (getResizableSidebar()) {
appBarRef.style.width = '60px'; appBarRef.style.width = '60px';
} else if (!getResizableSidebar() && $apps.isStudent) {
$apps.open = false;
} }
} }
function handleAppClick(appName) { function handleAppClick(appName) {
if (!selectedApp && getResizableSidebar()) { if (!$apps.selectedApp && getResizableSidebar()) {
if (window.innerWidth <= 1024) { if (window.innerWidth <= 1024) {
appBarRef.style.width = '300px'; appBarRef.style.width = '300px';
} else { } else {
appBarRef.style.width = '500px'; appBarRef.style.width = '500px';
} }
} }
if (appName === selectedApp) { if (appName === $apps.selectedApp) {
handleClose(); handleClose();
} else { } else {
selectedApp = appName; $apps.selectedApp = appName;
} }
$apps.dropdown = false; $apps.dropdown = false;
} }
function handleCursor(event) { function handleCursor(event) {
if (!getResizableSidebar()) return; if (!getResizableSidebar()) return;
if (!resize && selectedApp) { if (!resize && $apps.selectedApp) {
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8; const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 8; const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 8;
@@ -68,7 +71,7 @@
} }
function startDragging(event) { function startDragging(event) {
if (event.button === 0 && selectedApp) { if (event.button === 0 && $apps.selectedApp) {
event.preventDefault(); event.preventDefault();
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5; const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5; const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
@@ -93,7 +96,7 @@
function dragSidebar(event) { function dragSidebar(event) {
if (!getResizableSidebar()) return; if (!getResizableSidebar()) return;
if (!isDragging || !selectedApp) return; if (!isDragging || !$apps.selectedApp) return;
const deltaX = startX - event.clientX + 60; const deltaX = startX - event.clientX + 60;
let newWidth = initialWidth + deltaX; let newWidth = initialWidth + deltaX;
if (newWidth <= 250) { if (newWidth <= 250) {
@@ -105,14 +108,18 @@
} }
} }
function updateTopPadding(isStudent) {
topPadding = isStudent ? '48px' : '109px';
}
onMount(() => { onMount(() => {
updateTopPadding($apps.isStudent);
if (getResizableSidebar()) { if (getResizableSidebar()) {
appBarRef.addEventListener('mousedown', startDragging); appBarRef.addEventListener('mousedown', startDragging);
document.addEventListener('mousemove', dragSidebar); document.addEventListener('mousemove', dragSidebar);
document.addEventListener('mouseup', stopDragging); document.addEventListener('mouseup', stopDragging);
document.addEventListener('mousemove', handleCursor); document.addEventListener('mousemove', handleCursor);
} }
hotkeys('A+1,A+2,A+3,A+4', function (event, handler) { hotkeys('A+1,A+2,A+3,A+4', function (event, handler) {
event.preventDefault(); event.preventDefault();
switch (handler.key) { switch (handler.key) {
@@ -140,10 +147,12 @@
document.removeEventListener('mousemove', handleCursor); document.removeEventListener('mousemove', handleCursor);
} }
}); });
$: updateTopPadding($apps.isStudent);
$: getResizableSidebar(); $: getResizableSidebar();
</script> </script>
<div <div
style={`--top-padding:${topPadding}`}
class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`} class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`}
bind:this={appBarRef} bind:this={appBarRef}
> >
@@ -165,7 +174,7 @@
toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }} toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
value={APPS_CONSTANTS.APPS.LIVE_CHAT} value={APPS_CONSTANTS.APPS.LIVE_CHAT}
onClick={handleAppClick} onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp} selected={APPS_CONSTANTS.APPS.LIVE_CHAT === $apps.selectedApp}
> >
<SendAlt size={24} class="carbon-icon dark:text-white" /> <SendAlt size={24} class="carbon-icon dark:text-white" />
</IconButton> </IconButton>
@@ -174,7 +183,7 @@
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }} toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
value={APPS_CONSTANTS.APPS.QANDA} value={APPS_CONSTANTS.APPS.QANDA}
onClick={handleAppClick} onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp} selected={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
> >
<Forum size={24} class="carbon-icon dark:text-white" /> <Forum size={24} class="carbon-icon dark:text-white" />
</IconButton> </IconButton>
@@ -183,7 +192,7 @@
toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }} toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
value={APPS_CONSTANTS.APPS.NOTES} value={APPS_CONSTANTS.APPS.NOTES}
onClick={handleAppClick} onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp} selected={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
> >
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" /> <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
</IconButton> </IconButton>
@@ -192,26 +201,26 @@
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }} toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
value={APPS_CONSTANTS.APPS.POLL} value={APPS_CONSTANTS.APPS.POLL}
onClick={handleAppClick} onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.POLL === selectedApp} selected={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
> >
<ChartPie size={24} class="carbon-icon dark:text-white" /> <ChartPie size={24} class="carbon-icon dark:text-white" />
</IconButton> </IconButton>
</div> </div>
{#if !!selectedApp} {#if !!$apps.selectedApp}
<div <div
class={`app cursor-auto lg:cursor-ew-resize ${ class={`app cursor-auto lg:cursor-ew-resize ${
resize && ' border-l-8 border-l-blue-500 transition-none' resize && ' border-l-8 border-l-blue-500 transition-none'
} `} } `}
bind:this={appContentRef} bind:this={appContentRef}
> >
{#if selectedApp === APPS_CONSTANTS.APPS.QANDA} {#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
<QandA {handleClose} /> <QandA {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT} {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
<LiveChat {handleClose} /> <LiveChat {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.POLL} {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
<Poll {handleClose} /> <Poll {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.NOTES} {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
<Notes {handleClose} /> <Notes {handleClose} />
{/if} {/if}
</div> </div>
@@ -266,14 +275,15 @@
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.root { .root {
position: absolute; position: absolute;
height: calc(100vh - 109px); height: calc(100vh - var(--top-padding));
top: 109px; top: var(--top-padding);
right: 0; right: 0;
z-index: 999; z-index: 999;
} }
.open { .open {
position: absolute; position: absolute;
transform: translateX(0); transform: translateX(0);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.close { .close {
src/lib/components/Apps/store.js
+3 -1
View File
@@ -2,5 +2,7 @@ import { writable } from 'svelte/store';
export const apps = writable({ export const apps = writable({
open: false, open: false,
dropdown: false dropdown: false,
selectedApp: null,
isStudent: false
}); });
src/lib/components/CourseContainer/index.svelte
+2 -1
View File
@@ -7,7 +7,7 @@
import Confetti from '../Confetti/index.svelte'; import Confetti from '../Confetti/index.svelte';
import { isMobile } from '$lib/utils/store/useMobile'; import { isMobile } from '$lib/utils/store/useMobile';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { apps } from '$lib/components/Apps/store';
export let path = ''; export let path = '';
export let isExercisePage = false; export let isExercisePage = false;
export let isStudent = false; export let isStudent = false;
@@ -18,6 +18,7 @@
if (user) { if (user) {
isStudent = user.role_id === 3; isStudent = user.role_id === 3;
$apps.isStudent = isStudent;
} }
} }
</script> </script>
src/lib/components/Tabs/index.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
</script> </script>
<div class="w-full flex flex-col"> <div class="w-full flex flex-col">
<div class="flex items-center border-b w-full overflow-x-auto"> <div class="flex items-center border-b w-full overflow-x-auto mb-2">
{#each tabs as tab} {#each tabs as tab}
{#if !tab.icon && !tab.badgeValue} {#if !tab.icon && !tab.badgeValue}
<button <button
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+7
View File
@@ -22,6 +22,7 @@
import Download from 'carbon-icons-svelte/lib/Download.svelte'; import Download from 'carbon-icons-svelte/lib/Download.svelte';
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte'; import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import { apps } from '$lib/components/Apps/store'; import { apps } from '$lib/components/Apps/store';
import APPS_CONSTANTS from '$lib/components/Apps/constants';
import IconButton from '$lib/components/IconButton/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte';
import { lesson, lessons } from '$lib/components/Course/components/Lesson/store/lessons'; import { lesson, lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
@@ -197,6 +198,11 @@
mode = mode === MODES.edit ? MODES.view : MODES.edit; mode = mode === MODES.edit ? MODES.view : MODES.edit;
} }
function handleAppClick(appName) {
$apps.selectedApp = appName;
$apps.open = true;
}
$: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, ''); $: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
$: if (data.courseId && browser) { $: if (data.courseId && browser) {
@@ -311,6 +317,7 @@
{/if} {/if}
<button <button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center" class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
on:click={() => handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT)}
> >
<SendAlt size={24} class="carbon-icon" /> <SendAlt size={24} class="carbon-icon" />
<span class="ml-1">{$lesson.comments}</span> <span class="ml-1">{$lesson.comments}</span>