InspectionWindow

by dj19910501

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="app">
  
</div>

CSS

#app{
    width: 1050px;
    height: 520px;
    border: solid 1px #d4d4d4;
    margin: 10px;
    position: relative;
}

i{cursor: pointer;}
i:hover{color: #f8710e;}
.padding-left-10{padding-left: 20px;}
.padding-left-20{padding-left: 40px;}
.padding-left-30{padding-left: 60px;}
.padding-left-40{padding-left: 80px;}
#app *{
    box-sizing: border-box;
}

#container{
    height: 100%;
    width: 100%;
}

#background{
    height: 100%;
}

#background .header{
    background-color: black;
    height: 30px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
}

#background .body2{
    height: 470px;
    font-size: 0;
}

#background .body2 > *{
    height: 470px;
    font-size: 14px;
}

#background .body2 .filter{
    height: 100%;
    width: 200px;
    display: inline-block;
    padding: 5px 10px;
    border-right: solid 1px #d4d4d4;
}

#background .body2 .filter-section{
    padding: 5px;
    margin-bottom: 10px;
    border: solid 1px #d4d4d4;
}

#background .body2 .filter-subsection{
    padding: 5px;
    padding-left: 0;
    margin-bottom: 10px;
}

#background .body2 .filter-subsection span{
    border-bottom: solid 1px #d4d4d4;
    padding-bottom: 2px;
    display: block;
}

#background .body2 .filter-subsection p{
    padding: 2px 0 0 20px;
}

#background .body2 .filter-section.attributes{
    height: 345px;
}

#background .body2 .filter-section.save{
    background-color: #89cede;
    color: white;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

#background .body2 .content{
    width: 850px;
    display: inline-block;
    vertical-align: top;
}

#background .body2 .content .hud{
    height: 60px;
    padding: 10px;
}

#background .body2 .content .hud-card{
    height: 40px;
    display: inline-block;
    width: 100px;
    line-height: 40px;
    text-align: center;
    border: solid 1px #d4d4d4;
    border-radius: 4px;
    margin-right: 10px;
}

#background .body2 .content .inspection-style{
    margin:...

React

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
			showInspectionWindow: false,
            id: null,
            type: null,
            inspectionStyle: 1
        }
    }
  
    render() {
    	const{showInspectionWindow,inspectionStyle} = this.state;
        return (
            <div id="container">
                <div id="background">
                    <div className="header">Hive9</div>
                    <div className="body2">
                        <Filter></Filter>
                        <div className="content">
                            <Hud></Hud>
                            <InspectionStyle inspectionStyle={inspectionStyle} styleChangedHandler={this.changedHandler}></InspectionStyle>
                            <Grid openInspectionWindow={this.showInspectionWindow}></Grid>
                        </div>
                    </div>
                    <div className="footer">Copyright</div>
                </div>
                <InspectionWindow show={showInspectionWindow} hideInspectionWindow={this.hideInspectionWindow} inspectionStyle={inspectionStyle}></InspectionWindow>
            </div>
        )
    }
    
    showInspectionWindow = (id ,type) => {
    	this.setState({
        	showInspectionWindow: true,
            id: id,
            type: type
        });
    }
    
    hideInspectionWindow = () => {
    	this.setState({
        	showInspectionWindow: false,
            id: null,
            type: null
        });
    }
    
    changedHandler = (newStyle) =>{
    	this.setState({
        	inspectionStyle: newStyle
        })
    }
}

class InspectionWindow extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
			show: false,
            id: null,
            type: null
        }
    }
  
    render() {
    	const{show,inspectionStyle} = this.props;
        var style= {
        	display: !show ? "block" : "none"
        };
        var...