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 { browser } from '$app/environment';
let selectedApp;
let resize = false;
let isDragging = false;
let startX;
@@ -24,6 +23,8 @@
let appBarRef;
let appContentRef;
let topPadding = $apps.isStudent ? '48px' : '109px';
const getResizableSidebar = () => {
if (!browser) return;
@@ -31,31 +32,33 @@
};
function handleClose() {
selectedApp = null;
$apps.selectedApp = null;
if (getResizableSidebar()) {
appBarRef.style.width = '60px';
} else if (!getResizableSidebar() && $apps.isStudent) {
$apps.open = false;
}
}
function handleAppClick(appName) {
if (!selectedApp && getResizableSidebar()) {
if (!$apps.selectedApp && getResizableSidebar()) {
if (window.innerWidth <= 1024) {
appBarRef.style.width = '300px';
} else {
appBarRef.style.width = '500px';
}
}
if (appName === selectedApp) {
if (appName === $apps.selectedApp) {
handleClose();
} else {
selectedApp = appName;
$apps.selectedApp = appName;
}
$apps.dropdown = false;
}
function handleCursor(event) {
if (!getResizableSidebar()) return;
if (!resize && selectedApp) {
if (!resize && $apps.selectedApp) {
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 8;
@@ -68,7 +71,7 @@
}
function startDragging(event) {
if (event.button === 0 && selectedApp) {
if (event.button === 0 && $apps.selectedApp) {
event.preventDefault();
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
@@ -93,7 +96,7 @@
function dragSidebar(event) {
if (!getResizableSidebar()) return;
if (!isDragging || !selectedApp) return;
if (!isDragging || !$apps.selectedApp) return;
const deltaX = startX - event.clientX + 60;
let newWidth = initialWidth + deltaX;
if (newWidth <= 250) {
@@ -105,14 +108,18 @@
}
}
function updateTopPadding(isStudent) {
topPadding = isStudent ? '48px' : '109px';
}
onMount(() => {
updateTopPadding($apps.isStudent);
if (getResizableSidebar()) {
appBarRef.addEventListener('mousedown', startDragging);
document.addEventListener('mousemove', dragSidebar);
document.addEventListener('mouseup', stopDragging);
document.addEventListener('mousemove', handleCursor);
}
hotkeys('A+1,A+2,A+3,A+4', function (event, handler) {
event.preventDefault();
switch (handler.key) {
@@ -140,10 +147,12 @@
document.removeEventListener('mousemove', handleCursor);
}
});
$: updateTopPadding($apps.isStudent);
$: getResizableSidebar();
</script>
<div
style={`--top-padding:${topPadding}`}
class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`}
bind:this={appBarRef}
>
@@ -165,7 +174,7 @@
toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
value={APPS_CONSTANTS.APPS.LIVE_CHAT}
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" />
</IconButton>
@@ -174,7 +183,7 @@
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
value={APPS_CONSTANTS.APPS.QANDA}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
selected={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
>
<Forum size={24} class="carbon-icon dark:text-white" />
</IconButton>
@@ -183,7 +192,7 @@
toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
value={APPS_CONSTANTS.APPS.NOTES}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
selected={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
>
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
</IconButton>
@@ -192,26 +201,26 @@
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
value={APPS_CONSTANTS.APPS.POLL}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
selected={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
>
<ChartPie size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
{#if !!selectedApp}
{#if !!$apps.selectedApp}
<div
class={`app cursor-auto lg:cursor-ew-resize ${
resize && ' border-l-8 border-l-blue-500 transition-none'
} `}
bind:this={appContentRef}
>
{#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
{#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
<QandA {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
<LiveChat {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
<Poll {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
<Notes {handleClose} />
{/if}
</div>
@@ -266,14 +275,15 @@
@media screen and (max-width: 1023px) {
.root {
position: absolute;
height: calc(100vh - 109px);
top: 109px;
height: calc(100vh - var(--top-padding));
top: var(--top-padding);
right: 0;
z-index: 999;
}
.open {
position: absolute;
transform: translateX(0);
transition: all 0.2s ease-in-out;
}
.close {
src/lib/components/Apps/store.js
+3 -1
View File
@@ -2,5 +2,7 @@ import { writable } from 'svelte/store';
export const apps = writable({
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 { isMobile } from '$lib/utils/store/useMobile';
import { profile } from '$lib/utils/store/user';
import { apps } from '$lib/components/Apps/store';
export let path = '';
export let isExercisePage = false;
export let isStudent = false;
@@ -18,6 +18,7 @@
if (user) {
isStudent = user.role_id === 3;
$apps.isStudent = isStudent;
}
}
</script>
src/lib/components/Tabs/index.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
</script>
<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}
{#if !tab.icon && !tab.badgeValue}
<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 OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import { apps } from '$lib/components/Apps/store';
import APPS_CONSTANTS from '$lib/components/Apps/constants';
import IconButton from '$lib/components/IconButton/index.svelte';
import { lesson, lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { browser } from '$app/environment';
@@ -197,6 +198,11 @@
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 -]*/, '');
$: if (data.courseId && browser) {
@@ -311,6 +317,7 @@
{/if}
<button
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" />
<span class="ml-1">{$lesson.comments}</span>