Apps feature

package.json

@@ -3,7 +3,7 @@
   "description": "unidiscuss",
   "version": "0.0.1",
   "scripts": {
-    "dev": "nvm use 11.0.0 && sapper dev",
+    "dev": "sapper dev",
     "build": "sapper build --legacy",
     "export": "sapper export --legacy",
     "start": "node __sapper__/build"

src/components/Apps/components/LiveChat/index.svelte

@@ -0,0 +1,12 @@
+<script>
+  import PageNav from "../../../PageNav/index.svelte";
+  import CloseButton from "../../../Buttons/Close/index.svelte";
+
+  export let handleClose;
+</script>
+
+<PageNav title="LiveChat" overidableStyle="padding: 0 10px">
+  <div slot="widget">
+    <CloseButton onClick={handleClose} />
+  </div>
+</PageNav>

src/components/Apps/components/Notes/index.svelte

@@ -0,0 +1,12 @@
+<script>
+  import PageNav from "../../../PageNav/index.svelte";
+  import CloseButton from "../../../Buttons/Close/index.svelte";
+
+  export let handleClose;
+</script>
+
+<PageNav title="Note" overidableStyle="padding: 0 10px">
+  <div slot="widget">
+    <CloseButton onClick={handleClose} />
+  </div>
+</PageNav>

src/components/Apps/components/Poll/index.svelte

@@ -0,0 +1,12 @@
+<script>
+  import PageNav from "../../../PageNav/index.svelte";
+  import CloseButton from "../../../Buttons/Close/index.svelte";
+
+  export let handleClose;
+</script>
+
+<PageNav title="Poll" overidableStyle="padding: 0 10px">
+  <div slot="widget">
+    <CloseButton onClick={handleClose} />
+  </div>
+</PageNav>

src/components/Apps/components/QandA/index.svelte

@@ -0,0 +1,12 @@
+<script>
+  import PageNav from "../../../PageNav/index.svelte";
+  import CloseButton from "../../../Buttons/Close/index.svelte";
+
+  export let handleClose;
+</script>
+
+<PageNav title="Q/A" overidableStyle="padding: 0 10px">
+  <div slot="widget">
+    <CloseButton onClick={handleClose} />
+  </div>
+</PageNav>

src/components/Apps/constants.js

@@ -0,0 +1,8 @@
+export default {
+  APPS: {
+    QANDA: 'QANDA',
+    NOTES: 'NOTES',
+    LIVE_CHAT: 'LIVE_CHAT',
+    POLL: 'POLL',
+  },
+};

src/components/Apps/index.svelte

@@ -1,12 +1,103 @@
 <script>
-  let expanded = false;
+  import Forum24 from "carbon-icons-svelte/lib/Forum24";
+  import AlignBoxTopLeft24 from "carbon-icons-svelte/lib/AlignBoxTopLeft24";
+  import SendAlt24 from "carbon-icons-svelte/lib/SendAlt24";
+  import ChartPie24 from "carbon-icons-svelte/lib/ChartPie24";
+  import IconButton from "../IconButton/index.svelte";
+
+  import QandA from "./components/QandA/index.svelte";
+  import LiveChat from "./components/LiveChat/index.svelte";
+  import Notes from "./components/Notes/index.svelte";
+  import Poll from "./components/Poll/index.svelte";
+  import APPS_CONSTANTS from "./constants";
+
+  let selectedApp;
+
+  function handleClose() {
+    selectedApp = null;
+  }
+
+  function handleAppClick(appName) {
+    if (appName === selectedApp) {
+      handleClose();
+    } else {
+      selectedApp = appName;
+    }
+  }
 </script>
 
-<style>
+<style lang="scss">
   .root {
-    border-right: 1px solid var(--border-color);
+    height: 95vh;
+    position: sticky;
+    top: 0;
     border-left: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: row;
+
+    & .apps {
+      padding-top: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 60px;
+      border-right: 1px solid var(--border-color);
+      height: 100%;
+    }
+
+    & .app {
+      width: 300px;
+      transition: all 1s ease-out;
+    }
   }
 </style>
 
-<div class="root" />
+<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>

src/components/Buttons/Close/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Close24 from "carbon-icons-svelte/lib/Close24";
+  import IconButton from "../../IconButton/index.svelte";
+
+  export let onClick;
+</script>
+
+<IconButton {onClick} title="Close">
+  <Close24 class="carbon-icon" title="Close" />
+</IconButton>

src/components/Buttons/Delete/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Close24 from "carbon-icons-svelte/lib/Close24";
+  import IconButton from "../../../IconButton/index.svelte";
+
+  export let onClick;
+</script>
+
+<IconButton {onClick}>
+  <Close24 class="carbon-icon" title="Close" />
+</IconButton>

src/components/IconButton/index.svelte

@@ -1,6 +1,49 @@
-<style>
+<script>
+  import ToolTip from "../ToolTip/index.svelte";
+  export let onClick;
+  export let disabled = false;
+  export let selected = false;
+  export let value;
+  export let title;
+
+  function handleClick() {
+    onClick(value);
+  }
+</script>
+
+<style lang="scss">
+  .root {
+    flex: 0 0 auto;
+    color: rgba(0, 0, 0, 0.54);
+    padding: 12px;
+    font-size: 1.5rem;
+    text-align: center;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 50%;
+    border: 0;
+    cursor: pointer;
+    margin: 0;
+    display: flex;
+    outline: 0;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    width: fit-content;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
 </style>
 
-<button class="hover:grey-500">
+<ToolTip title={title}>
+  <button
+    class={`root ${selected && 'active'}`}
+    {disabled}
+    on:click={handleClick}>
     <slot />
-</button>
+  </button>
+
+</ToolTip>

src/components/LeftNav/index.svelte

@@ -3,7 +3,7 @@
   import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
   import Catalog32 from "carbon-icons-svelte/lib/Catalog32";
   import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
-  import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
+  // import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
   export let segment;
   let navClass = "";
 
@@ -47,14 +47,6 @@
     flex-direction: column;
   }
 
-  :global(svg.carbon-icon) {
-    margin-right: 10px;
-  }
-
-  [aria-current] :global(svg.carbon-icon) {
-    fill: var(--main-primary-color);
-  }
-
   [aria-current] {
     color: var(--main-primary-color);
   }

src/components/PageNav/index.svelte

@@ -1,6 +1,7 @@
 <script>
   import NewButton from "../PrimaryContainedButton/index.svelte";
   export let title = "";
+  export let overidableStyle = "";
   export let navItems = [];
   export let addButtonHref;
   export let addButtonLabel;
@@ -11,28 +12,6 @@
     Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
 </script>
 
-<div
-  class="header flex items-center justify-between mb-2 {!disableSticky &&
-    'sticky'} {dynamicRootClass}"
->
-  {#if !!title}
-    <h4 class="title">{title}</h4>
-  {/if}
-  {#if Array.isArray(navItems) && navItems.length}
-    <div class="flex justify-evenly items-center">
-      {#each navItems as item}
-        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
-          {item.label}
-        </a>
-      {/each}
-      {#if addButtonHref}
-        <NewButton href={addButtonHref} label={addButtonLabel} />
-      {/if}
-    </div>
-  {/if}
-  <slot name="widget" />
-</div>
-
 <style>
   .header {
     border-bottom: 1px solid var(--border-color);
@@ -87,3 +66,24 @@
     }
   }
 </style>
+
+<div
+  class="header flex items-center justify-between mb-2 {!disableSticky && 'sticky'} {dynamicRootClass}"
+  style={overidableStyle}>
+  {#if !!title}
+    <h4 class="title">{title}</h4>
+  {/if}
+  {#if Array.isArray(navItems) && navItems.length}
+    <div class="flex justify-evenly items-center">
+      {#each navItems as item}
+        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
+          {item.label}
+        </a>
+      {/each}
+      {#if addButtonHref}
+        <NewButton href={addButtonHref} label={addButtonLabel} />
+      {/if}
+    </div>
+  {/if}
+  <slot name="widget" />
+</div>

src/components/QuestionnaireBuilder/index.svelte

@@ -0,0 +1 @@
+<div />

src/components/Tailwindcss.svelte

@@ -31,4 +31,9 @@
   code {
     white-space: pre-wrap;
   }
+
+  [aria-current] :global(svg.carbon-icon),
+  button.active :global(svg.carbon-icon) {
+    fill: var(--main-primary-color);
+  }
 </style>

src/components/ToolTip/index.svelte

@@ -0,0 +1,44 @@
+<script>
+  export let title;
+</script>
+
+<style>
+  .tooltip {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip .tooltiptext {
+    color: #fff;
+    padding: 4px 8px;
+    font-size: 0.625rem;
+    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);
+    visibility: hidden;
+    text-align: center;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 0;
+  }
+
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+  }
+</style>
+
+{#if !!title}
+  <div class="tooltip">
+    <span class="tooltiptext">{title}</span>
+    <slot />
+  </div>
+{:else}
+  <slot />
+{/if}

src/routes/courses/[...id].svelte

@@ -15,6 +15,7 @@
   import Scoreboard from "../../components/Course/components/Scoreboard.svelte";
   import TimeTable from "../../components/Course/components/TimeTable.svelte";
   import CourseNav from "../../components/Course/components/CourseNav.svelte";
+  import Apps from "../../components/Apps/index.svelte";
 
   // export let slug;
   export let courseNavItem;
@@ -28,29 +29,6 @@
   $: mode = $page.query.mode;
 </script>
 
-<svelte:head>
-  <title>ReactJS</title>
-</svelte:head>
-
-<div class="root">
-  <CourseNav />
-  <div class="rightBar">
-    {#if !courseNavItem}
-      <Overview />
-    {:else if courseNavItem === "score"}
-      <Scoreboard />
-    {:else if courseNavItem === "timetable"}
-      <TimeTable />
-    {:else if courseNavItem === "hometasks"}
-      <HomeTask />
-    {:else if courseNavItem === "lecture"}
-      <Lecture path={$page.path} {tab} {mode} />
-    {:else if courseNavItem === "people"}
-      <People />
-    {/if}
-  </div>
-</div>
-
 <style>
   .root {
     display: flex;
@@ -62,3 +40,28 @@
     width: 80%;
   }
 </style>
+
+<svelte:head>
+  <title>ReactJS</title>
+</svelte:head>
+
+<div class="root">
+  <CourseNav />
+  <div class="rightBar">
+    {#if !courseNavItem}
+      <Overview />
+    {:else if courseNavItem === 'score'}
+      <Scoreboard />
+    {:else if courseNavItem === 'timetable'}
+      <TimeTable />
+    {:else if courseNavItem === 'hometasks'}
+      <HomeTask />
+    {:else if courseNavItem === 'lecture'}
+      <Lecture path={$page.path} {tab} {mode} />
+    {:else if courseNavItem === 'people'}
+      <People />
+    {/if}
+  </div>
+
+  <Apps />
+</div>