Skip to content

small changes to export modal styling and add html button styling #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 5, 2019
Merged

small changes to export modal styling and add html button styling #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29ff4ec
changed export modal close button to iconButton from icon, slightly d…
ChristianEdwardPadilla May 5, 2019
a77fb51
color of add html buttons changed to white
ChristianEdwardPadilla May 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 53 additions & 50 deletions src/components/HTMLComponentPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,36 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import ImageIcon from "@material-ui/icons/Image";
import FormIcon from "@material-ui/icons/Description";
import ButtonIcon from "@material-ui/icons/EditAttributes";
import LinkIcon from "@material-ui/icons/Link";
import ListIcon from "@material-ui/icons/List";
import ParagraphIcon from "@material-ui/icons/LocalParking";
import theme from "../components/theme.ts";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Tab from "@material-ui/core/Tab";
import Chip from "@material-ui/core/Chip";
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import IconButton from '@material-ui/core/IconButton';
import ImageIcon from '@material-ui/icons/Image';
import FormIcon from '@material-ui/icons/Description';
import ButtonIcon from '@material-ui/icons/EditAttributes';
import LinkIcon from '@material-ui/icons/Link';
import ListIcon from '@material-ui/icons/List';
import ParagraphIcon from '@material-ui/icons/LocalParking';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Tab from '@material-ui/core/Tab';
import Chip from '@material-ui/core/Chip';
import theme from './theme.ts';

// import {HTMLelements,getSize} from "../utils/htmlElements.util";

// test

