more better icon view

build/css/ox.ui.classic.css

@@ -165,6 +165,29 @@ Lists
 ================================================================================
 */
 
+.OxThemeClassic .OxIconList .OxItem > .OxReflection > div {
+    background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 1));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.5)), color-stop(1, rgba(240, 240, 240, 1)));
+}
+.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 > .OxText > div {
+    text-shadow: rgb(255, 255, 255) 1px 1px 0;
+}
+.OxThemeClassic .OxIconList .OxItem.OxSelected > .OxText > div {
+    border-color: rgb(128, 128, 128);
+    background: rgba(128, 128, 128, 0.5);
+    -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 > .OxText > div > .OxInfo {
+    color: rgb(128, 128, 128);
+}
+
+
 .OxThemeClassic .OxTextList .OxItem .OxCell {
     border-right: 1px solid rgb(224, 224, 224);
 }
@@ -187,19 +210,22 @@ Lists
     background: rgb(206, 206, 206);
 }
 .OxThemeClassic .OxTextList .OxBar {
-    background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
-    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
-}
-.OxThemeClassic .OxTextList .OxBar .OxSelected {
     background: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(240, 240, 240)), to(rgb(208, 208, 208)));
+}
+.OxThemeClassic .OxTextList .OxBar .OxSelected {
+    background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
     //color: rgb(0, 0, 0);
 }
 .OxThemeClassic .OxTextList .OxBar .OxOrder {
     color: rgb(0, 0, 0);
 }
 .OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
-    background: rgb(176, 176, 176);
+    background: rgb(192, 192, 192);
+}
+.OxThemeClassic .OxTextList .OxBar .OxSelect {
+    border-color: rgb(192, 192, 192);
 }
 .OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
     border-right: 1px solid rgb(232, 232, 232);

build/css/ox.ui.css

@@ -669,28 +669,74 @@ Lists
 }
 
 .OxIconList .OxPage {
-    margin: 4px;
+    padding: 4px;
 }
 
 .OxIconList .OxItem {
     float: left;
+    margin: 4px;
+    opacity: 0.9;
+}
+.OxIconList .OxItem.OxHover,
+.OxIconList .OxItem.OxSelected {
+    opacity: 1;
 }
 
 .OxIconList .OxItem > div {
     position: relative;
 }
 
