[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Jun 6 04:30:00 UTC 2014
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 at 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 at ovirt.org
>>>> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>>>
>>> --
>>> Thanks and best regards!
>>>
>>> Sheldon Feng(冯少合)<shaohef at linux.vnet.ibm.com>
>>> IBM Linux Technology Center
>>>
>>
>
More information about the Kimchi-devel
mailing list