Skip to content

Commit 56eba08

Browse files
AceTheCreatorAceTheCreator
committed
completed the UI
1 parent 70a6128 commit 56eba08

File tree

6 files changed

+201
-66
lines changed

6 files changed

+201
-66
lines changed

‎src/App.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import Routes from "./routes/routes";
77

88
function App() {
99
return (
10-
<Layout>
10+
<div>
1111
<NavBar />
12-
<Routes />
13-
</Layout>
12+
<Layout>
13+
<Routes />
14+
</Layout>
15+
</div>
1416
);
1517
}
1618

‎src/Cell.js

Lines changed: 136 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
/* eslint-disable react/prop-types */
22
/* eslint-disable jsx-a11y/no-static-element-interactions */
33
/* eslint-disable jsx-a11y/click-events-have-key-events */
4-
import React, { useRef, useEffect } from "react";
4+
import React, { useRef, useEffect, useState } from "react";
55
// eslint-disable-next-line import/no-extraneous-dependencies
66
import PropTypes from "prop-types";
77
import CodeMirror from "react-codemirror";
88
import { Remarkable } from "remarkable";
9+
import { CgMathPlus, CgArrowUp, CgArrowDown, CgTrash } from "react-icons/cg";
10+
import { BsFillCaretRightFill } from "react-icons/bs";
11+
import {
12+
AddCellButton,
13+
CellButton,
14+
CellHead,
15+
OtherCellButtonWrapper,
16+
CellTextArea,
17+
} from "./Cell.style";
918

1019
require("codemirror/lib/codemirror.css");
1120
require("codemirror/mode/javascript/javascript");
12-
require("codemirror/theme/dracula.css");
21+
require("codemirror/theme/yeti.css");
1322