-.OxIconList .OxItem > .OxIcon > img {
+.OxIconList .OxItem > .OxIcon img {
     position: absolute;
     left: 0;
     right: 0;
+    bottom: 0;
+    margin: auto;
+    border: 2px solid rgba(0, 0, 0, 0);
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+}
+.OxIconList .OxItem > .OxReflection {
+    overflow: hidden;
+}
+
+.OxIconList .OxItem > .OxReflection > div {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
     margin: auto;
 }
 
+.OxIconList .OxItem > .OxReflection > img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    margin: auto;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-transform: scaleY(-1);
+    -webkit-transform: scaleY(-1);
+}
+
+.OxIconList .OxItem > .OxText {
+    text-align: center;
+}
 .OxIconList .OxItem > .OxText > div {
+    display: inline-block;
     font-size: 9px;
     font-weight: bold;
     text-align: center;
+    padding: 1px 2px;
+    border: 2px solid rgba(0, 0, 0, 0);
+    max-width: 120px;
+    word-wrap: break-word;
+    cursor: pointer;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    //-moz-user-select: text;
+    //-webkit-user-select: text;
 }
 
 .OxTextList .OxCell {
@@ -777,7 +823,6 @@ Lists
     width: 10px;
     height: 16px;
     border-width: 0 1px 0 1px;
-    border-color: rgb(32, 32, 32);
     background: rgba(0, 0, 0, 0);
     font-size: 11px;
     text-align: center;

build/css/ox.ui.modern.css

@@ -146,6 +146,29 @@ Lists
 ================================================================================
 */
 
+.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.5)), 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 > .OxText > div {
+    text-shadow: rgb(0, 0, 0) 1px 1px 0;
+}
+.OxThemeModern .OxIconList .OxItem.OxSelected > .OxText > div {
+    border-color: rgb(128, 128, 128);
+    background: rgba(128, 128, 128, 0.5);
+    -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 > .OxText > div > .OxInfo {
+    color: rgb(128, 128, 128);
+}
+
+
 .OxThemeModern .OxTextList .OxItem .OxCell {
     border-right: 1px solid rgb(32, 32, 32);
 }
@@ -178,6 +201,9 @@ Lists
 .OxThemeModern .OxTextList .OxBar .OxResize .OxCenter {
     background: rgb(24, 24, 24);
 }
+.OxThemeModern .OxTextList .OxBar .OxSelect {
+    border-color: rgb(24, 24, 24);
+}
 .OxThemeModern .OxTextList .OxBody .OxItem .OxCell {
     border-right: 1px solid rgb(24, 24, 24);
 }

build/js/ox.js

@@ -458,6 +458,18 @@ Ox.sum = function(obj) {
     return sum;
 };
 
+Ox.unique = function(arr) {
+    /*
+    >>> Ox.unique([1, 2, 3, 1])
+    [1, 2, 3]
+    */
+    var unique = [];
+    $.each(arr, function(i, v) {
+        unique.indexOf(v) == -1 && unique.push(v);
+    });
+    return unique;
+};
+
 Ox.unserialize = function(str) {
     var arr, obj = {};
     Ox.each(str.split("&"), function(i, v) {
@@ -1722,7 +1734,7 @@ Ox.wordwrap = function(str, len, sep, bal, spa) {
     var len = len || 80,
         sep = sep || "<br/>",
         bal = bal || false,
-        spa = spa || true,
+        spa = Ox.isUndefined(spa) ? true : spa,
         words = str.split(" "),
         lines;
     if (bal) {

build/js/ox.ui.js

@@ -5635,10 +5635,10 @@ requires
                 itemHeight: self.itemHeight,
                 itemWidth: self.itemWidth,
                 keys: 'foo',
-                orientation: 'both',
+                orientation: self.options.orientation,
                 keys: self.options.keys,
                 request: self.options.request,
-                rowLength: 1,
+                rowLength: 4,
                 size: 128,
                 type: 'icon',            
             }/*, self*/)
@@ -5685,7 +5685,7 @@ requires
                     width: 0,
                     url: ''
                 })
-                .options(options || {});
+                .options(options || {})
 
         Ox.print('IconItem', options);
 
@@ -5702,7 +5702,7 @@ requires
         that.$icon = $('<div>')
             .addClass('OxIcon')
             .css({
-                top: self.options.size == 64 ? -70 : -128,
+                top: self.options.size == 64 ? -70 : -120,
                 width: self.options.size + 'px',
                 height: self.options.size + 'px'
             });
@@ -5711,59 +5711,66 @@ requires
                 src: self.options.url
             })
             .css({
-                //width: self.options.size + 'px',
+                width: self.options.width + 'px',
-                //height: self.options.size + 'px'
+                height: self.options.height + 'px'
             })
             .mouseenter(mouseenter)
             .mouseleave(mouseleave)
