Skip to content

Commit 13445ba

Browse files
frozenheliumfrozenhelium
committed
Add expandable container
1 parent 156c278 commit 13445ba

File tree

15 files changed

+391
-285
lines changed

15 files changed

+391
-285
lines changed

‎manager-dashboard/app/Base/styles.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,16 +94,16 @@ p {
9494
--width-page-content-max: 70rem;
9595
--width-navbar-content-max: 76rem;
9696

97-
--width-mobile-preview: 24rem;
98-
--height-mobile-preview: 40rem;
97+
--width-mobile-preview: 20rem;
98+
--height-mobile-preview: 30rem;
9999

100100
--radius-popup-border: 0.25rem;
101101
--radius-scrollbar-border: 0.25rem;
102102
--radius-blur-shadow: 5px;
103103
--radius-modal: 0.25rem;
104104
--radius-button-border: 0.25rem;
105105
--radius-input-border: 0.25rem;
106-
--radius-card-border: 0.25rem;
106+
--radius-card-border: 0.5rem;
107107
--radius-badge-border: 1rem;
108108

109109
--line-height-none: 1;

‎manager-dashboard/app/components/ExpandableContainer/index.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
3+
import { _cs } from '@togglecorp/fujs';
4+
5+
import Button from '#components/Button';
6+
7+
import styles from './styles.css';
8+
9+
interface Props {
10+
icons?: React.ReactNode;
11+
header?: React.ReactNode;
12+
actions?: React.ReactNode;
13+
className?: string;
14+
children?: React.ReactNode;
15+
}
16+
17+
function ExpandableContainer(props: Props) {
18+
const {
19+
children,
20+
className,
21+
icons,
22+
header,
23+
actions,
24+
} = props;
25+
26+
const [isExpanded, setIsExpanded] = React.useState(false);
27+
28+
return (
29+
<div
30+
className={_cs(
31+
styles.expandableContainer,
32+
isExpanded && styles.expanded,
33+
className,
34+
)}
35+
>
36+
<div className={styles.headerContainer}>
37+
{icons && (
38+
<div className={styles.icons}>
39+
{icons}
40+
</div>
41+
)}
42+
<div className={styles.header}>
43+
{header}
44+
</div>
45+
<div className={styles.actions}>
46+
{actions}
47+
<Button
48+
name={!isExpanded}
49+
onClick={setIsExpanded}
50+
variant="action"
51+
>
52+
{isExpanded ? (
53+
<IoIosArrowUp className={styles.icon} />
54+
) : (
55+
<IoIosArrowDown className={styles.icon} />
56+
)}
57+
</Button>
58+
</div>
59+
</div>
60+
{isExpanded && (
61+
<div className={styles.children}>
62+
{children}
63+
</div>
64+
)}
65+
</div>
66+
);
67+
}
68+
69+
export default ExpandableContainer;

‎manager-dashboard/app/components/ExpandableContainer/styles.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.expandable-container {
2+
border-radius: var(--radius-card-border);
3+
color: inherit;
4+
5+
.header-container {
6+
display: flex;
7+
border: var(--width-separator-thin) solid var(--color-separator);
8+
border-top-left-radius: var(--radius-card-border);
9+
border-top-right-radius: var(--radius-card-border);
10+
padding: var(--spacing-medium);
11+
12+
.header {
13+
flex-grow: 1;
14+
}
15+
16+
.actions {
17+
flex-shrink: 0;
18+
19+
.icon {
20+
font-size: 1.2rem;
21+
}
22+
}
23+
}
24+
25+
.children {
26+
border: var(--width-separator-thin) solid var(--color-separator);
27+
border-bottom-left-radius: var(--radius-card-border);
28+
border-bottom-right-radius: var(--radius-card-border);
29+
padding: var(--spacing-medium);
30+
}
31+
32+
&:not(.expanded) {
33+
.header-container {
34+
border-bottom-left-radius: var(--radius-card-border);
35+
border-bottom-right-radius: var(--radius-card-border);
36+
}
37+
}
38+
}

‎manager-dashboard/app/components/GeoJsonPreview/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
map as createMap,
44
Map,
55
geoJSON,
6-
76
TileLayer,
87
Coords,
98
} from 'leaflet';
@@ -64,7 +63,9 @@ function GeoJsonPreview(props: Props) {
6463
React.useEffect(
6564
() => {
6665
if (mapContainerRef.current && !mapRef.current) {
67-
mapRef.current = createMap(mapContainerRef.current);
66+
mapRef.current = createMap(mapContainerRef.current, {
67+
zoomSnap: 0,
68+
});
6869
}
6970

7071
if (mapRef.current) {
@@ -122,7 +123,7 @@ function GeoJsonPreview(props: Props) {
122123
const bounds = newGeoJson.getBounds();
123124

124125
if (bounds.isValid()) {
125-
map.fitBounds(bounds);
126+
map.fitBounds(bounds, { padding: [0, 0] });
126127
}
127128

128129
return () => {

‎manager-dashboard/app/components/InputSection/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { _cs } from '@togglecorp/fujs';
44
import styles from './styles.css';
55

66
interface Props {
7+
actions?: React.ReactNode;
78
className?: string;
89
heading?: React.ReactNode;
910
children?: React.ReactNode;
@@ -16,14 +17,20 @@ function InputSection(props: Props) {
1617
heading,
1718
children,
1819
contentClassName,
20+
actions,
1921
} = props;
2022

2123
return (
2224
<div className={_cs(styles.inputSection, className)}>
2325
<div className={styles.header}>
24-
<h2>
26+
<h2 className={styles.heading}>
2527
{heading}
2628
</h2>
29+
{actions && (
30+
<div className={styles.actions}>
31+
{actions}
32+
</div>
33+
)}
2734
</div>
2835
<div className={_cs(styles.content, contentClassName)}>
2936
{children}

‎manager-dashboard/app/components/InputSection/styles.css‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
11
.input-section {
22
display: flex;
33
flex-direction: column;
4-
gap: var(--spacing-medium);
4+
gap: var(--spacing-small);
55

66
.header {
7+
display: flex;
8+
gap: var(--spacing-medium);
9+
align-items: flex-end;
710
padding: 0;
11+
12+
.heading {
13+
flex-grow: 1;
14+
}
15+
16+
.actions {
17+
display: flex;
18+
gap: var(--spacing-small);
19+
align-items: flex-end;
20+
}
821
}
922

1023
.content {
1124
display: flex;
1225
flex-direction: column;
13-
border-radius: var(--radius-card);
26+
border-radius: var(--radius-card-border);
1427
gap: var(--spacing-extra-large);
28+
background-color: var(--color-foreground);
29+
padding: var(--spacing-large);
30+
min-height: 14rem;
1531
}
1632
}

‎manager-dashboard/app/components/MobilePreview/index.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react;
2+
import { IoArrowBack } from 'react-icons/io5';
3+
import { _cs } from '@togglecorp/fujs';
4+
5+
import Heading from '#components/Heading';
6+
7+
import styles from './styles.css';
8+
9+
interface Props {
10+
className?: string;
11+
heading?: React.ReactNode;
12+
actions?: React.ReactNode;
13+
children?: React.ReactNode;
14+
}
15+
16+
function MobilePreview(props: Props) {
17+
const {
18+
className,
19+
heading,
20+
actions,
21+
children,
22+
} = props;
23+
24+
return (
25+
<div className={_cs(styles.mobilePreview, className)}>
26+
<div className={styles.header}>
27+
<div className={styles.icons}>
28+
<IoArrowBack />
29+
</div>
30+
<Heading>
31+
{heading}
32+
</Heading>
33+
{actions && (
34+
<div className={styles.actions}>
35+
{actions}
36+
</div>
37+
)}
38+
</div>
39+
<div className={styles.content}>
40+
{children}
41+
</div>
42+
</div>
43+
);
44+
}

‎manager-dashboard/app/components/MobilePreview/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mobile-preview {
2+
color: inherit;
3+
}

‎manager-dashboard/app/components/PopupButton/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface PopupButtonProps<N extends number | string | undefined> extends
1818
componentRef?: React.MutableRefObject<{
1919
setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
2020
} | null>;
21-
persistent: boolean;
21+
persistent?: boolean;
2222
arrowHidden?: boolean;
2323
defaultShown?: boolean;
2424
}
@@ -33,7 +33,7 @@ function PopupButton<N extends number | string | undefined>(props: PopupButtonPr
3333
actions,
3434
componentRef,
3535
arrowHidden,
36-
persistent,
36+
persistent = false,
3737
defaultShown,
3838
...otherProps
3939
} = props;

‎manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export default function SubOption(props: Props) {
5454
<Button
5555
name={index}
5656
onClick={onRemove}
57-
className={styles.removeButton}
5857
>
5958
Remove
6059
</Button>

0 commit comments

Comments
 (0)