Skip to content

Commit

Permalink
Compare Panel (#185)
Browse files Browse the repository at this point in the history 
### Summary

Resolves #175

Adds compare panel and related overlays and modals.
There is a bug with the drawer button. If you move your mouse really
fast left and right over it, it causes the tooltip to appear at (0, 0).

### Checklist
### Acceptance Criteria
#### UI Requirements
- [ ] A new panel is added on the right side of the screen that houses
`CombinationContainer` and the new component `ComparisonContainer`.
- [ ] The new panel is collapsible and should behave like a drawer.
- [ ] The `ComparisonContainer` has a header with an enable button
- [ ] Friends' and schedules' names are editable.
- [ ] When a friend has a nickname, hovering over the nickname should
display a popup with their email info.
- [ ] Friends and schedules can be deleted and a confirmation modal
should pop up to confirm the deletion.
- [ ] Panel works for both light and dark modes.


### How to Test
Run the code and go through all functions (click checkboxes, edit
schedules, delete schedules, add schedule versions (through the form in
the version dropdown), etc.)

---------

Co-authored-by: Nghi Ho <[email protected]>
Co-authored-by: EmilyAL001 <[email protected]>
Co-authored-by: Samarth Chandna <[email protected]>
  • Loading branch information
@sophiazlin @nhatnghiho
@EmilyAL001 @samarth52
4 people authored Oct 19, 2023
1 parent da7d0c0 commit fdf35fe
Show file tree
Hide file tree
Showing 8 changed files with 1,069 additions and 4 deletions.
632 changes: 632 additions & 0 deletions src/components/ComparisonContainer/index.tsx
View file

Large diffs are not rendered by default.

268 changes: 268 additions & 0 deletions src/components/ComparisonContainer/stylesheet.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
@import '../../variables';

.comparison-container {
.comparison-body {
display: flex;
flex-direction: column;
white-space: nowrap;
height: 100%;

.comparison-header {
display: flex;
align-items: center;
margin: 11px 12px 7px 12px;

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 {
position: relative;
margin-bottom: 12px;
overflow-x: hidden;
overflow-y: auto;
flex: 1 1 auto;

p {
margin: 0px;
overflow: hidden;
font-size: 12px;
font-weight: 500;
line-height: 14px;

&.content-title{
font-weight: 700;
margin: 16px 12px 4px 12px;
border-bottom: 1px solid $color-border;
}
}

.schedule-row {
.checkbox-container {
display: flex;
align-items: center;
position: relative;
height: 22px;

.checkbox {
margin-left: 12px;
border: 1px solid;
border-radius: 3px;
border-color: var(--theme-fg);
transition-duration: $theme-switch-transition-duration;
transition-property: border-color;

width: 11px;
height: 11px;

&:hover {
cursor: pointer;
}

&.indented {
margin-left: 24px;
}
}

.name {
margin-left: 12px;
margin-right: 12px;
min-width: 0;
flex-shrink: 1;

&.check {
margin-left: 8px;
}

p {
text-overflow: ellipsis;
}
}

.edit-input {
height: 22px;
border-radius: 4px;
padding: 4px;
flex: 1 1;
font-size: 12px;
font-weight: 500;
outline: none;
border: 1px solid var(--theme-fg);
margin-left: 8px;

&.check {
margin-left: 4px;
}
}

.spacing {
flex: 1;
}

.tooltip {
background: rgba(0, 0, 0, 0.8);
border-radius: 4px;
}

.icon {
width: 27px;
height: 100%;
padding: 0px;
opacity: 0;
}

&:hover {
background-color: $color-border;

.icon {
opacity: 1;
}

.name {
margin-right: 0px;
}
}

&.editing {
.icon {
opacity: 1;
}
}
}
.palette {
margin: 0px 12px 0px 24px;
height: 50px;
border-radius: 4px;
overflow: hidden;
}
}
}

.comparison-overlay {
background-color: var(--theme-bg);

pointer-events: none;
opacity: 0;
transition-duration: 0.15s, $theme-switch-transition-duration, $theme-switch-transition-duration;
transition-property: opacity, color, background-color;

&.left {
position: fixed;
top: 64px;
left: 0px;
width: 320px;
bottom: 41px;
}

&.right {
position: absolute;
top: 100px;
width: 256px;
height: 360px;
}

&.open {
pointer-events: all;
opacity: 0.4;
}
}

.overlay-tooltip {
background: rgba(0, 0, 0, 0.8);
border-radius: 4px;
font-size: 12px;
text-align: center;
p {
margin: 0px;
}
}
}
}

.mobile .comparison-container {
flex: 1;
border-right: none;

.scroller {
width: auto;
}
}

.shared-schedule-modal {

h2 {
font-weight: 700;
font-size: 24px;
line-height: 28px;
}

p {
font-size: 14px;
line-height: 18px;
overflow-wrap: break-word;
}

.cancel-button {
width: 26px;
height: 26px;
position: absolute;
top: 11px;
right: 11px;
border-radius: 50%;
}
}
63 changes: 63 additions & 0 deletions src/components/ComparisonPanel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useState, useId, useCallback } from 'react';
import { Tooltip as ReactTooltip } from 'react-tooltip';

import { CombinationContainer, ComparisonContainer } from '..';
import { classes } from '../../utils/misc';

import './stylesheet.scss';

export default function ComparisonPanel(): React.ReactElement {
const [expanded, setExpanded] = useState(true);
const [hover, setHover] = useState(false);
const [tooltipY, setTooltipY] = useState(0);
const tooltipId = useId();

const handleHover = useCallback((e: React.MouseEvent) => {
setHover(true);
setTooltipY(e.clientY);
}, []);

return (
<div className="comparison-panel">
<div
className="drawer"
onClick={(): void => {
setExpanded(!expanded);
setHover(false);
}}
onMouseEnter={(e: React.MouseEvent): void => {
handleHover(e);
}}
onMouseLeave={(): void => setHover(false)}
id={tooltipId}
>
<div className="drawer-line" />
<div className="icon">
<div className={classes('arrow', expanded && 'right')} />
</div>
<div className="drawer-line" />
<ReactTooltip
key={tooltipY}
anchorId={tooltipId}
className="tooltip"
variant="dark"
isOpen={hover}
setIsOpen={setHover}
delayShow={20}
delayHide={100}
offset={70 - tooltipY}
// key={deviceHasHover ? 0 : 1}
// events={deviceHasHover ? ['hover'] : []}
>
<p>{expanded ? 'Collapse' : 'Expand for More Options'}</p>
</ReactTooltip>
</div>
<div className={classes('panel', !expanded && 'closed')}>
<ComparisonContainer />
<div className="combination">
<CombinationContainer />
</div>
</div>
</div>
);
}
Loading

0 comments on commit fdf35fe

Please sign in to comment.