From mboxrd@z Thu Jan  1 00:00:00 1970
From: kupcevic@sourceware.org <kupcevic@sourceware.org>
Date: 17 Jul 2006 20:59:43 -0000
Subject: [Cluster-devel] conga/luci ChangeLog site/luci/Extensions/Stor ...
Message-ID: <20060717205943.1348.qmail@sourceware.org>
List-Id: <cluster-devel.redhat.com>
To: cluster-devel.redhat.com
MIME-Version: 1.0
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit

CVSROOT:	/cvs/cluster
Module name:	conga
Changes by:	kupcevic at sourceware.org	2006-07-17 20:59:43

Modified files:
	luci           : ChangeLog 
	luci/site/luci/Extensions: StorageReport.py 
	luci/storage   : form-macros 

Log message:
	luci - storage: styling of property dialogs

Patches:
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/ChangeLog.diff?cvsroot=cluster&r1=1.2&r2=1.3
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/site/luci/Extensions/StorageReport.py.diff?cvsroot=cluster&r1=1.2&r2=1.3
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/form-macros.diff?cvsroot=cluster&r1=1.1&r2=1.2

--- conga/luci/ChangeLog	2006/07/12 23:12:00	1.2
+++ conga/luci/ChangeLog	2006/07/17 20:59:43	1.3
@@ -1,5 +1,8 @@
 
 
+2006-07-17  Stanko Kupcevic <kupcevic@redhat.com> 
+   * storage: styling of property dialogs
+
 2006-07-12  Stanko Kupcevic <kupcevic@redhat.com> 
-   * use pretty properties' names
+   * storage: use pretty properties' names
 
--- conga/luci/site/luci/Extensions/StorageReport.py	2006/07/12 23:12:01	1.2
+++ conga/luci/site/luci/Extensions/StorageReport.py	2006/07/17 20:59:43	1.3
@@ -407,6 +407,7 @@
     pretty_target_name = 'target'
     pretty_source_name = 'source'
     icon_name = ''
+    color = 'black'
     if type == MAPPER_SYS_TYPE:
         pretty_type = 'Hard Drives'
         pretty_target_name = 'Hard Drive'
@@ -461,6 +462,7 @@
     mapper_ret['sources'] = sources
     mapper_ret['new_sources'] = new_sources
     mapper_ret['icon'] = icon_name
+    mapper_ret['color'] = color
     mapper_ret['xml'] = mapper.cloneNode(True)
     
     assemble_all_targets(mapper_ret)
@@ -598,7 +600,8 @@
     pretty_name = mapper_id.replace(type + ':', '').replace('/dev/', '')
     pretty_target_name = 'target'
     pretty_source_name = 'source'
-    icon_name = ''
+    icon_name = 'none'
+    color = 'black'
     if type == MAPPER_SYS_TYPE:
         pretty_type = 'Hard Drives'
         pretty_target_name = 'Hard Drive'
@@ -668,6 +671,7 @@
     mapper_ret['min_sources'] = min_sources
     mapper_ret['max_sources'] = max_sources
     mapper_ret['icon'] = icon_name
+    mapper_ret['color'] = color
     mapper_ret['xml'] = mapper.cloneNode(True)
     
     mapper_ret['actions'] = []
@@ -1375,6 +1379,7 @@
     pretty_type = 'Block Device'
     description = props['size']['value'] + ' ' + props['size']['units']
     icon_name = ''
+    color = 'black'
     if type == MAPPER_SYS_TYPE:
         pretty_type = 'Hard Drive'
         icon_name = 'icon_bd_ide.png'
@@ -1388,6 +1393,7 @@
             icon_name = 'icon_bd_LV_snapshot.png'
         else:
             icon_name = 'icon_bd_LV.png'
+        color = '#0192db'
     elif type == MAPPER_PT_TYPE:
         pretty_type = 'Partition'
         icon_name = 'icon_bd_partition.png'
@@ -1420,7 +1426,7 @@
                 contents = []
                 path = 'new_snapshot'
                 pretty_type = 'New Snapshot'
-                pretty_name = 'no pretty name'
+                pretty_name = ''
             else:
                 pretty_type = 'Snapshot'
                 #pretty_name = 'Unused Space'
