[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Zhou Zheng Sheng
zhshzhou at linux.vnet.ibm.com
Thu Jun 5 07:46:32 UTC 2014
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.
>>
>> 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
>
--
Zhou Zheng Sheng / 周征晟
E-mail: zhshzhou at linux.vnet.ibm.com
Telephone: 86-10-82454397
More information about the Kimchi-devel
mailing list