[PATCH V4] Issue#305: Redesign bridged network UI section
Finished align vlan fields. Redesigned the pattern of the label positions 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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-) diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; } -.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; } -.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; } -.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; } +#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } }; @@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div> -- 1.9.1
On 05/16/2014 11:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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> Reviewed-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
Reviewed-by: ShaoHe Feng <shaohef@linux.vnet.ibm.com> Tested-by: ShaoHe Feng <shaohef@linux.vnet.ibm.com> On 05/16/2014 11:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
-- Thanks and best regards! Sheldon Feng(冯少合)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make: In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID. So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I'd like to see those 2 fields like below: Destination: |_____________________| VLAN ID: |_____________________| In the first column the labels and in the second one the fields. We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog. We need to apply the same style to the network dialog. Does that make sense for you? On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
PNG
On 6/4/2014 8:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
VLAN is optional, user need information to know that it is optional. If remove the checkbox and "Enable VLAN", I believe for many users, they need to think for a while about whether to fill the VLAN ID field, if they just leave it there, what will happen? With "Enable VLAN", it removes so much confusion.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box).
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
On 06/04/2014 03:36 AM, Yu Xin Huo wrote:
On 6/4/2014 8:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
VLAN is optional, user need information to know that it is optional.
If remove the checkbox and "Enable VLAN", I believe for many users, they need to think for a while about whether to fill the VLAN ID field, if they just leave it there, what will happen?
With "Enable VLAN", it removes so much confusion.
The VM name is also optional while creating a new VM and neither because that we have a check box there. We can do the same and add a label before VLAN ID field to avoid confusion. Destination: |_____________________| If you want to enable VLAN, please enter a VLAN ID below. Otherwise leave it in blank. VLAN ID: |_____________________|
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box).
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
ÿØÿà
Hi Aline, It's better that we have the indicator that tells user how to use this function properly. I have one concern about the font size. It is better to make the size of the indicator smaller than the title. Should we make the indicate sentence smaller than the title or the same size with a pair of brackets or an exclamation mark to show the difference? Best Regards Wang Wen On 06/04/2014 07:46 PM, Aline Manera wrote:
On 06/04/2014 03:36 AM, Yu Xin Huo wrote:
On 6/4/2014 8:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
VLAN is optional, user need information to know that it is optional.
If remove the checkbox and "Enable VLAN", I believe for many users, they need to think for a while about whether to fill the VLAN ID field, if they just leave it there, what will happen?
With "Enable VLAN", it removes so much confusion.
The VM name is also optional while creating a new VM and neither because that we have a check box there.
We can do the same and add a label before VLAN ID field to avoid confusion.
Destination: |_____________________|
If you want to enable VLAN, please enter a VLAN ID below. Otherwise leave it in blank. VLAN ID: |_____________________|
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box).
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
On 6/4/2014 7:46 PM, Aline Manera wrote:
On 06/04/2014 03:36 AM, Yu Xin Huo wrote:
On 6/4/2014 8:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
VLAN is optional, user need information to know that it is optional.
If remove the checkbox and "Enable VLAN", I believe for many users, they need to think for a while about whether to fill the VLAN ID field, if they just leave it there, what will happen?
With "Enable VLAN", it removes so much confusion.
The VM name is also optional while creating a new VM and neither because that we have a check box there.
We can do the same and add a label before VLAN ID field to avoid confusion.
Destination: |_____________________|
If you want to enable VLAN, please enter a VLAN ID below. Otherwise leave it in blank. VLAN ID: |_____________________|
To mark required fields, below is the best practice. If there are 20 fields in a form and 10 of them are required, user read all the text to get all required fields. I am trying to understand user's mental model and the concept model we should present. vlan id is not an attr of network, it is an attr of the vlan which is created on top of network. To express that "create a vlan with an id of xxxx", I prefer wang wen's original design.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box).
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box).
I have checked this with Mark. He is the original designer of this VLAN ID. we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable. just one input, usually user do not know input can imply enable/disable function.
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards! Sheldon Feng(???)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box).
I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards!
Sheldon Feng(冯少合)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
-- Zhou Zheng Sheng / 周征晟 E-mail: zhshzhou@linux.vnet.ibm.com Telephone: 86-10-82454397
On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote:
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
Ok. For good of all let's keep the check box. =) BUT I still have a suggestion: Destination: |_______________________| [ ] Enable VLAN And **if and only if** the check box is checked the input box to collect the VLAN ID is displayed. Destination: |_______________________| [x] Enable VLAN VLAN ID: |_______________________| Agree?
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards!
Sheldon Feng(冯少合)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
on 2014/06/05 20:59, Aline Manera wrote:
On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote:
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
Ok. For good of all let's keep the check box. =)
BUT I still have a suggestion:
Destination: |_______________________| [ ] Enable VLAN
And **if and only if** the check box is checked the input box to collect the VLAN ID is displayed.
Destination: |_______________________| [x] Enable VLAN VLAN ID: |_______________________|
Agree?
Yes. I would be very nice!
On 06/05/2014 08:59 PM, Aline Manera wrote:
On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote:
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
Ok. For good of all let's keep the check box. =)
BUT I still have a suggestion:
Destination: |_______________________| [ ] Enable VLAN
And **if and only if** the check box is checked the input box to collect the VLAN ID is displayed.
Destination: |_______________________| [x] Enable VLAN VLAN ID: |_______________________|
Agree? Looks fine. I will send another patch about this. Thx
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards!
Sheldon Feng(冯少合)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
I have made a mockup of this part. It's a little bit hard for the alignment of the combobox and the textbox. And if it is okay, I think "VLAN ID" label can be aligned with "Enable VLAN" instead of the checkbox. And another suggestion is can I make the combobox and the textbox a little bit smaller so that it will fit the scenario better. Thanks Wang Wen On 06/05/2014 08:59 PM, Aline Manera wrote:
On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote:
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
Ok. For good of all let's keep the check box. =)
BUT I still have a suggestion:
Destination: |_______________________| [ ] Enable VLAN
And **if and only if** the check box is checked the input box to collect the VLAN ID is displayed.
Destination: |_______________________| [x] Enable VLAN VLAN ID: |_______________________|
Agree?
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards!
Sheldon Feng(冯少合)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
On 06/06/2014 12:29 PM, Wen Wang wrote:
I have made a mockup of this part. It's a little bit hard for the alignment of the combobox and the textbox.
And if it is okay, I think "VLAN ID" label can be aligned with "Enable VLAN" instead of the checkbox.
It is OK for me
And another suggestion is can I make the combobox and the textbox a little bit smaller so that it will fit the scenario better.
It would be good to have a mockup too so we can compare both. But my first answer would be: ok just you keep the same style. And remember to add a margin to the combobox content. It is too close to combobox border. And the input box has circle borders in the template edit dialog.
Thanks
Wang Wen
On 06/05/2014 08:59 PM, Aline Manera wrote:
On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote:
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
Ok. For good of all let's keep the check box. =)
BUT I still have a suggestion:
Destination: |_______________________| [ ] Enable VLAN
And **if and only if** the check box is checked the input box to collect the VLAN ID is displayed.
Destination: |_______________________| [x] Enable VLAN VLAN ID: |_______________________|
Agree?
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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 | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 67f2aa2..176b277 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -209,19 +209,30 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.bridge-option-column { + display: inline-block; + margin-left: 56px; + vertical-align: middle; +} + +.bridge-option-column > div { + height: 25px; + line-height: 25px; }
-.network-config .VLAN { - margin-left: 28px; +.bridge-option-column select { + height: 26px; }
-.network-config .VLAN input[type="text"] { +.bridge-option-column input[type="text"] { height: 25px; width: 60px; }
+#labelNetworkVlanID { + margin-left: 26px; +} + .network-config .input-hint-icon { margin: -1px 1px 0 0; display: inline-block; diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7a331be..ca6d29b 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); } else { - $("#bridge-options").slideDown(100); + $("#bridgeOptions").slideDown(100); } };
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { $("#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..aedf7e8 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" /> <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,35 @@ <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 class="bridge-option-column"> + <div> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div> + <select id="networkInterface"></select> + </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 class="bridge-option-column"> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan">$_("Enable VLAN"): </label> + </div> + <div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" disabled /> + </div> </div> </div> </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards!
Sheldon Feng(???)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
I have sent a new patch. On 06/07/2014 02:08 AM, Aline Manera wrote:
On 06/06/2014 12:29 PM, Wen Wang wrote:
I have made a mockup of this part. It's a little bit hard for the alignment of the combobox and the textbox.
And if it is okay, I think "VLAN ID" label can be aligned with "Enable VLAN" instead of the checkbox.
It is OK for me
And another suggestion is can I make the combobox and the textbox a little bit smaller so that it will fit the scenario better.
It would be good to have a mockup too so we can compare both. But my first answer would be: ok just you keep the same style.
And remember to add a margin to the combobox content. It is too close to combobox border. And the input box has circle borders in the template edit dialog.
Thanks
Wang Wen
On 06/05/2014 08:59 PM, Aline Manera wrote:
On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote:
on 2014/06/05 15:41, Sheldon wrote:
On 06/04/2014 08:41 AM, Aline Manera wrote:
Hi Wen Wang! Thanks for the patch! The UI looks better now but I still have some suggestions to make:
In the red are you can see those 2 fields are redundant. We can only have the input box to collect the VLAN ID from user. If the input box is empty (without any value) means the user does not want to set enable VLAN. Otherwise we get the value and set it as the VLAN ID.
So the fields to create a "Bridged" network are "Destination" (a combo box) and "VLAN ID" (an input box). I have checked this with Mark. He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan. the vlan is disabled by default. check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable function.
For the check box part, I agree. Don't make the user think. A check box disabled by default is more vivid. A naked VLAN ID input box is strange by the first impression, and if it's with long explanation label, it is tedious.
Ok. For good of all let's keep the check box. =)
BUT I still have a suggestion:
Destination: |_______________________| [ ] Enable VLAN
And **if and only if** the check box is checked the input box to collect the VLAN ID is displayed.
Destination: |_______________________| [x] Enable VLAN VLAN ID: |_______________________|
Agree?
I'd like to see those 2 fields like below:
Destination: |_____________________| VLAN ID: |_____________________|
In the first column the labels and in the second one the fields.
We also need to use the default kimchi style to the combo box and the input box. The image below is from the "Edit Template" dialog.
We need to apply the same style to the network dialog.
Does that make sense for you?
On 05/16/2014 12:29 AM, Wen Wang wrote: > Finished align vlan fields. Redesigned the pattern of the label > positions > > 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 | 21 ++++++++++++++++----- > ui/js/src/kimchi.network.js | 8 ++++---- > ui/pages/tabs/network.html.tmpl | 34 > +++++++++++++++++++++------------- > 3 files changed, 41 insertions(+), 22 deletions(-) > > diff --git a/ui/css/theme-default/network.css > b/ui/css/theme-default/network.css > index 67f2aa2..176b277 100644 > --- a/ui/css/theme-default/network.css > +++ b/ui/css/theme-default/network.css > @@ -209,19 +209,30 @@ > vertical-align: top; > } > > -.network-config .destination { > - margin-left: 28px; > +.bridge-option-column { > + display: inline-block; > + margin-left: 56px; > + vertical-align: middle; > +} > + > +.bridge-option-column > div { > + height: 25px; > + line-height: 25px; > } > > -.network-config .VLAN { > - margin-left: 28px; > +.bridge-option-column select { > + height: 26px; > } > > -.network-config .VLAN input[type="text"] { > +.bridge-option-column input[type="text"] { > height: 25px; > width: 60px; > } > > +#labelNetworkVlanID { > + margin-left: 26px; > +} > + > .network-config .input-hint-icon { > margin: -1px 1px 0 0; > display: inline-block; > diff --git a/ui/js/src/kimchi.network.js > b/ui/js/src/kimchi.network.js > index 7a331be..ca6d29b 100644 > --- a/ui/js/src/kimchi.network.js > +++ b/ui/js/src/kimchi.network.js > @@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = > function(isInterfaceAvail) { > if (!isInterfaceAvail) { > kimchi.enableBridgeOptions(false); > } else { > - $("#bridge-options").slideDown(100); > + $("#bridgeOptions").slideDown(100); > } > }; > > @@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() { > $("#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..aedf7e8 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" /> > <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,35 @@ > <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 class="bridge-option-column"> > + <div> > + <label > for="networkInterface">$_("Destination"): </label> > + </div> > + <div> > + <select > id="networkInterface"></select> > + </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 class="bridge-option-column"> > + <div> > + <input id="enableVlan" > type="checkbox" value="" /> > + <label for="enableVlan">$_("Enable > VLAN"): </label> > + </div> > + <div> > + <label for="networkVlanID" > id="labelNetworkVlanID">$_("VLAN ID"): </label> > + <input type="text" > id="networkVlanID" disabled /> > + </div> > </div> > </div> > </div>
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Thanks and best regards!
Sheldon Feng(???)<shaohef@linux.vnet.ibm.com> IBM Linux Technology Center
participants (6)
-
Aline Manera -
Hongliang Wang -
Sheldon -
Wen Wang -
Yu Xin Huo -
Zhou Zheng Sheng