[Kimchi-devel] [PATCH V5] Issue#305: Redesign bridged network UI section tempstorage
wenwang at linux.vnet.ibm.com
wenwang at linux.vnet.ibm.com
Tue Jun 10 12:13:35 UTC 2014
From: Wen Wang <wenwang at 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 at 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
More information about the Kimchi-devel
mailing list