From d3a41b464d746b772a9acac7215b513b01177076 Mon Sep 17 00:00:00 2001 From: Yusei Tahara <yusei@nexedi.com> Date: Wed, 12 Sep 2012 17:55:49 +0900 Subject: [PATCH] Improve listbox sort feature. Now both ascending arrow and descending arrow are displayed in title column and user can sort in specific order explicitly. User also can sort multiple columns by click without using sort-on-dialog. --- .../erp5_xhtml_style/ListBox_asHTML.xml | 32 ++++++++-- .../erp5_xhtml_style/erp5_listbox.css.xml | 24 ++++++++ .../images/1bottomarrow_red.png.xml | 58 +++++++++++++++++++ .../images/1toparrow_red.png.xml | 58 +++++++++++++++++++ .../bootstrap/erp5_xhtml_style/bt/change_log | 5 +- 5 files changed, 171 insertions(+), 6 deletions(-) create mode 100644 product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1bottomarrow_red.png.xml create mode 100644 product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1toparrow_red.png.xml diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/ListBox_asHTML.xml b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/ListBox_asHTML.xml index 45b8053ed8..25acae403a 100644 --- a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/ListBox_asHTML.xml +++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/ListBox_asHTML.xml @@ -296,14 +296,35 @@ or \'Sort\';\n listbox_field_id string:${field_id}.${sql};"> \n <!-- Button in normal view -->\n + <span tal:condition="is_gadget_mode" i18n:translate="" i18n:domain="ui" tal:content="title"/>\n + <span tal:condition="not:is_gadget_mode" class="listbox-table-header-column-title" i18n:translate="" i18n:domain="ui" tal:content="title"/>\n <button tal:condition="not:is_gadget_mode"\n type="submit"\n name="setSelectionQuickSortOrder:method"\n - tal:attributes="title title;\n - value listbox_field_id;\n - class bt_class;"\n + title="Ascending Display"\n + class="sort-button sort-button-asc"\n + tal:attributes="value python:test(sort_order==\'ascending\', listbox_field_id+\':none\', listbox_field_id+\':asc\')"\n i18n:domain="ui" i18n:attributes="title">\n - <span i18n:translate="" i18n:domain="ui" tal:content="title"/>\n + <img src="images/transparent-image.gif"\n + alt="Ascending Display"\n + title="Ascending Display"\n + tal:attributes="src string:${portal_url_string}/images/transparent-image.gif;\n + class python:test(sort_order==\'ascending\', \'sort-button sort-button-arrow sort-button-asc-selected\', \'sort-button sort-button-arrow sort-button-asc-not-selected\');"\n + i18n:domain="ui" i18n:attributes="title;alt" />\n + </button>\n + <button tal:condition="not:is_gadget_mode"\n + type="submit"\n + name="setSelectionQuickSortOrder:method"\n + title="Descending Display"\n + class="sort-button sort-button-desc"\n + tal:attributes="value python:test(sort_order==\'descending\', listbox_field_id+\':none\', listbox_field_id+\':desc\')"\n + i18n:domain="ui" i18n:attributes="title">\n + <img src="images/transparent-image.gif"\n + alt="Descending Display"\n + title="Descending Display"\n + tal:attributes="src string:${portal_url_string}/images/transparent-image.gif;\n + class python:test(sort_order==\'descending\', \'sort-button sort-button-arrow sort-button-desc-selected\', \'sort-button sort-button-arrow sort-button-desc-not-selected\');"\n + i18n:domain="ui" i18n:attributes="title;alt" />\n </button>\n \n <!-- Button in gadget mode -->\n @@ -318,7 +339,8 @@ </button>\n \n <!-- Icon showing sort order -->\n - <img src="images/transparent-image.gif"\n + <img tal:condition="is_gadget_mode"\n + src="images/transparent-image.gif"\n tal:attributes="alt bt_title;\n title bt_title;\n class bt_class;\n diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5_listbox.css.xml b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5_listbox.css.xml index 384451da98..4689adc950 100644 --- a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5_listbox.css.xml +++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5_listbox.css.xml @@ -502,6 +502,9 @@ div.listbox-header-box{\n padding-right: 5px;\n }\n \n +table.listbox tr.listbox-label-line th.listbox-table-header-cell span.listbox-table-header-column-title{\n + float:left;\n +}\n \n /* Listbox Footer */\n div.listbox-footer{\n @@ -805,6 +808,13 @@ table.listbox th img.sort-button-asc{\n padding:0;\n }\n \n +table.listbox th img.sort-button-arrow{\n + width: 13px;\n + height: 13px;\n + margin:0;\n + padding:0;\n +}\n +\n table.listbox th img.sort-button-desc{\n background: url(\'images/1toparrow.png\') no-repeat scroll 100% 100%;\n }\n @@ -813,7 +823,21 @@ table.listbox th img.sort-button-asc{\n background: url(\'images/1bottomarrow.png\') no-repeat scroll 100% 100%;\n }\n \n +table.listbox th img.sort-button-asc-not-selected{\n + background: url(\'images/1toparrow.png\') no-repeat scroll 100% 100%;\n +}\n +\n +table.listbox th img.sort-button-desc-not-selected{\n + background: url(\'images/1bottomarrow.png\') no-repeat scroll 100% 100%;\n +}\n +\n +table.listbox th img.sort-button-asc-selected{\n + background: url(\'images/1toparrow_red.png\') no-repeat scroll 100% 100%;\n +}\n \n +table.listbox th img.sort-button-desc-selected{\n + background: url(\'images/1bottomarrow_red.png\') no-repeat scroll 100% 100%;\n +}\n /* listbox table in thumbnail style \n In thumbnail style we usually have only one thumbnail colum which through CSS\n we show as floating box table row.\n diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1bottomarrow_red.png.xml b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1bottomarrow_red.png.xml new file mode 100644 index 0000000000..a52ba3bd4c --- /dev/null +++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1bottomarrow_red.png.xml @@ -0,0 +1,58 @@ +<?xml version="1.0"?> +<ZopeData> + <record id="1" aka="AAAAAAAAAAE="> + <pickle> + <global name="Image" module="OFS.Image"/> + </pickle> + <pickle> + <dictionary> + <item> + <key> <string>_Cacheable__manager_id</string> </key> + <value> <string>http_cache</string> </value> + </item> + <item> + <key> <string>_EtagSupport__etag</string> </key> + <value> <string>ts47439176.01</string> </value> + </item> + <item> + <key> <string>__name__</string> </key> + <value> <string>1bottomarrow_red.png</string> </value> + </item> + <item> + <key> <string>content_type</string> </key> + <value> <string>image/png</string> </value> + </item> + <item> + <key> <string>data</string> </key> + <value> <string encoding="base64">iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A +/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJDAglMC7XGs4AAAEHSURBVCjP +1ZC7LwRhAMR/du92wxbkZL0SiSCiVXg0motGQY5Gh0J1KolW7e9QKuQkOnR0EkFxWRfFnWSD5Yvb +y7L33b40JBsKLdPNZCaTGfjTaAPQYC0DpgK8A3HKMAQ4n1oLnmPYywDMwfxEb+dKT9cgL55NlEii +KEJVsui6jv0guJdgwX71K6RBMWyqHZuTywuuW+FMlnHlK2Z7P804RNQFjuSoBUUAFcAC35T+wWX1 +enpxdn1kONBweKMRNLi4ueVcRMd1WKqB92NgAYyd7r5SuLqbXOXzyVYum8xAaRSMtE9NEwuCnO+d +VuzymFDi8ZPa4+ETbNyB++ulBTCmYHvgW8M/wQftc2Eom633qAAAAABJRU5ErkJggg==</string> </value> + </item> + <item> + <key> <string>height</string> </key> + <value> <int>13</int> </value> + </item> + <item> + <key> <string>precondition</string> </key> + <value> <string></string> </value> + </item> + <item> + <key> <string>size</string> </key> + <value> <int>391</int> </value> + </item> + <item> + <key> <string>title</string> </key> + <value> <string></string> </value> + </item> + <item> + <key> <string>width</string> </key> + <value> <int>13</int> </value> + </item> + </dictionary> + </pickle> + </record> +</ZopeData> diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1toparrow_red.png.xml b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1toparrow_red.png.xml new file mode 100644 index 0000000000..f9a966e476 --- /dev/null +++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/images/1toparrow_red.png.xml @@ -0,0 +1,58 @@ +<?xml version="1.0"?> +<ZopeData> + <record id="1" aka="AAAAAAAAAAE="> + <pickle> + <global name="Image" module="OFS.Image"/> + </pickle> + <pickle> + <dictionary> + <item> + <key> <string>_Cacheable__manager_id</string> </key> + <value> <string>http_cache</string> </value> + </item> + <item> + <key> <string>_EtagSupport__etag</string> </key> + <value> <string>ts47439181.43</string> </value> + </item> + <item> + <key> <string>__name__</string> </key> + <value> <string>1toparrow_red.png</string> </value> + </item> + <item> + <key> <string>content_type</string> </key> + <value> <string>image/png</string> </value> + </item> + <item> + <key> <string>data</string> </key> + <value> <string encoding="base64">iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A +/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJDAglCXHSksYAAAEDSURBVCjP +1ZG/SwJhAIYf767Lugg59RtcCu4IMeICy0CChjbrwKEgaug/aOpvcbaloS1oCZrdHMKiqylRaFCH +wPr8vO5oi+jHXu/4vDzDywv/LzmwSnBcBeunXv8KXEjPQf1gafFoNjYKqdfhVQDyV8kFKwP1kj1R +9Z0CO8X9/F33dsGWw4sAwm+SC6YN5xvC3Fr1HMJJjXmSbK7t5pv3jRWhRmcBRB9SDuw0nJZTVNaL +HpYxRU8+0Yn6iBfJtldxrtut5aySlwFIA8CEmgB/JKH10EYpRRSH6PqAZqJDZuYGIxn542dqwF4C +QINDE7IaIIDHTzs1YBqIgTfojeHkj5//DllxSeYRCrbiAAAAAElFTkSuQmCC</string> </value> + </item> + <item> + <key> <string>height</string> </key> + <value> <int>13</int> </value> + </item> + <item> + <key> <string>precondition</string> </key> + <value> <string></string> </value> + </item> + <item> + <key> <string>size</string> </key> + <value> <int>387</int> </value> + </item> + <item> + <key> <string>title</string> </key> + <value> <string></string> </value> + </item> + <item> + <key> <string>width</string> </key> + <value> <int>13</int> </value> + </item> + </dictionary> + </pickle> + </record> +</ZopeData> diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/bt/change_log b/product/ERP5/bootstrap/erp5_xhtml_style/bt/change_log index b029fe34b4..cdde4dc95c 100644 --- a/product/ERP5/bootstrap/erp5_xhtml_style/bt/change_log +++ b/product/ERP5/bootstrap/erp5_xhtml_style/bt/change_log @@ -1,3 +1,6 @@ +2012-9-12 yusei +* Improve listbox sort feature. Now both ascending arrow and descending arrow are displayed in title column and user can sort in specific order explicitly. User also can sort multiple columns by click without using sort-on-dialog. + 2013-01-28 Kazuhiko * update RequireJS 2.1.4. @@ -375,4 +378,4 @@ 2006-06-15 Vincent * Initial commit. -* Valid XHTML1.0 Strict + CSS 2.0. \ No newline at end of file +* Valid XHTML1.0 Strict + CSS 2.0. -- 2.30.9