@@ -1434,6 +1440,7 @@
     data['mapper_id'] = mapper_id
     data['contents'] = contents
     data['icon'] = icon_name
+    data['color'] = color
     data['xml'] = bd_xml.cloneNode(True)
     
     actions = []
@@ -1607,6 +1614,36 @@
         for name in old_props:
             new_props['content_variable_' + d['id'] + '_' + name] = old_props[name]
         d['props'] = new_props
+        
+        # content's color and icon
+        color = 'black'
+        icon_name = 'none'
+        type = d['xml'].getAttribute('type')
+        if type == 'filesystem':
+            pass
+        elif type == 'mapper_source':
+            mapper_type = d['xml'].getAttribute('mapper_type')
+            if mapper_type == MAPPER_SYS_TYPE:
+                pass
+            elif mapper_type == MAPPER_VG_TYPE:
+                color = '#a43737'
+            elif mapper_type == MAPPER_PT_TYPE:
+                pass
+            elif mapper_type == MAPPER_MDRAID_TYPE or mapper_type == MAPPER_ATARAID_TYPE:
+                pass
+            elif mapper_type == MAPPER_MULTIPATH_TYPE:
+                pass
+            elif mapper_type == MAPPER_CRYPTO_TYPE:
+                pass
+            elif mapper_type == MAPPER_iSCSI_TYPE:
+                pass
+        elif type == 'none':
+            pass
+        elif type == 'hidden':
+            pass
+        
+        d['color'] = color
+        d['icon'] = icon_name
     
     return data
 
--- conga/luci/storage/form-macros	2006/06/30 17:00:02	1.1
+++ conga/luci/storage/form-macros	2006/07/17 20:59:43	1.2
@@ -7,7 +7,91 @@
 
 <div metal:define-macro="forms-css">
    <style>
-      table.form td { padding: 0px;  }
+table.form td { padding: 0px;  }
+
+
+
+table {
+    border-spacing: 0px;
+}
+
+th {
+    font-weigt: bold;
+}
+
+th, td {
+    padding: 5px;
+}
+
+
+table.props-form-table {
+    width: 100%;
+    padding: 2px;
+}
+table.props-form-table tr,
+table.props-form-table td {
+    padding: 2px;
+}
+
+tr.props-form-header {
+    background-color: #fff;
+}
+tr.props-form-header th {
+    background-color: #dee7ec;
+    text-align: center;
+}
+tr.props-form-header th:first-child {
+    -moz-border-radius-topleft: 15px;
+}
+tr.props-form-header th:last-child {
+    -moz-border-radius-topright: 15px;
+}
+
+tr.props-form-body {
+    height: 100%;
+}
+tr.props-form-body td {
+    width: 50%;
+}
+tr.props-form-body td:first-child {
+    border-left: 1px solid #dee7ec;
+}
+tr.props-form-body td:last-child {
+    border-right: 1px solid #dee7ec;
+}
+
+tr.props-form-footer {
+    background-color: #fff;
+}
+tr.props-form-footer td {
+    background-color: #dee7ec;
+    padding: 3px;
+}
+tr.props-form-footer td:first-child {
+    -moz-border-radius-bottomleft: 15px;
+}
+tr.props-form-footer td:last-child {
+    -moz-border-radius-bottomright: 15px;
+}
+
+table.props-inner-table {
+    width: 100%;
+    height: 100%;
+}
+table.props-inner-table tr {
+
+}
+table.props-inner-table tr td:first-child {
+    border-left: 2px solid #fff;
+}
+table.props-inner-table tr td:last-child {
+    border-right: 2px solid #fff;
+}
+table.props-inner-table td {
+    width: auto;
+}
+
+
    </style>
 </div>
 
@@ -449,7 +533,7 @@
     
     
     <div tal:attributes="id properties_span_id"
-          style="width: 700px; height: 320px; overflow: auto; ">
+         style="width: 700px; min-height: 360px; ">
      <span id="warning_box"
            style="position:absolute; visibility: hidden; border: medium double red; color: red; background-color: white; text-align: center; width: 350px; ">
      </span>
