Skip to content

Commit c91e5b5

Browse files
MadinventorZeroMadinventorZero
authored
Merge branch 'CaretDevelopment' into annotation-feature
2 parents 0b9a217 + 1e94c14 commit c91e5b5

File tree

16 files changed

+503
-43
lines changed

16 files changed

+503
-43
lines changed

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import StateContext from '../../context/context';
44
import Tabs from '@material-ui/core/Tabs';
55
import Tab from '@material-ui/core/Tab';
66
import CodePreview from './CodePreview';
7+
import StylesEditor from './StylesEditor';
78
import Box from '@material-ui/core/Box';
89
import Tree from '../../tree/TreeChart';
910
import { emitKeypressEvents } from 'readline';
@@ -39,6 +40,8 @@ const BottomTabs = () => {
3940
setTheme(e.target.value);
4041
};
4142

43+
console.log("Editor Theme: ", theme);
44+
4245
return (
4346
<div className={classes.root} style={style}>
4447
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
@@ -60,6 +63,11 @@ const BottomTabs = () => {
6063
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
6164
label="Component Tree"
6265
/>
66+
<Tab
67+
disableRipple
68+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
69+
label="CSS Editor"
70+
/>
6371
</Tabs>
6472
<div className={classes.projectTypeWrapper}>
6573
<FormControl size='small'>
@@ -80,6 +88,7 @@ const BottomTabs = () => {
8088
</Box>
8189
{tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
8290
{tab === 1 && <Tree data={components} />}
91+
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
8392
</div>
8493
);
8594
};

‎app/src/components/bottom/StylesEditor.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { useContext, useState, useRef, useEffect } from 'react';
2+
import StateContext from '../../context/context';
3+
import AceEditor from 'react-ace';
4+
import 'ace-builds/src-noconflict/mode-css';
5+
import 'ace-builds/src-noconflict/theme-monokai';
6+
import 'ace-builds/src-noconflict/theme-github';
7+
import 'ace-builds/src-noconflict/theme-solarized_dark';
8+
import 'ace-builds/src-noconflict/theme-solarized_light';
9+
import 'ace-builds/src-noconflict/theme-terminal';
10+
import 'ace-builds/src-min-noconflict/ext-searchbox';
11+
import { Component } from '../../interfaces/Interfaces';
12+
import useResizeObserver from '../../tree/useResizeObserver';
13+
import { string } from 'prop-types';
14+
import Fab from '@material-ui/core/Fab';
15+
import SaveIcon from '@material-ui/icons/Save';
16+
17+
const StylesEditor: React.FC<{
18+
theme: string | null;
19+
setTheme: any | null;
20+
}> = ({ theme, setTheme }) => {
21+
const wrapper = useRef();
22+
const [css, setCss] = useState();
23+
// const [state, dispatch] = useContext(StateContext);
24+
25+
useEffect(() => {
26+
loadFile();
27+
}, []);
28+
29+
const loadFile = () => {
30+
const myHeaders = new Headers({
31+
'Content-Type': 'text/css',
32+
Accept: 'text/css',
33+
});
34+
fetch('/demoRender', {
35+
headers: myHeaders,
36+
})
37+
.then(response => response.text())
38+
.then((data) => {
39+
setCss(data);
40+
});
41+
}
42+
43+
const saveFile = () => {
44+
console.log('saveFile: ', css);
45+
// const myHeaders = new Headers({
46+
// headers: { 'Content-Type': 'application/json' },
47+
// });
48+
fetch('/user-styles/save', {
49+
method: 'POST',
50+
headers: { 'Content-Type': 'application/json' },
51+
body: JSON.stringify({ data: css }),
52+
})
53+
.then(response => response.text())
54+
.then((data) => {
55+
// setCss(data);
56+
//message save!
57+
});
58+
}
59+
const saveCss = (e) => {
60+
e.preventDefault();
61+
saveFile();
62+
}
63+
64+
const handleChange = (text) => {
65+
setCss(text);
66+
}
67+
68+
return (
69+
<div
70+
className='text-editor'
71+
ref={wrapper}
72+
style={{
73+
height: '40vh',
74+
maxWidth: '100%',
75+
justifyContent: 'center',
76+
}}
77+
>
78+
<AceEditor
79+
mode="css"
80+
theme={'solarized_dark'}
81+
width="100%"
82+
height="100%"
83+
onChange={handleChange}
84+
value={css}
85+
name="Css_div"
86+
// readOnly={false}
87+
fontSize={16}
88+
tabSize={2}
89+
enableBasicAutocompletion={true}
90+
enableLiveAutocompletion={true}
91+
/>
92+
<Fab className='btn' onClick={saveCss} color="secondary" aria-label="add">
93+
<SaveIcon />
94+
</Fab>
95+
</div>
96+
);
97+
};
98+
99+
export default StylesEditor;

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ const HTMLPanel = (props): JSX.Element => {
142142
};
143143

144144
const handleCreateElement = useCallback((e) => {
145-
// Canret
146145
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
147146
e.preventDefault();
148147
document.getElementById('submitButton').click();

‎app/src/components/main/renderDemo.css

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,191 @@
66
width: 100px;
77
background-color: #cc0707;
88
}
9+
10+
11+
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
12+
13+
.login-page {
14+
width: 360px;
15+
padding: 8% 0 0;
16+
margin: auto;
17+
}
18+
.form {
19+
position: relative;
20+
z-index: 1;
21+
background: #FFFFFF;
22+
max-width: 360px;
23+
margin: 0 auto 100px;
24+
padding: 45px;
25+
text-align: center;
26+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
27+
}
28+
.form input {
29+
font-family: "Roboto", sans-serif;
30+
outline: 0;
31+
background: #f2f2f2;
32+
width: 100%;
33+
border: 0;
34+
margin: 0 0 15px;
35+
padding: 15px;
36+
box-sizing: border-box;
37+
font-size: 14px;
38+
}
39+
.form button {
40+
font-family: "Roboto", sans-serif;
41+
text-transform: uppercase;
42+
outline: 0;
43+
background: #4CAF50;
44+
width: 100%;
45+
border: 0;
46+
padding: 15px;
47+
color: #FFFFFF;
48+
font-size: 14px;
49+
-webkit-transition: all 0.3 ease;
50+
transition: all 0.3 ease;
51+
cursor: pointer;
52+
}
53+
.form button:hover,.form button:active,.form button:focus {
54+
background: #43A047;
55+
}
56+
.form .message {
57+
margin: 15px 0 0;
58+
color: #b3b3b3;
59+
font-size: 12px;
60+
}
61+
.form .message-a {
62+
color: #4CAF50;
63+
text-decoration: none;
64+
}
65+
.form .register-form {
66+
display: none;
67+
}
68+
.container {
69+
position: relative;
70+
z-index: 1;
71+
max-width: 300px;
72+
margin: 0 auto;
73+
}
74+
.container:before, .container:after {
75+
content: "";
76+
display: block;
77+
clear: both;
78+
}
79+
.container .info {
80+
margin: 50px auto;
81+
text-align: center;
82+
}
83+
.container .info h1 {
84+
margin: 0 0 15px;
85+
padding: 0;
86+
font-size: 36px;
87+
font-weight: 300;
88+
color: #1a1a1a;
89+
}
90+
.container .info span {
91+
color: #4d4d4d;
92+
font-size: 12px;
93+
}
94+
.container .info span a {
95+
color: #000000;
96+
text-decoration: none;
97+
}
98+
.container .info span .fa {
99+
color: #EF3B3A;
100+
}
101+
.container-body {
102+
height: 100vh;
103+
background: #76b852; /* fallback for old browsers */
104+
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
105+
background: -moz-linear-gradient(right, #76b852, #8DC26F);
106+
background: -o-linear-gradient(right, #76b852, #8DC26F);
107+
background: linear-gradient(to left, #76b852, #8DC26F);
108+
font-family: "Roboto", sans-serif;
109+
-webkit-font-smoothing: antialiased;
110+
-moz-osx-font-smoothing: grayscale;
111+
}
112+
113+
114+
.list-example .body-container {
115+
margin: 0;
116+
height: 100vh;
117+
display: flex;
118+
align-items: center;
119+
justify-content: center;
120+
background-color: #333;
121+
}
122+
123+
.list-example ul {
124+
padding: 0;
125+
list-style-type: none;
126+
}
127+
128+
.list-example li {
129+
font-size: 25px;
130+
width: 8em;
131+
height: 2em;
132+
color: orange;
133+
border-left: 0.08em solid;
134+
position: relative;
135+
margin-top: 0.8em;
136+
cursor: pointer;
137+
}
138+
139+
.list-example li::before,
140+
.list-example li::after
141+
{
142+
content: '';
143+
position: absolute;
144+
width: inherit;
145+
border-left: inherit;
146+
z-index: -1;
147+
}
148+
149+
.list-example li::before {
150+
height: 80%;
151+
top: 10%;
152+
left: calc(-0.15em - 0.08em * 2);
153+
filter: brightness(0.8);
154+
}
155+
156+
.list-example li::after {
157+
height: 60%;
158+
top: 20%;
159+
left: calc(-0.15em * 2 - 0.08em * 3);
160+
filter: brightness(0.6);
161+
}
162+
163+
.list-example li span {
164+
position: relative;
165+
height: 120%;
166+
top: -10%;
167+
box-sizing: border-box;
168+
border: 0.08em solid;
169+
background-color: #333;
170+
display: flex;
171+
align-items: center;
172+
justify-content: center;
173+
font-family: sans-serif;
174+
text-transform: capitalize;
175+
transform: translateX(calc(-0.15em * 3 - 0.08em * 2));
176+
transition: 0.3s;
177+
}
178+
179+
.list-example li:hover span {
180+
transform: translateX(0.15em);
181+
}
182+
183+
184+
/*
185+
186+
187+
List Example
188+
<ul>
189+
<li><span>home</span></li>
190+
<li><span>products</span></li>
191+
<li><span>services</span></li>
192+
<li><span>contact</span></li>
193+
</ul>
194+
195+
196+
*/

0 commit comments

Comments
 (0)