Skip to content

Commit c174e7d

Browse files
ryanlanciauxryanlanciaux
authored
Merge pull request #9 from ryanlanciaux/addCellMenu
Add cell menu
2 parents e671868 + 3b44d71 commit c174e7d

20 files changed

+608
-106
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"@rollup/plugin-image": "^2.0.4",
6262
"@types/classnames": "^2.2.10",
6363
"classnames": "^2.2.6",
64+
"react-toggle": "^4.1.1",
6465
"rollup-plugin-css-only": "^2.0.0"
6566
}
6667
}

‎src/CellMenu/CellMenu.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.cell-menu {
2+
background: #29313A;
3+
border: 1px solid #13181E;
4+
box-sizing: border-box;
5+
box-shadow: 0px 10px 42px rgba(0, 0, 0, 0.32), 0px 6px 24px rgba(0, 0, 0, 0.16);
6+
border-radius: 4px;
7+
color: #FFF;
8+
padding: 8px 0;
9+
}
10+
11+
.cell-menu svg * {
12+
stroke: #FFF;
13+
}
14+
15+
.cell-menu > * {
16+
font-family: 'Inter', sans-serif;
17+
font-size: 13px;
18+
box-sizing: border-box;
19+
width: 100%;
20+
padding: 8px;
21+
}
22+
23+
.cell-menu > *:not(:first-child) {
24+
border-top: 1px solid rgba(143, 150, 157, .2);
25+
}
26+
27+
.cell-menu > *:not(:last-child) {
28+
border-bottom: 1px solid #13181E;
29+
}
30+
31+
.cell-menu-section > *:not(:last-child) {
32+
margin-bottom: 8px;
33+
}
34+
35+
.cell-menu-item {
36+
display: flex;
37+
flex-direction: row;
38+
justify-content: space-between;
39+
align-items: center;
40+
}
41+
42+
.cell-menu-item > * {
43+
padding: 4px;
44+
display: flex;
45+
align-items: center;
46+
}
47+
48+
.cell-menu-item > button {
49+
background: none;
50+
width: 100%;
51+
border: none;
52+
text-align: left;
53+
color: white;
54+
font-size: 13px;
55+
}
56+
57+
.cell-menu-item > button > *{
58+
margin-right: 8px;
59+
}
60+
61+
.cell-menu-item > button:hover,
62+
.cell-menu-item > button:focus,
63+
.cell-menu-item > button:active,
64+
.cell-menu-item label:hover,
65+
.cell-menu-item label:focus,
66+
.cell-menu-item label.active {
67+
background-color: #6100FF;
68+
}
69+
70+
.cell-menu-item.heading {
71+
color: rgba(255, 255, 255, 0.6);
72+
}
73+
74+
.cell-menu-item .cell-menu-item-toggle {
75+
width: 100%;
76+
display: flex;
77+
justify-content: space-between;
78+
}

‎src/CellMenu/CellMenu.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { HTMLAttributes } from 'react';
2+
import classnames from 'classnames';
3+
import './CellMenu.css';
4+
5+
export type Props = React.FC<HTMLAttributes<HTMLDivElement>>;
6+
7+
export const CellMenuSection: Props = ({ children }) => {
8+
return <div className="cell-menu-section">{children}</div>;
9+
};
10+
11+
export const CellMenuItem: Props = ({ children, className, ...props }) => {
12+
return (
13+
<div
14+
className={classnames('cell-menu-item', className)}
15+
{...props}
16+
tabIndex="-1"
17+
>
18+
{children}
19+
</div>
20+
);
21+
};
22+
23+
export const CellMenu: Props = ({ children }) => {
24+
return <div className="cell-menu">{children}</div>;
25+
};

‎src/CellMenu/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './CellMenu';

‎src/CircularButton/icons.tsx

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/CircularButton/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export * from './CircularButton';
2-
export * from './icons';
2+
export * from '../Icons';