@@ -531,68 +615,39 @@
     <input tal:attributes="type  string:hidden; 
                            name  string:storagename; 
                            value storagename"/>
-    <table class="form">
-     <caption>
-      <div align="left">
-       <h2>
-        New <span tal:replace="mapper/pretty_type"/>
-       </h2>
-      </div>
-     </caption>
-     <tr>
-      <th>
-       <div align="left">
-        
-       </div>
-      </th>
-      <th>
-       <div align="left">
-        <span tal:replace="mapper/pretty_type"/> Properties
-       </div>
+    <table class="props-form-table">
+     <tr class="props-form-header">
+      <th colspan="2"
+          tal:attributes="style python:here.add_commas('font-size: large', 'color: ' + mapper['color'])">
+       Creating New <span tal:replace="mapper/pretty_type"/>
       </th>
-      <th>
-       <div align="left">
-        <span tal:replace="mapper/pretty_sources_name"/>
-       </div>
-      <th>
      </tr>
-     <tr>
+     <tr class="props-form-body">
       <td>
-       <table>
-        <tr>
-         <td>
-          icon
-         </td>
-        </tr>
-        <tr>
-         <td>
-          <table>
-
-          </table>
-         </td>
-        </tr>
+       <table class="props-inner-table"
+              tal:define="props mapper/props">
+        <div metal:use-macro="here/form-macros/macros/display-props-tableless"/>
        </table>
       </td>
-      <td>
-       <span tal:omit-tag="" 
-             tal:define="props mapper/props">
-        <div metal:use-macro="here/form-macros/macros/display-props"/>
-       </span>
-      </td>
-      <td>
-       <table>
-        <caption tal:condition="python:mapper['min_sources'] == mapper['max_sources']">
-         Select <span tal:replace="mapper/min_sources"/> <span tal:replace="mapper/pretty_source_name"/>
-        </caption>
-        <caption tal:condition="python:mapper['min_sources'] != mapper['max_sources']">
-         Select <span tal:replace="mapper/min_sources"/> to <span tal:replace="mapper/max_sources"/> <span tal:replace="mapper/pretty_sources_name"/>
-        </caption>
-        <span tal:omit-tag=""
-              tal:define="bds mapper/new_sources"
-              tal:repeat="bd bds">
-         <tr>
-          <td>
-           <table>
+      <td style="height: 100%;">
+       <table class="props-form-table"
+              style="height: 100%;">
+        <tr class="props-form-header">
+         <th>
+          <span tal:condition="python:mapper['min_sources'] == mapper['max_sources']">
+           Select <span tal:replace="mapper/min_sources"/> <span tal:replace="mapper/pretty_source_name"/>
+          </span>
+          <span tal:condition="python:mapper['min_sources'] != mapper['max_sources']">
+           Select <span tal:replace="mapper/min_sources"/> to <span tal:replace="mapper/max_sources"/> <span tal:replace="mapper/pretty_sources_name"/>
+          </span>
+         </th>
+        </tr>
+        <tr class="props-form-body">
+         <td>
+          <table class="props-inner-table">
+           <span tal:omit-tag=""
+                 tal:define="bds mapper/new_sources"
+                 tal:repeat="bd bds">
             <tr>
              <td>
               <input tal:attributes="type string:checkbox; 
@@ -602,36 +657,48 @@
               <span tal:replace="bd/path"/> (<span tal:replace="bd/props/size/value"/> <span tal:replace="bd/props/size/units"/> - <span tal:replace="bd/pretty_type"/>)
              </td>
             </tr>
-           </table>
-          </td>
-         </tr>
-        </span>
+           </span>
+           <tr>
+            <td colspan="2"
+                style="height: 100%;">
+             &nbsp;
+            </td>
+           </tr>
+          </table>
+         </td>
+        </tr>
+        <tr class="props-form-footer">
+         <td>
+          &nbsp;
+         </td>
+        </tr>
        </table>
       </td>
      </tr>