-            .one('load', function() {
+            /*
+            .load(function() {
                 that.$iconImage.attr({
                     src: self.options.url
-                });
+                })
+                Ox.print('width:', that.$iconImage[0].width);
             });
+            */
         that.$textBox = $('<div>')
             .addClass('OxText')
             .css({
-                top: (self.options.size / 2 + 2) + 'px',
+                top: (self.options.size / 2) + 'px',
-                width: self.width + 'px',
+                width: self.options.size + 'px',
                 height: (self.options.size == 64 ? 38 : 58) + 'px'
             })
         that.$text = $('<div>')
-            .html(self.options.title + '<br/><span class="OxInfo">' + self.options.info + '</span>')
+            .html(
+                formatTitle(self.options.title) +
+                '<br/><span class="OxInfo">' + self.options.info + '</span>'
+            )
             .mouseenter(mouseenter)
             .mouseleave(mouseleave)
         that.$reflection = $('<div>')
             .addClass('OxReflection')
             .css({
-                top: (self.options.size + 2) + 'px',
+                top: self.options.size + 'px',
                 width: self.options.size + 'px',
                 height: (self.options.size / 2) + 'px'
             });
         that.$reflectionImage = $('<img>')
-            .addClass('OxReflection')
             .attr({
-                src: /*self.url*/self.options.url
+                src: self.options.url
             })
             .css({
                 width: self.options.width + 'px',
                 height: self.options.height + 'px'
             })
+            /*
             .one('load', function() {
                 that.$reflectionImage.attr({
                     src: self.options.url
                 });
-            });
+            })*/;
         that.$gradient = $('<div>')
-            .addClass('OxGradient')
             .css({
-                top: (-self.options.size - 2) + 'px'
+                //top: (-self.options.size / 2) + 'px',
+                width: self.options.width + 'px',
+                height: (self.options.size / 2) + 'px'
             });
 
         that.append(
             that.$reflection.append(
                 that.$reflectionImage
             ).append(
-                that.$gradientImage
+                that.$gradient
             )
         ).append(
             that.$textBox.append(
@@ -5775,12 +5782,28 @@ requires
             )
         );
 
+        function formatTitle(title) {
+            var lines = Ox.wordwrap(title, 23, '<br/>', true, false).split('<br/>');
+            return $.map(lines, function(line, i) {
+                if (i < 3) {
+                    return line;
+                } else if (i == 3) {
+                    return lines.length == 4 ? line : Ox.truncate($.map(lines, function(line, i) {
+                        return i < 3 ? null : line;
+                    }).join(' '), 23, '...', 'center');
+                } else {
+                    return null;
+                }
+            }).join('<br/>');
+        }
+
         function mouseenter() {
+            Ox.print('mouseenter');
             that.addClass('OxHover');
         }
 
         function mouseleave() {
-            that.removeClass('OxHover');
+            //that.removeClass('OxHover');
         }
 
         return that;
@@ -5813,6 +5836,7 @@ requires
             $pages: [],
             clickTimeout: 0,
             ids: {},
+            itemMargin: self.options.type == 'text' ? 0 : 8,
             keyboardEvents: {
                 key_alt_control_a: invertSelection,
                 key_control_a: selectAll,
@@ -5829,15 +5853,29 @@ requires
             requests: [],
             selected: []
         });
-        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'left' : 'up')] = selectPrevious;
+        self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')] = selectPrevious;
-        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'right' : 'down')] = selectNext;
+        self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'down' : 'right')] = selectNext;
-        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_left' : 'shift_up')] = addPreviousToSelection;
+        self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_up' : 'shift_left')] = addPreviousToSelection;
-        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_right' : 'shift_down')] = addNextToSelection;
+        self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_down' : 'shift_right')] = addNextToSelection;
+        if (self.options.orientation == 'both') {
+            self.keyboardEvents['key_down'] = selectBelow;
+            self.keyboardEvents['key_up'] = selectAbove;
+            self.keyboardEvents['key_shift_down'] = addBelowToSelection;
+            self.keyboardEvents['key_shift_up'] = addAboveToSelection;
+        }
 
         updateQuery();
         Ox.print('s.o', self.options)
         that.addEvent(self.keyboardEvents);
 
+        function addAboveToSelection() {
+            var pos = getAbove();
+            if (pos > -1) {
+                addToSelection(pos);
+                scrollTo(pos);
+            }
+        }
+
         function addAllToSelection(pos) {
             var arr,
                 len = self.$items.length;
@@ -5873,6 +5911,14 @@ requires
             }
         }
 
+        function addBelowToSelection() {
+            var pos = getBelow();
+            if (pos > -1) {
+                addToSelection(pos);
+                scrollTo(pos);
+            }
+        }
+
         function addNextToSelection() {
             var pos = getNext();
             if (pos > -1) {
@@ -5897,6 +5943,11 @@ requires
                 }
                 Ox.print('addToSelection')
                 triggerSelectEvent();
+            } else {
+                // allow for 'cursor navigation' if orientation == 'both'
+                self.selected.splice(self.selected.indexOf(pos), 1);
+                self.selected.push(pos);
+                Ox.print('self.selected', self.selected)
             }
         }
 
