10:50 a.m.
I don't think it is working correctly.
I can not see the check boxes in the Template Edit dialog or in the
Network creation dialog - only the label is shown.
On 04/03/2015 07:07, Wen Wang wrote:
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/network.css | 9 +++++++++
ui/js/src/kimchi.network.js | 18 +++++++++++++++++-
ui/pages/tabs/network.html.tmpl | 14 +++++++++-----
3 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index e5a8e47..00e71c2 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -264,4 +264,13 @@
#networkConfig {
padding-left: 30px;
+}
+
+.vlan-check-section {
+ height: 18px;
+ line-height: 18px;
+}
+
+.vlan-check-section label {
+ vertical-align: middle;
}
\ No newline at end of file
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 81d5dd0..3284231 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() {
data.connection = "bridge";
data.interface = network.interface;
if ($("#enableVlan").prop("checked")) {
+
$("#enableVlanIcon").removeClass("icon-check-empty-1");
+
$("#enableVlanIcon").addClass("icon-ok-squared");
data.vlan_id = network.vlan_id;
if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) {
kimchi.message.error.code('KCHNET6001E');
@@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() {
"border-radius": "0",
"opacity": "1"
});
+ $("input:radio[name=networkType]").on("change", function() {
+ $(".input-container
label[name=networkTypeIcon]").removeClass("icon-dot-circled");
+ $(".input-container
label[name=networkTypeIcon]").addClass("icon-circle-empty");
+ var networkChecked =
$("input:radio[name=networkType]:checked").attr("id");
+ $("#" + networkChecked +
"Icon").removeClass("icon-circle-empty");
+ $("#" + networkChecked +
"Icon").addClass("icon-dot-circled");
+ });
kimchi.setupNetworkFormEvent();
};
@@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) {
$("#networkFormOk span").text(i18n.KCHAPI6008M);
okCallback();
});
- $("#enableVlan").on("click", function() {
+ $("#enableVlan").on("change", function() {
$("#networkVlanID").prop("disabled", !this.checked);
if (!this.checked) {
+ $("#enableVlanIcon").removeClass("icon-ok-squared");
+ $("#enableVlanIcon").addClass("icon-check-empty-1");
$("#networkVlanID").slideUp(100);
$("#labelNetworkVlanID").slideUp(100);
$("#networkVlanID").val("");
}
else {
+ $("#enableVlanIcon").removeClass("icon-check-empty-1");
+ $("#enableVlanIcon").addClass("icon-ok-squared");
$("#networkVlanID").slideDown(100);
$("#labelNetworkVlanID").slideDown(100);
}
@@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
$("#networkTypeBri").prop("checked", isInterfaceAvail);
$("#networkTypeBri").prop("disabled", !isInterfaceAvail);
$("#networkTypeNat").prop("checked", !isInterfaceAvail);
+ var networkChecked =
$("input:radio[name=networkType]:checked").attr("id");
+ $("#" + networkChecked +
"Icon").removeClass("icon-circle-empty");
+ $("#" + networkChecked +
"Icon").addClass("icon-dot-circled");
if (!isInterfaceAvail) {
kimchi.enableBridgeOptions(false);
$("#networkBriDisabledLabel").show();
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index e2b1639..727f35d 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -58,16 +58,19 @@
<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" hidden />
+ <label id="networkTypeIsoIcon"
class="icon-circle-empty" for="networkTypeIso"
name="networkTypeIcon"></label>
<label for="networkTypeIso">$_("Isolated: no
external 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" hidden />
+ <label id="networkTypeNatIcon"
class="icon-circle-empty" for="networkTypeNat"
name="networkTypeIcon"></label>
<label for="networkTypeNat">$_("NAT: outbound
physical network connection only")</label>
</div>
<div class="input-container">
<div class="bridged-inline">
- <input type="radio" id="networkTypeBri"
name="networkType" value="bridged" />
+ <input type="radio" id="networkTypeBri"
name="networkType" value="bridged" hidden />
+ <label id="networkTypeBriIcon"
class="icon-circle-empty" for="networkTypeBri"
name="networkTypeIcon"></label>
</div>
<div class="bridged-inline">
<label for="networkTypeBri">$_("Bridged:
Virtual machines are connected to physical network directly")</label><br
/>
@@ -91,8 +94,9 @@
</div>
</div>
</div>
- <div>
- <input id="enableVlan" type="checkbox"
value="" />
+ <div class="vlan-check-section">
+ <input id="enableVlan" type="checkbox"
value="" hidden />
+ <label id="enableVlanIcon"
class="icon-check-empty-1" for="enableVlan"></label>
<label for="enableVlan"
id="labelEnableVlan">$_("Enable VLAN") </label>
</div>
<label for="networkVlanID"
id="labelNetworkVlanID">$_("VLAN ID"): </label>