improvements for icon view

build/css/ox.ui.classic.css

@@ -165,15 +165,20 @@ Lists
 ================================================================================
 */
 
-.OxThemeClassic .OxIconList .OxItem > .OxReflection > div {
+.OxThemeClassic .OxIconList .OxItem > .OxIcon img.OxLoading {
-    background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(240, 240, 240, 1));
+    border-color: rgb(208, 208, 208);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.75)), color-stop(1, rgba(240, 240, 240, 1)));
+    background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224)));
 }
 .OxThemeClassic .OxIconList .OxItem.OxSelected > .OxIcon img {
     border-color: rgb(128, 128, 128);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
 }
+.OxThemeClassic .OxIconList .OxItem > .OxReflection > div {
+    background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(240, 240, 240, 1));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.75)), color-stop(1, rgba(240, 240, 240, 1)));
+}
 .OxThemeClassic .OxIconList .OxItem > .OxText > div {
     text-shadow: rgb(255, 255, 255) 1px 1px 0;
 }

build/css/ox.ui.modern.css

@@ -146,25 +146,20 @@ Lists
 ================================================================================
 */
 
-.OxThemeModern .OxIconList .OxItem {
-    //background: rgb(20, 20, 20);
-}
-.OxThemeModern .OxIconList .OxItem img.OxLoading {
-    background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));
-}
 .OxThemeModern .OxIconList .OxItem > .OxIcon img.OxLoading {
     border-color: rgb(48, 48, 48);
-}
+    background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
-.OxThemeModern .OxIconList .OxItem > .OxReflection > div {
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));
-    background: -moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1));
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(16, 16, 16, 0.75)), color-stop(1, rgba(16, 16, 16, 1)));
 }
 .OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon img {
     border-color: rgb(128, 128, 128);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
 }
+.OxThemeModern .OxIconList .OxItem > .OxReflection > div {
+    background: -moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(16, 16, 16, 0.75)), color-stop(1, rgba(16, 16, 16, 1)));
+}
 .OxThemeModern .OxIconList .OxItem > .OxText > div {
     text-shadow: rgb(0, 0, 0) 1px 1px 0;
 }

build/js/ox.js

@@ -1731,7 +1731,8 @@ Ox.wordwrap = function(str, len, sep, bal, spa) {
     >>> Ox.wordwrap("These are short words", 16, "<br/>", true)
     These are <br/>short words
     */
-    var len = len || 80,
+    var str = str.toString(),
+        len = len || 80,
         sep = sep || "<br/>",
         bal = bal || false,
         spa = Ox.isUndefined(spa) ? true : spa,

build/js/ox.ui.js

@@ -5632,29 +5632,36 @@ requires
 
         that.$element = new Ox.List({
                 construct: constructItem,
+                id: self.options.id,
                 itemHeight: self.itemHeight,
                 itemWidth: self.itemWidth,
-                keys: 'foo',
+                keys: self.options.keys,
                 orientation: self.options.orientation,
                 keys: self.options.keys,
                 request: self.options.request,
-                // rowLength: 4,
+                size: self.options.size,
-                size: 128,
+                sort: self.options.sort,
                 type: 'icon',
+                unique: self.options.unique
             }/*, self*/)
             .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
             .click(click)
             .dblclick(dblclick)
             .scroll(scroll);
 
+        updateKeys();
+
         function click() {
             
         }
 
         function constructItem(data) {
-            var data = self.options.item(data, self.options.sort, self.options.size);
+            var data = self.options.item(data, self.options.sort, self.options.size),
+                ratio = data.width / data.height;
             return new Ox.IconItem($.extend(data, {
-                size: self.options.size
+                height: self.options.size / (ratio <= 1 ? 1 : ratio),
+                size: self.options.size,
+                width: self.options.size * (ratio >= 1 ? 1 : ratio)
             }));
         }
 
@@ -5666,7 +5673,27 @@ requires
             
         }
 
-        Ox.print('IconList', that.options('id'))
+        function updateKeys() {
+            self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
+            that.$element.options({
+                keys: self.options.keys
+            });
+        }
+
+        self.onChange = function(key, value) {
+            if (key == 'request') {
+                that.$element.options(key, value);
+            }
+        }
+
+        that.sortList = function(key, operator) {
+            self.options.sort = [{
+                key: key,
+                operator: operator
+            }];
+            updateKeys();
+            that.$element.sortList(key, operator);
+        }
 
         return that;
 