1423
export default function Cell({
1524
cell,
@@ -20,7 +29,14 @@ export default function Cell({
2029
}) {
2130
const refCode = useRef(null);
2231
const refOutput = useRef("");
23-
32+
const [showMoreCellButton, setShowMoreCellButton] = useState("none");
33+
useEffect(() => {
34+
if (currentCell === cellId) {
35+
setShowMoreCellButton("flex");
36+
} else {
37+
setShowMoreCellButton("none");
38+
}
39+
}, [cellId, currentCell]);
2440
const getCode = () => {
2541
if (cell.type === "code") {
2642
const input = refCode.current.getCodeMirror().getValue();
@@ -109,62 +125,124 @@ export default function Cell({
109125
};
110126
return (
111127
<>
112-
<button
113-
onClick={() => {
114-
getCode();
115-
}}
116-
>
117-
Run
118-
</button>
119-
<button
120-
onClick={() => {
121-
upCell("code");
122-
}}
123-
>
124-
Up cell
125-
</button>
126-
<button
127-
onClick={() => {
128-
downCell("code");
129-
}}
130-
>
131-
down cell
132-
</button>
133-
<button
134-
onClick={() => {
135-
upCell("text");
136-
}}
137-
>
138-
Text up
139-
</button>
140-
<button
141-
onClick={() => {
142-
downCell("text");
143-
}}
144-
>
145-
Text down
146-
</button>
147-
<button
148-
onClick={() => {
149-
deleteCell();
128+
<div
129+
style={{
130+
display: "flex",
131+
alignItems: "center",
132+
justifyContent: "space-between",
133+
marginTop: "20px",
150134
}}
151135
>
152-
Delete Cell
153-
</button>
154-
{cell.type === "code" ? (
155-
<CodeMirror
156-
value={cell.input}
157-
ref={refCode}
158-
options={{
159-
tabSize: 2,
160-
theme: "dracula",
161-
lineNumbers: true,
162-
mode: "javascript",
163-
}}
164-
/>
165-
) : (
166-
<TextCell refText={refCode} />
167-
)}
136+
<div style={{ marginTop: "30px" }}>
137+
{currentCell === cellId ? (
138+
<button
139+
style={{
140+
background: "none",
141+
border: "none",
142+
marginLeft: "-10px",
143+
}}
144+
onClick={() => {
145+
getCode();
146+
}}
147+
>
148+
<BsFillCaretRightFill color="#FFDF28" fontSize="30px" />
149+
</button>
150+
) : (
151+
<div>[{cellId}]:</div>
152+
)}
153+
</div>
154+
<div style={{ width: "95%" }}>
155+
<CellHead>
156+
<div
157+
style={{
158+
display: "flex",
159+
alignItems: "center",
160+
}}
161+
>
162+
<AddCellButton
163+
onClick={() => {
164+
downCell("code");
165+
}}
166+
>
167+
<CgMathPlus
168+
style={{
169+
fontSize: "16px",
170+
color: "rgb(179, 179, 179)",
171+
}}
172+
/>
173+
Code
174+
</AddCellButton>
175+
<AddCellButton
176+
onClick={() => {
177+
upCell("text");
178+
}}
179+
style={{
180+
marginLeft: "10px",
181+
}}
182+
>
183+
<CgMathPlus
184+
style={{
185+
fontSize: "16px",
186+
color: "rgb(179, 179, 179)",
187+
}}
188+
/>
189+
Text
190+
</AddCellButton>
191+
</div>
192+
<OtherCellButtonWrapper display={showMoreCellButton}>
193+
<CellButton
194+
onClick={() => {
195+
upCell("code");
196+
}}
197+
>
198+
<div>
199+
{" "}
200+
<CgArrowUp />
201+
</div>
202+
</CellButton>
203+
<CellButton
204+
onClick={() => {
205+
downCell("text");
206+
}}
207+
>
208+
<div>
209+
<CgArrowDown />
210+
</div>
211+
</CellButton>
212+
<CellButton
213+
onClick={() => {
214+
deleteCell();
215+
}}
216+
>
217+
<div>
218+
<CgTrash />
219+
</div>
220+
</CellButton>
221+
</OtherCellButtonWrapper>
222+
</CellHead>
223+
<div
224+
style={{
225+
marginTop: "10px",
226+
}}
227+
>
228+
{cell.type === "code" ? (
229+
<CodeMirror
230+
onFocusChange={() => setCurrentCell(cellId)}
231+
value={cell.input}
232+
ref={refCode}
233+
options={{
234+
tabSize: 1,
235+
theme: "yeti",
236+
lineNumbers: true,
237+
mode: "javascript",
238+
}}
239+
/>
240+
) : (
241+
<TextCell refText={refCode} />
242+
)}
243+
</div>
244+
</div>
245+
</div>
168246
<div
169247
ref={refOutput}
170248
onClick={() => {
@@ -176,7 +254,7 @@ export default function Cell({
176254
}
177255

178256
function TextCell({ refText }) {
179-
return <textarea ref={refText}></textarea>;
257+
return <CellTextArea ref={refText}></CellTextArea>;
180258
}
181259

182260
TextCell.propTypes = {

‎src/Cell.style.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import styled from "styled-components";
3+
4+
export const AddCellButton = styled.button`
5+
background: transparent;
6+
border: 1px solid rgb(179, 179, 179);
7+
color: rgb(179, 179, 179);
8+
font-size: 14px;
9+
width: 130px;
10+
height: 3vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
cursor: pointer;
15+
`;
16+
17+
export const CellHead = styled.div`
18+
display: flex;
19+
justify-content: space-between;
20+
`;
21+
22+
export const OtherCellButtonWrapper = styled.div`
23+
position: absolute;
24+
z-index: 99 !important;
25+
display: flex;
26+
align-items: flex-end;
27+
left: 89%;
28+
margin-top: 37px;
29+
display: ${(props) => props.display};
30+
`;
31+
export const CellButton = styled.button`
32+
background: transparent;
33+
border: 1px solid #aeaeae;
34+
color: #636363;
35+
font-size: 16px;
36+
max-width: 20px;
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
border-radius: 2px;
41+
`;
42+
43+
export const CellTextArea = styled.textarea`
44+
width: 100%;
45+
min-height: 7vh;
46+
border: 1px solid #e5e1db;
47+
border-radius: 5px;
48+
resize: none;
49+
&:focus {
50+
outline: none;
51+
}
52+
`;

‎src/components/NavBar/navbar.style.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ export const NavLinksList = styled.nav`
2828
list-style: none;
2929
justify-content: space-evenly;
3030
align-items: center;
31-
width: 30rem;
32-
31+
margin-left: 20px !important;
3332
@media only screen and (max-width: 768px) {
3433
display: none;
3534
}
@@ -45,6 +44,7 @@ export const NavLinksList = styled.nav`
4544

4645
export const NavLinkItem = styled.li`
4746
text-decoration: none;
47+
margin-right: 20px;
4848
4949
a {
5050
text-decoration: none;

‎src/components/layout/layout.style.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,5 @@ import styled from "styled-components";
33

44
export const Layout = styled.div`
55
margin: 0 auto;
6-
max-width: 1500px;
7-
padding: 0px;
8-
position: relative;
6+
max-width: 1400px;
97
`;

‎src/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,8 @@ code {
1111
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1212
monospace;
1313
}
14+
15+
.CodeMirror{
16+
min-height: 50px !important;
17+
height: auto !important;
18+
}

0 commit comments

Comments
 (0)