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

Add hot keys to opening apps

Browse Source
This commit is contained in:
rotimi_best
2021-05-31 11:28:46 +03:00
parent d22bb7d0e3
commit 811c7c59af
5 changed files with 114 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Apps/index.svelte
+72 -54
View File
@@ -1,4 +1,6 @@
<script>
import { onMount } from "svelte";
import hotkeys from "hotkeys-js";
import Forum24 from "carbon-icons-svelte/lib/Forum24";
import AlignBoxTopLeft24 from "carbon-icons-svelte/lib/AlignBoxTopLeft24";
import SendAlt24 from "carbon-icons-svelte/lib/SendAlt24";
@@ -24,62 +26,28 @@
selectedApp = appName;
}
}
onMount(() => {
hotkeys("ctrl+1,ctrl+2,ctrl+3,ctrl+4", function (event, handler) {
event.preventDefault();
switch (handler.key) {
case "ctrl+1":
handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT);
break;
case "ctrl+2":
handleAppClick(APPS_CONSTANTS.APPS.QANDA);
break;
case "ctrl+3":
handleAppClick(APPS_CONSTANTS.APPS.NOTES);
break;
case "ctrl+4":
handleAppClick(APPS_CONSTANTS.APPS.POLL);
break;
}
});
});
</script>
<div class="root">
<div class="apps">
<IconButton
title="Live Chat"
value={APPS_CONSTANTS.APPS.LIVE_CHAT}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
>
<SendAlt24 class="carbon-icon" />
</IconButton>
<IconButton
title="QandA"
value={APPS_CONSTANTS.APPS.QANDA}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
>
<Forum24 class="carbon-icon" />
</IconButton>
<IconButton
title="Notes"
value={APPS_CONSTANTS.APPS.NOTES}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
>
<AlignBoxTopLeft24 class="carbon-icon" />
</IconButton>
<IconButton
title="Poll"
value={APPS_CONSTANTS.APPS.POLL}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
>
<ChartPie24 class="carbon-icon" />
</IconButton>
</div>
{#if !!selectedApp}
<div class="app">
{#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
<QandA {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
<LiveChat {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
<Poll {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
<Notes {handleClose} />
{/if}
</div>
{/if}
</div>
<style lang="scss">
.root {
height: 95vh;
@@ -106,3 +74,53 @@
}
}
</style>
<div class="root">
<div class="apps">
<IconButton
toolTipProps={{ title: 'Live Chat', hotkeys: ['Ctrl', '1'] }}
value={APPS_CONSTANTS.APPS.LIVE_CHAT}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}>
<SendAlt24 class="carbon-icon" />
</IconButton>
<IconButton
toolTipProps={{ title: 'QandA', hotkeys: ['Ctrl', '2'] }}
value={APPS_CONSTANTS.APPS.QANDA}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}>
<Forum24 class="carbon-icon" />
</IconButton>
<IconButton
toolTipProps={{ title: 'Notes', hotkeys: ['Ctrl', '3'] }}
value={APPS_CONSTANTS.APPS.NOTES}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}>
<AlignBoxTopLeft24 class="carbon-icon" />
</IconButton>
<IconButton
toolTipProps={{ title: 'Poll', hotkeys: ['Ctrl', '4'] }}
value={APPS_CONSTANTS.APPS.POLL}
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.POLL === selectedApp}>
<ChartPie24 class="carbon-icon" />
</IconButton>
</div>
{#if !!selectedApp}
<div class="app">
{#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
<QandA {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
<LiveChat {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
<Poll {handleClose} />
{:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
<Notes {handleClose} />
{/if}
</div>
{/if}
</div>
src/components/IconButton/index.svelte
+7 -4
View File
@@ -4,11 +4,15 @@
export let disabled = false;
export let selected = false;
export let value;
export let title;
export let toolTipProps = {
title: "",
hotkeys: [],
};
function handleClick() {
onClick(value);
}
console.log("toolTipProps", toolTipProps);
</script>
<style lang="scss">
@@ -38,12 +42,11 @@
}
</style>
<ToolTip title={title}>
<ToolTip title={toolTipProps.title} hotkeys={toolTipProps.hotkeys}>
<button
class={`root ${selected && 'active'}`}
{disabled}
on:click={handleClick}>
<slot />
</button>
</ToolTip>
</ToolTip>
src/components/ToolTip/index.svelte
+29 -7
View File
@@ -1,5 +1,6 @@
<script>
export let title;
export let hotkeys = [];
</script>
<style>
@@ -10,33 +11,54 @@
.tooltip .tooltiptext {
color: #fff;
padding: 4px 8px;
padding: 6px 8px;
font-size: 0.625rem;
max-width: 300px;
word-wrap: break-word;
/* max-width: 300px; */
/* word-wrap: break-word; */
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
line-height: 1.4em;
border-radius: 4px;
background-color: rgba(97, 97, 97, 0.9);
background-color: #000;
visibility: hidden;
text-align: center;
font-weight: bold;
white-space: nowrap;
font-size: 13px;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 0;
/* top: 100%;
left: 0; */
top: 20%;
right: 100%;
margin-left: 5px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.shortcut span {
font-weight: lighter;
padding: 2px 4px;
background-color: rgba(97, 97, 97, 0.9);
border-radius: 2px;
margin-left: 5px;
}
</style>
{#if !!title}
<div class="tooltip">
<span class="tooltiptext">{title}</span>
<span class="tooltiptext">
{title}
{#if Array.isArray(hotkeys) && hotkeys.length}
<span class="shortcut">
{#each hotkeys as hotkey}<span>{hotkey}</span>{/each}
</span>
{/if}
</span>
<slot />
</div>
{:else}