<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#FFFFFF">
Hi Aline,<br>
<br>
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?<br>
<br>
Best Regards<br>
<br>
Wang Wen<br>
<br>
<div class="moz-cite-prefix">On 06/04/2014 07:46 PM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:538F0708.30506@linux.vnet.ibm.com" type="cite">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<div class="moz-cite-prefix">On 06/04/2014 03:36 AM, Yu Xin Huo
wrote:<br>
</div>
<blockquote cite="mid:538EBE8A.5060101@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<div class="moz-cite-prefix">On 6/4/2014 8:41 AM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:538E6B46.6080303@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<div class="moz-cite-prefix"><br>
Hi Wen Wang!<br>
Thanks for the patch! The UI looks better now but I still
have some suggestions to make:<br>
<br>
<br>
<img src="cid:part1.02040607.09070100@linux.vnet.ibm.com"
alt=""><br>
<br>
In the red are you can see those 2 fields are redundant.<br>
We can only have the input box to collect the VLAN ID from
user. If the input box is empty<br>
(without any value) means the user does not want to set
enable VLAN. Otherwise we get the value<br>
and set it as the VLAN ID.<br>
</div>
</blockquote>
VLAN is optional, user need information to know that it is
optional.<br>
<br>
If remove the checkbox and "Enable VLAN", I believe for many
users, <br>
they need to think for a while about whether to fill the VLAN ID
field, if they just leave it there, what will happen?<br>
<br>
With "Enable VLAN", it removes so much confusion.<br>
</blockquote>
<br>
The VM name is also optional while creating a new VM and neither
because that we have a check box there.<br>
<br>
<img src="cid:part2.03030607.03020308@linux.vnet.ibm.com" alt=""><br>
<br>
We can do the same and add a label before VLAN ID field to avoid
confusion.<br>
<br>
Destination: |_____________________|<br>
<br>
If you want to enable VLAN, please enter a VLAN ID below.
Otherwise leave it in blank.<br>
VLAN ID: |_____________________|<br>
<br>
<blockquote cite="mid:538EBE8A.5060101@linux.vnet.ibm.com"
type="cite"> <br>
<blockquote cite="mid:538E6B46.6080303@linux.vnet.ibm.com"
type="cite">
<div class="moz-cite-prefix"> <br>
So the fields to create a "Bridged" network are
"Destination" (a combo box) and "VLAN ID" (an input box).<br>
<br>
I'd like to see those 2 fields like below:<br>
<br>
Destination: |_____________________|<br>
VLAN ID: |_____________________|<br>
<br>
In the first column the labels and in the second one the
fields.<br>
<br>
We also need to use the default kimchi style to the combo
box and the input box.<br>
The image below is from the "Edit Template" dialog.<br>
<br>
<br>
<img src="cid:part3.00070606.08070803@linux.vnet.ibm.com"
alt=""><br>
<br>
We need to apply the same style to the network dialog.<br>
<br>
Does that make sense for you?<br>
<br>
<br>
On 05/16/2014 12:29 AM, Wen Wang wrote:<br>
</div>
<blockquote
cite="mid:1400210948-22406-1-git-send-email-wenwang@linux.vnet.ibm.com"
type="cite">
<pre wrap="">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 <a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com"><wenwang@linux.vnet.ibm.com></a>
---
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<a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:%29.slideDown%28100%29;%7D%7D;@@-318,7+319,6@@kimchi.cleanNetworkDialog=function%28%29%7B$%28">").slideDown(100);
}
};
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() {
$("</a>#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>
</pre>
</blockquote>
<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
</body>
</html>