‎src/Icons/Icons.tsx

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import React, { HTMLAttributes } from 'react';
2+
3+
export const Markdown = () => {
4+
return (
5+
<svg
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
d="M2.34567 11.4999L2.34563 4.49994H3.88409L5.42255 6.92302L6.96101 4.49994H8.49947L8.49951 11.4999H6.96105L6.96101 7.23071L5.42255 9.15378L3.88409 7.23071L3.88413 11.4999H2.34567ZM11.6149 11.5L9.49949 8.99994H10.7495V4.49994H12.2495V8.99994H13.4995L11.6149 11.5Z"
14+
fill="#EEEFF0"
15+
/>
16+
</svg>
17+
);
18+
};
19+
20+
export const Delete = () => {
21+
return (
22+
<svg
23+
width="16"
24+
height="16"
25+
viewBox="0 0 16 16"
26+
fill="none"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<path
30+
d="M13.5 5.5H11.5M2.5 5.5H4.5M4.5 5.5V13.5C4.5 14.0523 4.94772 14.5 5.5 14.5H10.5C11.0523 14.5 11.5 14.0523 11.5 13.5V5.5M4.5 5.5H11.5"
31+
stroke="#FF7474"
32+
stroke-linecap="round"
33+
stroke-linejoin="round"
34+
/>
35+
<path
36+
d="M10.5 5.5L10 2.5H6L5.5 5.5"
37+
stroke="#FF7474"
38+
stroke-linecap="round"
39+
stroke-linejoin="round"
40+
/>
41+
</svg>
42+
);
43+
};
44+
export const AddCell = ({ below = true }) => {
45+
return below ? (
46+
<svg
47+
width="16"
48+
height="16"
49+
viewBox="0 0 16 16"
50+
fill="none"
51+
xmlns="http://www.w3.org/2000/svg"
52+
>
53+
<path
54+
d="M13.5 8.99994V3.83327C13.5 3.09689 12.903 2.49994 12.1667 2.49994H3.83333C3.09695 2.49994 2.5 3.09689 2.5 3.83327L2.5 12.1666C2.5 12.903 3.09695 13.4999 3.83333 13.4999H9"
55+
stroke="white"
56+
stroke-linecap="round"
57+
stroke-linejoin="round"
58+
/>
59+
<path
60+
d="M13.5 11.4999V15.4999"
61+
stroke="white"
62+
stroke-linecap="round"
63+
stroke-linejoin="round"
64+
/>
65+
<path
66+
d="M8 5.5V9.5"
67+
stroke="white"
68+
stroke-linecap="round"
69+
stroke-linejoin="round"
70+
/>
71+
<path
72+
d="M11.5 13.5H15.5"
73+
stroke="white"
74+
stroke-linecap="round"
75+
stroke-linejoin="round"
76+
/>
77+
<path
78+
d="M10 8.50006L8 10.5001L6 8.50006"
79+
stroke="white"
80+
stroke-linecap="round"
81+
stroke-linejoin="round"
82+
/>
83+
</svg>
84+
) : null;
85+
};
86+
87+
export const Clear = () => {
88+
return (
89+
<svg
90+
width="16"
91+
height="16"
92+
viewBox="0 0 16 16"
93+
fill="none"
94+
xmlns="http://www.w3.org/2000/svg"
95+
>
96+
<g opacity="0.8">
97+
<path
98+
d="M7.99951 6C3.93295 6.5 1.31391 10.7209 1.49949 13.5H10.8498C6.99953 11 7.99951 6 7.99951 6Z"
99+
stroke="#EEEFF0"
100+
stroke-linecap="round"
101+
stroke-linejoin="round"
102+
/>
103+
<path
104+
d="M11.5 9.5H14.5"
105+
stroke="#EEEFF0"
106+
stroke-linecap="round"
107+
stroke-linejoin="bevel"
108+
/>
109+
<path
110+
d="M10.5 7.5H14.5"
111+
stroke="#EEEFF0"
112+
stroke-linecap="round"
113+
stroke-linejoin="bevel"
114+
/>
115+
<path
116+
d="M12.5 5.5H14.5"
117+
stroke="#EEEFF0"
118+
stroke-linecap="round"
119+
stroke-linejoin="bevel"
120+
/>
121+
<path d="M6.5 11.5C6.5 11.5 6.5 13 7.5 13.5" stroke="#EEEFF0" />
122+
<path
123+
d="M4.49938 10.5C4.49938 10.5 3.49939 12 3.99937 13.5"
124+
stroke="#EEEFF0"
125+
/>
126+
<path
127+
d="M8 9C7.51338 9.07604 5.32118 8.77741 4.5 7.5"
128+
stroke="#EEEFF0"
129+
/>
130+
<path d="M8 6.17468L13 1.17474" stroke="#EEEFF0" />
131+
</g>
132+
</svg>
133+
);
134+
};
135+
export const Play = () => {
136+
return (
137+
<svg
138+
width="9"
139+
height="10"
140+
viewBox="0 0 9 10"
141+
fill="none"
142+
xmlns="http://www.w3.org/2000/svg"
143+
>
144+
<path
145+
d="M8.13165 4.45728L1.9792 0.612C1.55293 0.34558 1 0.65204 1 1.15472V8.84528C1 9.34796 1.55293 9.65442 1.9792 9.388L8.13165 5.54272C8.53272 5.29205 8.53272 4.70795 8.13165 4.45728Z"
146+
fill="#757F88"
147+
stroke="#757F88"
148+
strokeLinecap="round"
149+
strokeLinejoin="round"
150+
/>
151+
</svg>
152+
);
153+
};
154+
155+
export const More = () => {
156+
return (
157+
<svg
158+
width="16"
159+
height="16"
160+
viewBox="0 0 16 16"
161+
fill="none"
162+
xmlns="http://www.w3.org/2000/svg"
163+
>
164+
<circle cx="8" cy="8" r="1" fill="#757F88" />
165+
<circle cx="4" cy="8" r="1" fill="#757F88" />
166+
<circle cx="12" cy="8" r="1" fill="#757F88" />
167+
</svg>
168+
);
169+
};
170+
171+
export const File = (props: HTMLAttributes<SVGElement>) => (
172+
<svg
173+
width="16"
174+
height="16"
175+
viewBox="0 0 16 16"
176+
fill="none"
177+
xmlns="http://www.w3.org/2000/svg"
178+
{...props}
179+
>
180+
<mask id="path-2-inside-1" fill="white">
181+
<path
182+
fill-rule="evenodd"
183+
clip-rule="evenodd"
184+
d="M2.5 2C2.22386 2 2 2.22386 2 2.5V13.5C2 13.7761 2.22386 14 2.5 14H13.5C13.7761 14 14 13.7761 14 13.5V2.5C14 2.22386 13.7761 2 13.5 2H2.5ZM9 10H5V11H9V10ZM5 8H11V9H5V8ZM9 6H5V7H9V6Z"
185+
/>
186+
</mask>
187+
<path
188+
fill-rule="evenodd"
189+
clip-rule="evenodd"
190+
d="M2.5 2C2.22386 2 2 2.22386 2 2.5V13.5C2 13.7761 2.22386 14 2.5 14H13.5C13.7761 14 14 13.7761 14 13.5V2.5C14 2.22386 13.7761 2 13.5 2H2.5ZM9 10H5V11H9V10ZM5 8H11V9H5V8ZM9 6H5V7H9V6Z"
191+
fill="#757F88"
192+
/>
193+
<path
194+
d="M5 10V9H4V10H5ZM9 10H10V9H9V10ZM5 11H4V12H5V11ZM9 11V12H10V11H9ZM11 8H12V7H11V8ZM5 8V7H4V8H5ZM11 9V10H12V9H11ZM5 9H4V10H5V9ZM5 6V5H4V6H5ZM9 6H10V5H9V6ZM5 7H4V8H5V7ZM9 7V8H10V7H9ZM3 2.5C3 2.77614 2.77614 3 2.5 3V1C1.67157 1 1 1.67157 1 2.5H3ZM3 13.5V2.5H1V13.5H3ZM2.5 13C2.77614 13 3 13.2239 3 13.5H1C1 14.3284 1.67157 15 2.5 15V13ZM13.5 13H2.5V15H13.5V13ZM13 13.5C13 13.2239 13.2239 13 13.5 13V15C14.3284 15 15 14.3284 15 13.5H13ZM13 2.5V13.5H15V2.5H13ZM13.5 3C13.2239 3 13 2.77614 13 2.5H15C15 1.67157 14.3284 1 13.5 1V3ZM2.5 3H13.5V1H2.5V3ZM5 11H9V9H5V11ZM6 11V10H4V11H6ZM9 10H5V12H9V10ZM8 10V11H10V10H8ZM11 7H5V9H11V7ZM12 9V8H10V9H12ZM5 10H11V8H5V10ZM4 8V9H6V8H4ZM5 7H9V5H5V7ZM6 7V6H4V7H6ZM9 6H5V8H9V6ZM8 6V7H10V6H8Z"
195+
fill="#757F88"
196+
mask="url(#path-2-inside-1)"
197+
/>
198+
</svg>
199+
);
200+
201+
export const Folder = (props: HTMLAttributes<SVGElement>) => (
202+
<svg
203+
width="16"
204+
height="16"
205+
viewBox="0 0 16 16"
206+
fill="none"
207+
xmlns="http://www.w3.org/2000/svg"
208+
{...props}
209+
>
210+
<path
211+
d="M7.98881 5.0109L7.98395 5.01562H8H13.5C13.7679 5.01562 13.9844 5.23207 13.9844 5.5V12.5C13.9844 12.7679 13.7679 12.9844 13.5 12.9844H2.5C2.23207 12.9844 2.01562 12.7679 2.01562 12.5V3.5C2.01562 3.23207 2.23207 3.01562 2.5 3.01562H5.99993C6.02781 3.01588 6.05459 3.02655 6.075 3.04554L7.98881 5.0109Z"
212+
fill="#757F88"
213+
stroke="#757F88"
214+
stroke-width="0.03125"
215+
/>
216+
</svg>
217+
);
218+
219+
export const Chevron = (props: HTMLAttributes<SVGElement>) => (
220+
<svg
221+
width="7"
222+
height="4"
223+
viewBox="0 0 7 4"
224+
fill="none"
225+
xmlns="http://www.w3.org/2000/svg"
226+
{...props}
227+
>
228+
<path
229+
d="M6 1L3.5 3.5L1 1"
230+
stroke="#757F88"
231+
stroke-linecap="round"
232+
stroke-linejoin="round"
233+
/>
234+
</svg>
235+
);

‎src/Sidebar/chevron-down.svg renamed to ‎src/Icons/chevron-down.svg

File renamed without changes.

‎src/Sidebar/file-light.svg renamed to ‎src/Icons/file-light.svg

File renamed without changes.

‎src/Sidebar/file.svg renamed to ‎src/Icons/file.svg

File renamed without changes.

0 commit comments

Comments
 (0)