From 100775b109d75c5009c1b920e5045b9c911d450c Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Sat, 29 Dec 2012 13:56:04 +0100
Subject: [PATCH] in table list column heads, use images to indicate order, not
 buttons

---
 source/Ox.UI/js/List/TableList.js | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/source/Ox.UI/js/List/TableList.js b/source/Ox.UI/js/List/TableList.js
index 7459d1b6..944c64df 100644
--- a/source/Ox.UI/js/List/TableList.js
+++ b/source/Ox.UI/js/List/TableList.js
@@ -410,7 +410,7 @@ Ox.TableList = function(options, self) {
         self.$heads = [];
         self.$titles = [];
         self.$titleImages = [];
-        self.$orderButtons = [];
+        self.$orderImages = [];
         self.visibleColumns.forEach(function(column, i) {
             var $resize;
             self.$heads[i] = Ox.Element()
@@ -461,15 +461,15 @@ Ox.TableList = function(options, self) {
                 self.$titles[i].html(column.title);
             }
             if (column.operator) {
-                self.$orderButtons[i] = Ox.Button({
-                        selectable: true,
-                        style: 'symbol',
-                        title: column.operator == '+' ? 'up' : 'down',
-                        type: 'image',
-                        value: true
+                self.$orderImages[i] = $('<img>')
+                    .attr({
+                        src: Ox.UI.getImageURL(
+                            'symbol' + (column.operator == '+' ? 'Up' : 'Down'),
+                            'selected'
+                        )
                     })
                     .addClass('OxOrder')
-                    .css({marginTop: (column.operator == '+' ? 1 : -1) + 'px'})
+                    .css({marginTop: (column.operator == '+' ? 3 : 2) + 'px'})
                     .click(function() {
                         $(this).parent().trigger('click');
                     })
@@ -923,10 +923,13 @@ Ox.TableList = function(options, self) {
         var operator = self.options.sort[0].operator,
             pos = getColumnPositionById(id);
         if (pos > -1) {
-            self.$orderButtons[pos].options({
-                title: operator == '+' ? 'up' : 'down'
+            self.$orderImages[pos].attr({
+                src: Ox.UI.getImageURL(
+                    'symbol' + (operator == '+' ? 'Up' : 'Down'),
+                    'selected'
+                )
             }).css({
-                marginTop: (operator == '+' ? 1 : -1) + 'px'
+                marginTop: (operator == '+' ? 3 : 2) + 'px'
             });
         }
     }