Signed-off-by: Wen Wang <wenwang@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> -- 2.1.0