<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <div class="moz-cite-prefix">On 06/04/2014 03:36 AM, Yu Xin Huo
      wrote:<br>
    </div>
    <blockquote cite="mid:538EBE8A.5060101@linux.vnet.ibm.com"
      type="cite">
      <meta content="text/html; charset=ISO-8859-1"
        http-equiv="Content-Type">
      <div class="moz-cite-prefix">On 6/4/2014 8:41 AM, Aline Manera
        wrote:<br>
      </div>
      <blockquote cite="mid:538E6B46.6080303@linux.vnet.ibm.com"
        type="cite">
        <meta content="text/html; charset=ISO-8859-1"
          http-equiv="Content-Type">
        <div class="moz-cite-prefix"><br>
          Hi Wen Wang!<br>
          Thanks for the patch! The UI looks better now but I still have
          some suggestions to make:<br>
          <br>
          <br>
          <img src="cid:part1.02080402.05060903@linux.vnet.ibm.com"
            alt=""><br>
          <br>
          In the red are you can see those 2 fields are redundant.<br>
          We can only have the input box to collect the VLAN ID from
          user. If the input box is empty<br>
          (without any value) means the user does not want to set enable
          VLAN. Otherwise we get the value<br>
          and set it as the VLAN ID.<br>
        </div>
      </blockquote>
      VLAN is optional, user need information to know that it is
      optional.<br>
      <br>
      If remove the checkbox and "Enable VLAN", I believe for many
      users, <br>
      they need to think for a while about whether to fill the VLAN ID
      field, if they just leave it there, what will happen?<br>
      <br>
      With "Enable VLAN", it removes so much confusion.<br>
    </blockquote>
    <br>
    The VM name is also optional while creating a new VM and neither
    because that we have a check box there.<br>
    <br>
    <img src="cid:part2.05030902.04080209@linux.vnet.ibm.com" alt=""><br>
    <br>
    We can do the same and add a label before VLAN ID field to avoid
    confusion.<br>
    <br>
    Destination:&nbsp;&nbsp;&nbsp; |_____________________|<br>
    <br>
    If you want to enable VLAN, please enter a VLAN ID below. Otherwise
    leave it in blank.<br>
    VLAN ID:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |_____________________|<br>
    <br>
    <blockquote cite="mid:538EBE8A.5060101@linux.vnet.ibm.com"
      type="cite"> <br>
      <blockquote cite="mid:538E6B46.6080303@linux.vnet.ibm.com"
        type="cite">
        <div class="moz-cite-prefix"> <br>
          So the fields to create a "Bridged" network are "Destination"
          (a combo box) and "VLAN ID" (an input box).<br>
          <br>
          I'd like to see those 2 fields like below:<br>
          <br>
          Destination:&nbsp;&nbsp;&nbsp; |_____________________|<br>
          VLAN ID:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |_____________________|<br>
          <br>
          In the first column the labels and in the second one the
          fields.<br>
          <br>
          We also need to use the default kimchi style to the combo box
          and the input box.<br>
          The image below is from the "Edit Template" dialog.<br>
          <br>
          <br>
          <img src="cid:part3.02080309.03000604@linux.vnet.ibm.com"
            alt=""><br>
          <br>
          We need to apply the same style to the network dialog.<br>
          <br>
          Does that make sense for you?<br>
          <br>
          <br>
          On 05/16/2014 12:29 AM, Wen Wang wrote:<br>
        </div>
        <blockquote
          cite="mid:1400210948-22406-1-git-send-email-wenwang@linux.vnet.ibm.com"
          type="cite">
          <pre wrap="">Finished align vlan fields. Redesigned the pattern of the label positions

V3 -&gt; V4:

Address to Hongliang Wang: Assigned "for" attribute for label to associate it with text box accordingly

V2 -&gt; V3:

Address to Hongliang Wang: Have the additional margin place removed.

v1 -&gt; v2:

Address to Hongliang Wang: Have the unrelated lines removed &amp; Have the display format changed from table to div.
Address to Yuxin Huo: Have the unused IDs removed.

