From 3e04cfe831d96ab1d8dbabb15b88bd9ce11fcb00 Mon Sep 17 00:00:00 2001
From: Ivan Tyagov <ivan@nexedi.com>
Date: Wed, 8 Sep 2010 13:09:56 +0000
Subject: [PATCH] Use universal listbox renderer and adjust it through CSS.

git-svn-id: https://svn.erp5.org/repos/public/erp5/trunk@38199 20353a03-c40f-0410-a6d1-a30d3c3de9de
---
 .../km_css => erp5_km/old}/listbox.css.xml    |   0
 .../erp5_km_theme/ListBox_asHTML.xml          | 587 ------------------
 .../erp5_km_theme/km_css/km_listbox.css.xml   | 285 +++++++++
 .../template_erp5_km_minimal.xml              |   8 +-
 4 files changed, 288 insertions(+), 592 deletions(-)
 rename bt5/erp5_km/SkinTemplateItem/portal_skins/{erp5_km_theme/km_css => erp5_km/old}/listbox.css.xml (100%)
 delete mode 100644 bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/ListBox_asHTML.xml
 create mode 100644 bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/km_css/km_listbox.css.xml

diff --git a/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/km_css/listbox.css.xml b/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km/old/listbox.css.xml
similarity index 100%
rename from bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/km_css/listbox.css.xml
rename to bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km/old/listbox.css.xml
diff --git a/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/ListBox_asHTML.xml b/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/ListBox_asHTML.xml
deleted file mode 100644
index e0856e3590..0000000000
--- a/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/ListBox_asHTML.xml
+++ /dev/null
@@ -1,587 +0,0 @@
-<?xml version="1.0"?>
-<ZopeData>
-  <record id="1" aka="AAAAAAAAAAE=">
-    <pickle>
-      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>_bind_names</string> </key>
-            <value>
-              <object>
-                <klass>
-                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
-                </klass>
-                <tuple/>
-                <state>
-                  <dictionary>
-                    <item>
-                        <key> <string>_asgns</string> </key>
-                        <value>
-                          <dictionary>
-                            <item>
-                                <key> <string>name_subpath</string> </key>
-                                <value> <string>traverse_subpath</string> </value>
-                            </item>
-                          </dictionary>
-                        </value>
-                    </item>
-                  </dictionary>
-                </state>
-              </object>
-            </value>
-        </item>
-        <item>
-            <key> <string>_text</string> </key>
-            <value> <string encoding="cdata"><![CDATA[
-
-<tal:block\n
-  xmlns:tal="http://xml.zope.org/namespaces/tal"\n
-  xmlns:metal="http://xml.zope.org/namespaces/metal"\n
-  xmlns:i18n="http://xml.zope.org/namespaces/i18n"\n
-  tal:define="field_id here/getId;\n
-              form_id python: here.getForm().id;\n
-              selection_name here/getSelectionName;\n
-              selection here/getSelection;\n
-              real_context here/getContext;\n
-              portal_url_string here/getPortalUrlString;\n
-              context_url real_context/absolute_url;\n
-              md5_string here/getMD5Checksum;\n
-              hide_rows_on_no_search_criterion here/isHideRowsOnNoSearchCriterion;\n
-              is_domain_tree_mode here/isDomainTreeMode;\n
-              is_report_tree_mode here/isReportTreeMode;\n
-              is_domain_tree_supported here/isDomainTreeSupported;\n
-              is_report_tree_supported here/isReportTreeSupported;\n
-              is_gadget_mode request/is_gadget_mode | nothing;\n
-              show_select_column here/showSelectColumn;\n
-              show_anchor_column here/showAnchorColumn;\n
-              show_search_line here/showSearchLine;\n
-              is_web_mode request/is_web_mode | nothing;\n
-              is_dialog_mode request/dialog_mode | nothing;\n
-              display_style_list here/getDisplayStyleList;\n
-              list_style here/getListboxDisplayStyle;\n
-              full_text_search_key here/getFullTextSearchKey;\n
-              full_text_search_key_script here/getFullTextSearchKeyScript;\n
-              show_full_text python: full_text_search_key not in (\'\', None) and full_text_search_key_script not in (\'\', None);\n
-              line_list here/query;\n
-              listbox_max_lines  python: int(here.getMaxLineNumber());\n
-              total_line         python: int(here.total_size);\n
-              current_page       python: int(here.current_page) + 1;\n
-              current_page_max   python: listbox_max_lines * current_page;\n
-              current_page_start python: (listbox_max_lines * (current_page - 1)) + 1;\n
-              current_page_stop  python: (total_line < current_page_max) and total_line or current_page_max;\n
-              form_url string:${context_url}/${form_id};\n
-              need_pagination python: total_line > listbox_max_lines;">\n
- \n
-  <!-- Define hidden input.  -->\n
-  <input type="hidden" \n
-         name="list_selection_name" \n
-         value="default" \n
-         tal:attributes="value selection_name" />\n
-  <input type="hidden" \n
-         name="list_selection_name" \n
-         value="default"\n
-         tal:attributes="value selection_name;\n
-                         name string:${field_id}_list_selection_name" />\n
-  <input tal:condition="md5_string" \n
-         type="hidden" \n
-         name="md5_object_uid_list" \n
-         value="checksum" \n
-         tal:attributes="value md5_string" />\n
-  <input tal:condition="form_id" \n
-         type="hidden" \n
-         name="form_id" \n
-         tal:attributes="value form_id" \n
-         tal:replace="nothing"/>\n
-\n
-  <tal:block tal:condition="is_gadget_mode">\n
-    <tal:block tal:define="global box_relative_url python: request.get(\'box_relative_url\', \'\');\n
-                           global box python: real_context.restrictedTraverse(box_relative_url); \n
-                           global box_id python: \'visual_%s\' %box_relative_url.split(\'/\')[-1];\n
-                           global dom_id python: request.get(\'dom_id\',None) or box_id;">\n
-      <input tal:condition="python:form_id" \n
-             type="hidden" \n
-             name="gadget_form_id"\n
-             tal:attributes="value form_id" />\n
-    </tal:block>\n
-  </tal:block>\n
-\n
-<div class="listbox-container">\n
-\n
-  <div class="listbox-tree">\n
-\n
-    <!-- Domain Report Tree mode -->\n
-    <div class="listbox-domain-tree-container" \n
-         tal:condition="is_domain_tree_mode">\n
-      <tal:block tal:define="selected_domain_path here/getSelectedDomainPath">\n
-\n
-        <!-- Select domain node -->\n
-        <select name="domain_root_url"\n
-                tal:attributes="onChange string:submitAction(this.form, \'${context_url}/setDomainRoot\')">\n
-          <tal:block tal:repeat="c here/getDomainRootList">\n
-            <option value="base_domain"\n
-                    tal:define="path python: c[0]; title python: c[1]"\n
-                    tal:attributes="selected python: path == selected_domain_path; value path"\n
-                    tal:content="title"\n
-                    i18n:translate="" i18n:domain="ui"/>\n
-          </tal:block>\n
-        </select>\n
-\n
-        <!-- Domain node contents -->\n
-        <table id="listbox-table-domain-tree" \n
-               cellpadding="0"\n
-               summary="This table contains the domain tree"\n
-               class="listbox-table-domain-tree"\n
-               tal:attributes="id string:${field_id}-table-domain-tree"\n
-               tal:define="report_tree_list python: here.makeReportTreeList(report_path = selected_domain_path, unfolded_list = selection.getDomainList(), is_report_opened = False, sort_on=((\'int_index\', \'ASC\'),));\n
-                           total_depth python: max([report_tree.depth for report_tree in report_tree_list] + [-1])">\n
-          <tr tal:repeat="report_tree report_tree_list">\n
-            <tal:block tal:repeat="i python: range(report_tree.depth)">\n
-              <td width="12" nowrap="nowrap">&nbsp;</td>\n
-            </tal:block>\n
-            <td colspan="1" \n
-                class="listbox-table-domain-tree-cell"\n
-                tal:attributes="colspan python: total_depth - report_tree.depth + 1">\n
-              <a href="method" class="tree-open selected"\n
-                 tal:condition="report_tree/is_open"\n
-                 tal:attributes="href string:foldDomain?domain_url=${report_tree/domain_url}&form_id=${form_id}&list_selection_name=${selection_name}&domain_depth:int=${report_tree/depth}"\n
-                 tal:content="report_tree/obj/getCompactTranslatedTitle"/>\n
-              <a href="method" class="tree-closed"\n
-                 tal:condition="not: report_tree/is_open"\n
-                 tal:attributes="href string:unfoldDomain?domain_url=${report_tree/domain_url}&form_id=${form_id}&list_selection_name=${selection_name}&domain_depth:int=${report_tree/depth}"\n
-                 tal:content="report_tree/obj/getCompactTranslatedTitle"/>\n
-            </td>\n
-          </tr>\n
-        </table>\n
-      </tal:block>\n
-    </div>\n
-  </div>\n
-\n
-  <div class="listbox-content">\n
-\n
-    <div class="listbox-head">\n
-      <div class="listbox-head-title"\n
-           tal:define="show_list_action_link python: here.field.get_value(\'list_action\')">\n
-\n
-        <a tal:condition="show_list_action_link"\n
-           tal:attributes="class string:${field_id}_title; \n
-                           href here/getListActionUrl">\n
-           <span i18n:translate="" \n
-                 i18n:domain="ui" tal:content="here/getTitle" />\n
-        </a>\n
-        <tal:block tal:condition="not: show_list_action_link">\n
-          <span i18n:translate="" \n
-                i18n:domain="ui" tal:content="here/getTitle" />\n
-        </tal:block>\n
-      </div>\n
-\n
-      <!--Show search result -->\n
-      <div tal:condition="python: total_line > 0" \n
-           class="listbox-head-results">\n
-        <span tal:content="structure python: real_context.Base_translateString(\' <em>${start} - ${stop}</em> of <em>${total}</em> records\', mapping=dict(start=current_page_start, stop=current_page_stop, total=total_line))"/>\n
-\n
-        <span id="listbox_item_number" class="listbox_item_number"\n
-                    tal:attributes="id string:${field_id}_item_number"\n
-                    tal:condition="show_select_column"\n
-                    i18n:translate="" i18n:domain="ui"> - <tal:block tal:replace="python: len(here.getCheckedUidList())" i18n:name="number">0</tal:block> items selected</span>\n
-\n
-      </div>\n
-    </div>\n
-\n
-    <div class="listbox-body">\n
-      <table class="listbox">      \n
-        <thead>\n
-          <!--Column title -->\n
-          <tr class="listbox-label-line">  \n
-\n
-            <!--Report tree-->\n
-            <th tal:condition="is_report_tree_mode"\n
-                class="listbox-table-report-tree-selection-cell">\n
-              <select name="report_root_url"\n
-                      tal:attributes="onChange string:submitAction(this.form, \'${context_url}/setReportRoot\')">\n
-                <tal:block tal:repeat="c here/getReportRootList">\n
-                  <option value="base_domain"\n
-                          tal:define="path python: c[0]; title python: c[1]"\n
-                          tal:attributes="selected python: path == here.getSelectedReportPath(); value path"\n
-                          tal:content="title" i18n:domain="ui" i18n:translate="">Domain</option>\n
-                </tal:block>\n
-              </select>\n
-            </th>\n
-\n
-            <!-- Anchor cell -->\n
-            <th class="listbox-table-anchor-cell" tal:condition="show_anchor_column">&nbsp;</th>\n
-\n
-            <!-- Select cell -->\n
-            <th tal:condition="python: show_select_column"\n
-                class="listbox-table-select-cell">\n
-           \n
-              <input id="listbox-check-all"\n
-                     class="listbox-selection-action listbox-check-all"\n
-                     type="image"\n
-                     name="checkAll:method" value="1"\n
-                     alt="Check All" title="Check All"\n
-                     tal:attributes="id string:${field_id}-check-all;\n
-                                     name string:${field_id}_checkAll:method;\n
-                                     src string:${portal_url_string}/images/checkall.png"\n
-                     i18n:domain="ui" i18n:attributes="title" />\n
-              &nbsp;\n
-              <input id="listbox-uncheck-all"\n
-                     class="listbox-selection-action listbox-uncheck-all"\n
-                     type="image" \n
-                     name="uncheckAll:method" value="1"\n
-                     alt="Uncheck All" title="Uncheck All"\n
-                     tal:attributes="id string:${field_id}-uncheck-all;\n
-                                     src string:${portal_url_string}/images/decheckall.png;\n
-                                     name string:${field_id}_uncheckAll:method;"\n
-                     i18n:domain="ui" i18n:attributes="title" />         \n
-                  \n
-              </th>\n
-\n
-              <!-- Label column row -->\n
-              <tal:block tal:repeat="value here/getLabelValueList">\n
-                <tal:block tal:define="sql        python: value[0];\n
-                                       title      python: value[1];\n
-                                       sort_order python: value[2]">\n
-\n
-                  <th tal:condition="sql" class="listbox-table-header-cell"\n
-                      tal:define="bt_class python:  sort_order==\'ascending\' and \'sort-button sort-button-asc\' \n
-                                  or sort_order == \'descending\' and \'sort-button sort-button-desc\' \n
-                                  or \'sort-button\'">                 \n
-                    <!-- Button in normal view -->\n
-                    <button tal:condition="not:is_gadget_mode" \n
-                            type="submit"\n
-                            name="setSelectionQuickSortOrder:method"\n
-                            tal:content="title"\n
-                            tal:attributes="title string:${title}; \n
-                                            value string:${field_id}.${sql};\n
-                                            class bt_class;"\n
-                            i18n:domain="ui" i18n:attributes="title" />\n
-\n
-                    <!-- Button in gadget mode -->\n
-                    <button tal:condition="is_gadget_mode" \n
-                            tal:define ="params python: {\'setSelectionQuickSortOrder:method\':field_id+\'.\'+sql};"\n
-                            type="button"  \n
-                            tal:content="title"\n
-                            tal:attributes="title string:${title}; \n
-                                            onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id,box,dom_id,params);\n
-                                            class bt_class;"\n
-                            i18n:domain="ui" i18n:attributes="title"/>\n
-                  </th>\n
-\n
-                  <th class="listbox-table-header-cell"\n
-                      tal:condition="not: sql" \n
-                      tal:content="title" \n
-                      i18n:domain="ui" i18n:translate=""/>\n
-\n
-                </tal:block>\n
-              </tal:block>\n
-            </tr>\n
-\n
-            <!--Search column input -->\n
-            <tr tal:condition="python: show_search_line or is_report_tree_mode"\n
-                class="listbox-search-line">\n
-\n
-            <!--Report Tree -->\n
-            <tal:block tal:condition="is_report_tree_mode">\n
-              <th class="listbox-table-report-tree-selection-cell"\n
-                  colspan="1"\n
-                  tal:attributes="colspan python: show_search_line and 1 or (len(here.getSelectedColumnList()) + show_select_column + show_anchor_column + 1)"\n
-                  tal:define="selection_index here/getSelectionIndex;\n
-                              index python: selection_index is not None and \'&amp;selection_index=%s\' % selection_index or \'\';\n
-                              is_report_opened python: int(not here.getSelection().isReportOpened());\n
-                              requested_selection_name here/getRequestedSelectionName;\n
-                              url here/getUrl;\n
-                              report_depth python: selection.getParams().get(\'report_depth\', request.get(\'report_depth\', 0))">\n
-                <tal:block tal:repeat="i python: range(0, 6)">&nbsp;\n
-                  <a href="?selection_name=default&amp;selection_index=0&amp;report_depth:int=0"\n
-                     tal:attributes="href string:${url}?selection_name=${requested_selection_name}${index}&amp;report_depth:int=${i};\n
-                                     class python: test(i==report_depth, \'selected\', \'\');"\n
-                     tal:content="i"/>\n
-                </tal:block>&nbsp;-&nbsp;\n
-                <a \n
-                  href="?selection_name=default&amp;selection_index=0&amp;is_report_opened:int=0"\n
-                  tal:attributes="href string:${url}?selection_name=${requested_selection_name}${index}&amp;is_report_opened:int=${is_report_opened}"\n
-                  tal:content="python: is_report_opened and \'Show\' or \'Hide\'"\n
-                  i18n:domain="ui" i18n:translate="">Show</a>\n
-              </th>\n
-            </tal:block>\n
-\n
-            <!--Anchor cell -->\n
-            <th class="listbox-table-anchor-cell" tal:condition="show_anchor_column">&nbsp;</th>\n
-\n
-            <!--Select cell -->\n
-            <th tal:condition="show_select_column"\n
-                class="listbox-table-select-cell">\n
-              <input id="listbox_select" type="image"\n
-                    title="Action" alt="Action" name="Base_doSelect:method"\n
-                    tal:attributes="id string:${field_id}_select;\n
-                                    src string:${portal_url_string}/images/exec16.png"\n
-                    i18n:domain="ui" i18n:attributes="title" />\n
-            </th>\n
-\n
-            <!-- Real search columns headers -->\n
-            <th class="listbox-table-filter-cell"\n
-                tal:repeat="value here/getSearchValueList">\n
-              <tal:block tal:define="alias        python: value[0];\n
-                                     param        python: value[1];\n
-                                     search_field python: value[2]"\n
-                         tal:condition="alias">\n
-                <!-- Render search field -->\n
-                <tal:block tal:condition="python: search_field is not None"\n
-                           tal:replace="structure python: search_field.render(value=param, key=alias)"/>\n
-\n
-                <tal:block tal:condition="python: search_field is None">\n
-                  <input tal:condition="python: not is_gadget_mode" \n
-                         name="id" size="5" value=""\n
-                         type="text" tal:attributes="name alias; value param"/>\n
-                  <!-- Search for gadget mode -->\n
-                  <input tal:condition="python: is_gadget_mode" \n
-                         tal:define ="params python: {alias:\'this.value\'};"\n
-                         size="8"\n
-                         type="text" \n
-                         tal:attributes=\'value python: selection.getParams().get(alias,"");\n
-                                         onkeypress python:"if(event.keyCode==13){" + real_context.KnowledgePad_generateAjaxCall(context_url+"/"+form_id,box,dom_id,params).replace("\\"this.value\\"","this.value")+ "return false;;}"\'/>\n
-                </tal:block>\n
-              </tal:block>\n
-            </th>\n
-          </tr>\n
-        </thead>\n
-\n
-        <tbody>\n
-\n
-          <!-- Render listbox data-->\n
-          <tal:block tal:condition="line_list"\n
-                     tal:define="checked_uid_set here/getCheckedUidSet">\n
-            <tr tal:repeat="line line_list"  \n
-                tal:attributes="                \n
-                  class python: line.getRowCSSClassName() or \'%s %s\' %(\'%s-data-line-%s\' %(field_id, repeat[\'line\'].index) ,test(repeat[\'line\'].index % 2, \'DataB\', \'DataA\'));">\n
-              \n
-              <tal:block tal:define="render_result line/render">\n
-\n
-                  <!--Report tree column -->\n
-                  <td tal:condition="is_report_tree_mode"\n
-                      class="listbox-table-report-tree-selection-cell"                   \n
-                      tal:define="section_name python: line.getDomainTitle()">\n
-                    <a  tal:condition="section_name"\n
-                        tal:define="method_id python: line.isOpen() and \'foldReport\' or \'unfoldReport\'"\n
-                        tal:attributes="href string:${method_id}?report_url=${line/getDomainUrl}&amp;form_id=${form_id}&amp;list_selection_name=${selection_name};\n
-                                        class python:test(line.isOpen(), \'tree-open\', \'tree-closed\');\n
-                                        style python:\'white-space: nowrap;; margin-left: %spx\' % (line.getDepth() * 15)"\n
-                        tal:content="section_name"/>\n
-                  </td>\n
-\n
-                  <!--Anchor cell -->\n
-                  <td tal:condition="show_anchor_column"\n
-                      class="listbox-table-anchor-cell">\n
-                    <!--Use [0][4] ? :(-->\n
-                    <a href="#" tal:attributes="href python:render_result[0][4]">\n
-                      <img src="document_icon.gif" alt="document" \n
-                           tal:attributes="src string:${portal_url_string}/images/line_clickable.png" />\n
-                    </a>\n
-                  </td>\n
-                              \n
-                  <!--Select cell -->\n
-                  <td tal:condition="show_select_column"\n
-                      class="listbox-table-select-cell">\n
-                    <input tal:condition="python: not line.isSummary()"\n
-                          type="checkbox" id="listbox_cb_1" name="uids:list"\n
-                          tal:attributes="checked python: line.getUid() in checked_uid_set;\n
-                                          value line/getUid;\n
-                                          id string:${field_id}_cb_${line/getUid}" />         \n
-                  </td>\n
-\n
-                  <!-- Data cells -->\n
-                  <tal:block tal:repeat="value render_result">\n
-                    <td class="listbox-table-data-cell"\n
-                        tal:define="html  python: value[0];">\n
-                      <input tal:condition="not: repeat/value/index"\n
-                             type="hidden" value="1" name="listbox_uid:list"\n
-                             tal:attributes="value python: line.getUid() or \'\';\n
-                                             name string:${field_id}_uid:list" />\n
-                      <tal:block tal:replace="structure html"/>\n
-                    </td>\n
-                  </tal:block>\n
-              </tal:block>\n
-            </tr>\n
-            </tal:block>\n
-\n
-            <!-- Hide row on no search criterion-->\n
-            <tr tal:condition="hide_rows_on_no_search_criterion"\n
-                class="listbox_missing_search_criterion">\n
-              <td tal:attributes="colspan python: len(here.getSearchValueList()) + 1">\n
-                <span i18n:translate="" i18n:domain="ui">\n
-                  To display actual content, please fill in one or more search criterion.\n
-                </span>\n
-              </td>\n
-            </tr>\n
-            \n
-            <!-- No results. -->\n
-            <tr tal:condition="python: total_line == 0 and not hide_rows_on_no_search_criterion">\n
-              <td tal:attributes="colspan python: len(here.getSearchValueList()) + 1">\n
-                <span class="listbox_no_result" i18n:translate="" i18n:domain="ui">\n
-                  No result.\n
-                </span>\n
-              </td>\n
-            </tr>\n
-          </tbody>\n
-\n
-          <tfoot>\n
-            <!-- Stats -->\n
-            <tr tal:condition="python:here.showStat() and not hide_rows_on_no_search_criterion" \n
-              id="listbox_stat_line" class="listbox_stat_line"\n
-              tal:attributes="id string:${field_id}_stat_line">\n
-              <td tal:condition="is_report_tree_mode" >&nbsp;</td>\n
-              <td class="listbox-table-anchor-cell" tal:condition="show_anchor_column">&nbsp;</td>\n
-              <td class="listbox-table-select-cell" tal:condition="show_select_column">&nbsp;</td>\n
-              <tal:block tal:repeat="value here/getStatValueList">\n
-                <td align="left"\n
-                  tal:define="original_value python: value[0]; processed_value python: value[1]"\n
-                  tal:attributes="align python: isinstance(original_value, (float, int, long)) and \'right\' or \'left\'"\n
-                  tal:content="structure processed_value" />\n
-              </tal:block>\n
-            </tr>\n
-          </tfoot>\n
-\n
-      </table>\n
-    </div>\n
-\n
-    <div class="listbox-footer">\n
-      \n
-      <!-- List mode choice -->\n
-      <div class="listbox-footer-box listbox-tree-mode-selection"\n
-           tal:condition="python: not is_gadget_mode and (is_domain_tree_supported or is_report_tree_supported)">\n
-        <!-- Flat List -->\n
-        <input tal:condition="python: is_domain_tree_supported or is_report_tree_supported"\n
-               type="image" \n
-               class="listbox-tree-flat-list-mode"\n
-               title="Flat List" \n
-               name="setFlatListMode:method"\n
-               value="1" \n
-               alt="Flat List"\n
-               tal:attributes="src string:${portal_url_string}/images/text_block.png;"\n
-               i18n:domain="ui" i18n:attributes="title; alt" />\n
-\n
-        <!-- Report Tree -->\n
-        <input tal:condition="python: not is_gadget_mode and is_report_tree_supported"\n
-               type="image" \n
-               class="listbox-tree-report-tree-mode"\n
-               title="Report Tree" \n
-               name="setReportTreeMode:method"\n
-               value="1" \n
-               alt="Report Tree"\n
-               tal:attributes="src string:${portal_url_string}/images/view_tree.png;"\n
-               i18n:domain="ui" i18n:attributes="title; alt" />\n
-\n
-        <!-- Domain Tree -->\n
-        <input tal:condition="python: not is_gadget_mode and is_domain_tree_supported"\n
-               type="image" \n
-               class="listbox-tree-domain-tree-mode"\n
-               title="Domain Tree" \n
-               name="setDomainTreeMode:method"\n
-               value="1" \n
-               alt="Domain Tree"\n
-               tal:attributes="src string:${portal_url_string}/images/view_choose.png;"\n
-               i18n:domain="ui" i18n:attributes="title; alt" />\n
-      </div>\n
- \n
-      <!-- List display mode -->\n
-      <div class="listbox-footer-box listbox-list-style-selection"\n
-           tal:condition="python: len(display_style_list) > 0">\n
-\n
-        <span i18n:translate="" i18n:domain="ui">Display:</span>\n
-\n
-        <ul>\n
-          <li tal:repeat="style display_style_list">\n
-            <a tal:condition="is_gadget_mode"\n
-               tal:content="python: style[1]"\n
-               tal:define="params python: {\'list_style\':style[0]}"\n
-               tal:attributes="class python: test(style[0]==list_style, \'selected\',\'\');\n
-                               onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id, box, dom_id, params);"\n
-               i18n:translate="" i18n:domain="ui"/>\n
-\n
-            <a tal:condition="not: is_gadget_mode"\n
-               tal:content="python: style[1]"\n
-               tal:attributes="href python: \'%s?list_style=%s\' % (form_url, style[0]);\n
-                               class python: test(style[0]==list_style, \'selected\',\'\');"\n
-               i18n:translate="" i18n:domain="ui"/>\n
-          </li>\n
-        </ul>\n
-\n
-      </div>\n
-\n
-      <!-- Full text search -->\n
-      <div class="listbox-footer-box listbox-full-text-search"\n
-           tal:condition="show_full_text"\n
-           tal:define="search_text real_context/Base_getSearchText">\n
-\n
-        <tal:block tal:condition="not: is_gadget_mode">\n
-          <!-- Normal mode -->\n
-          <input type="text"\n
-                 tal:attributes="value search_text;\n
-                                 name full_text_search_key;\n
-                                 onkeypress string: submitFormOnEnter(event, this.form, \'${full_text_search_key_script}\');"/>\n
-          <input class="button" \n
-                 i18n:domain="ui" i18n:attributes="value"\n
-                 value="Search"  type="submit" \n
-                 tal:attributes="name string:${full_text_search_key_script}:method"/>\n
-        </tal:block>\n
-        <tal:block tal:condition="is_gadget_mode">\n
-          <!-- Gadget mode -->\n
-          <input tal:define="params python: {\'%s:method\' %full_text_search_key_script:\'\',\'%s\' %full_text_search_key:\'this.value\'};"\n
-                 type="text"\n
-                 tal:attributes=\'value search_text;\n
-                                 name full_text_search_key;\n
-                                 onkeypress python:"if(event.keyCode==13){" + real_context.KnowledgePad_generateAjaxCall(context_url+"/"+form_id,box,box_id,params).replace("\\"this.value\\"","this.value")+ "return false;;}"\'/>\n
-        </tal:block>\n
-    \n
-      </div>\n
-\n
-      <!--Page navigation -->\n
-      <tal:block tal:condition="need_pagination"\n
-                 tal:define="page_navigation_mode python: request.get(\'page_navigation_mode\', here.getPageNavigationMode());\n
-                             is_slider_mode python: page_navigation_mode==\'slider\';\n
-                             class python: test(is_slider_mode, \'listbox-page-navigation listbox-page-navigation-slider\',\'listbox-page-navigation listbox-page-navigation-text\');">\n
-\n
-        <div tal:attributes="class class">\n
-\n
-          <tal:block tal:condition="is_slider_mode">\n
-            <tal:block metal:use-macro="real_context/page_navigation_render/macros/page_navigation" />\n
-          </tal:block> \n
-            \n
-          <tal:block tal:condition="not: is_slider_mode">\n
-            <tal:block metal:use-macro="real_context/page_navigation_render/macros/text_navigation" />\n
-          </tal:block> \n
-\n
-        </div>\n
-      </tal:block>\n
-\n
-    </div>\n
-  </div>\n
-</div>\n
-\n
-</tal:block>\n
-
-
-]]></string> </value>
-        </item>
-        <item>
-            <key> <string>content_type</string> </key>
-            <value> <string>text/html</string> </value>
-        </item>
-        <item>
-            <key> <string>expand</string> </key>
-            <value> <int>0</int> </value>
-        </item>
-        <item>
-            <key> <string>id</string> </key>
-            <value> <string>ListBox_asHTML</string> </value>
-        </item>
-        <item>
-            <key> <string>title</string> </key>
-            <value> <string></string> </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-</ZopeData>
diff --git a/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/km_css/km_listbox.css.xml b/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/km_css/km_listbox.css.xml
new file mode 100644
index 0000000000..276cce81a5
--- /dev/null
+++ b/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/km_css/km_listbox.css.xml
@@ -0,0 +1,285 @@
+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_Cacheable__manager_id</string> </key>
+            <value> <string>http_cache</string> </value>
+        </item>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>_text</string> </key>
+            <value> <string encoding="cdata"><![CDATA[
+
+<tal:block define="dummy python: request.RESPONSE.setHeader(\'Content-Type\', \'text/css;; charset=utf-8\')"/>\n
+\n
+/* Listbox action bar at bottom */\n
+div.listbox-action-widget {\n
+  float:none;\n
+}\n
+\n
+div.listbox-action-widget div.bottom_actions{\n
+  float:left;\n
+  background-color:#E0DFD1;\n
+  padding-left:0.5em;\n
+  padding-bottom:0.2em;\n
+}\n
+\n
+/* Title of the bar */\n
+div.listbox_actions_title{\n
+  color:#FFFFFF;\n
+  display:block;\n
+  font-size:15px;\n
+  text-align:left;\n
+  width:100%;\n
+  float:left;\n
+}\n
+\n
+/* Sub container for the buttons*/\n
+div.buttons_group {\n
+  margin-right:30px;\n
+  padding-top:3px;\n
+  width:auto;\n
+  overflow: auto;\n
+}\n
+\n
+/* Buttons */\n
+div.listbox-action-widget button, \n
+div.listbox-action-widget a.button {\n
+  background-image: url(\'./km_img/button_background.png\') ;\n
+  background-position: 100% 0;\n
+  background-color: inherit;\n
+  border:0 none;\n
+  color:#5F5A55;\n
+  cursor:pointer;\n
+  height:27px;\n
+  float:left;\n
+  margin-right:3px;\n
+  margin-bottom:3px;\n
+  width: auto;\n
+}\n
+div.listbox-action-widget button:hover,\n
+div.listbox-action-widget a:hover {\n
+ background-position:100% 100%;\n
+}\n
+\n
+/* a as button */\n
+div.listbox-action-widget a.button{\n
+  display:block;\n
+  margin-left: 9px;\n
+}\n
+\n
+/* Image in button */\n
+div.listbox-action-widget span.image{\n
+  background-repeat:no-repeat;\n
+  background-position:center center;\n
+  display:block;\n
+  position:relative;\n
+  float:left;\n
+  height:20px;\n
+  width:20px;\n
+  margin-top:3px;\n
+  z-index:2;\n
+  left:-5px;\n
+}\n
+\n
+/* Description of botton */\n
+div.listbox-action-widget span.description{\n
+  font-size:10px;\n
+}\n
+\n
+/* Global button span */\n
+div.listbox-action-widget button > span, \n
+div.listbox-action-widget a > span{\n
+  display:block;\n
+  background-color:inherit;\n
+  background-image:url(\'./km_img/button_background.png\');\n
+  background-position:0 0;\n
+  display:block;\n
+  height:27px;\n
+  left:-8px;\n
+  line-height:27px;\n
+  margin:0;\n
+  padding:0 0 0 5px;\n
+  position:relative;\n
+  white-space:nowrap;\n
+  width:100%;\n
+}\n
+\n
+div.listbox-action-widget button:hover > span, \n
+div.listbox-action-widget a:hover > span{\n
+  background-position:0 100%;\n
+}\n
+\n
+div.listbox-action-widget span.description span {\n
+  left:4px;\n
+  position:relative;\n
+}\n
+\n
+/*Define all button image*/\n
+<tal:block tal:define="buttons python: [\'cut\',\'copy\',\'paste\',\'delete\',\'print\',\'new\',\'reset\',\'filter\',\'find\',\'sort\',\'config\']">\n
+  <tal:block tal:repeat ="button buttons">\n
+  <tal:block tal:content="python: \'\'\'\n
+    button.%(button)s_button span.image{\n
+    background-image:url(\'./km_img/%(button)s.png\');\n
+    }\'\'\' % {\'button\':button}"\n
+/>\n
+</tal:block>\n
+</tal:block>\n
+\n
+/* We hide listbox spacer */\n
+div.listbox-head-spacer{\n
+  display:none;\n
+}\n
+\n
+div.listbox-head-content{\n
+  background-color:transparent;\n
+  margin-left:0px;\n
+  border: none;\n
+}\n
+\n
+div.listbox-title span{\n
+  font-weight: bold;\n
+}\n
+\n
+div.listbox-footer{\n
+  background-color:#F0EFE9;\n
+}\n
+div.listbox-footer-box{\n
+  width: auto;\n
+  float:left;\n
+  margin-right: 5px;\n
+}\n
+\n
+\n
+div.listbox-full-text-search input.button{\n
+  background-color:#A8A799;\n
+  color:#FFFFFF;\n
+}\n
+\n
+table.listbox tr.listbox-label-line{\n
+  background-color:#F0EFE9;\n
+  border-top: none;\n
+}\n
+table.listbox tr.listbox-search-line{\n
+  background-color:#F0EFE9;\n
+}\n
+table.listbox tr.listbox-search-line th{\n
+  padding:4px;\n
+}\n
+\n
+/* Listbox table itself */\n
+table.listbox {\n
+  border: none;\n
+}\n
+\n
+table.listbox th, \n
+table.listbox td{\n
+  border-style:none;\n
+  padding:4px;\n
+}\n
+\n
+table.listbox tr td{\n
+  border-top:1px solid #ECEBE2;\n
+}\n
+\n
+table.listbox tbody tr:hover td {\n
+  background-color:#F7F6F0;\n
+}\n
+\n
+/* Search inputs */\n
+table.listbox tr.listbox-search-line th.listbox-table-filter-cell input{\n
+  border: none;\n
+}\n
+\n
+/* Sort buttons */\n
+table.listbox th button.sort-button {\n
+  text-decoration: none;\n
+  background:transparent url("./km_img/switch.png") no-repeat scroll 100% 50%;\n
+  padding-right:6px;\n
+}\n
+table.listbox th button.sort-button:hover{\n
+  color: #FFF;\n
+}\n
+table.listbox th button.sort-button-desc{\n
+  background-image: url(\'./km_img/switch_desc.png\');\n
+}\n
+table.listbox th button.sort-button-asc{\n
+  background-image: url(\'./km_img/switch_asc.png\');\n
+}\n
+\n
+\n
+/* Navigation buttons */\n
+div.listbox-page-navigation button{\n
+  height: 10px;\n
+  width: 10px;\n
+}\n
+\n
+div.listbox-page-navigation button.listbox_first_page span.image {\n
+  background-image:url("km_img/2leftarrowv.png");\n
+}\n
+\n
+div.listbox-page-navigation button.listbox_previous_page span.image {\n
+  background-image:url("km_img/1leftarrowv.png");\n
+}\n
+\n
+div.listbox-page-navigation button.listbox_next_page span.image {\n
+  background-image:url("km_img/1rightarrowv.png");\n
+}\n
+\n
+div.listbox-page-navigation button.listbox_last_page span.image {\n
+  background-image:url("km_img/2rightarrowv.png");\n
+}\n
+
+
+]]></string> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>km_listbox.css</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string></string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>
diff --git a/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/template_erp5_km_minimal.xml b/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/template_erp5_km_minimal.xml
index 147bceece9..ebeee87a1d 100644
--- a/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/template_erp5_km_minimal.xml
+++ b/bt5/erp5_km/SkinTemplateItem/portal_skins/erp5_km_theme/template_erp5_km_minimal.xml
@@ -2,10 +2,7 @@
 <ZopeData>
   <record id="1" aka="AAAAAAAAAAE=">
     <pickle>
-      <tuple>
-        <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
-        <tuple/>
-      </tuple>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
     </pickle>
     <pickle>
       <dictionary>
@@ -110,6 +107,7 @@
                                                      layout_form.id == \'erp5_km_minimal_front_layout\';\n
                              global header_title python:\'%s | %s\' % (here.getTranslatedTitleOrId(), website.getTranslatedTitleOrId());\n
                              global css_list_template python:[\n
+                                    \'%s/erp5_listbox.css\' % portal_path,\n
                                     \'%s/erp5_web_toolbar.css\' % portal_path,\n
                                     \'%s/erp5_knowledge_box.css\' % portal_path,\n
                                     \'%s/erp5_knowledge_box_web.css\' % portal_path,\n
@@ -119,7 +117,7 @@
                                     \'%s/km_css/pulldown.css\' % portal_path,\n
                                     \'%s/km_css/type.css\' % portal_path,\n
                                     \'%s/km_css/gadget.css\' % portal_path,\n
-                                    \'%s/km_css/listbox.css\' % portal_path,\n
+                                    \'%s/km_css/km_listbox.css\' % portal_path,\n
                                     \'%s/km_custom.css\' % portal_path,\n
 ];\n
                              global js_list python:[\n
-- 
2.30.9