class HTMLComponentPanel extends Component {
state = {
HtmlComponentName: ""
HtmlComponentName: '',
};

handleChange = event => {
handleChange = (event) => {
this.setState({
HtmlComponentName: event.target.value
HtmlComponentName: event.target.value,
});
};

handleCreateHTMLChild = type => {
handleCreateHTMLChild = (type) => {
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
};

Expand All @@ -52,61 +50,66 @@ class HTMLComponentPanel extends Component {
className="htmlicons"
aria-label="Image"
onClick={() => {
this.handleCreateHTMLChild("Image");
this.handleCreateHTMLChild('Image');
}}
>
<ImageIcon style={{ color: "#e0e0e0" }} />
<ImageIcon style={{ color: '#e0e0e0' }} />
</IconButton>
</div>
</Grid>
<Grid item xs={4}>
<IconButton
className="htmlicons"
aria-label="Form"
onClick={() => {
this.handleCreateHTMLChild("Form");
this.handleCreateHTMLChild('Form');
}}
>
<FormIcon />
<FormIcon style={{ color: '#e0e0e0' }} />
</IconButton>
</Grid>
<Grid item xs={4}>
<IconButton
className="htmlicons"
aria-label="Button"
onClick={() => {
this.handleCreateHTMLChild("Button");
this.handleCreateHTMLChild('Button');
}}
>
<ButtonIcon />
<ButtonIcon style={{ color: '#e0e0e0' }} />
</IconButton>
</Grid>
<Grid item xs={4}>
<IconButton
className="htmlicons"
aria-label="Link"
onClick={() => {
this.handleCreateHTMLChild("Link");
this.handleCreateHTMLChild('Link');
}}
>
<LinkIcon />
<LinkIcon style={{ color: '#e0e0e0' }} />
</IconButton>
</Grid>
<Grid item xs={4}>
<IconButton
className="htmlicons"
aria-label="List"
onClick={() => {
this.handleCreateHTMLChild("List");
this.handleCreateHTMLChild('List');
}}
>
<ListIcon />
<ListIcon style={{ color: '#e0e0e0' }} />
</IconButton>
</Grid>
<Grid item xs={4}>
<IconButton
className="htmlicons"
aria-label="Paragraph"
onClick={() => {
this.handleCreateHTMLChild("Paragraph");
this.handleCreateHTMLChild('Paragraph');
}}
>
<ParagraphIcon />
<ParagraphIcon style={{ color: '#e0e0e0' }} />
</IconButton>
</Grid>
</Grid>
Expand All @@ -118,32 +121,32 @@ class HTMLComponentPanel extends Component {
function styles(theme) {
return {
htmlPanel: {
width: "100%",
height: "30%",
width: '100%',
height: '30%',
// backgroundColor: "#333333",
borderStyle: "solid",
borderWidth: "0.5px",
borderRadius: "1px",
borderColor: "#424242",
bottom: "0px",
padding: "20px"
borderStyle: 'solid',
borderWidth: '0.5px',
borderRadius: '1px',
borderColor: '#424242',
bottom: '0px',
padding: '20px',
},
chip: {
color: "rgba(193, 66, 66, 0)"
color: 'rgba(193, 66, 66, 0)',
},
htmliconwrapper: {
verticalAlign: "baseline"
verticalAlign: 'baseline',
},
htmlicons: {
color: "#ffffff"
color: '#ffffff',
},
tabRoot: {
textTransform: "initial",
textTransform: 'initial',
minWidth: 100,
fontWeight: theme.typography.fontWeightRegular,
// marginRight: theme.spacing.unit * 4,
color: "#ffffff"
}
color: '#ffffff',
},
};
}

Expand Down
107 changes: 48 additions & 59 deletions src/components/LeftColExpansionPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, { Fragment } from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import IconButton from "@material-ui/core/IconButton";
import Grid from "@material-ui/core/Grid";
import AddIcon from "@material-ui/icons/Add";
import DeleteIcon from "@material-ui/icons/Delete";
import Fab from "@material-ui/core/Fab";
import React, { Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import Grid from '@material-ui/core/Grid';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';
import Fab from '@material-ui/core/Fab';

import { openExpansionPanel } from "../utils/componentReducer.util";
import { openExpansionPanel } from '../utils/componentReducer.util';

const LeftColExpansionPanel = props => {
const LeftColExpansionPanel = (props) => {
const {
classes,
focusComponent,
Expand All @@ -22,43 +22,33 @@ const LeftColExpansionPanel = props => {
changeFocusComponent,
selectableChildren,
components,
deleteComponent
deleteComponent,
} = props;
const { title, id, color } = component;

// show a string of all direct parents. SO the user can gaze at it.
const directParents = components
.filter(comp =>
comp.childrenArray.some(kiddy => kiddy.childComponentId == id)
)
.filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == id))
.map(comp => comp.title)
.join(",");
.join(',');

function isFocused() {
return focusComponent.id == id ? "focused" : "";
return focusComponent.id == id ? 'focused' : '';
}

return (
<Grid
container
spacing={16}
direction="row"
justify="flex-start"
alignItems="baseline"
>
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="baseline">
<Grid item xs={9}>
<div
className={classes.root}
style={
!isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.22)" }
}
style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.22)' }}
>
<Grid item xs={12} style={{ color: "red" }}>
<List style={{ color: "red" }}>
<Grid item xs={12} style={{ color: 'red' }}>
<List style={{ color: 'red' }}>
<ListItem
button
component="a"
style={{ color: "red" }}
style={{ color: 'red' }}
onClick={() => {
changeFocusComponent({ title });
}}
Expand All @@ -67,7 +57,7 @@ const LeftColExpansionPanel = props => {
disableTypography
className={classes.light}
primary={
<Typography type="body2" style={{ color: color }}>
<Typography type="body2" style={{ color }}>
{title}
</Typography>
}
Expand All @@ -85,21 +75,21 @@ const LeftColExpansionPanel = props => {
{directParents ? (
<p
style={{
marginLeft: "10px",
color: "white",
fontSize: "12px",
marginTop: "1px"
marginLeft: '10px',
color: 'white',
fontSize: '12px',
marginTop: '1px',
}}
>
Used in: {directParents}
</p>
) : (
<p
style={{
marginLeft: "10px",
color: "white",
fontSize: "12px",
marginTop: "1px"
marginLeft: '10px',
color: 'white',
fontSize: '12px',
marginTop: '1px',
}}
>
Not used
Expand All @@ -113,16 +103,15 @@ const LeftColExpansionPanel = props => {
aria-label="Delete"
className={classes.margin}
style={{
marginLeft: "10px",
marginTop: "5px",
marginBottom: "10px"
marginLeft: '10px',
marginTop: '5px',
marginBottom: '10px',
}}
// style={{ maxWidth: "20px" }}
onClick={() =>
deleteComponent({
componentId: id,
stateComponents: components
})
onClick={() => deleteComponent({
componentId: id,
stateComponents: components,
})
}
>
<DeleteIcon className={classes.extendedIcon} />
Expand Down Expand Up @@ -150,9 +139,9 @@ const LeftColExpansionPanel = props => {
) : (
<IconButton aria-label="Add">
<AddIcon
style={{ color, float: "right" }}
style={{ color, float: 'right' }}
onClick={() => {
addChild({ title, childType: "COMP" });
addChild({ title, childType: 'COMP' });
}}
/>
</IconButton>
Expand All @@ -165,17 +154,17 @@ const LeftColExpansionPanel = props => {
function styles(theme) {
return {
root: {
width: "100%",
width: '100%',
// flexGrow: 1,
marginTop: 10,
backgroundColor: "#333333"
backgroundColor: '#333333',
},
light: {
color: "#eee",
"&:hover": {
color: "#1de9b6"
}
}
color: '#eee',
'&:hover': {
color: '#1de9b6',
},
},
};
}

Expand Down
Loading