From 350a4e8074ba8d61c2109f14130cd7d05c5dd2ed Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Tue, 18 Dec 2012 12:40:32 +0530 Subject: [PATCH] added gradient and no float for help --- public/js/wn/dom.js | 113 +++++++++++++++++++----------------- public/js/wn/ui/appframe.js | 2 +- public/js/wn/ui/themes.js | 9 ++- 3 files changed, 69 insertions(+), 55 deletions(-) diff --git a/public/js/wn/dom.js b/public/js/wn/dom.js index 9644603b4e..6e79df4acc 100644 --- a/public/js/wn/dom.js +++ b/public/js/wn/dom.js @@ -92,38 +92,6 @@ wn.dom = { if(!wn.dom.freeze_count) { $('#freeze').toggle(false); } - }, - placeholder: function(dim, letter) { - function getsinglecol() { - return Math.min(Math.round(Math.random() * 9) * Math.round(Math.random() * 1) + 3, 9) - } - function getcol() { - return '' + getsinglecol() + getsinglecol() + getsinglecol(); - } - args = { - width: Math.round(flt(dim) * 0.7) + 'px', - height: Math.round(flt(dim) * 0.7) + 'px', - padding: Math.round(flt(dim) * 0.15) + 'px', - 'font-size': Math.round(flt(dim) * 0.6) + 'px', - col1: getcol(), - col2: getcol(), - letter: letter.substr(0,1).toUpperCase() - } - return repl('
%(letter)s
', args); } } @@ -142,34 +110,75 @@ wn.done_loading = function() { } } +var get_hex = function(i) { + i = Math.round(i); + if(i>255) return 'ff'; + if(i<0) return '00'; + i =i .toString(16); + if(i.length==1) i = '0'+i; + return i; +} + wn.get_shade = function(color, factor) { + if(color.substr(0,3)=="rgb") { + var rgb = function(r,g,b) { + return get_hex(r) + get_hex(g) + get_hex(b); + } + color = eval(color); + } + if(color.substr(0,1)=="#") { + var color = color.substr(1); + } + var get_int = function(hex) { return parseInt(hex,16); } - var get_hex = function(i) { - if(i>255) return 'ff'; - if(i<0) return '00'; - i =i .toString(16); - if(i.length==1) i = '0'+r; - return i; - } - - return get_hex(get_int(color.substr(1,2)) * factor) - + get_hex(get_int(color.substr(3,4)) * factor) - + get_hex(get_int(color.substr(5,6)) * factor) + return get_hex(get_int(color.substr(0,2)) * factor) + + get_hex(get_int(color.substr(2,2)) * factor) + + get_hex(get_int(color.substr(4,2)) * factor) } -$.fn.apply_gradient = function(col) { - var col1 = wn.get_shade(col, 1.1); - var col2 = wn.get_shade(col, 0.9); +wn.get_gradient_css = function(col) { + var col1 = wn.get_shade(col, 1.05); + var col2 = wn.get_shade(col, 0.95); + return "\nbackground-color: " + col + " !important;" + +"\nbackground: -moz-linear-gradient(top, #"+col1+" 0%, #"+col2+" 99%) !important;" + +"\nbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#"+col1+"), color-stop(99%,#"+col2+")) !important;" + +"\nbackground:-webkit-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%) !important;" + +"\nbackground:-o-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%) !important;" + +"\nbackground:-ms-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%) !important;" + +"\nbackground:-o-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%) !important;" + +"\nbackground:linear-gradient(top, #"+col1+" 0%,#%"+col2+" 99%) !important;" + +"\nfilter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#"+col1+"', endColorstr='#"+col1+"',GradientType=0 ) !important;" +} + +$.fn.gradientify = function(col) { + if(!col) col = this.css("background-color"); + var col1 = wn.get_shade(col, 1.05); + var col2 = wn.get_shade(col, 0.95); this.css({ - "background": "-moz-linear-gradient(top, #"+col1+" 0%, #"+col2+" 99%)", - "background": "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#"+col1+"), color-stop(99%,#"+col2+"))", - "background": "-webkit-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%)", - "background": "-o-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%);", - "background": "-ms-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%);", - "background": "linear-gradient(top, #"+col1+" 0%,#%"+col2+" 99%);", + "background": "-moz-linear-gradient(top, #"+col1+" 0%, #"+col2+" 99%)" + }); + this.css({ + "background": "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#"+col1+"), color-stop(99%,#"+col2+"))" + }); + this.css({ + "background": "-webkit-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%)" + }); + this.css({ + "background": "-o-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%);" + }); + this.css({ + "background": "-ms-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%);" + }); + this.css({ + "background": "-o-linear-gradient(top, #"+col1+" 0%,#"+col2+" 99%);" + }); + this.css({ + "background": "linear-gradient(top, #"+col1+" 0%,#%"+col2+" 99%);" + }); + this.css({ "filter": "progid:DXImageTransform.Microsoft.gradient( startColorstr='#"+col1+"', endColorstr='#"+col1+"',GradientType=0 )" }); } diff --git a/public/js/wn/ui/appframe.js b/public/js/wn/ui/appframe.js index bb43232f53..73d5270f7f 100644 --- a/public/js/wn/ui/appframe.js +++ b/public/js/wn/ui/appframe.js @@ -72,7 +72,7 @@ wn.ui.AppFrame = Class.extend({ add_help_button: function(txt) { this.add_toolbar(); - $('') .data('help-text', txt) .click(function() { msgprint($(this).data('help-text'), 'Help'); }) diff --git a/public/js/wn/ui/themes.js b/public/js/wn/ui/themes.js index f7fbc1d16f..7da7b6201b 100644 --- a/public/js/wn/ui/themes.js +++ b/public/js/wn/ui/themes.js @@ -51,10 +51,15 @@ wn.ui.themes = { } wn.ui.set_theme = function(theme) { - wn.dom.set_style(repl(".layout-wrapper-background { \ + var t = wn.ui.themes[theme]; + t.title_gradient = wn.get_gradient_css(t.titlebar); + var css = repl(".layout-wrapper-background { \ background-color: %(sidebar)s !important; }\ .appframe-toolbar { \ background-color: %(toolbar)s !important; }\ .appframe-titlebar { \ - background-color: %(titlebar)s !important; }", wn.ui.themes[theme])); + %(title_gradient)s \ + }", t); + console.log(css); + wn.dom.set_style(css); } \ No newline at end of file