diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index dae9754e..6b9f123c 100644 --- a/build/css/ox.ui.classic.css +++ b/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); diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index d0204bbf..6914e8ca 100644 --- a/build/css/ox.ui.css +++ b/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; diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index bddb523e..e9b4fb0c 100644 --- a/build/css/ox.ui.modern.css +++ b/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); } diff --git a/build/js/ox.js b/build/js/ox.js index 8491debd..53a0a7cf 100644 --- a/build/js/ox.js +++ b/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 || "
", bal = bal || false, - spa = spa || true, + spa = Ox.isUndefined(spa) ? true : spa, words = str.split(" "), lines; if (bal) { diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 1953f70a..fec5a01b 100644 --- a/build/js/ox.ui.js +++ b/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 = $('
') .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', - //height: self.options.size + 'px' + width: self.options.width + '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 = $('
') .addClass('OxText') .css({ - top: (self.options.size / 2 + 2) + 'px', - width: self.width + 'px', + top: (self.options.size / 2) + 'px', + width: self.options.size + 'px', height: (self.options.size == 64 ? 38 : 58) + 'px' }) that.$text = $('
') - .html(self.options.title + '
' + self.options.info + '') + .html( + formatTitle(self.options.title) + + '
' + self.options.info + '' + ) .mouseenter(mouseenter) .mouseleave(mouseleave) that.$reflection = $('
') .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 = $('') - .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 = $('
') - .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, '
', true, false).split('
'); + 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('
'); + } + 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 == 'horizontal' ? 'right' : 'down')] = selectNext; - self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_left' : 'shift_up')] = addPreviousToSelection; - self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_right' : 'shift_down')] = addNextToSelection; + self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')] = selectPrevious; + self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'down' : 'right')] = selectNext; + self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_up' : 'shift_left')] = addPreviousToSelection; + 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') { - - } else if (self.options.orientation == 'vertical') { - positions[0] = self.options.itemHeight * pos; - positions[1] = positions[0] + self.options.itemHeight; + positions[0] = pos * itemWidth; + positions[1] = positions[0] + itemWidth; + scroll = that.scrollLeft(); + 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); })