<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
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.06040401.01010800@linux.vnet.ibm.com"
height="179" width="483"> <img alt=""
src="cid:part2.07080107.02090702@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. 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>
<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 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 class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<br>
<a 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 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>
</body>
</html>