From: Wen Wang <wenwang@linux.vnet.ibm.com> Finished align vlan fields. Redesigned the pattern of the label positions V4 -> V5: Redesigned the alignment of bridge option under "network" tab. Change all themes to kimchi style (Aline) 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@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 83 +++++++++++++++++++++++++++++++++--- ui/js/src/kimchi.network.js | 60 +++++++++++++++---------- ui/pages/storagepool-add.html.tmpl | 2 +- ui/pages/tabs/network.html.tmpl | 39 +++++++++++------ 4 files changed, 139 insertions(+), 45 deletions(-) diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..ba21e04 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -162,6 +162,10 @@ margin-top: 10px; } +.network-config .section-container:last-child { + height: 260px; +} + .network-config .section-header { font-weight: bold; font-size: 14px; @@ -209,17 +213,70 @@ vertical-align: top; } -.network-config .destination { - margin-left: 28px; +.network-type-wrapper-controls input[type="text"] { + height: 38px; + line-height: 38px; + background: #fff; + -webkit-border-radius: 5px; + border-radius: 5px; + box-shadow: 2px 2px 2px #eee inset; + border-top: 1px solid #bbb; + border-left: 1px solid #bbb; + padding: 0 10px; + margin-top: 5px; + width: 50px; } -.network-config .VLAN { - margin-left: 28px; +.network-type-wrapper-controls > .dropdown { + margin: 5px 0 0 1px; + width: 180px; } -.network-config .VLAN input[type="text"] { - height: 25px; - width: 60px; +.network-type-wrapper-controls input[type="text"][disabled] { + color: #bbb; + background-color: #fafafa; + cursor: not-allowed; +} + +.network-type-wrapper-controls span[type="text"] { + padding: 0 10px; +} + +.bridge-option-column { + display: inline-block; + vertical-align: middle; +} + +.bridge-option-column label { + margin-left: 42px; +} + +.network-type-wrapper-controls { + width: 80px; + display: inline-block; + vertical-align: top; + padding: 5px 5px 5px 22px; +} + +#enableVlan { + margin-left: 42px; + vertical-align: middle; +} + +#labelEnableVlan { + vertical-align: middle; +} + +#labelNetworkVlanID { + margin-left: 42px; + vertical-align: middle; + display: none; +} + +#networkVlanID { + width: 80px; + vertical-align: middle; + display: none; } .network-config .input-hint-icon { @@ -234,3 +291,15 @@ .network-config .input-hint-text { vertical-align: top; } + +.network-label { + background: none repeat scroll 0 0 #FFFFFF; + border-left: 1px solid #BBBBBB; + border-radius: 5px 5px 5px 5px; + border-top: 1px solid #BBBBBB; + box-shadow: 2px 2px 2px #EEEEEE inset; + color: #333333; + font-size: 13px; + padding: 10px; + width: 100%; +} \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 23930cd..54a6594 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -205,7 +205,6 @@ kimchi.initNetworkCreation = function() { }; kimchi.initNetworkDialog = function() { - buttonsObj= {}; buttonsObj['id'] = "networkFormOk"; buttonsObj['text'] = i18n.KCHAPI6005M; @@ -233,24 +232,29 @@ kimchi.initNetworkDialog = function() { kimchi.openNetworkDialog = function(okCallback) { kimchi.getInterfaces(function(result) { - var options = ""; + var options = []; + $('#networkDestinationID').selectMenu(); + $("#networkDestinationID").on('click',function(){ + }); var nics = {}; for (var i = 0; i < result.length; i++) { - options += "<option value=" + result[i].name + ">" + result[i].name + "</option>"; + options.push({label:result[i].name,value:result[i].name}); nics[result[i].name] = result[i]; } - $("#networkInterface").append(options); + $("#networkDestinationID").selectMenu("setData", options); onChange = function() { - if (nics[$("#networkInterface").val()].type === "bridge") { + $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text()); + if (nics[$("#networkDestinationLabel").text()].type === "bridge") { $("#enableVlan").prop("checked", false); $("#enableVlan").prop("disabled", true); $("#networkVlanID").val(""); - $("#networkVlanID").prop("disabled", true); + $("#networkVlanID").toggle(false); + $("#labelNetworkVlanID").toggle(false); } else { - $("#enableVlan").prop("disabled", false); + $("#enableVlan").prop("disabled",false); } }; - $("#networkInterface").on("change", onChange); + $("#networkDestinationLabel").on("change", onChange); onChange(); kimchi.setDefaultNetworkType(result.length!==0); }); @@ -263,8 +267,14 @@ kimchi.openNetworkDialog = function(okCallback) { $("#enableVlan").on("click", function() { $("#networkVlanID").prop("disabled", !this.checked); if (!this.checked) { + $("#networkVlanID").slideUp(100); + $("#labelNetworkVlanID").slideUp(100); $("#networkVlanID").val(""); } + else { + $("#networkVlanID").slideDown(100); + $("#labelNetworkVlanID").slideDown(100); + } }); $("#networkConfig").dialog("open"); }; @@ -272,16 +282,20 @@ kimchi.openNetworkDialog = function(okCallback) { kimchi.enableBridgeOptions = function(enable) { if (!enable) { $("#enableVlan").prop("checked", false); - $("#networkVlanID").prop("disabled", true); + $("#networkVlanID").toggle(false); + $("#labelNetworkVlanID").toggle(false); $("#networkVlanID").val(""); - $("#networkInterface").val(""); - $("#bridge-options").slideUp(100); - } else if (!$("#networkInterface").val()){ - $("#networkInterface").prop("selectedIndex", 0); - $("#bridge-options").slideDown(100); + $("#networkDestinationLabel").text(""); + $("#bridgeOptions").slideUp(100); + } else if (!$("#networkDestinationLabel").text()){ + $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text()); + $("#bridgeOptions").slideDown(100); + $("#networkVlanID").toggle(false); + $("#labelNetworkVlanID").toggle(false); } }; + kimchi.setDefaultNetworkType = function(isInterfaceAvail) { $("#networkTypeBri").prop("checked", isInterfaceAvail); $("#networkTypeBri").prop("disabled", !isInterfaceAvail); @@ -289,7 +303,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); + $("#networkVlanID").toggle(false); + $("#labelNetworkVlanID").toggle(false); } }; @@ -299,41 +315,37 @@ kimchi.getNetworkDialogValues = function() { type : $("input:radio[name=networkType]:checked").val() }; if (network.type === kimchi.NETWORK_TYPE_BRIDGE) { - network.interface = $("#networkInterface").val(); + network.interface = $("#networkDestinationLabel").text(); network.vlan_id = parseInt($("#networkVlanID").val()); } return network; }; kimchi.cleanNetworkDialog = function() { - $("#networkInterface").empty(); $("input:text", "#networkConfig").val(null).removeClass("invalid-field"); $("#networkTypeIso").prop("checked", false); $("#networkTypeNat").prop("checked", false); $("#networkTypeBri").prop("checked", false); - $("#networkInterface").prop("disabled", false); - $("#networkInterface option").removeAttr("selected").find(":first").attr("selected", "selected"); + $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text()); $("#networkFormOk").off("click"); $("#networkFormOk").button("disable"); - $("#networkVlanID").prop("disabled", true); + $("#networkVlanID").toggle(false); + $("#labelNetworkVlanID").toggle(false); $("#enableVlan").prop("checked", false); -}; +}; kimchi.setupNetworkFormEvent = function() { $("#networkName").on("keyup", function(event) { $("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[a-zA-Z0-9_]+$/)); kimchi.updateNetworkFormButton(); }); $("#networkTypeIso").on("click", function(event) { - $("#networkInterface").prop("disabled", true); kimchi.enableBridgeOptions(false); }); $("#networkTypeNat").on("click", function(event) { - $("#networkInterface").prop("disabled", true); kimchi.enableBridgeOptions(false); }); $("#networkTypeBri").on("click", function(event) { - $("#networkInterface").prop("disabled", false); kimchi.enableBridgeOptions(true); }); }; diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl index ba85e6e..e6b1fd6 100644 --- a/ui/pages/storagepool-add.html.tmpl +++ b/ui/pages/storagepool-add.html.tmpl @@ -29,7 +29,7 @@ <div class="close">X</div> </header> <div class="content"> - <form id="form-pool-add"> + <form id="form-pool-addd"> <section class="form-section"> <h2>1. $_("Storage Pool Name")</h2> <div class="field"> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index e49b257..cb9fa5b 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" class="network-label"/> <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,40 @@ <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> + <div class="bridge-option-column"> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div class="bridge-option-column"> + <div class="network-type-wrapper-controls"> + <div id ="networkDestinationID"> + <input id="networkDestinationInputId" name="type" type="hidden"/> + <span id="networkDestinationLabel" type="text"></span><span class="arrow"></span> + <div> + <ul id="networkInterface"></ul> + </div> + </div> + </div> + </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> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN"): </label> + </div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" class="network-label"/> </div> </div> </div> -- 1.7.1