Commit 30552c0e authored by Yusei Tahara's avatar Yusei Tahara Committed by Arnaud Fontaine

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.
parent 0bffe026
......@@ -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
......
......@@ -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
......
<?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>
<?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>
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.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment