From 0ba258281f9fb9d961dcbd4178564e206a02d330 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 9 Sep 2011 10:41:13 +0000 Subject: [PATCH] simpler text list column head elements, better column drag --- demos/image/js/image.js | 9 +- demos/image2/index.html | 18 +- source/Ox.Image/Ox.Image.js | 236 ++++++++++--- source/Ox.UI/css/Ox.UI.css | 53 ++- source/Ox.UI/js/Core/Ox.Clipboard.js | 11 +- source/Ox.UI/js/List/Ox.List.js | 6 +- source/Ox.UI/js/List/Ox.TextList.js | 345 +++++++++++--------- source/Ox.UI/js/Menu/Ox.MainMenu.js | 28 +- source/Ox.UI/js/Menu/Ox.Menu.js | 15 +- source/Ox.UI/js/Menu/Ox.MenuItem.js | 37 +-- source/Ox.UI/themes/classic/css/classic.css | 22 +- source/Ox.UI/themes/modern/css/modern.css | 11 +- 12 files changed, 461 insertions(+), 330 deletions(-) diff --git a/demos/image/js/image.js b/demos/image/js/image.js index d973bf8a..5e99a54f 100644 --- a/demos/image/js/image.js +++ b/demos/image/js/image.js @@ -9,7 +9,9 @@ Ox.load('Image', function() { 'Method...', 'blur(1)', 'blur(5)', 'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")', 'channel("h")', 'channel("s")', 'channel("l")', - 'contour()', 'depth(1)', 'depth(4)', 'edges()', 'emboss()', + 'contour()', + 'depth(1)', 'depth(2)', 'depth(4)', + 'edges()', 'emboss()', 'encode("secret")', 'decode()', 'encode("secret", false)', 'decode(false)', 'encode("secret", 1)', 'decode(1)', @@ -18,9 +20,10 @@ Ox.load('Image', function() { 'hue(-60)', 'hue(60)', 'invert()', 'lightness(-0.5)', 'lightness(0.5)', - 'motionBlur()', 'posterize()', + 'mosaic(4)', 'motionBlur()', 'photocopy()', 'posterize()', 'resize(256, 256)', 'resize(512, 512)', 'saturation(-0.5)', 'saturation(0.5)', + 'scale(0.5, -1)', 'sharpen()', 'solarize()', 'src("png/Lenna.png")', 'src("png/OxJS.png")' ].forEach(function(filter) { @@ -41,7 +44,7 @@ Ox.load('Image', function() { image[fn].apply(null, Ox.merge(args, function(image) { Ox.element('#filter').attr({ src: image.src() - }); + }).css({width: '512px', height: '512px'}); })); } else if (fn == 'decode') { image[fn].apply(null, Ox.merge(args, function(str) { diff --git a/demos/image2/index.html b/demos/image2/index.html index 6973f406..86630991 100644 --- a/demos/image2/index.html +++ b/demos/image2/index.html @@ -8,19 +8,21 @@ Ox.load('Image', function() { var fixmeOxelement; var body = Ox.element('body'), - button = Ox.element('').attr({type: 'button', value: 'encode'}).click(function() { + button = Ox.element('').attr({type: 'button', value: 'Encode'}).click(function() { button.attr({disabled: 'disabled'}) - if (button.attr('value') == 'encode') { - button.attr({value: 'encoding...'}); + if (button.attr('value') == 'Encode') { + button.attr({value: 'Encoding...'}); encode(function(image) { fixmeOxelement = image; - button.removeAttr('disabled').attr({value: 'decode'}); + button.removeAttr('disabled').attr({value: 'Decode'}); }); } else { - button.attr({value: 'decoding...'}); - decode(fixmeOxelement, function() { - button.attr({value: 'done'}) - }); + button.attr({value: 'Decoding...'}); + setTimeout(function() { + decode(fixmeOxelement, function() { + button.attr({value: 'Done'}) + }); + }, 0); } }).appendTo(body); Ox.element('
').appendTo(body); diff --git a/source/Ox.Image/Ox.Image.js b/source/Ox.Image/Ox.Image.js index a7b8ed40..91fa83ea 100644 --- a/source/Ox.Image/Ox.Image.js +++ b/source/Ox.Image/Ox.Image.js @@ -4,6 +4,8 @@ Ox.load.Image = function(options, callback) { /*@ Ox.Image Generic image object + To render the image as an image element, use its src() + method, to render it as a canvas, use its canvas property. (src, callback) -> undefined (width, height, callback) -> undefined (width, height, background, callback) -> undefined @@ -26,7 +28,8 @@ Ox.load.Image = function(options, callback) { } else { self.width = arguments[0]; self.height = arguments[1]; - self.background = arguments.length == 4 ? arguments[2] : [0, 0, 0, 0]; + self.background = arguments.length == 4 + ? arguments[2] : [0, 0, 0, 0]; init(); } @@ -66,19 +69,21 @@ Ox.load.Image = function(options, callback) { self.width = self.image.width; self.height = self.image.height; } - self.canvas = Ox.element('').attr({ + that.canvas = Ox.element('').attr({ width: self.width, height: self.height }); - self.context = self.canvas[0].getContext('2d'); + that.context = that.canvas[0].getContext('2d'); if (self.image) { - self.context.drawImage(self.image, 0, 0); + that.context.drawImage(self.image, 0, 0); } else if (Ox.sum(self.background)) { - that.fillStyle(self.background); - that.fillRect(0, 0, self.width, self.height); + that.context.fillStyle(self.background); + that.context.fillRect(0, 0, self.width, self.height); } - self.imageData = self.context.getImageData(0, 0, self.width, self.height); - self.data = self.imageData.data; + that.imageData = that.context.getImageData( + 0, 0, self.width, self.height + ); + self.data = that.imageData.data; self.callback(that); } @@ -92,6 +97,11 @@ Ox.load.Image = function(options, callback) { }); } + /*@ + blur Apply blur filter + (val) -> The image object + val Amount of blur (1 to 5, more is slow) + @*/ that.blur = function(val) { var filter = [], size = val * 2 + 1; @@ -111,6 +121,13 @@ Ox.load.Image = function(options, callback) { return that.filter(filter); }; + //@ canvas Canvas object + + /*@ + channel Reduce the image to one channel + (channel) -> The image object + channel 'r', 'g', 'b', 'a', 'h', 's' or 'l' + @*/ that.channel = function(str) { str = str[0].toLowerCase(); return that.map(function(rgba) { @@ -134,6 +151,12 @@ Ox.load.Image = function(options, callback) { }); } + //@ context 2D drawing context + + /*@ + contour Apply contour filter + () -> The image object + @*/ that.contour = function(val) { return that.filter([ +1, +1, +1, @@ -142,15 +165,24 @@ Ox.load.Image = function(options, callback) { ]); }; + /*@ + depth Reduce the bit depth + (depth) -> The image object + depth Bits per channel (1 to 7) + @*/ that.depth = function(val) { var pow = Math.pow(2, 8 - val); return that.map(function(rgba) { return rgba.map(function(v, i) { - return i < 3 ? Math.floor(v / pow) * pow : v + return i < 3 ? Math.floor(v / pow) * pow/* * 255 / val*/ : v; }); }); - } + }; + /*@ + edges Apply edges filter + () -> The image object + @*/ that.edges = function(val) { return that.filter([ -1, -1, -1, @@ -159,6 +191,10 @@ Ox.load.Image = function(options, callback) { ]).saturation(-1); }; + /*@ + emboss Apply emboss filter + () -> The image object + @*/ that.emboss = function(val) { return that.filter([ -1, -1, +0, @@ -171,8 +207,8 @@ Ox.load.Image = function(options, callback) { encode Encodes a string into the image For most purposes, deflate and mode should be omitted, since the defaults make the existence of the message harder to detect. A valid - use case for deflate and mode would be to encode, additionally to - the secret string, a more easily detected decoy string: + use case for deflate and mode would be to first encode a more easily + detected decoy string, and only then the secret string: image.encode(decoy, false, 1, function(image) { image.encode(secret, -1, callback); }). (str, callback) -> The image object (unmodified) @@ -183,7 +219,7 @@ Ox.load.Image = function(options, callback) { str The string to be encoded callback Callback function image The image object (modified) - deflate If true, compress string with deflate + deflate If true, encode the string with deflate mode Encoding mode If mode is between -7 and 0, the string will be encoded one bit per byte, as the number of bits within that byte set to 1, @@ -199,6 +235,7 @@ Ox.load.Image = function(options, callback) { mode = Ox.isNumber(arguments[1]) ? arguments[1] : Ox.isNumber(arguments[2]) ? arguments[2] : 0, b = 0, bin, + // Array of bits per byte to be modified (0 is LSB) bits = mode < 1 ? [-mode] : Ox.map(Ox.range(8), function(bit) { return mode & 1 << bit ? bit : null; }), @@ -226,6 +263,7 @@ Ox.load.Image = function(options, callback) { if (rgba[3] == 255) { var index = getIndex(xy); Ox.loop(3, function(c) { + // fixme: use: var data = that.context.imageData.data[i + c] var i = index + c; Ox.forEach(bits, function(bit) { if (( @@ -245,11 +283,23 @@ Ox.load.Image = function(options, callback) { }); } }); - self.context.putImageData(self.imageData, 0, 0); + that.context.putImageData(that.imageData, 0, 0); callback(that); return that; }; + /*@ + decode Decode encoded string + (callback) -> The image object (unmodified) + (deflate, callback) -> The image object (unmodified) + (mode, callback) -> The image object (unmodified) + (deflate, mode, callback) -> The image object (unmodified) + (mode, deflate, callback) -> The image object (unmodified) + deflate If true, decode the string with deflate + mode See encode method + callback Callback function + image The image object (modified) + @*/ that.decode = function() { var callback = arguments[arguments.length - 1], deflate = Ox.isBoolean(arguments[0]) ? arguments[0] @@ -257,6 +307,7 @@ Ox.load.Image = function(options, callback) { mode = Ox.isNumber(arguments[0]) ? arguments[0] : Ox.isNumber(arguments[1]) ? arguments[1] : 0, bin = '', + // Array of bits per byte to be modified (0 is LSB) bits = mode < 1 ? [-mode] : Ox.map(Ox.range(8), function(b) { return mode & 1 << b ? b : null; }), @@ -268,35 +319,41 @@ Ox.load.Image = function(options, callback) { var i = index + c; Ox.forEach(bits, function(bit) { bin += mode < 1 + // Read the number of bits set to 1, mod 2 ? Ox.sum(Ox.range(8).map(function(bit) { return +!!(self.data[i] & 1 << bit); })) % 2 + // or the one bit in question : +!!(self.data[i] & 1 << bit); if (bin.length == 8) { + // Every 8 bits, add one byte to the string str += Ox.char(parseInt(bin, 2)); bin = ''; if (str.length == len) { if (++done == 1) { + // After 4 bytes, parse string as length len = Ox.decodeBase256(str); - Ox.print("LEN", len) - len + 4 > getCapacity(bits.length) - && error('decode'); + if ( + len <= 0 || + len > getCapacity(bits.length) - 4 + ) { + error('decode'); + } str = ''; } else { + // After length more bytes, break return false; } } } }); + return done != 2; }); - if (done == 2) { - return false; - } + return done != 2; } }); try { if (deflate) { - Ox.print('DEFLATE') Ox.decodeDeflate(str, callback); } else { callback(Ox.decodeUTF8(str)); @@ -306,28 +363,22 @@ Ox.load.Image = function(options, callback) { } } - that.fillRect = function(x, y, w, h) { - self.context.fillRect(x, y, w, h); - return that; - }; - - that.fillStyle = function() { - if (arguments.length == 0) { - return self.context.fillStyle; - } else { - self.context.fillStyle = arguments[0]; - return that; - } - }; - + /*@ + filter Pixel-wise filter function + Undocumented, see source code + (filter) -> The image object + (filter, bias) -> The image object + filter <[n]> Filter matrix + bias Bias + @*/ that.filter = function(filter, bias) { bias = bias || 0; var filterSize = Math.sqrt(filter.length), d = (filterSize - 1) / 2, - imageData = self.context.createImageData(self.width, self.height), + imageData = that.context.createImageData(self.width, self.height), data = []; - self.imageData = self.context.getImageData(0, 0, self.width, self.height); - self.data = self.imageData.data; + that.imageData = that.context.getImageData(0, 0, self.width, self.height); + self.data = that.imageData.data; Ox.loop(0, self.data.length, 4, function(i) { var filterIndex = 0, xy = getXY(i); @@ -351,8 +402,8 @@ Ox.load.Image = function(options, callback) { : self.data[i + c]; }); }); - self.context.putImageData(imageData, 0, 0); - self.imageData = imageData; + that.context.putImageData(imageData, 0, 0); + that.imageData = imageData; self.data = data; return that; }; @@ -383,12 +434,23 @@ Ox.load.Image = function(options, callback) { }); }; + //@ imageData Image data object + + /*@ + invert Apply invert filter + () -> The image object + @*/ that.invert = function() { return that.map(function(rgba) { return [255 - rgba[0], 255 - rgba[1], 255 - rgba[2], rgba[3]]; }); }; + /*@ + lightness Apply lightness filter + (val) -> The image object + val Amount, from -1 (darkest) to 1 (lightest) + @*/ that.lightness = function(val) { return setSL('l', val); }; @@ -401,8 +463,8 @@ Ox.load.Image = function(options, callback) { xy <[n]> XY coordinates @*/ that.map = function(fn) { - self.imageData = self.context.getImageData(0, 0, self.width, self.height); - self.data = self.imageData.data; + that.imageData = that.context.getImageData(0, 0, self.width, self.height); + self.data = that.imageData.data; Ox.loop(0, self.data.length, 4, function(i) { fn([ self.data[i], self.data[i + 1], @@ -411,10 +473,44 @@ Ox.load.Image = function(options, callback) { self.data[i + c] = val; }); }) - self.context.putImageData(self.imageData, 0, 0); + that.context.putImageData(that.imageData, 0, 0); return that; }; + /*@ + mosaic Apply mosaic filter + (size) -> The image object + size Mosaic size + @*/ + that.mosaic = function(size) { + that.forEach(function(rgba, xy) { + if (xy[0] % size == 0 && xy[1] % size == 0) { + Ox.loop(size, function(x) { + Ox.loop(size, function(y) { + var hsl, rgb; + if ((x == 0 || y == 0) && !(x == size - 1 || y == size - 1)) { + that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) { + return i < 3 ? Math.min(c + 16, 255) : c; + })); + } else if ((x == size - 1 || y == size - 1) && !(x == 0 || y == 0)) { + that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) { + return i < 3 ? Math.max(c - 16, 0) : c; + })); + } else { + that.pixel(xy[0] + x, xy[1] + y, rgba); + } + }); + }); + } + }); + that.context.putImageData(that.imageData, 0, 0); + return that; + } + + /*@ + motionBlur Apply motion blur filter + () -> The image object + @*/ that.motionBlur = function() { return that.filter([ 0.2, 0.0, 0.0, 0.0, 0.0, @@ -425,6 +521,22 @@ Ox.load.Image = function(options, callback) { ]); }; + /*@ + photocopy Apply photocopy filter + () -> The image object + @*/ + that.photocopy = function(val) { + return that.saturation(-1).depth(1).blur(1); + }; + + /*@ + pixel Get or set pixel values + (x, y) -> <[n]> RGBA values + (x, y, val) -> The image object + x X coordinate + y Y coordinate + val <[n]> RGBA values + @*/ that.pixel = function(x, y, val) { var i = getIndex(x, y); if (!val) { @@ -438,6 +550,10 @@ Ox.load.Image = function(options, callback) { } } + /*@ + posterize Apply posterize filter + () -> The image object + @*/ that.posterize = function() { return that.blur(3).map(function(rgba) { return [ @@ -450,17 +566,27 @@ Ox.load.Image = function(options, callback) { }; that.resize = function(width, height) { - self.canvas.attr({ + // fixme: may not work this way + that.canvas.attr({ width: width, height: height }); return that; } + /*@ + saturation Apply saturation filter + (val) -> The image object + val Amount, from -1 (lowest) to 1 (highest) + @*/ that.saturation = function(val) { return setSL('s', val); }; + /*@ + sharpen Apply sharpen filter + () -> The image object + @*/ that.sharpen = function(val) { return that.filter([ -1, -1, -1, @@ -469,6 +595,10 @@ Ox.load.Image = function(options, callback) { ]); }; + /*@ + solarize Apply solarize filter + () -> The image object + @*/ that.solarize = function() { return that.map(function(rgba) { return [ @@ -480,9 +610,15 @@ Ox.load.Image = function(options, callback) { }); } + /*@ + src Get or set the image source + () -> Data URL + (src) -> Image object, with new source + src Image source (local, remote or data URL) + @*/ that.src = function() { if (arguments.length == 0) { - return self.canvas[0].toDataURL(); + return that.canvas[0].toDataURL(); } else { var callback = arguments[1]; self.src = arguments[0]; @@ -490,13 +626,13 @@ Ox.load.Image = function(options, callback) { self.image.onload = function() { self.width = self.image.width; self.height = self.image.height; - self.canvas.attr({ + that.canvas.attr({ width: self.width, height: self.height }); - self.context.drawImage(self.image, 0, 0); - self.imageData = self.context.getImageData(0, 0, self.width, self.height); - self.data = self.imageData.data; + that.context.drawImage(self.image, 0, 0); + that.imageData = that.context.getImageData(0, 0, self.width, self.height); + self.data = that.imageData.data; callback && callback(that); } self.image.src = self.src; @@ -504,8 +640,6 @@ Ox.load.Image = function(options, callback) { } }; - that.toDataURL = that.src; - }; callback(true); diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 9d65a829..16da90a2 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1105,25 +1105,23 @@ Lists //-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); //-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); } -.OxTextList .OxBar .OxHead { +.OxTextList .OxHead { position: absolute; left: 0; height: 16px; overflow: hidden; white-space: nowrap; } -.OxTextList .OxBar .OxCell { +.OxTextList .OxHead .OxHeadCell { float: left; - padding: 2px 4px 2px 4px; - height: 12px; } -.OxTextList .OxBar .OxCell:nthChild(1) { - margin-left: 0; +.OxTextList .OxHead .OxHeadCell:first-child { + padding-left: 2px; } -.OxTextList .OxBar .OxTitle { +.OxTextList .OxHead .OxTitle { float: left; - height: 15px; - padding: 1px 2px 0 2px; + height: 14px; + padding: 2px 2px 0 2px; font-weight: bold; font-size: 10px; text-overflow: ellipsis; @@ -1131,47 +1129,34 @@ Lists overflow: hidden; white-space: nowrap; } -.OxTextList .OxBar .OxTitle img { - width: 16px; - height: 16px; - margin: -1px 0 0 -4px; -} -.OxTextList .OxBar .OxTitle:first-child { - padding-left: 4px; -} -.OxTextList .OxBar .OxOrder { - float: left; +.OxTextList .OxHead .OxTitle img { width: 10px; - height: 13px; - padding: 3px 0 0 6px; - font-size: 7px; + height: 10px; + margin: 1px 0 0 -1px; +} +.OxTextList .OxHead .OxOrder { + float: left; display: none; } -.OxTextList .OxBar .OxOrder.OxSelected { +.OxTextList .OxHead .OxHeadCell.OxSelected .OxOrder { //cursor: pointer; display: block; } -.OxTextList .OxBar .OxResize { +.OxTextList .OxHead .OxResize { float: left; width: 5px; height: 16px; } -.OxTextList .OxBar .OxResize.OxResizable { +.OxTextList .OxHead .OxResize.OxResizable { cursor: ew-resize; } -.OxTextList .OxBar .OxResize .OxLeft, -.OxTextList .OxBar .OxResize .OxCenter, -.OxTextList .OxBar .OxResize .OxRight { +.OxTextList .OxHead .OxResize div { float: left; + width: 2px; height: 16px; } -.OxTextList .OxBar .OxResize .OxLeft, -.OxTextList .OxBar .OxResize .OxRight { - width: 2px; -} -.OxTextList .OxBar .OxResize .OxCenter { +.OxTextList .OxHead .OxResize div.OxCenter { width: 1px; - background: rgb(24, 24, 24); } .OxTextList .OxBar .OxSelect { position: absolute; diff --git a/source/Ox.UI/js/Core/Ox.Clipboard.js b/source/Ox.UI/js/Core/Ox.Clipboard.js index 36f7fff7..b1438309 100644 --- a/source/Ox.UI/js/Core/Ox.Clipboard.js +++ b/source/Ox.UI/js/Core/Ox.Clipboard.js @@ -1,13 +1,10 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript /*@ Ox.Clipboard Basic clipboard handler - copy copy to clipbloard - (data) -> set clipboard to data - paste paste from clipbload - () -> get clipboard data - _print debug function - () -> print clipboard contents to console - data clipboard object + copy Copy data to clipboard + (data) -> undefined + paste Paste data from clipboard + () -> <*> Clipboard data @*/ Ox.Clipboard = function() { var clipboard = {}; diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index 1a551e6f..975335e9 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -309,6 +309,8 @@ Ox.List = function(options, self) { } function copyItems() { + // fixme: both copy and paste should just deal with Ox.Clipboard, + // and use a "type" self.options.selected.length && that.triggerEvent('copy', { ids: self.options.selected }); @@ -653,7 +655,7 @@ Ox.List = function(options, self) { if (self.$items.length == 0) { return self.options.selected; } else { - return $.map(self.selected, function(pos) { + return self.selected.map(function(pos) { return self.$items[pos].options('data')[self.options.unique]; }); } @@ -826,7 +828,7 @@ Ox.List = function(options, self) { }); that.triggerEvent('move', { //id: id, - ids: $.map(self.$items, function($item) { + ids: self.$items.map(function($item) { return $item.options('data')[self.options.unique]; }) //position: pos diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index eb0e16e9..b67bdc0e 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -81,59 +81,59 @@ Ox.TextList = function(options, self) { keys: find }); - self.options.columns.forEach(function(v) { // fixme: can this go into a generic ox.js function? + self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function? // fixme: and can't these just remain undefined? - if (Ox.isUndefined(v.align)) { - v.align = 'left'; + if (Ox.isUndefined(column.align)) { + column.align = 'left'; } - if (Ox.isUndefined(v.clickable)) { - v.clickable = false; + if (Ox.isUndefined(column.clickable)) { + column.clickable = false; } - if (Ox.isUndefined(v.editable)) { - v.editable = false; + if (Ox.isUndefined(column.editable)) { + column.editable = false; } - if (Ox.isUndefined(v.unique)) { - v.unique = false; + if (Ox.isUndefined(column.unique)) { + column.unique = false; } - if (Ox.isUndefined(v.visible)) { - v.visible = false; + if (Ox.isUndefined(column.visible)) { + column.visible = false; } - if (v.unique) { - self.unique = v.id; + if (column.unique) { + self.unique = column.id; } }); - $.extend(self, { + Ox.extend(self, { columnPositions: [], - defaultColumnWidths: $.map(self.options.columns, function(v) { - return v.defaultWidth || v.width; + defaultColumnWidths: self.options.columns.map(function(column) { + return column.defaultWidth || column.width; }), itemHeight: 16, page: 0, pageLength: 100, scrollLeft: 0, selectedColumn: getColumnIndexById(self.options.sort[0].key), - visibleColumns: $.map(self.options.columns, function(v) { - return v.visible ? v : null; + visibleColumns: self.options.columns.filter(function(column) { + return column.visible; }) }); // fixme: there might be a better way than passing both visible and position - self.options.columns.forEach(function(v) { - if (!Ox.isUndefined(v.position)) { - self.visibleColumns[v.position] = v; + self.options.columns.forEach(function(column) { + if (!Ox.isUndefined(column.position)) { + self.visibleColumns[column.position] = column; } }); - $.extend(self, { - columnWidths: $.map(self.visibleColumns, function(v, i) { - return v.width; + Ox.extend(self, { + columnWidths: self.visibleColumns.map(function(column) { + return column.width; }), pageHeight: self.options.pageLength * self.itemHeight }); self.format = {}; - self.options.columns.forEach(function(v, i) { - if (v.format) { - self.format[v.id] = v.format; + self.options.columns.forEach(function(column) { + if (column.format) { + self.format[column.id] = column.format; } }); @@ -147,7 +147,8 @@ Ox.TextList = function(options, self) { that.$head = Ox.Container() .addClass('OxHead') .css({ - right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0 + right: self.options.scrollbarVisible + ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0 }) .appendTo(that.$bar); that.$head.$content.addClass('OxTitles'); @@ -155,13 +156,13 @@ Ox.TextList = function(options, self) { if (self.options.columnsRemovable) { that.$select = Ox.Select({ id: self.options.id + 'SelectColumns', - items: $.map(self.options.columns, function(v, i) { + items: self.options.columns.map(function(column) { return { - checked: v.visible, - disabled: v.removable === false, - id: v.id, - title: v.title - } + checked: column.visible, + disabled: column.removable === false, + id: column.id, + title: column.title + }; }), max: -1, min: 1, @@ -195,7 +196,7 @@ Ox.TextList = function(options, self) { sortable: self.options.sortable, type: 'text', unique: self.unique - }, $.extend({}, self)) // pass event handler + }, Ox.extend({}, self)) // pass event handler .addClass('OxBody') .css({ top: (self.options.columnsVisible ? 16 : 0) + 'px', @@ -305,83 +306,87 @@ Ox.TextList = function(options, self) { } function constructHead() { - var offset = 0; - that.$titles = []; - self.columnOffsets = []; - self.visibleColumns.forEach(function(v, i) { - var $order, $resize, $left, $center, $right; - offset += self.columnWidths[i]; - self.columnOffsets[i] = offset - self.columnWidths[i] / 2; - that.$titles[i] = Ox.Element() - .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id)) - .css({ - width: (self.columnWidths[i] - 9) + 'px', - textAlign: v.align - }) - .html(v.title) + self.$heads = []; + self.$titles = []; + self.$orderButtons = []; + self.visibleColumns.forEach(function(column, i) { + var $resize; + self.$heads[i] = Ox.Element() + .addClass('OxHeadCell OxColumn' + Ox.toTitleCase(column.id)) + .css({width: self.columnWidths[i] - 5 + 'px'}) .appendTo(that.$head.$content.$element); // if sort operator is set, bind click event - if (v.operator) { - that.$titles[i].bindEvent({ - anyclick: function(event, e) { - clickColumn(v.id); + if (column.operator) { + self.$heads[i].bindEvent({ + anyclick: function() { + clickColumn(column.id); } }); } // if columns are movable, bind drag events if (self.options.columnsMovable) { - that.$titles[i].bindEvent({ + self.$heads[i].bindEvent({ dragstart: function(event, e) { - dragstartColumn(v.id, e); + dragstartColumn(column.id, e); }, drag: function(event, e) { - dragColumn(v.id, e); + dragColumn(column.id, e); }, dragend: function(event, e) { - dragendColumn(v.id, e); + dragendColumn(column.id, e); } }) } - $order = $('
') - .addClass('OxOrder') - .html(Ox.UI.symbols['triangle_' + ( - v.operator == '+' ? 'up' : 'down' - )]) - .click(function() { - $(this).prev().trigger('click') + self.$titles[i] = Ox.Element() + .addClass('OxTitle') + .css({ + width: self.columnWidths[i] - 9 + 'px', + textAlign: column.align }) - .appendTo(that.$head.$content.$element); + .html(column.title) + .appendTo(self.$heads[i]); + self.$orderButtons[i] = Ox.Button({ + style: 'symbol', + title: column.operator == '+' ? 'up' : 'down', + type: 'image' + }) + .addClass('OxOrder') + .css({marginTop: (column.operator == '+' ? 1 : -1) + 'px'}) + .click(function() { + $(this).parent().trigger('click'); + }) + .appendTo(self.$heads[i]); $resize = Ox.Element() .addClass('OxResize') .appendTo(that.$head.$content.$element); + $('
').appendTo($resize); + $('
').addClass('OxCenter').appendTo($resize); + $('
').appendTo($resize); // if columns are resizable, bind click and drag events if (self.options.columnsResizable) { $resize.addClass('OxResizable') .bindEvent({ doubleclick: function(event, e) { - resetColumn(v.id, e); + resetColumn(column.id, e); }, dragstart: function(event, e) { - dragstartResize(v.id, e); + dragstartResize(column.id, e); }, drag: function(event, e) { - dragResize(v.id, e); + dragResize(column.id, e); }, dragend: function(event, e) { - dragendResize(v.id, e); + dragendResize(column.id, e); } }); } - $left = $('
').addClass('OxLeft').appendTo($resize.$element); - $center = $('
').addClass('OxCenter').appendTo($resize.$element); - $right = $('
').addClass('OxRight').appendTo($resize.$element); }); that.$head.$content.css({ width: (Ox.sum(self.columnWidths) + 2) + 'px' }); if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var toggleSelected(self.options.columns[self.selectedColumn].id); - that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({ + self.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({ width: (self.options.columns[self.selectedColumn].width - 25) + 'px' }); } @@ -419,56 +424,39 @@ Ox.TextList = function(options, self) { return $item; } - function formatValue(key, value, data) { - // fixme: this may be obscure... - // since the format of a value may depend on another value, - // we pass all data as a second parameter to the supplied format function - var format = self.format[key]; - if (value === null) { - value = ''; - } else if (format) { - value = Ox.isObject(format) ? - Ox['format' + Ox.toTitleCase(format.type)] - .apply(this, Ox.merge([value], format.args || [])) : - format(value, data); - } else if (Ox.isArray(value)) { - value = value.join(', '); - } - return value; - } - function dragstartColumn(id, e) { self.drag = { - startX: e.clientX, + columnOffsets: getColumnOffsets(), + // fixme: doesn't take into account horizontal scroll + listOffset: that.$element.offset().left, startPos: getColumnPositionById(id) } - $.extend(self.drag, { - stopPos: self.drag.startPos, - offsets: $.map(self.visibleColumns, function(v, i) { - return self.columnOffsets[i] - self.columnOffsets[self.drag.startPos] - }) - }); - $('.OxColumn' + Ox.toTitleCase(id)).css({ - opacity: 0.25 - }); - that.$titles[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work? + self.drag.stopPos = self.drag.startPos; + $('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 0.25}); + self.drag.startPos > 0 && self.$heads[self.drag.startPos].prev().children().eq(2).css({opacity: 0.25}); + self.$heads[self.drag.startPos].next().children().eq(0).css({opacity: 0.25}); + self.$heads[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work? cursor: 'move' }); + //Ox.print('columnOffsets', self.drag.columnOffsets) } function dragColumn(id, e) { - var d = e.clientX - self.drag.startX, - pos = self.drag.stopPos; - Ox.forEach(self.drag.offsets, function(v, i) { - if (d < 0 && d < v) { + var pos = self.drag.stopPos; + Ox.forEach(self.drag.columnOffsets, function(offset, i) { + var x = self.drag.listOffset + offset + self.columnWidths[i] / 2; + if (i < self.drag.startPos && e.clientX < x) { self.drag.stopPos = i; return false; - } else if (d > 0 && d > v) { + } else if (i > self.drag.startPos && e.clientX > x) { self.drag.stopPos = i; } }); if (self.drag.stopPos != pos) { moveColumn(id, self.drag.stopPos); + self.drag.columnOffsets = getColumnOffsets(); + self.drag.startPos = self.drag.stopPos; + //Ox.print('columnOffsets', self.drag.columnOffsets) } } @@ -479,10 +467,8 @@ Ox.TextList = function(options, self) { self.columnWidths.splice(self.drag.stopPos, 0, width); that.$head.$content.empty(); constructHead(); - $('.OxColumn' + Ox.toTitleCase(id)).css({ - opacity: 1 - }); - that.$titles[self.drag.stopPos].removeClass('OxDrag').css({ + $('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 1}); + self.$heads[self.drag.stopPos].removeClass('OxDrag').css({ cursor: 'pointer' }); that.$body.clearCache(); @@ -492,14 +478,13 @@ Ox.TextList = function(options, self) { function dragstartResize(id, e) { var pos = getColumnPositionById(id); self.drag = { - startX: e.clientX, startWidth: self.columnWidths[pos] }; } function dragResize(id, e) { var width = Ox.limit( - self.drag.startWidth - self.drag.startX + e.clientX, + self.drag.startWidth + e.clientDX, self.options.columnWidth[0], self.options.columnWidth[1] ); @@ -531,6 +516,24 @@ Ox.TextList = function(options, self) { }); } + function formatValue(key, value, data) { + // fixme: this may be obscure... + // since the format of a value may depend on another value, + // we pass all data as a second parameter to the supplied format function + var format = self.format[key]; + if (value === null) { + value = ''; + } else if (format) { + value = Ox.isObject(format) ? + Ox['format' + Ox.toTitleCase(format.type)] + .apply(this, Ox.merge([value], format.args || [])) : + format(value, data); + } else if (Ox.isArray(value)) { + value = value.join(', '); + } + return value; + } + function getCell(id, key) { Ox.print('getCell', id, key) var $item = getItem(id); @@ -538,6 +541,14 @@ Ox.TextList = function(options, self) { return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]); } + function getColumnOffsets() { + return self.visibleColumns.map(function(column, i) { + return Ox.sum(self.visibleColumns.map(function(column_, i_) { + return i_ < i ? self.columnWidths[i_] : 0; + })); + }); + } + function getColumnIndexById(id) { return Ox.getPositionById(self.options.columns, id); } @@ -549,10 +560,10 @@ Ox.TextList = function(options, self) { function getItem(id) { //Ox.print('getItem', id) var $item = null; - $.each(that.find('.OxItem'), function(i, v) { - $v = $(v); - if ($v.data('id') == id) { - $item = $v; + that.find('.OxItem').each(function() { + $this = $(this); + if ($this.data('id') == id) { + $item = $this; return false; } }); @@ -579,37 +590,50 @@ Ox.TextList = function(options, self) { } function moveColumn(id, pos) { - // fixme: column head should be one element, not three //Ox.print('moveColumn', id, pos) var startPos = getColumnPositionById(id), stopPos = pos, - startClassName = '.OxColumn' + Ox.toTitleCase(id), - stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id), + startSelector = '.OxColumn' + Ox.toTitleCase(id), + stopSelector = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id), insert = startPos < stopPos ? 'insertAfter' : 'insertBefore' - $column = $('.OxTitle' + startClassName), - $order = $column.next(), - $resize = $order.next(); - //Ox.print(startClassName, insert, stopClassName) - $column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName)); - $order.detach().insertAfter($column); - $resize.detach().insertAfter($order); - $.each(that.$body.find('.OxItem'), function(i, v) { - var $v = $(v); - $v.children(startClassName).detach()[insert]($v.children(stopClassName)); + $column = $('.OxHeadCell' + startSelector), + $resize = $column.next(); + //Ox.print(startSelector, insert, stopSelector) + $column.detach()[insert](insert == 'insertAfter' + ? $('.OxHeadCell' + stopSelector).next() + : $('.OxHeadCell' + stopSelector)); + $resize.detach().insertAfter($column); + that.$body.find('.OxItem').each(function() { + var $this = $(this); + $this.children(startSelector).detach()[insert]( + $this.children(stopSelector) + ); }); - var column = self.visibleColumns.splice(startPos, 1)[0], - width = self.columnWidths.splice(startPos, 1)[0]; - self.visibleColumns.splice(stopPos, 0, column); - self.columnWidths.splice(stopPos, 0, width); + var $head = self.$heads.splice(startPos, 1)[0], + columnWidth = self.columnWidths.splice(startPos, 1)[0], + visibleColumn = self.visibleColumns.splice(startPos, 1)[0]; + self.$heads.splice(stopPos, 0, $head); + self.columnWidths.splice(stopPos, 0, columnWidth); + self.visibleColumns.splice(stopPos, 0, visibleColumn); + var pos = getColumnPositionById(self.options.columns[self.selectedColumn].id); + if (pos > -1) { + that.$element.find('.OxResize .OxSelected').removeClass('OxSelected'); + pos > 0 && self.$heads[pos].prev().children().eq(2).addClass('OxSelected'); + self.$heads[pos].next().children().eq(0).addClass('OxSelected'); + if (pos == stopPos) { + pos > 0 && self.$heads[pos].prev().children().eq(2).css({opacity: 0.25}); + self.$heads[pos].next().children().eq(0).css({opacity: 0.25}); + } + } } function removeColumn(id) { //Ox.print('removeColumn', id); - var className = '.OxColumn' + Ox.toTitleCase(id), - index = getColumnIndexById(id), + var index = getColumnIndexById(id), itemWidth, position = getColumnPositionById(id), - $column = $('.OxTitle' + className), + selector = '.OxColumn' + Ox.toTitleCase(id), + $column = $('.OxHeadCell ' + selector), $order = $column.next(), $resize = $order.next(); self.options.columns[index].visible = false; @@ -618,19 +642,17 @@ Ox.TextList = function(options, self) { that.$head.$content.empty(); constructHead(); itemWidth = getItemWidth(); - $.each(that.$body.find('.OxItem'), function(i, v) { - var $v = $(v); - $v.children(className).remove(); - $v.css({ - width: itemWidth + 'px' - }); + that.$body.find('.OxItem').each(function() { + var $this = $(this); + $this.children(selector).remove(); + $this.css({width: itemWidth + 'px'}); }); that.$body.$content.css({ width: itemWidth + 'px' }); that.$body.options({ keys: Ox.merge(self.visibleColumns.map(function(column) { - return colum.id; + return column.id; }), self.options.keys) }); //that.$body.clearCache(); @@ -654,12 +676,15 @@ Ox.TextList = function(options, self) { that.$head.$content.css({ width: (Ox.sum(self.columnWidths) + 2) + 'px' }); - that.$titles[pos].css({ - width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px' + self.$heads[pos].css({ + width: width - 5 + 'px' + }); + self.$titles[pos].css({ + width: width - 9 - (i == self.selectedColumn ? 16 : 0) + 'px' }); } that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({ - width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px' + width: width - (self.options.columnsVisible ? 9 : 8) + 'px' }); setWidth(); } @@ -678,13 +703,12 @@ Ox.TextList = function(options, self) { var pos = getColumnPositionById(id); if (pos > -1) { updateOrder(id); - pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected'); - that.$titles[pos].toggleClass('OxSelected'); - that.$titles[pos].next().toggleClass('OxSelected'); - that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected'); - that.$titles[pos].css({ + pos > 0 && self.$heads[pos].prev().children().eq(2).toggleClass('OxSelected'); + self.$heads[pos].toggleClass('OxSelected'); + self.$heads[pos].next().children().eq(0).toggleClass('OxSelected'); + self.$titles[pos].css({ width: ( - that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16) + self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16) ) + 'px' }); } @@ -692,8 +716,8 @@ Ox.TextList = function(options, self) { function triggerColumnChangeEvent() { that.triggerEvent('columnchange', { - ids: $.map(self.visibleColumns, function(v, i) { - return v.id; + ids: self.visibleColumns.map(function(column) { + return column.id; }) }); } @@ -713,11 +737,14 @@ Ox.TextList = function(options, self) { } function updateOrder(id) { - var pos = getColumnPositionById(id); + var operator = self.options.sort[0].operator, + pos = getColumnPositionById(id); if (pos > -1) { - that.$titles[pos].next().html(Ox.UI.symbols[ - 'triangle_' + (self.options.sort[0].operator == '+' ? 'up' : 'down') - ]); + self.$orderButtons[pos].options({ + title: operator == '+' ? 'up' : 'down' + }).css({ + marginTop: (operator == '+' ? 1 : -1) + 'px' + }); } } diff --git a/source/Ox.UI/js/Menu/Ox.MainMenu.js b/source/Ox.UI/js/Menu/Ox.MainMenu.js index 74352949..5ba0a513 100644 --- a/source/Ox.UI/js/Menu/Ox.MainMenu.js +++ b/source/Ox.UI/js/Menu/Ox.MainMenu.js @@ -61,8 +61,8 @@ Ox.MainMenu = function(options, self) { function click(event) { var $target = $(event.target), - position = typeof $target.data('position') != 'undefined' ? - $target.data('position') : -1; + position = typeof $target.data('position') != 'undefined' + ? $target.data('position') : -1; clickTitle(position); } @@ -84,8 +84,8 @@ Ox.MainMenu = function(options, self) { function mousemove(event) { var $target = $(event.target), focused, - position = typeof $target.data('position') != 'undefined' ? - $target.data('position') : -1; + position = typeof $target.data('position') != 'undefined' + ? $target.data('position') : -1; if (self.focused && position != self.selected) { if (position > -1) { clickTitle(position); @@ -125,25 +125,23 @@ Ox.MainMenu = function(options, self) { itemId = ids.pop(), menuId = ids.join('_'); that.getMenu(menuId).checkItem(itemId); + return that; }; /*@ disableItem disableItem @*/ that.disableItem = function(id) { - that.getItem(id).options({ - disabled: true - }); + that.getItem(id).options({disabled: true}); + return that; }; /*@ enableItem enableItem @*/ that.enableItem = function(id) { - Ox.print('ENABLE ITEM', id) - that.getItem(id).options({ - disabled: false - }); + that.getItem(id).options({disabled: false}); + return that; }; /*@ @@ -180,7 +178,6 @@ Ox.MainMenu = function(options, self) { } else { menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_')); } - //Ox.print('getMenu', id, menu); return menu; }; @@ -195,6 +192,7 @@ Ox.MainMenu = function(options, self) { if (self.selected < self.options.menus.length - 1) { clickTitle(self.selected + 1); } + return that; }; /*@ @@ -204,15 +202,15 @@ Ox.MainMenu = function(options, self) { if (self.selected) { clickTitle(self.selected - 1); } + return that; }; /*@ uncheckItem uncheckItem @*/ that.uncheckItem = function(id) { - that.getItem(id).options({ - checked: false - }); + that.getItem(id).options({checked: false}); + return that; }; return that; diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 1614e013..c1f4bf2f 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -178,8 +178,8 @@ Ox.Menu = function(options, self) { self.optionGroups = {}; items.forEach(function(item, i) { if (item.group) { - items[i] = $.map(item.items, function(v, i) { - return $.extend(v, { + items[i] = item.items.map(function(v, i) { + return Ox.extend(v, { group: item.group }); }); @@ -196,7 +196,7 @@ Ox.Menu = function(options, self) { items.forEach(function(item) { var position; if ('id' in item) { - that.items.push(Ox.MenuItem($.extend(item, { + that.items.push(Ox.MenuItem(Ox.extend(item, { menu: that, position: position = that.items.length })).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?; @@ -281,10 +281,7 @@ Ox.Menu = function(options, self) { function constructSpace() { return $('').append( - $('', { - 'class': 'OxSpace', - colspan: 5 - }) + $('', {'class': 'OxSpace', colspan: 5}) ); } @@ -720,10 +717,10 @@ Ox.Menu = function(options, self) { }; /*@ - toggelMenu toggleMenu + toggleMenu toggleMenu @*/ that.toggleMenu = function() { - that.is(':hidden') ? that.showMenu() : that.hideMenu(); + return that.is(':hidden') ? that.showMenu() : that.hideMenu(); }; return that; diff --git a/source/Ox.UI/js/Menu/Ox.MenuItem.js b/source/Ox.UI/js/Menu/Ox.MenuItem.js index 763d107e..ced2d346 100644 --- a/source/Ox.UI/js/Menu/Ox.MenuItem.js +++ b/source/Ox.UI/js/Menu/Ox.MenuItem.js @@ -36,7 +36,7 @@ Ox.MenuItem = function(options, self) { position: 0, title: [], }) - .options($.extend(options, { + .options(Ox.extend(options, { keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard), title: Ox.toArray(options.title || self.defaults.title) })) @@ -63,10 +63,8 @@ Ox.MenuItem = function(options, self) { that.$icon = $('', { 'class': 'OxCell OxIcon' }) - .append(self.options.icon ? - $('', { - src: self.options.icon - }) : null + .append(self.options.icon + ? $('', {src: self.options.icon}) : null ) ) .append( @@ -78,17 +76,19 @@ Ox.MenuItem = function(options, self) { .append( $('', { 'class': 'OxCell OxModifiers', - html: $.map(self.options.keyboard.modifiers, function(modifier) { + html: self.options.keyboard.modifiers.map(function(modifier) { return Ox.UI.symbols[modifier]; }).join('') }) ) .append( $('', { - 'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'), - html: self.options.items.length ? Ox.UI.symbols.triangle_right : - Ox.UI.symbols[self.options.keyboard.key] || - self.options.keyboard.key.toUpperCase() + 'class': 'OxCell Ox' + + (self.options.items.length ? 'Submenu' : 'Key'), + html: self.options.items.length + ? Ox.UI.symbols.triangle_right + : Ox.UI.symbols[self.options.keyboard.key] + || self.options.keyboard.key.toUpperCase() }) ); @@ -108,7 +108,7 @@ Ox.MenuItem = function(options, self) { if (key == 'checked') { that.$status.html(value ? Ox.UI.symbols.check : '') } else if (key == 'disabled') { - that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change + that.toggleClass('OxDisabled'); } else if (key == 'title') { self.options.title = Ox.toArray(value); that.$title.html(self.options.title[0]); @@ -120,12 +120,11 @@ Ox.MenuItem = function(options, self) { }; /*@ - toggelChecked toggleChecked + toggleChecked toggleChecked @*/ that.toggleChecked = function() { - that.options({ - checked: !self.options.checked - }); + that.options({checked: !self.options.checked}); + return that; }; that.toggleDisabled = function() { @@ -133,13 +132,11 @@ Ox.MenuItem = function(options, self) { }; /*@ - toggelTitle toggleTitle + toggleTitle toggleTitle @*/ that.toggleTitle = function() { - //Ox.print('s.o.t', self.options.title) - that.options({ - title: self.options.title.reverse() - }); + that.options({title: self.options.title.reverse()}); + return that; }; return that; diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index d0272da7..a4105b43 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -378,24 +378,18 @@ Lists .OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) { background: rgb(206, 206, 206); } -.OxThemeClassic .OxTextList .OxBar { - background: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208)); - background: -o-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208)); - background: -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208)); -} -.OxThemeClassic .OxTextList .OxBar .OxSelected { - background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); - background: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); - background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); - //color: rgb(0, 0, 0); -} -.OxThemeClassic .OxTextList .OxBar .OxOrder { + + +.OxThemeClassic .OxTextList .OxHead .OxSelected { + background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176)); + background: -o-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176)); + background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176)); color: rgb(0, 0, 0); } -.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter { +.OxThemeClassic .OxTextList .OxHead .OxResize .OxCenter { background: rgb(192, 192, 192); } -.OxThemeClassic .OxTextList .OxBar .OxSelect { +.OxThemeClassic .OxTextList .OxHead .OxSelect { border-color: rgb(192, 192, 192); } .OxThemeClassic .OxTextList .OxBody .OxItem .OxCell { diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index d4312f60..74b2c00e 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -369,28 +369,23 @@ Lists //background: rgb(66, 66, 82); } .OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell { - background: rgb(78, 78, 94); background: rgb(78, 78, 78); } .OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell { - background: rgb(82, 82, 98); background: rgb(82, 82, 82); } -.OxThemeModern .OxTextList .OxBar .OxSelected { +.OxThemeModern .OxTextList .OxHead .OxSelected { background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); background: -o-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); background: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); color: rgb(255, 255, 255); } -.OxThemeModern .OxTextList .OxBar .OxOrder { - color: rgb(255, 255, 255); -} -.OxThemeModern .OxTextList .OxBar .OxResize .OxCenter { +.OxThemeModern .OxTextList .OxHead .OxResize .OxCenter { background: rgb(24, 24, 24); } -.OxThemeModern .OxTextList .OxBar .OxSelect { +.OxThemeModern .OxTextList .OxHead .OxSelect { border-color: rgb(24, 24, 24); } .OxThemeModern .OxTextList .OxBody .OxItem .OxCell {