@@ -5978,6 +6029,29 @@ requires
             return $item;
         }
 
+        function getAbove() {
+            var pos = -1;
+            if (self.selected.length) {
+                pos = self.selected[self.selected.length - 1] - getRowLength(); // fixme: need self.rowLength
+                Ox.print(getRowLength(), getWidth())
+                if (pos < 0) {
+                    pos = -1;
+                }
+            }
+            return pos;
+        }
+
+        function getBelow() {
+            var pos = -1;
+            if (self.selected.length) {
+                pos = self.selected[self.selected.length - 1] + getRowLength();
+                if (pos >= self.$items.length) {
+                    pos = -1;
+                }
+            }
+            return pos;
+        }
+
         function getHeight() {
             return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
         }
@@ -5985,7 +6059,9 @@ requires
         function getNext() {
             var pos = -1;
             if (self.selected.length) {
-                pos = Ox.max(self.selected) + 1;
+                pos = (self.options.orientation == 'both' ?
+                    self.selected[self.selected.length - 1] :
+                    Ox.max(self.selected)) + 1;
                 if (pos == self.$items.length) {
                     pos = -1;
                 }
@@ -6035,11 +6111,22 @@ requires
         function getPrevious() {
             var pos = -1;
             if (self.selected.length) {
-                pos = Ox.min(self.selected) - 1;
+                pos = (self.options.orientation == 'both' ?
+                    self.selected[self.selected.length - 1] :
+                    Ox.max(self.selected)) - 1;
             }
             return pos;
         }
 
+        function getRow(pos) {
+            return Math.floor(pos / getRowLength());
+        }
+
+        function getRowLength() {
+            // fixme: should the first margin be a separate listMargin?
+            return Math.floor((getWidth() - self.itemMargin) / (self.options.itemWidth + self.itemMargin));
+        }
+
         function getSelectedIds() {
             // fixme: is carring self.ids around the best way?
             return $.map(self.selected, function(v, i) {
@@ -6201,12 +6288,19 @@ requires
         }
 
         function scrollTo(pos) {
-            var positions = [], scroll, size; 
+            var itemHeight = self.options.itemHeight + self.itemMargin,
+                itemWidth = self.options.itemWidth + self.itemMargin,
+                positions = [],
+                scroll,
+                size;
             if (self.options.orientation == 'horizontal') {
-
+                positions[0] = pos * itemWidth;
-            } else if (self.options.orientation == 'vertical') {
+                positions[1] = positions[0] + itemWidth;
-                positions[0] = self.options.itemHeight * pos;
+                scroll = that.scrollLeft();
-                positions[1] = positions[0] + self.options.itemHeight;
+                size = getWidth();
+            } else {
+                positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight;
+                positions[1] = positions[0] + itemHeight;
                 scroll = that.scrollTop();
                 size = getHeight();
                 if (positions[0] < scroll) {
@@ -6218,8 +6312,6 @@ requires
                         scrollTop: (positions[1] - size) + 'px'
                     }, 0);
                 }
-            } else {
-                
             }
         }
 
@@ -6238,6 +6330,14 @@ requires
             }
         }
 
+        function selectAbove() {
+            var pos = getAbove();
+            if (pos > -1) {
+                select(pos);
+                scrollTo(pos);
+            }
+        }
+
         function selectAll() {
             $.each(Ox.range(self.listLength), function(i, v) {
                 Ox.print('adding', v);
@@ -6245,6 +6345,14 @@ requires
             });
         }
 
+        function selectBelow() {
+            var pos = getBelow();
+            if (pos > -1) {
+                select(pos);
+                scrollTo(pos);
+            }
+        }
+
         function selectNext() {
             var pos = getNext();
             if (pos > -1) {
@@ -6600,7 +6708,7 @@ requires
                     .html(v.title)
                     .mousedown(function(e) {
                         timeout = setTimeout(function() {
-                            dragColumn(v.id, e);
+                            self.options.columnsMovable && dragColumn(v.id, e);
                             timeout = 0;
                         }, 250);
                     })