Create panel (#175)

gt-scheduler · Feb 25, 2023 · c6ea952 · c6ea952
1 parent efac436
commit c6ea952
Show file tree

Hide file tree

Showing 4 changed files with 253 additions and 2 deletions.
diff --git a/src/components/ComparisonContainer/index.tsx b/src/components/ComparisonContainer/index.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { CombinationContainer } from '..';
+import { classes } from '../../utils/misc';
+import './stylesheet.scss';
+
+export default function ComparisonContainer(): React.ReactElement {
+  const [expanded, setExpanded] = useState(true);
+  const [compare, setCompare] = useState(false);
+
+  return (
+    <>
+      <div className="comparison-container">
+        <div className="drawer" onClick={(): void => setExpanded(!expanded)}>
+          <div className="drawer-line" />
+          <div className="icon">
+            <div className={classes('arrow', expanded && 'right')} />
+          </div>
+          <div className="drawer-line" />
+        </div>
+        <div className={classes('comparison-panel', !expanded && 'closed')}>
+          <div className="comparison-body">
+            <div className="comparison-header">
+              <p className="header-title">Compare Schedules</p>
+              <p className="header-text">{compare ? 'On' : 'Off'}</p>
+              <label className="switch" htmlFor="comparison-checkbox">
+                <input
+                  type="checkbox"
+                  id="comparison-checkbox"
+                  onClick={(): void => setCompare(!compare)}
+                />
+                <div className="slider round" />
+              </label>
+            </div>
+            <div className="comparison-content">
+              <div className="my-schedules">
+                <p className="content-title">My Schedules</p>
+              </div>
+              <div className="shared-schedules">
+                <p className="content-title">Shared with me</p>
+              </div>
+            </div>
+          </div>
+          <div className="combination">
+            <CombinationContainer />
+          </div>
+        </div>
+      </div>
+      <div className={classes('comparison-overlay', compare && 'open')} />
+    </>
+  );
+}
diff --git a/src/components/ComparisonContainer/stylesheet.scss b/src/components/ComparisonContainer/stylesheet.scss
@@ -0,0 +1,192 @@
+@import '../../variables';
+
+.comparison-container {
+  display: flex;
+  flex-direction: row;
+  border-right: 1px solid $color-border;
+
+  .drawer {
+    width: 10.5px;
+    border-width: 0px 1px 0px 1px;
+    border-color: $color-border;
+    border-style: solid;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &:hover {
+      background: $color-border;
+    }
+
+    .drawer-line {
+      flex: 1;
+      width: 4px;
+      border-width: 0px 1px 0px 1px;
+      border-color: $color-border;
+      border-style: solid;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      height: 48px;
+      transform: scale(0.9, 2.5);
+
+      .arrow {
+        position: absolute;
+        height: 10px;
+        width: 10px;
+        right: -8px;
+        border-width: 0px 1px 1px 0px;
+        border-color: $color-border;
+        border-style: solid;
+        transform: rotate(135deg);
+
+        &.right {
+          left: -8px;
+          transform: rotate(-45deg);
+        }
+      }
+
+    }
+  }
+
+  .comparison-panel {
+    display: flex;
+    flex: 0 0 1;
+    flex-direction: column;
+    overflow: hidden;
+    align-items: stretch;
+    width: 256px;
+    transition: width 0.15s;
+
+    &.closed {
+      width: 0px;
+    }
+
+    .comparison-body {
+      display: flex;
+      flex-direction: column;
+      border-bottom: 1px solid $color-border;
+      padding: 12px;
+      white-space: nowrap;
+
+      .comparison-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 7px;
+
+        p {
+          margin: 0px;
+          overflow: hidden;
+
+          &.header-title{
+            flex: 1;
+            font-size: 16px;
+          }
+
+          &.header-text{
+            font-size: 12px;
+            margin-right: 4px;
+          }
+        }
+
+        .switch {
+          display: inline-block;
+          height: 19px;
+          position: relative;
+          width: 43px;
+        }
+
+        .switch input {
+          display: none;
+        }
+
+        .slider {
+          background-color: #ccc;
+          bottom: 0;
+          cursor: pointer;
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+          transition: .4s;
+          border-radius: 19px;
+        }
+
+        .slider:before {
+          background-color: #ffffff;
+          bottom: 2px;
+          content: "";
+          height: 15px;
+          left: 2px;
+          position: absolute;
+          transition: .4s;
+          width: 15px;
+          border-radius: 50%;
+        }
+
+        input:checked + .slider {
+          background-color: #589BD5;
+        }
+
+        input:checked + .slider:before {
+          transform: translateX(24px);
+        }
+      }
+
+      .comparison-content {
+        p {
+          margin: 0px;
+          overflow: hidden;
+
+          &.content-title{
+            font-size: 12px;
+            font-weight: 700;
+            line-height: 14px;
+            margin-top: 16px;
+            padding-bottom: 4px;
+            border-bottom: 1px solid $color-border;
+          }
+        }
+      }
+    }
+
+    .combination {
+      flex: 1;
+
+      .CombinationContainer {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.comparison-overlay {
+  background-color: var(--theme-bg);
+  position: absolute;
+  top: 64px;
+  left: 0px;
+  width: 320px;
+  bottom: 41px;
+
+  pointer-events: none;
+  opacity: 0;
+  z-index: 100;
+  transition-duration: 0.15s, $theme-switch-transition-duration;
+  transition-property: opacity, color, background-color;
+
+  &.open {
+    pointer-events: all;
+    opacity: 0.4;
+  }
+}
+
+.mobile .comparison-container {
+  flex: 1;
+  border-right: none;
+
+  .scroller {
+    width: auto;
+  }
+}
diff --git a/src/components/Scheduler/index.tsx b/src/components/Scheduler/index.tsx
@@ -1,7 +1,13 @@
 import React, { useMemo, useState } from 'react';
 
 import { classes } from '../../utils/misc';
-import { Button, Calendar, CombinationContainer, CourseContainer } from '..';
+import {
+  Button,
+  Calendar,
+  CombinationContainer,
+  ComparisonContainer,
+  CourseContainer,
+} from '..';
 import { OverlayCrnsContext, OverlayCrnsContextValue } from '../../contexts';
 import { DESKTOP_BREAKPOINT } from '../../constants';
 import useScreenWidth from '../../hooks/useScreenWidth';
@@ -42,12 +48,13 @@ export default function Scheduler(): React.ReactElement {
       <OverlayCrnsContext.Provider value={overlayContextValue}>
         <div className="main">
           {(!mobile || tabIndex === 0) && <CourseContainer />}
-          {(!mobile || tabIndex === 1) && <CombinationContainer />}
+          {mobile && tabIndex === 1 && <CombinationContainer />}
           {(!mobile || tabIndex === 2) && (
             <div className="calendar-container">
               <Calendar className="calendar" overlayCrns={overlayCrns} />
             </div>
           )}
+          {(!mobile || tabIndex === 3) && <ComparisonContainer />}
         </div>
       </OverlayCrnsContext.Provider>
     </>

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -27,3 +27,4 @@ export { default as EventBlocks } from './EventBlocks';
 export { default as Attribution } from './Attribution';
 export { default as Event } from './Event';
 export { default as CourseNavMenu } from './CourseNavMenu';
+export { default as ComparisonContainer } from './ComparisonContainer';