-     <tr>
-      <td>
-       
-      </td>
-      <td>
-       
-      </td>
-      <td>
-       <div align="right">
-        <input type="button" 
-               name="action_type" 
-               value="Reset" 
-               onclick="return reset_form(this.form)"
-               class="form_button"/>
-        <input tal:define="prompt_msg    python:'Do you really want to create new ' + mapper['pretty_type'] + '?';
-                           validate_url  context/validate_html/absolute_url" 
-               tal:attributes="id      create_mapper_button_id; 
-                               type    string:button; 
-                               name    string:action_type; 
-                               value   string:Create; 
-                               onclick python:'return validate_and_submit_form(\'' + validate_url + '\', \'' + mapper_template_form_id + '\', \'' + create_mapper_button_id + '\', \'' + prompt_msg + '\')'"
-               class="form_button"/>
-       </div>
+     <tr class="props-form-footer">
+      <td colspan="2">
+       <table style="width: 100%;">
+        <tr>
+         <td align="left">
+          &nbsp;
+         </td>
+         <td align="right">
+          <input type="button" 
+                 name="action_type" 
+                 value="Reset" 
+                 onclick="return reset_form(this.form)"
+                 class="form_button"/>
+          <input tal:define="prompt_msg    python:'Do you really want to create new ' + mapper['pretty_type'] + '?';
+                             validate_url  context/validate_html/absolute_url" 
+                 tal:attributes="id      create_mapper_button_id; 
+                                 type    string:button; 
+                                 name    string:action_type; 
+                                 value   string:Create; 
+                                 onclick python:'return validate_and_submit_form(\'' + validate_url + '\', \'' + mapper_template_form_id + '\', \'' + create_mapper_button_id + '\', \'' + prompt_msg + '\')'"
+                 class="form_button"/>
+         </td>
+        </tr>
+       </table>
       </td>
      </tr>
     </table>
@@ -639,13 +706,91 @@
   </div>
 
 
-    
 
 
 
-    
 
 
+
+
+  <div tal:omit-tag="" metal:define-macro="display-props-tableless">
+   <span tal:omit-tag=""
+         tal:define="predefines_test python:'display-props: ' + str(props) + prefix + properties_span_id"/>
+   <span tal:omit-tag="" 
+          tal:repeat="p props">
+     <tr tal:define="prop python:props[p];
+                     prop_pr_name prop/pretty_name">
+      <td tal:content="prop_pr_name"/>
+      <td tal:define="prop_type prop/type;
+                      prop_units prop/units">
+       <table>
+        <tr>
+         <td>
+          <span tal:condition="python:prop_type == 'label'">
+           <span tal:omit-tag=""
+                 tal:condition="prop/replacements|nothing">
+            <input tal:attributes="type string:hidden;
+                                   name p;
+                                   value prop/value"/>
+            <select tal:define="repls prop/replacements;
+                                select_id python:prefix + '_select_replace_block_' + p"
+                    tal:attributes="id       select_id;
+                                    onfocus  python:'replace_properties_block__old_select_value = this.value';
+                                    onchange python:'replace_properties_block(\'' + properties_span_id + '\', \'' + select_id + '\')'">
+             <span tal:omit-tag="" 
+                   tal:repeat="repl_name repls/repl_names">
+              <option tal:attributes="value python:repls[repl_name]['path']"/><span tal:replace="repl_name"/>
+             </span>
+            </select>
+           </span>
+           <span tal:condition="not: prop/replacements|nothing"
+                 tal:replace="prop/value"/>
+          </span>
+
+
+
+          <input tal:condition="python:prop_type == 'text'"
+                 tal:attributes="name        p; 
+                                 type        string:text; 
+                                 value       prop/value;
+                                 onkeypress  python:'return validate_text_keypress(this, event, 2, \'' + prop['validation']['illegal_chars'] + '\', ' + str(prop['validation']['max_length']) + ')';
+                                 onblur      python:'validate_text(this, 2, \'' + prop['validation']['illegal_chars'] + '\', \'' + prop['validation']['reserved_words'] + '\', ' + str(prop['validation']['min_length']) + ', ' + str(prop['validation']['max_length']) + ')'"/>
+
+          <input tal:condition="python:prop_type == 'int'"
+                 tal:attributes="name   p; 
+                                 type   string:text; 
+                                 value  prop/value;
+                                 onblur python:'validate_int(this, 2, ' + str(prop['validation']['min']) + ', ' + str(prop['validation']['max']) + ', ' + str(prop['validation']['step']) + ')'"
+                 onkeypress="return validate_int_keypress(this, event, 2)"/>
+
+
+
+          <span tal:condition="python:prop_type == 'select'">
+           <select tal:define="prop_options prop/value"
+                   tal:attributes="name p">
+            <span tal:omit-tag="" 
+                  tal:repeat="prop_opt prop_options">
+             <option tal:attributes="value prop_opt"/><span tal:replace="prop_opt"/>
+            </span>
+           </select>
+          </span>
+         </td>
+         <td>
+          <span tal:replace="prop_units"/>
+         </td>
+        </tr>
+       </table>
+      </td>
+     </tr>
+   </span>
+   <tr>
+    <td colspan="2"
+        style="height: 100%;">
+     &nbsp;
+    </td>
+   </tr>
+  </div>
+
   <div tal:omit-tag="" metal:define-macro="display-props">
    <span tal:omit-tag=""
          tal:define="predefines_test python:'display-props: ' + str(props) + prefix + properties_span_id"/>
