<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix"><br>
Hi Wen Wang!<br>
Thanks for the patch! The UI looks better now but I still have
some suggestions to make:<br>
<br>
<br>
<img src="cid:part1.04010400.08050200@linux.vnet.ibm.com" alt=""><br>
<br>
In the red are you can see those 2 fields are redundant.<br>
We can only have the input box to collect the VLAN ID from user.
If the input box is empty<br>
(without any value) means the user does not want to set enable
VLAN. Otherwise we get the value<br>
and set it as the VLAN ID.<br>
<br>
So the fields to create a "Bridged" network are "Destination" (a
combo box) and "VLAN ID" (an input box).<br>
<br>
I'd like to see those 2 fields like below:<br>
<br>
Destination: |_____________________|<br>
VLAN ID: |_____________________|<br>
<br>
In the first column the labels and in the second one the fields.<br>
<br>
We also need to use the default kimchi style to the combo box and
the input box.<br>
The image below is from the "Edit Template" dialog.<br>
<br>
<br>
<img src="cid:part2.07080807.04070001@linux.vnet.ibm.com" alt=""><br>
<br>
We need to apply the same style to the network dialog.<br>
<br>
Does that make sense for you?<br>
<br>
<br>
On 05/16/2014 12:29 AM, Wen Wang wrote:<br>
</div>
<blockquote
cite="mid:1400210948-22406-1-git-send-email-wenwang@linux.vnet.ibm.com"
type="cite">
<pre wrap="">Finished align vlan fields. Redesigned the pattern of the label positions
V3 -> V4:
Address to Hongliang Wang: Assigned "for" attribute for label to associate it with text box accordingly
V2 -> V3:
Address to Hongliang Wang: Have the additional margin place removed.
v1 -> v2:
Address to Hongliang Wang: Have the unrelated lines removed & Have the display format changed from table to div.
Address to Yuxin Huo: Have the unused IDs removed.
Signed-off-by: Wen Wang <a class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com"><wenwang@linux.vnet.ibm.com></a>
---
ui/css/theme-default/network.css | 21 ++++++++++++++++-----
ui/js/src/kimchi.network.js | 8 ++++----
ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++-------------
3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 67f2aa2..176b277 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -209,19 +209,30 @@
vertical-align: top;
}
-.network-config .destination {
- margin-left: 28px;
+.bridge-option-column {
+ display: inline-block;
+ margin-left: 56px;
+ vertical-align: middle;
+}
+
+.bridge-option-column > div {
+ height: 25px;
+ line-height: 25px;
}
-.network-config .VLAN {
- margin-left: 28px;
+.bridge-option-column select {
+ height: 26px;
}
-.network-config .VLAN input[type="text"] {
+.bridge-option-column input[type="text"] {
height: 25px;
width: 60px;
}
+#labelNetworkVlanID {
+ margin-left: 26px;
+}
+
.network-config .input-hint-icon {
margin: -1px 1px 0 0;
display: inline-block;
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 7a331be..ca6d29b 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -275,13 +275,14 @@ kimchi.enableBridgeOptions = function(enable) {
$("#networkVlanID").prop("disabled", true);
$("#networkVlanID").val("");
$("#networkInterface").val("");
- $("#bridge-options").slideUp(100);
+ $("#bridgeOptions").slideUp(100);
} else if (!$("#networkInterface").val()){
$("#networkInterface").prop("selectedIndex", 0);
- $("#bridge-options").slideDown(100);
+ $("#bridgeOptions").slideDown(100);
}
};
+
kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
$("#networkTypeBri").prop("checked", isInterfaceAvail);
$("#networkTypeBri").prop("disabled", !isInterfaceAvail);
@@ -289,7 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
if (!isInterfaceAvail) {
kimchi.enableBridgeOptions(false);
} else {
- $("#bridge-options").slideDown(100);
+ $("#bridgeOptions").slideDown(100);
}
};
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() {
$("#networkVlanID").prop("disabled", true);
$("#enableVlan").prop("checked", false);
};
-
kimchi.setupNetworkFormEvent = function() {
$("#networkName").on("keyup", function(event) {
$("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[a-zA-Z0-9_]+$/));
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index e49b257..aedf7e8 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -46,7 +46,7 @@
<div class="section-container">
<div class="section-header">1. $_("Network Name")</div>
<div class="section-content">
- <input type="text" id="networkName">
+ <input type="text" id="networkName" />
<div class="input-hint">
<span class="ui-icon ui-icon-info input-hint-icon"></span>
<span class="input-hint-text">$_("Alphanumeric and '_' characters only.")</span>
@@ -57,27 +57,35 @@
<div class="section-header">2. $_("Network Type")</div>
<div class="section-content">
<div class="input-container">
- <input type="radio" id="networkTypeIso" name="networkType" value="isolated">
+ <input type="radio" id="networkTypeIso" name="networkType" value="isolated" />
<label for="networkTypeIso">$_("Isolated: no physical network connection")</label>
</div>
<div class="input-container">
- <input type="radio" id="networkTypeNat" name="networkType" value="nat">
+ <input type="radio" id="networkTypeNat" name="networkType" value="nat" />
<label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
</div>
<div class="input-container">
- <input type="radio" id="networkTypeBri" name="networkType" value="bridged">
+ <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
<label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
</div>
- <div id="bridge-options">
- <div class="destination">
- <label for="networkInterface">$_("Destination"): </label>
- <select id="networkInterface"></select>
+ <div id="bridgeOptions">
+ <div class="bridge-option-column">
+ <div>
+ <label for="networkInterface">$_("Destination"): </label>
+ </div>
+ <div>
+ <select id="networkInterface"></select>
+ </div>
</div>
- <div class="VLAN">
- <label for="enableVlan">$_("Enable VLAN"): </label>
- <input id="enableVlan" type="checkbox" value=""/>
- <label for="networkVlanID">$_("VLAN ID"): </label>
- <input type="text" id="networkVlanID" disabled>
+ <div class="bridge-option-column">
+ <div>
+ <input id="enableVlan" type="checkbox" value="" />
+ <label for="enableVlan">$_("Enable VLAN"): </label>
+ </div>
+ <div>
+ <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
+ <input type="text" id="networkVlanID" disabled />
+ </div>
</div>
</div>
</div>
</pre>
</blockquote>
<br>
</body>
</html>