Signed-off-by: Wen Wang <a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:wenwang@linux.vnet.ibm.com">&lt;wenwang@linux.vnet.ibm.com&gt;</a>
---
 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 &gt; 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<a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:%29.slideDown%28100%29;%7D%7D;@@-318,7+319,6@@kimchi.cleanNetworkDialog=function%28%29%7B$%28">").slideDown(100);
     }
 };

@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() {
     $("</a>#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 @@
         &lt;div class="section-container"&gt;
             &lt;div class="section-header"&gt;1. $_("Network Name")&lt;/div&gt;
             &lt;div class="section-content"&gt;
-                &lt;input type="text" id="networkName"&gt;
+                &lt;input type="text" id="networkName" /&gt;
                 &lt;div class="input-hint"&gt;
                     &lt;span class="ui-icon ui-icon-info input-hint-icon"&gt;&lt;/span&gt;
                     &lt;span class="input-hint-text"&gt;$_("Alphanumeric and '_' characters only.")&lt;/span&gt;
@@ -57,27 +57,35 @@
             &lt;div class="section-header"&gt;2. $_("Network Type")&lt;/div&gt;
             &lt;div class="section-content"&gt;
                 &lt;div class="input-container"&gt;
-                    &lt;input type="radio" id="networkTypeIso" name="networkType" value="isolated"&gt;
+                    &lt;input type="radio" id="networkTypeIso" name="networkType" value="isolated" /&gt;
                     &lt;label for="networkTypeIso"&gt;$_("Isolated: no physical network connection")&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="input-container"&gt;
-                    &lt;input type="radio" id="networkTypeNat" name="networkType" value="nat"&gt;
+                    &lt;input type="radio" id="networkTypeNat" name="networkType" value="nat" /&gt;
                     &lt;label for="networkTypeNat"&gt;$_("NAT: outbound physical network connection only")&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="input-container"&gt;
-                    &lt;input type="radio" id="networkTypeBri" name="networkType" value="bridged"&gt;
+                    &lt;input type="radio" id="networkTypeBri" name="networkType" value="bridged" /&gt;
                     &lt;label for="networkTypeBri"&gt;$_("Bridged: Virtual machines are connected to physical network directly")&lt;/label&gt;
                 &lt;/div&gt;
-                &lt;div id="bridge-options"&gt;
-                    &lt;div class="destination"&gt;
-                        &lt;label for="networkInterface"&gt;$_("Destination"): &lt;/label&gt;
-                        &lt;select id="networkInterface"&gt;&lt;/select&gt;
+                &lt;div id="bridgeOptions"&gt;
+                    &lt;div class="bridge-option-column"&gt;
+                        &lt;div&gt;
+                            &lt;label for="networkInterface"&gt;$_("Destination"): &lt;/label&gt;
+                        &lt;/div&gt;
+                        &lt;div&gt;
+                            &lt;select id="networkInterface"&gt;&lt;/select&gt;
+                        &lt;/div&gt;
                     &lt;/div&gt;
-                    &lt;div class="VLAN"&gt;
-                        &lt;label for="enableVlan"&gt;$_("Enable VLAN"): &lt;/label&gt;
-                        &lt;input id="enableVlan" type="checkbox" value=""/&gt;
-                        &lt;label for="networkVlanID"&gt;$_("VLAN ID"): &lt;/label&gt;
-                        &lt;input type="text" id="networkVlanID" disabled&gt;
+                    &lt;div class="bridge-option-column"&gt;
+                        &lt;div&gt;
+                            &lt;input id="enableVlan" type="checkbox" value="" /&gt;
+                            &lt;label for="enableVlan"&gt;$_("Enable VLAN"): &lt;/label&gt;
+                        &lt;/div&gt;
+                        &lt;div&gt;
+                            &lt;label for="networkVlanID" id="labelNetworkVlanID"&gt;$_("VLAN ID"): &lt;/label&gt;
+                            &lt;input type="text" id="networkVlanID" disabled /&gt;
+                        &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
</pre>
        </blockquote>
        <br>
        <br>
        <fieldset class="mimeAttachmentHeader"></fieldset>
        <br>
        <pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
      </blockquote>
      <br>
      <br>
      <fieldset class="mimeAttachmentHeader"></fieldset>
      <br>
      <pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
    </blockquote>
    <br>
  </body>
</html>