TableList: add clearButton and clearButtonTooltip options, update CSS

source/Ox.UI/css/Ox.UI.css

@@ -1355,6 +1355,16 @@ Lists
 .OxTableList .OxBar .OxSelect > input {
     margin-right: -3px;
 }
+.OxTableList .OxBar .OxClear {
+    position: absolute;
+    right: 0;
+    height: 8px;
+    padding: 4px 1px;
+    border-width: 0 1px 0 0;
+    border-style: solid;
+    margin-right: -2px;
+    cursor: pointer;
+}
 
 .OxTableList .OxBody {
     float: left;

source/Ox.UI/js/List/TableList.js

@@ -3,6 +3,8 @@
 /*@
 Ox.TableList <f> TableList Widget
     options <o> Options object
+        clearButton <b|false> If true and columns are visible, show clear button
+        clearButtonTooltip <s|''> Clear button tooltip
         columns <[o]|[]> Columns
             # Fixme: There's probably more...
             editable <b> ...
@@ -54,6 +56,8 @@ Ox.TableList = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
+                clearButton: false,
+                clearButtonTooltip: '',
                 columns: [],
                 columnsMovable: false,
                 columnsRemovable: false,
@@ -94,6 +98,7 @@ Ox.TableList = function(options, self) {
                 },
                 selected: function() {
                     that.$body.options({selected: self.options.selected});
+                    updateClearButton();
                 },
                 sort: function() {
                     updateColumn();
@@ -213,7 +218,27 @@ Ox.TableList = function(options, self) {
                     })
                 })
                 .bindEvent('change', changeColumns)
-                .appendTo(that.$bar.$element);
+                .appendTo(that.$bar);
+        } else if (self.options.clearButton) {
+            self.$clearButton = Ox.Element({
+                    element: '<img>',
+                    tooltip: self.options.clearButtonTooltip
+                })
+                .addClass('OxClear')
+                .attr({src: Ox.UI.getImageURL('symbolClose')})
+                .css({
+                    right: Math.floor(Ox.UI.SCROLLBAR_SIZE - 8) / 2 + 'px'
+                })
+                [self.options.selected.length ? 'show' : 'hide']()
+                .bindEvent({
+                    anyclick: function() {
+                        self.$clearButton.hide();
+                        self.options.selected = [];
+                        that.$body.options({selected: self.options.selected});
+                        that.triggerEvent('select', {ids: []});
+                    }
+                })
+                .appendTo(that.$bar);
         }
     }
 
@@ -271,6 +296,7 @@ Ox.TableList = function(options, self) {
                 that.editCell(data.id, data.key);
             } else if (event == 'select') {
                 self.options.selected = data.ids;
+                updateClearButton();
             }
             that.triggerEvent(event, data);
         })
@@ -826,6 +852,12 @@ Ox.TableList = function(options, self) {
         });
     }
 
+    function updateClearButton() {
+        if (self.options.clearButton) {
+            self.$clearButton[self.options.selected.length ? 'show' : 'hide']();
+        }
+    }
+
     function updateColumn() {
         var columnId = self.options.columns[self.selectedColumn].id,
             isSelected = columnId == self.options.sort[0].key;

source/Ox.UI/themes/classic/css/classic.css

@@ -545,7 +545,8 @@ Lists
 .OxThemeClassic .OxTableList .OxHead .OxResize .OxCenter {
     background: rgb(192, 192, 192);
 }
-.OxThemeClassic .OxTableList .OxHead .OxSelect {
+.OxThemeClassic .OxTableList .OxHead .OxSelect,
+.OxThemeClassic .OxTableList .OxBar .OxClear {
     border-color: rgb(192, 192, 192);
 }
 .OxThemeClassic .OxTableList .OxBody .OxItem .OxCell {

source/Ox.UI/themes/modern/css/modern.css

@@ -536,7 +536,8 @@ Lists
 .OxThemeModern .OxTableList .OxHead .OxResize .OxCenter {
     background: rgb(24, 24, 24);
 }
-.OxThemeModern .OxTableList .OxHead .OxSelect {
+.OxThemeModern .OxTableList .OxHead .OxSelect,
+.OxThemeModern .OxTableList .OxBar .OxClear {
     border-color: rgb(24, 24, 24);
 }
 .OxThemeModern .OxTableList .OxBody .OxItem .OxCell {