@@ -5677,21 +5704,26 @@ requires
         var self = self || {},
             that = new Ox.Element({}, self)
                 .defaults({
-                    height: 0,
+                    height: 128,
                     id: '',
                     info: '',
                     size: 128,
                     title: '',
-                    width: 0,
+                    width: 128,
                     url: ''
                 })
                 .options(options || {})
 
         $.extend(self, {
+            fontSize: self.options.size == 64 ? 7 : 9,
             height: self.options.size * 1.5,
+            lineLength: self.options.size == 64 ? 17 : 23,
+            lines: self.options.size == 64 ? 4 : 5,
             url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
             width: self.options.size
         });
+        self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
+        self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
 
         that.css({
             width: self.width + 'px',
@@ -5700,7 +5732,7 @@ requires
         that.$icon = $('<div>')
             .addClass('OxIcon')
             .css({
-                top: self.options.size == 64 ? -70 : -120,
+                top: self.options.size == 64 ? -68 : -120,
                 width: (self.options.size + 4) + 'px',
                 height: self.options.size + 'px'
             });
@@ -5726,9 +5758,11 @@ requires
             })
         that.$text = $('<div>')
             .addClass('OxTarget')
+            .css({
+                fontSize: self.fontSize + 'px'
+            })
             .html(
-                formatTitle(self.options.title) +
+                self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
-                '<br/><span class="OxInfo">' + self.options.info + '</span>'
             )
             .mouseenter(mouseenter)
             .mouseleave(mouseleave);
@@ -5771,15 +5805,15 @@ requires
             )
         );
 
-        function formatTitle(title) {
+        function formatText(text, maxLines, maxLength) {
-            var lines = Ox.wordwrap(title, 23, '<br/>', true, false).split('<br/>');
+            var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
             return $.map(lines, function(line, i) {
-                if (i < 3) {
+                if (i < maxLines - 1) {
                     return line;
-                } else if (i == 3) {
+                } else if (i == maxLines - 1) {
-                    return lines.length == 4 ? line : Ox.truncate($.map(lines, function(line, i) {
+                    return lines.length == maxLines ? line : Ox.truncate($.map(lines, function(line, i) {
-                        return i < 3 ? null : line;
+                        return i < maxLines - 1 ? null : line;
-                    }).join(' '), 23, '...', 'center');
+                    }).join(' '), maxLength, '...', 'center');
                 } else {
                     return null;
                 }
@@ -5818,7 +5852,7 @@ requires
                     keys: [],
                     orientation: 'vertical',
                     pageLength: 100,
-                    request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
+                    request: function() {}, // (sort:, range:, callback:), without parameter returns {items, size etc.}
                     //rowLength: 1,
                     sort: [],
                     type: 'text',
@@ -5865,7 +5899,7 @@ requires
                 key_shift_up: addAboveToSelection
             });
             self.pageLengthByRowLength = [
-                0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60
+                0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60
             ];
         }
 
@@ -6428,6 +6462,7 @@ requires
             var ids = getSelectedIds();
             setTimeout(function() {
                 var ids_ = getSelectedIds();
+                Ox.print('ids', ids, 'ids after 100 msec', ids_)
                 if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
                     that.triggerEvent('select', {
                         ids: ids
@@ -6515,7 +6550,7 @@ requires
             return that;
         };
 
-        that.sort = function(key, operator) {
+        that.sortList = function(key, operator) {
             if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
                 self.options.sort[0] = {
                     key: key,
@@ -6723,7 +6758,7 @@ requires
             Ox.print('clickColumn', id);
             var i = getColumnIndexById(id),
                 isSelected = self.options.sort[0].key == self.options.columns[i].id;
-            that.sort(
+            that.sortList(
                 self.options.columns[i].id, isSelected ?
                 (self.options.sort[0].operator === '' ? '-' : '') :
                 self.options.columns[i].operator
@@ -7033,7 +7068,7 @@ requires
             return that;
         }
 
-        that.sort = function(key, operator) {
+        that.sortList = function(key, operator) {
             var isSelected = key == self.options.sort[0].key;
             self.options.sort = [
                 {
@@ -7048,7 +7083,7 @@ requires
                 self.selectedColumn = getColumnIndexById(key);
                 toggleSelected(self.options.columns[self.selectedColumn].id);
             }
-            that.$body.sort(self.options.sort[0].key, self.options.sort[0].operator);
+            that.$body.sortList(self.options.sort[0].key, self.options.sort[0].operator);
             return that;
         };
 
@@ -8217,7 +8252,7 @@ requires
         };
 
         that.getItem = function(id) {
-            Ox.print('id', id)
+            //Ox.print('id', id)
             var ids = id.split('_'),
                 item;
             if (ids.length == 1) {