diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 943aa655..d7264183 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -2173,6 +2173,16 @@ Miscellaneous ================================================================================ */ +.OxColor { + border-radius: 8px; + padding: 0 4px 1px 4px; + overflow: hidden; + text-overflow: ellipsis; +} +.OxLabel.OxColor, .OxSelect.OxColor { + padding: 0; +} + .OxText { //line-height: 15px; } diff --git a/source/Ox.UI/js/Core/Ox.Theme.js b/source/Ox.UI/js/Core/Ox.Theme.js index 6ba2d0d2..db2f91d0 100644 --- a/source/Ox.UI/js/Core/Ox.Theme.js +++ b/source/Ox.UI/js/Core/Ox.Theme.js @@ -5,15 +5,13 @@ Ox.Theme get/set theme () -> Get current theme (theme) -> Set current theme theme name of theme - > Ox.Theme() - 'classic' - > Ox.Theme('modern') - 'modern' @*/ -Ox.Theme = function(theme) { +Ox.Theme = (function() { - return theme ? setTheme(theme) : getTheme(); + var that = function(theme) { + return theme ? setTheme(theme) : getTheme(); + }; function getTheme() { var theme = ''; @@ -26,78 +24,122 @@ Ox.Theme = function(theme) { return theme; } + function renderElement(val, type) { + var $element, background, color, lightness = that.lightness[getTheme()]; + if (type == 'hue') { + background = Ox.rgb(val, 1, lightness.background).map(function(val) { + return Math.round(val); + }); + color = Ox.rgb(val, 1, lightness.color).map(function(val) { + return Math.round(val); + }); + } else if (type == 'saturation') { + background = Ox.range(7).map(function(i) { + return Ox.rgb(i * 60, val, lightness.background).map(function(val) { + return Math.round(val); + }); + }); + color = Ox.rgb(0, 0, lightness.color).map(function(val) { + return Math.round(val); + }); + } else if (type == 'lightness') { + background = Ox.range(3).map(function() { + return Math.round(val * 255); + }); + color = Ox.range(3).map(function() { + return Math.round(val * 255) + (val < 0.5 ? 128 : -128); + }); + } else if (type == 'gradient') { + background = Ox.range(2).map(function(i) { + return Ox.rgb(val, 1, lightness.background).map(function(val) { + return Math.round(val + (i == 0 ? 16 : -16)); + }); + }); + color = Ox.rgb(val, 1, lightness.color).map(function(val) { + return Math.round(val); + }); + } + $element = $('
') + .addClass( + 'OxColor' + + (type == 'lightness' ? '' : ' OxColor' + Ox.toTitleCase(type)) + ) + .css({ + color: 'rgb(' + color.join(', ') + ')' + }) + .data(type == 'lightness' ? {} : {OxColor: val}); + if (Ox.isNumber(background[0])) { + $element.css({ + background: 'rgb(' + background.join(', ') + ')' + }); + } else { + ['moz', 'o', 'webkit'].forEach(function(browser) { + $element.css({ + background: '-' + browser + '-linear-gradient(' + + (background.length == 2 ? 'top' : 'left') + ', ' + + background.map(function(rgb, i) { + return 'rgb(' + rgb.join(', ') + ') ' + + Math.round(i * 100 / (background.length - 1)) + '%'; + }).join(', ') + + ')' + }); + }); + } + return $element; + }; + function setTheme(theme) { var currentTheme = getTheme(); if (theme != currentTheme) { Ox.UI.$body .addClass('OxTheme' + Ox.toTitleCase(theme)) .removeClass('OxTheme' + Ox.toTitleCase(currentTheme)); - $('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function() { - var $this = $(this), - src = $this.attr('src'); - $this.attr({ + $('.OxColor').each(function() { + var element = this; + Ox.forEach(['hue', 'saturation', 'gradient'], function(type) { + if (element.className.indexOf('OxColor' + Ox.toTitleCase(type)) > -1) { + var $element = $(element), + val = $element.data('OxColor'), + $element_ = renderElement(val, type); + $element.css({ + background: $element_.css('background'), + color: $element_.css('color') + }); + return false; + } + }); + }); + $('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function(element) { + var $element = $(this), + src = $element.attr('src'); + $element.attr({ src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme) }); - //Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)) }); } - return theme; + return that; } -}; - -/* -Ox.UI.ready(function() { - - Ox.theme = function() { - var length = arguments.length, - classes = Ox.UI.$body.attr('class').split(' '), - arg, theme; - Ox.forEach(classes, function(v) { - if (Ox.startsWith(v, 'OxTheme')) { - theme = v.replace('OxTheme', '').toLowerCase(); - if (length == 1) { - Ox.UI.$body.removeClass(v); - } - return false; - } - }); - if (length == 1) { - arg = arguments[0] - Ox.UI.$body.addClass('OxTheme' + Ox.toTitleCase(arg)); - if (theme) { - $('img').each(function() { - var $this = $(this); - if (!$this.attr('src')) return; // fixme: remove, should't be neccessary - $this.attr({ - src: $this.attr('src').replace( - '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/' - ) - }); - }); - $('input[type=image]').each(function() { - var $this = $(this); - $this.attr({ - src: $this.attr('src').replace( - '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/' - ) - }); - }); - $('.OxLoadingIcon').each(function() { - var $this = $(this); - $this.attr({ - src: $this.attr('src').replace( - '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/' - ) - }); - }) - } - } - return theme; + that.formatColor = function(val, type) { + return renderElement(val, type) + .css({textAlign: 'center'}) + .html(Ox.formatNumber(val, 3)); }; - Ox.theme(Ox.UI.DEFAULT_THEME); + that.formatColorLevel = function(index, values, hueRange) { + hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]); + var step = (hueRange[1] - hueRange[0]) / (values.length - 1), + hue = hueRange[0] + index * step; + return renderElement(hue, 'gradient') + .css({textAlign: 'center'}) + .html(values[+index]); + }; + that.lightness = { + classic: {background: 0.75, color: 0.25}, + modern: {background: 0.25, color: 0.75} + }; -}); -*/ + return that; + +}()); \ No newline at end of file diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index 38cfc690..213e3e37 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -555,14 +555,19 @@ Ox.TextList = function(options, self) { // 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]; + var format = self.format[key], formatFunction; 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); + if (Ox.isObject(format)) { + value = ( + /^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox + )['format' + Ox.toTitleCase(format.type)].apply( + this, Ox.merge([value], format.args || []) + ); + } else { + value = format(value, data); + } } else if (Ox.isArray(value)) { value = value.join(', '); } diff --git a/source/Ox/js/Color.js b/source/Ox/js/Color.js index 8d975329..0e99abff 100644 --- a/source/Ox/js/Color.js +++ b/source/Ox/js/Color.js @@ -97,4 +97,23 @@ Ox.rgb = function(hsl) { return rgb.map(function(v) { return v * 255; }); -}; \ No newline at end of file +}; + +/*@ +Ox.toHex Format RGB array as hex value +@*/ +Ox.toHex = function(rgb) { + return rgb.map(function(val) { + return Ox.pad(val.toString(16).toUpperCase(), 2); + }).join(''); +}; + +/*@ +Ox.toRGB Format hex value as RGB array +@*/ +Ox.toRGB = function(hex) { + return Ox.range(3).map(function(i) { + return parseInt(hex.substr(i * 2, 2), 16); + }); +}; + diff --git a/source/Ox/js/Format.js b/source/Ox/js/Format.js index 20117733..a1cebb65 100644 --- a/source/Ox/js/Format.js +++ b/source/Ox/js/Format.js @@ -13,65 +13,6 @@ Ox.formatArea = function(num, dec) { ) + ' ' + (km ? 'k' : '') + 'm\u00B2'; }; -/*@ -Ox.formatColor (strange one) -@*/ -// FIXME: implement invert -Ox.formatColor = function(val, type, invert) { - var background, color, element; - if (type == 'hue') { - background = Ox.rgb(val, 1, 0.25).map(function(val) { - return Math.round(val); - }); - color = Ox.rgb(val, 1, 0.75).map(function(val) { - return Math.round(val); - }); - } else if (type == 'saturation') { - background = Ox.range(7).map(function(i) { - return Ox.rgb(i * 60, val, 0.25).map(function(val) { - return Math.round(val); - }); - }); - color = Ox.range(3).map(function() { - return Math.round(128 + val * 127); - }); - } else if (type == 'lightness') { - background = Ox.range(3).map(function() { - return Math.round(val * 255); - }); - color = Ox.range(3).map(function() { - var v = Math.round(val * 255); - return val < 0.5 ? 128 + v : v - 128; - }); - } - element = Ox.element('
') - .css({ - borderRadius: '8px', - padding: '0 4px 1px 4px', - color: 'rgb(' + color.join(', ') + ')', - overflow: 'hidden', - textAlign: 'right', - textOverflow: 'ellipsis', - //textShadow: 'black 1px 1px 1px' - }) - .html(Ox.formatNumber(val, 3)); - if (Ox.isNumber(background[0])) { - element.css({background: 'rgb(' + background.join(', ') + ')'}); - } else { - ['moz', 'o', 'webkit'].forEach(function(browser) { - element.css({ - background: '-' + browser + '-linear-gradient(left, ' - + background.map(function(rgb, i) { - return 'rgb(' + rgb.join(', ') + ') ' - + Math.round(i * 100 / 6) + '%'; - }).join(', ') - + ')' - }); - }); - } - return element -}; - /*@ Ox.formatCurrency Formats a number with a currency symbol > Ox.formatCurrency(1000, '$', 2)