-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
### 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
1 parent
da7d0c0
commit fdf35fe
Showing
8 changed files
with
1,069 additions
and
4 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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%; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
Oops, something went wrong.