improvements for icon view

2010-09-08 18:35:34 +02:00 · 2010-09-08 18:35:34 +02:00 · 34f655104a
commit 34f655104a
parent 833fa845d6
4 changed files with 76 additions and 40 deletions
--- a/build/css/ox.ui.classic.css
+++ b/build/css/ox.ui.classic.css
@ -165,15 +165,20 @@ Lists
 ================================================================================
 */

-.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 > .OxIcon img.OxLoading {
+    border-color: rgb(208, 208, 208);
+    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;
 }
--- a/build/css/ox.ui.modern.css
+++ b/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);
-}
-.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)));
+    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.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;
 }
--- a/build/js/ox.js
+++ b/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,
--- a/build/js/ox.ui.js
+++ b/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: 128,
+                size: self.options.size,
+                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) +
-                '<br/><span class="OxInfo">' + self.options.info + '</span>'
+                self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
            )
            .mouseenter(mouseenter)
            .mouseleave(mouseleave);
@ -5771,15 +5805,15 @@ requires
            )
        );

-        function formatTitle(title) {
-            var lines = Ox.wordwrap(title, 23, '<br/>', true, false).split('<br/>');
+        function formatText(text, maxLines, maxLength) {
+            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) {
-                    return lines.length == 4 ? line : Ox.truncate($.map(lines, function(line, i) {
-                        return i < 3 ? null : line;
-                    }).join(' '), 23, '...', 'center');
+                } else if (i == maxLines - 1) {
+                    return lines.length == maxLines ? line : Ox.truncate($.map(lines, function(line, i) {
+                        return i < maxLines - 1 ? null : line;
+                    }).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) {