Skip to content

Commit

Permalink
Split components (#175)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiazlin
sophiazlin committed Feb 25, 2023
1 parent c6ea952 commit afce85e
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 195 deletions.
53 changes: 19 additions & 34 deletions src/components/ComparisonContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,48 +4,33 @@ 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 className="comparison-container">
<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={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 className="comparison-content">
<div className="my-schedules">
<p className="content-title">My Schedules</p>
</div>
<div className="combination">
<CombinationContainer />
<div className="shared-schedules">
<p className="content-title">Shared with me</p>
</div>
</div>
</div>
<div className={classes('comparison-overlay', compare && 'open')} />
</>
</div>
);
}
246 changes: 87 additions & 159 deletions src/components/ComparisonContainer/stylesheet.scss
View file
Original file line number Diff line number Diff line change
@@ -1,184 +1,112 @@
@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;
.comparison-body {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid $color-border;
padding: 12px;
white-space: nowrap;

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

.drawer-line {
flex: 1;
width: 4px;
border-width: 0px 1px 0px 1px;
border-color: $color-border;
border-style: solid;
}

.icon {
.comparison-header {
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;
margin-bottom: 7px;

p {
margin: 0px;
overflow: hidden;
p {
margin: 0px;
overflow: hidden;

&.header-title{
flex: 1;
font-size: 16px;
}

&.header-text{
font-size: 12px;
margin-right: 4px;
}
&.header-title{
flex: 1;
font-size: 16px;
}

.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);
&.header-text{
font-size: 12px;
margin-right: 4px;
}
}

.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;
}
}
.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);
}
}

.combination {
flex: 1;

.CombinationContainer {
height: 100%;
.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;
}
}
}
}
}

.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;
.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;
}
}
}

Expand Down
26 changes: 26 additions & 0 deletions src/components/ComparisonPanel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React, { useState } from 'react';
import { CombinationContainer, ComparisonContainer } from '..';
import { classes } from '../../utils/misc';
import './stylesheet.scss';

export default function ComparisonPanel(): React.ReactElement {
const [expanded, setExpanded] = useState(true);

return (
<div className="comparison-panel">
<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('panel', !expanded && 'closed')}>
<ComparisonContainer />
<div className="combination">
<CombinationContainer />
</div>
</div>
</div>
);
}
Loading

0 comments on commit afce85e

Please sign in to comment.