@@ -728,7 +873,9 @@
          tal:define="predefines_test python:'display-content: ' + str(cont) + properties_span_id"/>
    <span tal:omit-tag="" 
          tal:define="props cont/props">
-     <div metal:use-macro="here/form-macros/macros/display-props"/>
+    <table class="props-inner-table">
+     <div metal:use-macro="here/form-macros/macros/display-props-tableless"/>
+    </table>
    </span>
   </div>
 
@@ -768,7 +915,11 @@
    input                  { background-image: none; }
    input.validation_error { border: medium double red; background-color: orange; }
    input.selected         { border: thin solid orange; }
-   input.form_button      { background-color: #dee7ec; }
+   input.form_button      { background-color: #fff; 
+                            -moz-border-radius-topleft: 7px;
+                            -moz-border-radius-topright: 7px;
+                            -moz-border-radius-bottomleft: 7px;
+                            -moz-border-radius-bottomright: 7px; }
  </style>
  
  <script language="javascript" type="text/javascript">
@@ -1127,39 +1278,46 @@
      <input tal:attributes="type  string:hidden; 
                             name  string:storagename; 
                             value storagename"/>
-     <table class="form">
-      <caption>
-       <div align="left">
-        <h2>
+     <table class="props-form-table">
+      <tr class="props-form-header">
+       <th colspan="2"
+           tal:attributes="style python:here.add_commas('font-size: large', 'color: ' + bd_data['color'])">
+        <span tal:omit-tag=""
+              tal:condition="not: bd_data/new">
+         <span tal:replace="bd_data/pretty_type"/> '<span tal:replace="bd_data/pretty_name"/>' - <span tal:replace="bd_data/path"/>
+        </span>
+        <span tal:omit-tag=""
+              tal:condition="bd_data/new">
          <span tal:omit-tag=""
-               tal:condition="not: bd_data/new">
-          <span tal:replace="bd_data/pretty_type"/> '<span tal:replace="bd_data/pretty_name"/>' - <span tal:replace="bd_data/path"/>
+               tal:condition="bd_data/pretty_name">
+          <span tal:replace="bd_data/pretty_name"/>
+          -
          </span>
-         <span tal:condition="bd_data/new" 
-               tal:replace="bd_data/pretty_type"/>
-        </h2>
-       </div>
-      </caption>
-      <tr>
-       <th>
-        <div align="left">
-         
-        </div>
-       </th>
-       <th>
-        <div align="left">
-         <span tal:replace="bd_data/pretty_type"/> Properties 
-        </div>
+         Creating <span tal:replace="bd_data/pretty_type"/>
+        </span>
        </th>
-       <th>
-        <div align="left">
-        <table tal:condition="conts">
-         <tr>
-          <td>
+      </tr>
+      <tr class="props-form-body">
+       <td>
+        <span tal:omit-tag="" 
+              tal:define="props bd_data/props">
+         <table class="props-inner-table">
+          <div metal:use-macro="here/form-macros/macros/display-props-tableless"/>
+         </table>
+        </span>
+       </td>
+       <td style="height: 100%;">
+        <span tal:omit-tag=""
+              tal:condition="not: conts">
+         &nbsp;
+        </span>
+	<table class="props-form-table"
+               style="height: 100%;"
+               tal:condition="conts">
+         <tr class="props-form-header">
+          <th tal:attributes="style python:'color: ' + conts[0]['color']">
            Content<span tal:condition="python:len(conts) == 1"
                         tal:replace="string::"/>
-          </td>
-          <td>
            <select tal:define="funct python:'change_content(\'' + select_content_id + '\', \'' + content_span_id + '\')'"
                    tal:condition="python:len(conts) > 1" 
                    tal:attributes="id       select_content_id; 
@@ -1178,95 +1336,73 @@
                                    value cont/id"/>
             <span tal:replace="cont/name"/>
            </span>
-          </td>
+          </th>
          </tr>
-        </table>
-        </div>
-       </th>
-      </tr>
-      <tr>
-       <td>
-        <table>
-         <tr>
-          <td align="center">
-           <img tal:attributes="src bd_data/icon" 
-                style="width: 60px;"/>
+         <tr class="props-form-body">
+          <td>
+           <span tal:attributes="id content_span_id">
+            <span tal:define="cont python:conts[0]"
+                  tal:attributes="class string:visible;
+                                  id cont/id">
+             <div metal:use-macro="here/form-macros/macros/display-content"/>
+            </span>
+            <span tal:omit-tag=""
+                  tal:repeat="cont python:conts[1:]">
+             <span tal:attributes="class string:invisible;
+                                   id cont/id">
+              <div metal:use-macro="here/form-macros/macros/display-content"/>
+             </span>
+            </span>
+           </span>
           </td>
          </tr>
-         <tr>
-          <td align="center">
-           <table>
-            <span tal:omit-tag="" 
-                  tal:define="actions bd_data/actions" 
-                  tal:repeat="action actions">
-             <tr>
-              <td tal:define="act_name  action/name; 
-                              act_msg   action/msg; 
-                              act_link  action/link"
-                  align="center">
-               <span tal:condition="act_link">
-                <input tal:define="act_link    python:act_link + '&storagename=' + storagename; 
-                                   funct       python:'window.location.assign(\'' + act_link + '\')'"
-                       tal:attributes="type    string:button; 
-                                       name    string:action_type; 
-                                       value   act_name; 
-                                       onclick funct"
-                       class="form_button"/>
-               </span>
-               <span tal:condition="not: act_link">
-                <input tal:condition="act_msg" 
-                       tal:attributes="type    string:submit; 
-                                       name    string:action_type; 
-                                       value   act_name;
-                                       onclick python:'return confirm(\'' + act_msg + '\')'"
-                       class="form_button"/>
-                <input tal:condition="not: act_msg" 
-                       tal:attributes="type   string:submit; 
-                                       name   string:action_type; 
-                                       value  act_name"
-                       class="form_button"/>
-               </span>
-              </td>
-             </tr>
-            </span>
-           </table>
+         <tr class="props-form-footer">
+          <td>
+           &nbsp;
           </td>
          </tr>
         </table>
        </td>
-       <td>
-        <span tal:omit-tag="" 
-              tal:define="props bd_data/props">
-         <div metal:use-macro="here/form-macros/macros/display-props"/>
-        </span>
-       </td>
-       <td tal:condition="conts">
-        <span tal:attributes="id content_span_id">
-         <span tal:define="cont python:conts[0]"
-               tal:attributes="class string:visible;
-                               id cont/id">
-          <div metal:use-macro="here/form-macros/macros/display-content"/>
-         </span>
-         <span tal:omit-tag=""
-               tal:repeat="cont python:conts[1:]">
-          <span tal:attributes="class string:invisible;
-                                id cont/id">
-           <div metal:use-macro="here/form-macros/macros/display-content"/>
+      </tr>
+      <tr class="props-form-footer">
+       <td colspan="2">
+        <table style="width: 100%;">
+        <tr>
+        <td align="left"
+             tal:define="actions bd_data/actions">
+         <span tal:omit-tag="" 
+               tal:repeat="action actions">
+          <span tal:omit-tag=""
+                tal:define="act_name  action/name; 
+                            act_msg   action/msg; 
+                            act_link  action/link">
+           <span tal:condition="act_link">
+            <input tal:define="act_link    python:act_link + '&storagename=' + storagename; 
+                               funct       python:'window.location.assign(\'' + act_link + '\')'"
+                   tal:attributes="type    string:button; 
+                                   name    string:action_type; 
+                                   value   act_name; 
+                                   onclick funct"
+                   class="form_button"/>
+           </span>
+           <span tal:condition="not: act_link">
+            <input tal:condition="act_msg" 
+                   tal:attributes="type    string:submit; 
+                                   name    string:action_type; 
+                                   value   act_name;
+                                   onclick python:'return confirm(\'' + act_msg + '\')'"
+                   class="form_button"/>
+            <input tal:condition="not: act_msg" 
+                   tal:attributes="type   string:submit; 
+                                   name   string:action_type; 
+                                   value  act_name"
+                   class="form_button"/>
+           </span>
           </span>
          </span>
-        </span>
-       </td>
-      </tr>
-      <tr>
-       <td>
-        
-       </td>
-       <td>
-        
-       </td>
-       <td>
-        <div align="right"
-             tal:define="validate_url  context/validate_html/absolute_url">
+        </td>
+        <td align="right"
+            tal:define="validate_url  context/validate_html/absolute_url">
          <input tal:attributes="type    string:button; 
                                 name    string:action_type; 
                                 value   string:Reset; 
@@ -1288,7 +1424,9 @@
                                 value   string:Apply; 
                                 onclick python:'return validate_and_submit_form(\'' + validate_url + '\', \'' + bd_form_id + '\', \'' + apply_button_id + '\', \'' + prompt_msg + '\')'"
                 class="form_button"/>
-        </div>
+        </td>
+        </tr>
+        </table>
        </td>
       </tr>
      </table>
@@ -1299,6 +1437,7 @@
 
 
 
+
   <div metal:define-macro="display-mapper">
    <div metal:use-macro="here/form-macros/macros/forms-css"/>
    <span tal:omit-tag=""
@@ -1324,104 +1463,79 @@
     <input tal:attributes="type  string:hidden; 
                            name  string:storagename; 
                            value storagename"/>
-    <table class="form">
-     <caption>
-      <div align="left">
-       <h2>
-        <span tal:replace="mapper/pretty_type"/> '<span tal:replace="mapper/pretty_name"/>'
-       </h2>
-      </div>
-     </caption>
-     <tr>
-      <th>
-       <div align="left">
-        
-       </div>
+    <table class="props-form-table">
+     <tr class="props-form-header">
+      <th colspan="2"
+          tal:attributes="style python:here.add_commas('font-size: large', 'color: ' + mapper['color'])">
+       <span tal:replace="mapper/pretty_type"/> '<span tal:replace="mapper/pretty_name"/>'
       </th>
-      <th>
-       <div align="left">
-        <span tal:replace="mapper/pretty_type"/> Properties
-       </div>
-      <th>
      </tr>
-     <tr>
+     <tr class="props-form-body">
       <td>
-       <table>
-        <tr>
-         <td align="center">
-          <img tal:attributes="src mapper/icon" 
-               style="width: 60px;"/>
-         </td>
-        </tr>
+       <table class="props-inner-table"
+              tal:define="props mapper/props">
+        <div metal:use-macro="here/form-macros/macros/display-props-tableless"/>
+       </table>
+      </td>
+      <td style="height: 100%;">
+       &nbsp;
+      </td>
+     </tr>
+     <tr class="props-form-footer">
+      <td colspan="2">
+       <table style="width: 100%;">
         <tr>
-         <td align="center">
-          <table>
-           <span tal:omit-tag="" 
-                 tal:define="actions mapper/actions" 
-                 tal:repeat="action actions">
-            <tr>
-             <td tal:define="act_name  action/name; 
+         <td align="left">
+          <span tal:omit-tag="" 
+                tal:define="actions mapper/actions" 
+                tal:repeat="action actions">
+           <span tal:define="act_name  action/name; 
                              act_msg   action/msg; 
                              act_link  action/link"
                  align="center">
-              <span tal:condition="act_link">
-               <input tal:define="act_link    python:act_link + '&storagename=' + storagename; 
-                                  funct       python:'window.location.assign(\'' + act_link + '\')'"
-                      tal:attributes="type    string:button; 
-                                      name    string:action_type; 
-                                      value   act_name; 
-                                      onclick funct"
-                      class="form_button"/>
-              </span>
-              <span tal:condition="not: act_link">
-               <input tal:condition="act_msg" 
-                      tal:attributes="type    string:submit; 
-                                      name    string:action_type; 
-                                      value   act_name; 
-                                      onclick python:'return confirm(\'' + act_msg + '\')'"
-                      class="form_button"/>
-               <input tal:condition="not: act_msg" 
-                      tal:attributes="type   string:submit; 
-                                      name   string:action_type; 
-                                      value  act_name"
-                      class="form_button"/>
-              </span>
-             </td>
-            </tr>
+            <span tal:condition="act_link">
+             <input tal:define="act_link    python:act_link + '&storagename=' + storagename; 
+                                funct       python:'window.location.assign(\'' + act_link + '\')'"
+                    tal:attributes="type    string:button; 
+                                    name    string:action_type; 
+                                    value   act_name; 
+                                    onclick funct"
+                    class="form_button"/>
+            </span>
+            <span tal:condition="not: act_link">
+             <input tal:condition="act_msg" 
+                    tal:attributes="type    string:submit; 
+                                    name    string:action_type; 
+                                    value   act_name; 
+                                    onclick python:'return confirm(\'' + act_msg + '\')'"
+                    class="form_button"/>
+             <input tal:condition="not: act_msg" 
+                    tal:attributes="type   string:submit; 
+                                    name   string:action_type; 
+                                    value  act_name"
+                    class="form_button"/>
+            </span>
            </span>
-          </table>
+          </span>
+         </td>
+         <td align="right">
+          <input type="button"
+                 name="action_type"
+                 value="Reset"
+                 onclick="return reset_form(this.form)"
+                 class="form_button"/>
+          <input tal:define="prompt_msg    python:'Do you really want to apply changes to ' + mapper['pretty_type'] + ' \\\'' + mapper['pretty_name'] + '\\\'?';
+                             validate_url  context/validate_html/absolute_url" 
+                 tal:attributes="id      apply_button_id; 
+                                 type    string:button; 
+                                 name    string:action_type; 
+                                 value   string:Apply; 
+                                 onclick python:'return validate_and_submit_form(\'' + validate_url + '\', \'' + mapper_form_id + '\', \'' + apply_button_id + '\', \'' + prompt_msg + '\')'"
+                 class="form_button"/>
          </td>
         </tr>
        </table>
       </td>
-      <td>
-       <span tal:omit-tag="" 
-             tal:define="props mapper/props">
-        <div metal:use-macro="here/form-macros/macros/display-props"/>
-       </span>
-      </td>
-     </tr>
-     <tr>
-      <td>
-       
-      </td>
-      <td>
-       <div align="right">
-        <input type="button"
-               name="action_type"
-               value="Reset"
-               onclick="return reset_form(this.form)"
-               class="form_button"/>
-        <input tal:define="prompt_msg    python:'Do you really want to apply changes to ' + mapper['pretty_type'] + ' \\\'' + mapper['pretty_name'] + '\\\'?';
-                           validate_url  context/validate_html/absolute_url" 
-               tal:attributes="id      apply_button_id; 
-                               type    string:button; 
-                               name    string:action_type; 
-                               value   string:Apply; 
-                               onclick python:'return validate_and_submit_form(\'' + validate_url + '\', \'' + mapper_form_id + '\', \'' + apply_button_id + '\', \'' + prompt_msg + '\')'"
-               class="form_button"/>
-       </div>
-      </td>
      </tr>
     </table>
    </form>