<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 6/4/2014 7:46 PM, Aline Manera
      wrote:<br>
    </div>
    <blockquote cite="mid:538F0708.30506@linux.vnet.ibm.com" type="cite">
      <meta content="text/html; charset=ISO-8859-1"
        http-equiv="Content-Type">
      <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.08040306.05080902@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.06020503.02090403@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>
    <br>
    To mark required fields, below is the best practice.<br>
    <br>
    <img src="cid:part3.04060105.03090704@linux.vnet.ibm.com" alt=""><br>
    <br>
    <br>
    If there are 20 fields in a form and 10 of them are required, user
    read all the text to get all required fields.<br>
    <br>
    I am trying to understand user's mental model and the concept model
    we should present.<br>
    vlan id is not an attr of network, it is an attr of the vlan which
    is created on top of network.<br>
    To express that "create a vlan with an id of xxxx", I prefer wang
    wen's original design.<br>
    <br>
    <blockquote cite="mid:538F0708.30506@linux.vnet.ibm.com" type="cite">
      <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:part4.07000500.07060502@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 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>
    </blockquote>
    <br>
  </body>
</html>