[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Wen Wang
wenwang at linux.vnet.ibm.com
Tue Jun 10 12:15:29 UTC 2014
I have sent a new patch.
On 06/07/2014 02:08 AM, Aline Manera wrote:
> 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/20140610/959b7240/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/20140610/959b7240/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/20140610/959b7240/attachment-0001.jpe>
More information about the Kimchi-devel
mailing list