From 8936d0fb8c03806041923e0c147da3787d7d2f8e Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 8 Sep 2010 18:35:34 +0200 Subject: [PATCH] improvements for icon view --- build/css/ox.ui.classic.css | 11 +++-- build/css/ox.ui.modern.css | 17 +++----- build/js/ox.js | 3 +- build/js/ox.ui.js | 85 ++++++++++++++++++++++++++----------- 4 files changed, 76 insertions(+), 40 deletions(-) diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index c510c5e..ce75b36 100644 --- 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; } diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index d9c5ace..0858afb 100644 --- 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; } diff --git a/build/js/ox.js b/build/js/ox.js index 53a0a7c..3f8f627 100644 --- 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, "
", true) These are
short words */ - var len = len || 80, + var str = str.toString(), + len = len || 80, sep = sep || "
", bal = bal || false, spa = Ox.isUndefined(spa) ? true : spa, diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index dd8f9af..5a171c7 100644 --- 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('
').length, self.lineLength); that.css({ width: self.width + 'px', @@ -5700,7 +5732,7 @@ requires that.$icon = $('
') .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 = $('
') .addClass('OxTarget') + .css({ + fontSize: self.fontSize + 'px' + }) .html( - formatTitle(self.options.title) + - '
' + self.options.info + '' + self.title + '
' + self.info + '' ) .mouseenter(mouseenter) .mouseleave(mouseleave); @@ -5771,15 +5805,15 @@ requires ) ); - function formatTitle(title) { - var lines = Ox.wordwrap(title, 23, '
', true, false).split('
'); + function formatText(text, maxLines, maxLength) { + var lines = Ox.wordwrap(text, maxLength, '
', true, false).split('
'); 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) {