x/valence
Code Issues Proposed changes

Clean up css styles for each components.

Browse Source 
Clean up css styles for each components in a clear order.
Now all the styles are in customized.css which is not clear for
each components. So, we should delete customized.css, and for each
component we create a corresponding css style.

Change-Id: Ic23c45c8f380820da0689e728bcf99daa260f2e0
Signed-off-by: Andy Yan <yanchao3@lenovo.com>
This commit is contained in:
Andy Yan 2017-02-06 17:04:28 +08:00
parent b494488945
commit 7f701830e5
14 changed files with 113 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/css/components/home/ComposeDisplay.css Normal file
View File

@ -0,0 +1,31 @@
.detail-button {
background-color: #428bca;
border: none;
color: white;
padding: 6px 18px;
text-align: center;
border-radius: 4px;
float: right;
}
.compose-button {
background-color: #428bca;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
margin-top: 10px;
display: block;
border-radius: 4px;
position: relative;
float: left;
}
.compose-node-details {
margin-top: 30px;
padding: 20px;
padding-bottom: 40px;
border-radius: 4px;
background-color: #f8f8f8;
}

9
ui/src/css/components/home/DetailDisplay.css Normal file
View File

@ -0,0 +1,9 @@
.details {
margin-top: 30px;
padding: 20px;
padding-bottom: 40px;
width: 100%;
border-radius: 4px;
background-color: #f8f8f8;
}

60
ui/src/customized.css → ui/src/css/components/home/Home.css
View File

@ -50,38 +50,6 @@ hr.separator {
height: 2px; height: 2px;
} }
.detail-button {
background-color: #428bca;
border: none;
color: white;
padding: 6px 18px;
text-align: center;
border-radius: 4px;
float: right;
}
.compose-button {
background-color: #428bca;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
margin-top: 10px;
display: block;
border-radius: 4px;
position: relative;
float: left;
}
.details {
margin-top: 30px;
padding: 20px;
padding-bottom: 40px;
width: 100%;
border-radius: 4px;
background-color: #f8f8f8;
}
.resource { .resource {
margin-bottom: 10px; margin-bottom: 10px;
padding: 20px; padding: 20px;
@ -90,30 +58,6 @@ hr.separator {
border-radius: 4px; border-radius: 4px;
} }
.in-use-resource {
margin-bottom: 10px;
padding: 20px;
height: 75px;
background-color: #00cc44;
border-radius: 4px;
}
.warning-resource {
margin-bottom: 10px;
padding: 20px;
height: 75px;
background-color: #cccc00;
border-radius: 4px;
}
.critical-resource {
margin-bottom: 10px;
padding: 20px;
height: 75px;
background-color: #e60000;
border-radius: 4px;
}
/* /*
* Sidebar * Sidebar
*/ */
@ -192,3 +136,7 @@ hr.separator {
border-radius: 50%; border-radius: 50%;
} }
.compose-node-button {
margin-right: 20px;
}

10
ui/src/css/components/home/NodeList.css Normal file
View File

@ -0,0 +1,10 @@
.node-detail-button {
background-color: #428bca;
border: none;
color: white;
padding: 6px 18px;
text-align: center;
border-radius: 4px;
float: right;
}

24
ui/src/css/components/home/ResourceList.css Normal file
View File

@ -0,0 +1,24 @@
.in-use-resource {
margin-bottom: 10px;
padding: 20px;
height: 75px;
background-color: #00cc44;
border-radius: 4px;
}
.warning-resource {
margin-bottom: 10px;
padding: 20px;
height: 75px;
background-color: #cccc00;
border-radius: 4px;
}
.critical-resource {
margin-bottom: 10px;
padding: 20px;
height: 75px;
background-color: #e60000;
border-radius: 4px;
}

1
ui/src/css/customized.css Normal file
View File

@ -0,0 +1 @@

1
ui/src/index.html
View File

@ -4,7 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Rack Scale Design</title> <title>Rack Scale Design</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href='./customized.css' rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head> </head>
<body> <body>

35
ui/src/js/components/home/ComposeDisplay.js
View File

