[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Aline Manera
alinefm at linux.vnet.ibm.com
Fri Jun 6 18:08:03 UTC 2014
On 06/06/2014 12:29 PM, Wen Wang wrote:
> 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.
It is OK for me
> And another suggestion
> is can I make the combobox and the textbox a little bit smaller so
> that it will fit the scenario better.
It would be good to have a mockup too so we can compare both.
But my first answer would be: ok just you keep the same style.
And remember to add a margin to the combobox content. It is too close to
combobox border.
And the input box has circle borders in the template edit dialog.
>
> 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/35028e4f/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 22033 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140606/35028e4f/attachment.jpe>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 24383 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140606/35028e4f/attachment-0001.jpe>
More information about the Kimchi-devel
mailing list