Skip to content

Commit de080f9

Browse files
KariaroKariaro
committed
feat: Almost got the editor working
1 parent 5f9018b commit de080f9

16 files changed

+907
-36
lines changed

‎src/App.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
body {
22
background-color: #222;
33
color: #fff;
4-
padding-top: 49px;
54
}
65

76
a {

‎src/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import NavItem from './components/navbar/NavItem';
88
function App() {
99
return (
1010
<div className="App">
11-
<Navbar>
11+
{/*<Navbar>
1212
<NavItem name="Documentation" path="/"/>
1313
<NavItem name="Editor" path="/edit"/>
1414
<NavItem name="Test" path="/test"/>
15-
</Navbar>
15+
</Navbar>*/}
1616

1717
<Switch>
1818
<Route path="/test">

‎src/components/navbar/Navbar.module.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
text-align: left;
99
}
1010

11-
body {
12-
padding-top: 40px;
13-
}
14-
1511
.Item {
1612
background-color: #111;
1713
color: #fff;

‎src/components/viewer/Editor.module.scss

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
.Sandbox {
3+
border-radius: 4px;
4+
padding: 2px;
5+
margin: 2px;
6+
border: 0;
7+
}
8+
9+
.Param {
10+
border-bottom: 2px solid #0005;
11+
padding-bottom: 10px;
12+
margin-left: 20px;
13+
margin-bottom: 10px;
14+
15+
& label {
16+
display: inline-block;
17+
font-size: 14px;
18+
user-select: none;
19+
min-width: 100%;
20+
max-width: 100%;
21+
width: 100%;
22+
}
23+
24+
&_buttons {
25+
float: right;
26+
}
27+
28+
&_text {
29+
background-color: #1b1b1b;
30+
border: 0;
31+
border-bottom: 2px solid rgb(82, 61, 41);
32+
padding: 1px 0 2px 10px;
33+
border-radius: 5px;
34+
margin-left: 10px;
35+
margin-right: 10px;
36+
width: calc(100% - 20px);
37+
color: white;
38+
outline: 0;
39+
}
40+
41+
&_textarea {
42+
background-color: #1b1b1b;
43+
border: 0;
44+
border-bottom: 2px solid rgb(82, 61, 41);
45+
padding: 5px 10px 5px 10px;
46+
border-radius: 5px;
47+
margin-left: 10px;
48+
margin-right: 10px;
49+
color: white;
50+
outline: 0;
51+
resize: vertical;
52+
width: calc(100% - 30px);
53+
height: 26px;
54+
}
55+
56+
&_button {
57+
background-color: #1b1b1b;
58+
border: 0;
59+
border-bottom: 2px solid rgb(82, 61, 41);
60+
padding: 1px 0 2px 10px;
61+
62+
color: white;
63+
display: inline;
64+
padding: 0 3px 1px 3px;
65+
font-size: 13px;
66+
user-select: none;
67+
68+
&:first-child {
69+
border-radius: 3px 0 0 3px;
70+
}
71+
72+
&:last-child {
73+
border-radius: 0 3px 3px 0;
74+
}
75+
76+
&:only-child {
77+
border-radius: 3px;
78+
}
79+
80+
&:hover {
81+
transition: background-color 0.3s;
82+
background-color: #000;
83+
}
84+
85+
&:active {
86+
transition: background-color 0s;
87+
background-color: #740;
88+
}
89+
}
90+
}

‎src/components/viewer/Overview.module.scss

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
.Function {
2+
/*background-color: rgb(139, 108, 62);*/
3+
background-color: #463c2d;
4+
border-bottom: 4px solid rgb(124, 93, 61);
5+
padding: 10px;
6+
border-radius: 4px;
7+
margin-bottom: 10px;
8+
overflow: hidden;
9+
margin-right: 10px;
10+
color: white;
11+
display: flex;
12+
13+
&_content {
14+
flex: 1;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
19+
&_editor {
20+
background-color: #0003;
21+
border-radius: 5px;
22+
padding: 5px;
23+
margin-left: 10px;
24+
flex: 1;
25+
resize: both;
26+
}
27+
}
28+
29+
.Function_local {
30+
background-color: #48372d;
31+
border-bottom: 4px solid rgb(112, 92, 73);
32+
padding: 10px;
33+
border-radius: 4px;
34+
margin-bottom: 10px;
35+
margin-right: 10px;
36+
color: white;
37+
}
38+
39+
.FunctionHeader {
40+
margin-bottom: 5px;
41+
min-height: 20px;
42+
43+
& > span {
44+
float: left;
45+
margin-right: 5px;
46+
}
47+
}
48+
49+
/* Sandbox should be different depending on context */
50+
.Function_sandbox {
51+
background-color: #0003;
52+
color: orange;
53+
font-weight: bold;
54+
font-size: 12px;
55+
padding: 2px 5px 4px 5px;
56+
border-radius: 10px;
57+
margin-left: 5px;
58+
}
59+
60+
.Function_name {
61+
color: white;
62+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
63+
font-size: 20px;
64+
65+
&:hover {
66+
border-bottom: 2px solid white;
67+
transition: border-radius 0.1s;
68+
border-radius: 0px;
69+
}
70+
}
71+
72+
.Function_call_name {
73+
color: #709f70;
74+
}
75+
76+
/* Function call information. Code example */
77+
.Function_call {
78+
background-color: rgb(27, 27, 27);
79+
border-bottom: 4px solid rgb(109, 78, 49);
80+
border-radius: 5px;
81+
font-size: 14px;
82+
padding: 10px 5px 10px 5px;
83+
word-wrap: break-word;
84+
white-space: pre-wrap;
85+
}
86+
87+
/* Function params */
88+
.Function_params {
89+
background-color: #0002;
90+
border-radius: 5px;
91+
font-size: 14px;
92+
padding: 2px;
93+
margin: 0;
94+
95+
& ul {
96+
list-style: circle;
97+
}
98+
99+
&_name {
100+
font-weight: bold;
101+
}
102+
103+
&_type {
104+
font-style: italic;
105+
&::before {
106+
content: ' <';
107+
color: #f70;
108+
}
109+
110+
&::after {
111+
content: '>';
112+
color: #f70;
113+
}
114+
}
115+
116+
&_separator::after {
117+
content: ', ';
118+
color: #f70;
119+
}
120+
}
121+
122+
/* Function description */
123+
.Function_desc {
124+
padding-left: 10px;
125+
font-size: 16px;
126+
/*border-left: 2px solid rgb(56, 40, 25);*/
127+
128+
& a {
129+
color: rgb(247, 212, 54);
130+
}
131+
132+
& code {
133+
word-spacing: pre-wrap;
134+
word-break: keep-all;
135+
}
136+
137+
& p {
138+
margin: 10px 0 10px 0;
139+
}
140+
}
141+
142+
.Function_desc_note, .Function_desc_warning {
143+
margin-top: 20px;
144+
border-radius: 5px;
145+
overflow: hidden;
146+
147+
& div {
148+
padding: 0 0 5px 5px;
149+
}
150+
151+
&.note_title {
152+
background-color: #0003;
153+
border-radius: 5px 5px 0 0;
154+
padding: 5px;
155+
margin: 0;
156+
}
157+
}
158+
159+
.Function_desc_note {
160+
background-color: #476947;
161+
}
162+
163+
.Function_desc_warning {
164+
background-color: #818a08;
165+
}

‎src/components/viewer/Viewer.css

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
:root {
2+
--navbar-height: 0px;
3+
}
4+
15
#viewer {
26
overflow: hidden;
37
display: flex;
4-
padding-top: 9px;
58
}
69

710
#summary {
8-
background-color: #111;
11+
background-color: #222;
912
position: fixed;
10-
height: calc(100vh - 49px);
13+
height: calc(100vh - var(--navbar-height));
1114
overflow-x: hidden;
1215
overflow-y: scroll;
1316
width: 250px;
@@ -17,11 +20,13 @@
1720
}
1821

1922
#overview {
20-
background-color: #222;
23+
background-color: #333;
24+
color: white;
2125
position: fixed;
2226
width: calc(100% - 250px);
23-
height: calc(100vh - 49px);
27+
height: calc(100vh - var(--navbar-height));
2428
left: 250px;
29+
overflow-y: scroll;
2530
}
2631

2732
#editor {
@@ -35,6 +40,7 @@
3540
width: 100%;
3641
border: none;
3742
margin-bottom: 5px;
43+
font-size: 14px;
3844

3945
color: white;
4046
}
@@ -45,25 +51,28 @@
4551
border: none;
4652
}
4753

