<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#FFFFFF">
I have sent a new patch.<br>
<div class="moz-cite-prefix">On 06/07/2014 02:08 AM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:53920383.9080008@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/06/2014 12:29 PM, Wen Wang
wrote:<br>
</div>
<blockquote cite="mid:5391DE42.2030908@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
I have made a mockup of this part. It's a little bit hard for
the alignment of the combobox and the textbox.<br>
<br>
<img alt="" src="cid:part1.02070808.00090008@linux.vnet.ibm.com"
height="179" width="483"> <img alt=""
src="cid:part2.00050502.00010809@linux.vnet.ibm.com"
height="206" width="477"><br>
<br>
And if it is okay, I think "VLAN ID" label can be aligned with
"Enable VLAN" instead of the checkbox. </blockquote>
<br>
It is OK for me<br>
<br>
<blockquote cite="mid:5391DE42.2030908@linux.vnet.ibm.com"
type="cite">And another suggestion<br>
is can I make the combobox and the textbox a little bit smaller
so that it will fit the scenario better.<br>
</blockquote>
<br>
It would be good to have a mockup too so we can compare both.<br>
But my first answer would be: ok just you keep the same style.<br>
<br>
And remember to add a margin to the combobox content. It is too
close to combobox border.<br>
And the input box has circle borders in the template edit dialog.<br>
<br>
<blockquote cite="mid:5391DE42.2030908@linux.vnet.ibm.com"
type="cite"> <br>
Thanks<br>
<br>
Wang Wen<br>
<br>
<br>
<div class="moz-cite-prefix">On 06/05/2014 08:59 PM, Aline
Manera wrote:<br>
</div>
<blockquote cite="mid:539069A7.80104@linux.vnet.ibm.com"
type="cite">On 06/05/2014 04:46 AM, Zhou Zheng Sheng wrote: <br>
<blockquote type="cite">on 2014/06/05 15:41, Sheldon wrote: <br>
<blockquote type="cite">On 06/04/2014 08:41 AM, Aline Manera
wrote: <br>
<blockquote type="cite">Hi Wen Wang! <br>
Thanks for the patch! The UI looks better now but I
still have some <br>
suggestions to make: <br>
<br>
<br>
<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 <br>
box is empty <br>
(without any value) means the user does not want to set
enable VLAN. Otherwise <br>
we get the value <br>
and set it as the VLAN ID. <br>
<br>
So the fields to create a "Bridged" network are
"Destination" (a combo box) <br>
and "VLAN ID" (an input box). <br>
</blockquote>
I have checked this with Mark. <br>
He is the original designer of this VLAN ID. <br>
<br>
we think the check box is used to tell the user that he
want to enable vlan. <br>
the vlan is disabled by default. <br>
check box is more explicitly to show enable/disable. <br>
<br>
just one input, usually user do not know input can imply
enable/disable function. <br>
<br>
</blockquote>
For the check box part, I agree. Don't make the user think.
A check box <br>
disabled by default is more vivid. A naked VLAN ID input box
is strange <br>
by the first impression, and if it's with long explanation
label, it is <br>
tedious. <br>
</blockquote>
<br>
Ok. For good of all let's keep the check box. =) <br>
<br>
BUT I still have a suggestion: <br>
<br>
Destination: |_______________________| <br>
[ ] Enable VLAN <br>
<br>
And **if and only if** the check box is checked the input box
to collect the VLAN ID is displayed. <br>
<br>
<br>
Destination: |_______________________| <br>
[x] Enable VLAN <br>
VLAN ID: |_______________________| <br>
<br>
Agree? <br>
<br>
<blockquote type="cite">
<blockquote type="cite">
<blockquote type="cite">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>
<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>
<blockquote type="cite">Finished align vlan fields.
Redesigned the pattern of the label positions <br>
<br>
V3 -> V4: <br>
<br>
Address to Hongliang Wang: Assigned "for" attribute
for label to associate it with text box accordingly <br>
<br>
V2 -> V3: <br>
<br>
Address to Hongliang Wang: Have the additional margin
place removed. <br>
<br>
v1 -> v2: <br>
<br>
Address to Hongliang Wang: Have the unrelated lines
removed & Have the display format changed from
table to div. <br>
Address to Yuxin Huo: Have the unused IDs removed. <br>
<br>
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>
<br>
--- <br>
ui/css/theme-default/network.css | 21
++++++++++++++++----- <br>
ui/js/src/kimchi.network.js | 8 ++++---- <br>
ui/pages/tabs/network.html.tmpl | 34
+++++++++++++++++++++------------- <br>
3 files changed, 41 insertions(+), 22 deletions(-)
<br>
<br>
diff --git a/ui/css/theme-default/network.css
b/ui/css/theme-default/network.css <br>
index 67f2aa2..176b277 100644 <br>
--- a/ui/css/theme-default/network.css <br>
+++ b/ui/css/theme-default/network.css <br>
@@ -209,19 +209,30 @@ <br>
vertical-align: top; <br>
} <br>
<br>
-.network-config .destination { <br>
- margin-left: 28px; <br>
+.bridge-option-column { <br>
+ display: inline-block; <br>
+ margin-left: 56px; <br>
+ vertical-align: middle; <br>
+} <br>
+ <br>
+.bridge-option-column > div { <br>
+ height: 25px; <br>
+ line-height: 25px; <br>
} <br>
<br>
-.network-config .VLAN { <br>
- margin-left: 28px; <br>
+.bridge-option-column select { <br>
+ height: 26px; <br>
} <br>
<br>
-.network-config .VLAN input[type="text"] { <br>
+.bridge-option-column input[type="text"] { <br>
height: 25px; <br>
width: 60px; <br>
} <br>
<br>
+#labelNetworkVlanID { <br>
+ margin-left: 26px; <br>
+} <br>
+ <br>
.network-config .input-hint-icon { <br>
margin: -1px 1px 0 0; <br>
display: inline-block; <br>
diff --git a/ui/js/src/kimchi.network.js
b/ui/js/src/kimchi.network.js <br>
index 7a331be..ca6d29b 100644 <br>
--- a/ui/js/src/kimchi.network.js <br>
+++ b/ui/js/src/kimchi.network.js <br>
@@ -275,13 +275,14 @@ kimchi.enableBridgeOptions =
function(enable) { <br>
$("#networkVlanID").prop("disabled", true);
<br>
$("#networkVlanID").val(""); <br>
$("#networkInterface").val(""); <br>
- $("#bridge-options").slideUp(100); <br>
+ $("#bridgeOptions").slideUp(100); <br>
} else if (!$("#networkInterface").val()){ <br>
$("#networkInterface").prop("selectedIndex", 0); <br>
- $("#bridge-options").slideDown(100); <br>
+ $("#bridgeOptions").slideDown(100); <br>
} <br>
}; <br>
<br>
+ <br>
kimchi.setDefaultNetworkType =
function(isInterfaceAvail) { <br>
$("#networkTypeBri").prop("checked",
isInterfaceAvail); <br>
$("#networkTypeBri").prop("disabled",
!isInterfaceAvail); <br>
@@ -289,7 +290,7 @@ kimchi.setDefaultNetworkType =
function(isInterfaceAvail) { <br>
if (!isInterfaceAvail) { <br>
kimchi.enableBridgeOptions(false); <br>
} else { <br>
- $("#bridge-options").slideDown(100); <br>
+ $("#bridgeOptions").slideDown(100); <br>
} <br>
}; <br>
<br>
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog =
function() { <br>
$("#networkVlanID").prop("disabled", true); <br>
$("#enableVlan").prop("checked", false); <br>
}; <br>
- <br>
kimchi.setupNetworkFormEvent = function() { <br>
$("#networkName").on("keyup", function(event) {
<br>
$("#networkName").toggleClass("invalid-field",
!$("#networkName").val().match(/^[a-zA-Z0-9_]+$/)); <br>
diff --git a/ui/pages/tabs/network.html.tmpl
b/ui/pages/tabs/network.html.tmpl <br>
index e49b257..aedf7e8 100644 <br>
--- a/ui/pages/tabs/network.html.tmpl <br>
+++ b/ui/pages/tabs/network.html.tmpl <br>
@@ -46,7 +46,7 @@ <br>
<div class="section-container"> <br>
<div class="section-header">1.
$_("Network Name")</div> <br>
<div class="section-content"> <br>
- <input type="text"
id="networkName"> <br>
+ <input type="text"
id="networkName" /> <br>
<div class="input-hint"> <br>
<span class="ui-icon
ui-icon-info input-hint-icon"></span> <br>
<span
class="input-hint-text">$_("Alphanumeric and '_'
characters only.")</span> <br>
@@ -57,27 +57,35 @@ <br>
<div class="section-header">2.
$_("Network Type")</div> <br>
<div class="section-content"> <br>
<div class="input-container">
<br>
- <input type="radio"
id="networkTypeIso" name="networkType"
value="isolated"> <br>
+ <input type="radio"
id="networkTypeIso" name="networkType"
value="isolated" /> <br>
<label
for="networkTypeIso">$_("Isolated: no physical
network connection")</label> <br>
</div> <br>
<div class="input-container">
<br>
- <input type="radio"
id="networkTypeNat" name="networkType" value="nat">
<br>
+ <input type="radio"
id="networkTypeNat" name="networkType" value="nat"
/> <br>
<label
for="networkTypeNat">$_("NAT: outbound physical
network connection only")</label> <br>
</div> <br>
<div class="input-container">
<br>
- <input type="radio"
id="networkTypeBri" name="networkType"
value="bridged"> <br>
+ <input type="radio"
id="networkTypeBri" name="networkType" value="bridged"
/> <br>
<label
for="networkTypeBri">$_("Bridged: Virtual machines
are connected to physical network
directly")</label> <br>
</div> <br>
- <div id="bridge-options"> <br>
- <div class="destination"> <br>
- <label
for="networkInterface">$_("Destination"):
</label> <br>
- <select
id="networkInterface"></select> <br>
+ <div id="bridgeOptions"> <br>
+ <div
class="bridge-option-column"> <br>
+ <div> <br>
+ <label
for="networkInterface">$_("Destination"):
</label> <br>
+ </div> <br>
+ <div> <br>
+ <select
id="networkInterface"></select> <br>
+ </div> <br>
</div> <br>
- <div class="VLAN"> <br>
- <label
for="enableVlan">$_("Enable VLAN"): </label>
<br>
- <input id="enableVlan"
type="checkbox" value=""/> <br>
- <label
for="networkVlanID">$_("VLAN ID"): </label> <br>
- <input type="text"
id="networkVlanID" disabled> <br>
+ <div
class="bridge-option-column"> <br>
+ <div> <br>
+ <input id="enableVlan"
type="checkbox" value="" /> <br>
+ <label
for="enableVlan">$_("Enable VLAN"): </label>
<br>
+ </div> <br>
+ <div> <br>
+ <label
for="networkVlanID"
id="labelNetworkVlanID">$_("VLAN ID"):
</label> <br>
+ <input type="text"
id="networkVlanID" disabled /> <br>
+ </div> <br>
</div> <br>
</div> <br>
</div> <br>
</blockquote>
<br>
<br>
_______________________________________________ <br>
Kimchi-devel mailing list <br>
<a moz-do-not-send="true"
class="moz-txt-link-abbreviated"
href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<br>
<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>
<br>
</blockquote>
<br>
-- <br>
Thanks and best regards! <br>
<br>
Sheldon Feng(冯少合)<a moz-do-not-send="true"
class="moz-txt-link-rfc2396E"
href="mailto:shaohef@linux.vnet.ibm.com"><shaohef@linux.vnet.ibm.com></a>
<br>
IBM Linux Technology Center <br>
<br>
</blockquote>
<br>
</blockquote>
<br>
</blockquote>
<br>
</blockquote>
<br>
</blockquote>
<br>
</body>
</html>