@ -17,6 +17,7 @@ import React from "react";
var config = require('../../config.js'); var config = require('../../config.js');
var util = require('../../util.js'); var util = require('../../util.js');
var style = require("../../../css/components/home/ComposeDisplay.css");
const VlanItem = React.createClass({ const VlanItem = React.createClass({
@ -153,41 +154,41 @@ const ComposeDisplay = React.createClass({
displayStyle = "none"; displayStyle = "none";
} }
return ( return (
<div class="details" style={{display: displayStyle}}> <div class="compose-node-details" style={{display: displayStyle}}>
<form id="inputForm"> <form id="inputForm">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td align="right">Name:</td> <td>Name:</td>
<td align="left"><input type="text" id="name" /></td> <td><input type="text" id="name" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">Description:</td> <td>Description:</td>
<td align="left"><input type="text" id="description" /></td> <td><input type="text" id="description" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">System Memory GB:</td> <td>System Memory GB:</td>
<td align="left"><input type="number" min="0" id="totalMem" /></td> <td><input type="number" min="0" id="totalMem" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">Processor Model:</td> <td>Processor Model:</td>
<td align="left"><select id="processorModels" /></td> <td><select id="processorModels" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">Remote Storage Capacity GB:</td> <td>Remote Storage Capacity GB:</td>
<td align="left"><input type="number" min="0" id="storageCapacity" /></td> <td><input type="number" min="0" id="storageCapacity" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">Remote storage IQN:</td> <td>Remote storage IQN:</td>
<td align="left"><input type="text" id="iqn" /></td> <td><input type="text" id="iqn" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">Remote storage master drive:</td> <td>Remote storage master drive:</td>
<td align="left"><select id="remoteDrives" /></td> <td><select id="remoteDrives" /></td>
</tr> </tr>
<tr> <tr>
<td align="right">Ethernet interface:</td> <td>Ethernet interface:</td>
<td align="left"> <td>
{this.state.vlans.map(function(obj) { {this.state.vlans.map(function(obj) {
return <VlanItem vlan={obj} remove={this.removeVlan} /> return <VlanItem vlan={obj} remove={this.removeVlan} />
}.bind(this))} }.bind(this))}

2
ui/src/js/components/home/DetailDisplay.js
View File

@ -15,6 +15,8 @@
import React from "react"; import React from "react";
var style = require("../../../css/components/home/DetailDisplay.css");
const DetailDisplay = React.createClass({ const DetailDisplay = React.createClass({
renderPod: function(data) { renderPod: function(data) {

5
ui/src/js/components/home/Home.js
View File

@ -19,6 +19,7 @@ import NodeList from "./NodeList";
var config = require('../../config.js'); var config = require('../../config.js');
var util = require('../../util.js'); var util = require('../../util.js');
var style = require("../../../css/components/home/Home.css");
const Home = React.createClass({ const Home = React.createClass({
@ -56,12 +57,12 @@ const Home = React.createClass({
renderHome: function() { renderHome: function() {
return ( return (
<div style={{display: "inline-block"}}> <div>
<div class="jumbotron"> <div class="jumbotron">
<h2>Welcome to RSD Details</h2> <h2>Welcome to RSD Details</h2>
<p>This is a brief overview of all kinds of resources in this environment. See the <a href="#">User Guide</a> for more information on how to configure them.</p> <p>This is a brief overview of all kinds of resources in this environment. See the <a href="#">User Guide</a> for more information on how to configure them.</p>
<p> <p>
<input type="button" class="btn btn-lg btn-primary" style={{marginRight:'20px'}} onClick={() => this.props.onShowCompose()} value="Compose Node" /> <input type="button" class="btn btn-lg btn-primary compose-node-button" onClick={() => this.props.onShowCompose()} value="Compose Node" />
<input type="button" class="btn btn-lg btn-primary" onClick={() => this.configCompose()} value="Compose From Config File" /> <input type="button" class="btn btn-lg btn-primary" onClick={() => this.configCompose()} value="Compose From Config File" />
</p> </p>
</div> </div>

11
ui/src/js/components/home/NodeList.js
View File

@ -17,6 +17,7 @@ import React from "react";
var config = require('../../config.js'); var config = require('../../config.js');
var util = require('../../util.js'); var util = require('../../util.js');
var style = require("../../../css/components/home/NodeList.css");
const NodeList = React.createClass({ const NodeList = React.createClass({
@ -97,11 +98,11 @@ const NodeList = React.createClass({
return this.props.nodes.map((node, i) => return this.props.nodes.map((node, i) =>
<div class="resource" key={i}> <div class="resource" key={i}>
{node.Name} {node.Name}
<input type="button" class="detail-button" onClick={() => this.props.onShowDetail(node, this.props.header)} value="Show" /> <input type="button" class="node-detail-button" onClick={() => this.props.onShowDetail(node, this.props.header)} value="Show" />
<input type="button" class="detail-button" onClick={() => this.delete(node.Id)} value="Delete" /> <input type="button" class="node-detail-button" onClick={() => this.delete(node.Id)} value="Delete" />
<input type="button" class="detail-button" onClick={() => this.setBoot(node.Id)} value="Set Boot Source" /> <input type="button" class="node-detail-button" onClick={() => this.setBoot(node.Id)} value="Set Boot Source" />
<input type="button" class="detail-button" onClick={() => this.assemble(node.Id)} value="Assemble" /> <input type="button" class="node-detail-button" onClick={() => this.assemble(node.Id)} value="Assemble" />
<input type="button" class="detail-button" onClick={() => this.powerOn(node.Id)} value="Power On" /> <input type="button" class="node-detail-button" onClick={() => this.powerOn(node.Id)} value="Power On" />
<br /> <br />
{node.Description} {node.Description}
</div> </div>

1
ui/src/js/components/home/ResourceList.js
View File

@ -16,6 +16,7 @@
import React from "react"; import React from "react";
var util = require('../../util.js'); var util = require('../../util.js');
var style = require("../../../css/components/home/ResourceList.css");
const ResourceList = React.createClass({ const ResourceList = React.createClass({

27
ui/src/rsd.css
View File

@ -1,27 +0,0 @@
.header {
margin-top: 40px;
width: 100%;
background-color: rgb(51, 102, 255);
color: rgb(0, 0, 0);
height: 40px;
padding-left: 10px;
padding-top: 20px;
}
.header:hover {
background-color: rgb(204, 204, 255);
}
.item {
width: 100%;
background-color: rgb(153, 179, 255);
color: rgb(0, 0, 0);
height: 40px;
padding-left: 30px;
padding-top: 2px;
border-bottom: solid 1px rgb(51, 102, 255);
}
.item:hover {
background-color: rgb(204, 204, 255);
}

4
ui/webpack.config.js
View File

@ -18,6 +18,10 @@ module.exports = {
presets: ['react', 'es2015', 'stage-0'], presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
} }
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
} }
] ]
}, },