[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Aline Manera
alinefm at linux.vnet.ibm.com
Thu Jun 5 12:59:19 UTC 2014
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 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