2:08 a.m.
Finished align vlan fields. Redesigned the pattern of the label positions
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/network.css | 28 ++++++++++++++++++++++------
ui/js/src/kimchi.network.js | 10 +++++-----
ui/pages/tabs/network.html.tmpl | 33 ++++++++++++++++++++++-----------
3 files changed, 49 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 67f2aa2..98220ab 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -198,7 +198,7 @@
color: #666666;
border: solid 1px;
background-color: white;
- padding: 3px 4px 3px 0;
+ padding: 3px 4px 3px 0;192.168.122.0/24
}
.network-config .input-container {
@@ -209,17 +209,33 @@
vertical-align: top;
}
-.network-config .destination {
- margin-left: 28px;
+.network-config .destination select {
+ margin-left: 48px;
+
+}
+
+.network-config .destination label {
+ vertical-align: middle;
+ margin-left: 48px;
}
-.network-config .VLAN {
- margin-left: 28px;
+.network-config .VLANID input[type="checkbox"] {
+ margin-left: 34px;
+ vertical-align: middle;
}
-.network-config .VLAN input[type="text"] {
+.network-config .VLANID label {
+ vertical-align: middle;
+}
+
+.network-config .labelVLAN label {
+ margin-left: 56px;
+ vertical-align: middle;
+}
+.network-config .labelVLAN input[type="text"] {
height: 25px;
width: 60px;
+ vertical-align: middle;
}
.network-config .input-hint-icon {
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 7a331be..cfd7338 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -244,6 +244,7 @@ kimchi.openNetworkDialog = function(okCallback) {
if (nics[$("#networkInterface").val()].type === "bridge")
{
$("#enableVlan").prop("checked", false);
$("#enableVlan").prop("disabled", true);
+ $("#enableVlan").slideUp(100);
$("#networkVlanID").val("");
$("#networkVlanID").prop("disabled", true);
} else {
@@ -275,13 +276,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 +291,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
if (!isInterfaceAvail) {
kimchi.enableBridgeOptions(false);
} else {
- $("#bridge-options").slideDown(100);
+ $("#bridgeOptions").slideDown(100);
}
};
@@ -315,10 +317,8 @@ kimchi.cleanNetworkDialog = function() {
$("#networkInterface
option").removeAttr("selected").find(":first").attr("selected",
"selected");
$("#networkFormOk").off("click");
$("#networkFormOk").button("disable");
- $("#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..c9bf1d4 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -68,17 +68,28 @@
<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>
- <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>
+ <div id="bridgeOptions">
+ <table id="tableBridgeOption" >
+ <tr>
+ <td class="destination">
+ <label
id="labelNetworkInterface">$_("Destination"): </label>
+ </td>
+ <td class="VLANID">
+ <input id="enableVlan"
type="checkbox" value=""/>
+ <label id="labelVlanID">$_("Enable
VLAN"): </label>
+ </td>
+ </tr>
+ <tr>
+ <td class="destination">
+ <select
id="networkInterface"></select>
+ </td>
+ <td class="labelVLAN">
+ <label
id="labelNetworkVlanID">$_("VLAN ID"): </label>
+ <input type="text"
id="networkVlanID" disabled>
+ </td>
+ </tr>
+ </table>
+
</div>
</div>
</div>
--
1.9.1