Skip to content

GitLab

Commit df299511 authored by Raghav Khanna's avatar Raghav Khanna
Browse files
Options

Use material ui react to display components in cards and lay them out

parent 12d44b21
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 8129 additions and 184 deletions
package-lock.json
View file @ df299511
This diff is collapsed.
src/App.js
View file @ df299511
......@@ -7,88 +7,168 @@ import ButtonStrip from './view/ButonStrip'
import CodeEditor from './view/CodeEditor'
import UserIO from './view/UserIO'
import Terminal from 'terminal-in-react';
import {makeStyles} from "@material-ui/core/styles";
import Card from "./components/Card/Card.js";
import CardBody from "./components/Card/CardBody.js";
import {sendWaccCode, astMetaToGraphData} from './Comm'
import GridItem from "./components/Grid/GridItem";
import GridContainer from "./components/Grid/GridContainer";
const cardImagesStyles = {
cardImgTop: {
width: "100%",
borderTopLeftRadius: "calc(.25rem - 1px)",
borderTopRightRadius: "calc(.25rem - 1px)"
},
cardImgBottom: {
width: "100%",
borderBottomRightRadius: "calc(.25rem - 1px)",
borderBottomLeftRadius: "calc(.25rem - 1px)"
},
cardImgOverlay: {
position: "absolute",
top: "0",
right: "0",
bottom: "0",
left: "0",
padding: "1.25rem"
},
cardImg: {
width: "100%",
borderRadius: "calc(.25rem - 1px)"
}
};
const useStyles = makeStyles(cardImagesStyles);
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
wacc: {code: "", markers: [],},
js: {code: "", markers: [],},
arm: {code: "", markers: [],},
graphData: [{}],
constructor(props) {
super(props)
this.state = {
wacc: {code: "", markers: [],},
js: {code: "", markers: [],},
arm: {code: "", markers: [],},
graphData: [{}],
}
}
onWaccCodeChange = (newCode) => {
this.setState({
wacc: {
code: newCode,
markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text'}]
},
graphData: [{}]
})
}
readInputCallBack = (input) => {
console.log(test)
test = "";
}
processWaccCode = (code) => {
let rsp = sendWaccCode(code)
let graph = astMetaToGraphData(rsp.astMeta)
this.setState({
arm: {code: rsp.armCode},
js: {code: rsp.jsCode},
graphData: graph
})
}
render() {
return (
<div className="App">
<div className="App-code-editors">
<GridContainer>
<GridItem lg={12}>
<Card>
<CardBody>
<ButtonStrip
onCompileClick={(e) => {
this.processWaccCode(this.state.wacc.code)
}}
onStepJsClick={(e) => {
this.setState({js: {code: "Hello World!"}})
}}
onStepOverAstClick={(e) => {
this.readInputCallBack(e)
}}/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card>
<CardBody>
<CodeEditor
heading='WACC Code'
onCodeChange={this.onWaccCodeChange}
value={this.state.wacc.code}
markers={this.state.wacc.markers}/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card>
<CardBody>
<CodeEditor
heading='JavaScript'
value={this.state.js.code}
markers={this.state.js.markers}
readOnly={true}/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card>
<CardBody>
<CodeEditor
heading='ARM Assembly'
value={this.state.arm.code}
markers={this.state.arm.markers}
readOnly={true}/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardBody>
<Tree
data={this.state.graphData}
orientation="vertical"/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardBody>
<Terminal commandPassThrough={cmd => {
test = cmd[0]
}} watchConsoleLogging hideTopBar allowTabs={false}/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</div>
<div className="tree-wrapper">
</div>
<div id="inputoutput"></div>
</div>
)
}
}
onWaccCodeChange = (newCode) => {
this.setState({
wacc: {
code: newCode,
markers: [{ startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text' }]
},
graphData: [{}]
})
}
readInputCallBack = (input) => {
console.log(test)
test = "";
}
processWaccCode = (code) => {
let rsp = sendWaccCode(code)
let graph = astMetaToGraphData(rsp.astMeta)
this.setState({
arm: {code: rsp.armCode},
js: {code: rsp.jsCode},
graphData: graph
})
}
render() {
return (
<div className="App">
<ButtonStrip
onCompileClick={(e) => { this.processWaccCode(this.state.wacc.code) }}
onStepJsClick={(e) => { this.setState({js: {code: "Hello World!"}}) }}
onStepOverAstClick = {(e) => { this.readInputCallBack(e)}}/>
<div className="App-code-editors">
<CodeEditor
heading='WACC Code'
onCodeChange={this.onWaccCodeChange}
value={this.state.wacc.code}
markers={this.state.wacc.markers} />
<CodeEditor
heading='JavaScript'
value={this.state.js.code}
markers={this.state.js.markers}
readOnly={true} />
<CodeEditor
heading='ARM Assembly'
value={this.state.arm.code}
markers={this.state.arm.markers}
readOnly={true} />
</div>
<div className="tree-wrapper">
<Tree
data={this.state.graphData}
orientation="vertical" />
</div>
<div id="inputoutput">
<Terminal commandPassThrough={cmd => {test = cmd[0]}} watchConsoleLogging/>
</div>
<UserIO />
</div>
)
}
}
export default App;
src/assets/css/material-dashboard-react.css 0 → 100644
View file @ df299511
/*!
=========================================================
* Material Dashboard React - v1.8.0 based on Material Dashboard - v1.2.0
=========================================================
* Product Page: http://www.creative-tim.com/product/material-dashboard-react
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-react/blob/master/LICENSE.md)
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
.ct-grid {
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 1px;
stroke-dasharray: 2px;
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut {
stroke: rgba(255, 255, 255, 0.8);
}
.ct-label.ct-horizontal.ct-end {
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: flex-start;
justify-content: flex-start;
text-align: left;
text-anchor: start;
}
.ct-label {
color: rgba(255, 255, 255, 0.7);
}
.ct-chart-line .ct-label,
.ct-chart-bar .ct-label {
display: block;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.ct-label {
fill: rgba(0, 0, 0, 0.4);
line-height: 1;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #eeeeee;
color: #3c4858;
margin: 0;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 300;
line-height: 1.5em;
}
blockquote footer:before,
blockquote small:before {
content: "\2014 \00A0";
}
small {
font-size: 80%;
}
h1 {
font-size: 3em;
line-height: 1.15em;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 1.825em;
line-height: 1.4em;
margin: 20px 0 10px;
}
h4 {
font-size: 1.3em;
line-height: 1.4em;
}
h5 {
font-size: 1.25em;
line-height: 1.4em;
margin-bottom: 15px;
}
h6 {
font-size: 1em;
text-transform: uppercase;
font-weight: 500;
}
body {
background-color: #eeeeee;
color: #3c4858;
}
blockquote p {
font-style: italic;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 300;
line-height: 1.5em;
}
a {
color: #9c27b0;
text-decoration: none;
}
a:hover,
a:focus {
color: #89229b;
text-decoration: none;
}
legend {
border-bottom: 0;
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: 0;
}
a:focus,
a:active,
button:active,
button:focus,
button:hover,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
outline: 0 !important;
}
legend {
margin-bottom: 20px;
font-size: 21px;
}
output {
padding-top: 8px;
font-size: 14px;
line-height: 1.42857;
}
label {
font-size: 14px;
line-height: 1.42857;
color: #aaaaaa;
font-weight: 400;
}
footer {
padding: 15px 0;
}
footer ul {
margin-bottom: 0;
padding: 0;
list-style: none;
}
footer ul li {
display: inline-block;
}
footer ul li a {
color: inherit;
padding: 15px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
text-decoration: none;
position: relative;
display: block;
}
footer ul li a:hover {
text-decoration: none;
}
@media (max-width: 991px) {
body,
html {
position: relative;
overflow-x: hidden;
}
#bodyClick {
height: 100%;
width: 100%;
position: fixed;
opacity: 0;
top: 0;
left: auto;
right: 260px;
content: "";
z-index: 9999;
overflow-x: hidden;
}
}
.fixed-plugin {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 300;
line-height: 1.5em;
position: fixed;
top: 180px;
right: 0;
width: 64px;
background: rgba(0, 0, 0, 0.3);
z-index: 1031;
border-radius: 8px 0 0 8px;
text-align: center;
top: 120px;
.badge-primary-background-color: #9c27b0;
}
.fixed-plugin .SocialMediaShareButton,
.fixed-plugin .github-btn {
display: inline-block;
}
.fixed-plugin li > a,
.fixed-plugin .badge {
transition: all 0.34s;
-webkit-transition: all 0.34s;
-moz-transition: all 0.34s;
text-decoration: none;
}
.fixed-plugin .fa-cog {
color: #ffffff;
padding: 10px;
border-radius: 0 0 6px 6px;
width: auto;
}
.fixed-plugin .dropdown-menu {
right: 80px;
left: auto;
width: 290px;
border-radius: 0.1875rem;
padding: 0 10px;
position: absolute;
color: rgba(0, 0, 0, 0.87);
display: inline-block;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
background: #fff;
border-radius: 3px;
}
.fixed-plugin .fa-circle-thin {
color: #ffffff;
}
.fixed-plugin .active .fa-circle-thin {
color: #00bbff;
}
.fixed-plugin .dropdown-menu > .active > a,
.fixed-plugin .dropdown-menu > .active > a:hover,
.fixed-plugin .dropdown-menu > .active > a:focus {
color: #777777;
text-align: center;
}
.fixed-plugin img {
border-radius: 0;
width: 100%;
height: 100px;
margin: 0 auto;
}
.fixed-plugin .dropdown-menu li > a:hover,
.fixed-plugin .dropdown-menu li > a:focus {
box-shadow: none;
}
.fixed-plugin .badge {
border: 3px solid #ffffff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 23px;
margin-right: 5px;
position: relative;
width: 23px;
background-color: rgba(30, 30, 30, 0.97);