10:29 p.m.
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 <wenwang(a)linux.vnet.ibm.com>
---
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>
--
1.9.1