54+
55+
4856
.MuiTreeItem-content {
4957
user-select: none;
58+
background-color: #1d1d1d;
5059
}
5160

5261
.Mui-expanded > .MuiTreeItem-content {
53-
background-color: #0aa;
54-
height: 18px;
55-
padding-top: 3px;
56-
border-bottom: 3px solid #7ac;
57-
border-radius: 3px 3px 0 0;
62+
background-color: #072;
5863
transition: background-color 0.1s;
5964
}
6065

66+
.Mui-expanded > .MuiTreeItem-content .MuiTreeItem-label {
67+
background-color: #fff3;
68+
}
69+
6170
.MuiTreeItem-root {
6271
background-color: initial;
6372
}
6473

65-
.Mui-selected {
66-
background-color: #000;
74+
.MuiTreeItem-root.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label {
75+
background-color: #fff3 !important;
6776
}
6877

6978
.Mui-expanded.MuiTreeItem-root {
@@ -72,4 +81,10 @@
7281

7382
.MuiTreeItem-iconContainer {
7483
width: 0px;
75-
}
84+
}
85+
86+
.MuiTreeItem-group .MuiTreeItem-content {
87+
background-color: #222;
88+
border-radius: 0;
89+
border: none;
90+
}

0 commit comments

Comments
 (0)