[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section

Wen Wang wenwang at linux.vnet.ibm.com
Fri Jun 6 15:29:06 UTC 2014


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. And another suggestion
is can I make the combobox and the textbox a little bit smaller so that 
it will fit the scenario better.

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 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
>>>
>>
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140606/fd05ee15/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: before.jpg
Type: image/jpeg
Size: 22033 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140606/fd05ee15/attachment.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: after.jpg
Type: image/jpeg
Size: 24383 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140606/fd05ee15/attachment-0001.jpg>


More information about the Kimchi-devel mailing list