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