11:30 p.m.
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(a)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(a)ovirt.org
>>> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>>
>> --
>> Thanks and best regards!
>>
>> Sheldon Feng(冯少合)<shaohef(a)linux.vnet.ibm.com>
>> IBM Linux Technology Center
>>
>