[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Yu Xin Huo
huoyuxin at linux.vnet.ibm.com
Wed Jun 4 06:36:58 UTC 2014
On 6/4/2014 8: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.
VLAN is optional, user need information to know that it is optional.
If remove the checkbox and "Enable VLAN", I believe for many users,
they need to think for a while about whether to fill the VLAN ID field,
if they just leave it there, what will happen?
With "Enable VLAN", it removes so much confusion.
>
> So the fields to create a "Bridged" network are "Destination" (a combo
> box) and "VLAN ID" (an input box).
>
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140604/cea90f3e/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 8954 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140604/cea90f3e/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 9440 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140604/cea90f3e/attachment-0001.png>
More information about the Kimchi-devel
mailing list