[Rt-commit] rt branch, 3.9-trunk, updated. rt-3.8.8-712-g1d1ba7b
Chia-liang Kao
clkao at bestpractical.com
Tue Sep 7 09:48:40 EDT 2010
The branch, 3.9-trunk has been updated
via 1d1ba7bd23e6587d7dd29978b36accd1fcacb8f4 (commit)
via 20add7d8d5fc55f979766120a7770c5f703564fe (commit)
via ffad400f9efb30f91085c6cbd3a3cef810a523f2 (commit)
via c340a8629b3775fb91c7502ec15523a8eb576a91 (commit)
via e7dd37fd1cbfd866f88e631570e687fbd1f25e81 (commit)
via 297201687128ab82e84bf33f5b3dee3dadc722c8 (commit)
via 43d81fea685c8624622a0bb495f9a0e27f590519 (commit)
via fdf7f302b1360176ee1eb252630a338176197bfa (commit)
via 8431e768526b040650278121a6849480836403a3 (commit)
via 86f07f92b765c56d67fda8463e5cd1fbbba5a363 (commit)
via 89880ec13d14bd44d6b5528ced3f529accbd2a8b (commit)
via 78850128f7b26807b41efdab8972304e7e8587dd (commit)
via 5913433a78d2159b3c012da29a5d8994f35f3850 (commit)
via 8298628a4d8e9f0860ee99a93ee3d7b08167b78d (commit)
via ba000a2946974cce957498aab0129b97bc99131f (commit)
via fac7bab8953faaf718df860dc0f72961cea13f3b (commit)
from a7f761ca40657ecec634ca32c9766be8fab3252e (commit)
Summary of changes:
sbin/rt-test-dependencies.in | 9 +-
share/html/Admin/Elements/SystemTabs | 3 +
share/html/Admin/Global/Theme.html | 259 ++++++++++++++++++
share/html/Admin/Global/index.html | 4 +-
share/html/Elements/Header | 6 +
share/html/Elements/Logo | 9 +
share/html/Helpers/UserLogo | 11 +
share/html/NoAuth/css/farbtastic.css | 51 ++++
share/html/NoAuth/images/farbtastic/marker.png | Bin 0 -> 652 bytes
share/html/NoAuth/images/farbtastic/mask.png | Bin 0 -> 2020 bytes
share/html/NoAuth/images/farbtastic/wheel.png | Bin 0 -> 11733 bytes
share/html/NoAuth/js/farbtastic.js | 347 ++++++++++++++++++++++++
12 files changed, 697 insertions(+), 2 deletions(-)
create mode 100644 share/html/Admin/Global/Theme.html
create mode 100644 share/html/Helpers/UserLogo
create mode 100644 share/html/NoAuth/css/farbtastic.css
create mode 100755 share/html/NoAuth/images/farbtastic/marker.png
create mode 100644 share/html/NoAuth/images/farbtastic/mask.png
create mode 100644 share/html/NoAuth/images/farbtastic/wheel.png
create mode 100644 share/html/NoAuth/js/farbtastic.js
- Log -----------------------------------------------------------------
commit 20add7d8d5fc55f979766120a7770c5f703564fe
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Tue Sep 7 21:50:18 2010 +0800
color picker and a bit more layout cleaning
diff --git a/share/html/Admin/Global/Theme.html b/share/html/Admin/Global/Theme.html
index 5ffbb24..48f0a03 100644
--- a/share/html/Admin/Global/Theme.html
+++ b/share/html/Admin/Global/Theme.html
@@ -51,9 +51,14 @@
Title => loc("Theme") &>
<& /Elements/ListActions, actions => \@results &>
+
+<script type="text/javascript" src="/NoAuth/js/farbtastic.js"></script>
+<link rel="stylesheet" href="/NoAuth/css/farbtastic.css" type="text/css" />
<style type="text/css" media="screen" id="test">
</style>
+<h1>Logo</h3>
+<div class="upload-logo">
Upload Logo:
% if ($img) {
<img src="/Helpers/UserLogo?<% time() %>" />
@@ -62,44 +67,48 @@ Upload Logo:
<input type="file" name="logo-upload" />
<input type="submit">
</form>
+</div>
-<div class="pick-section">
-<span class="description">Pick a section first</span>
+<h1>Customize Theme</h3>
+<div class="pick-section" style="float: left; width: 40%">
+<span class="description">Select a section</span>
<select id="section">
</select>
</div>
-<div class="pick-color">
-<span class="description">Then click on the following color to apply</span>
-<div class="clear">
+<div class="pick-color" style="float: left; width: 50%">
+<span class="description">click on the color to apply to the selected section</span>
+<div class="clear"></div>
% if ($colors) {
-Primary colors:
+Primary colors:<br/>
% for (@$colors) {
% my $fg = $_->{l} >= 0.6 ? 'black' : 'white';
-<span class="color-template" style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>; width: 5em">test l=<% $_->{l}%>></span>
+<span class="color-template" style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>; width: 5em">test l=<% int(100*$_->{l})/100%></span>
% }
% }
<div class="clear">
-Pre-defined colors:
-<span class="color-template" style="background-color: white; color: black; width: 5em">test</span>
-<span class="color-template" style="background-color: white; color: gray; width: 5em">test</span>
-<span class="color-template" style="background-color: red; color: white; width: 5em">test</span>
+<div id="picker"></div>
</div>
+
+
</div>
-<div class="clear">
+<div class="clear"></div>
+
+<h1>Custom CSS (Advanced)</h1>
+<div class="custom-css">
-Csutom CSS (Advanced):<br />
<form method="POST">
<textarea rows=30 cols=60 id="user_css" name="user_css"><% $user_css %></textarea>
<input id="try" type="button" value="Try">
-<input name="reset_css" value="Reset CSS" type="submit">
+<input id="reset" type="reset" value="Reset" type="submit">
+<input name="reset_css" value="Reset to default RT Theme" type="submit">
<input value="Save" type="submit">
</form>
-
+</div>
<script type="text/javascript">
var section_css_mapping = {
@@ -122,10 +131,14 @@ jQuery(function($) {
$("style#test").text($('#user_css').val());
});
+ $('#reset').click(function() {
+ setTimeout(function() {
+ $("style#test").text($('#user_css').val());
+ }, 1000);
+ });
+
- $('span.color-template').click(function() {
- var bg = $(this).css('background-color');
- var fg = $(this).css('color');
+ function change_color(bg, fg) {
var section = $('select#section').val();
var applying = section_css_mapping[section];
@@ -138,7 +151,12 @@ jQuery(function($) {
}
$('#user_css').val(css);
$("style#test").text(css);
+ }
+
+ $('#picker').farbtastic(function(color){ change_color(color, this.hsl[2] > 0.5 ? '#000' : '#fff') });
+ $('span.color-template').click(function() {
+ change_color($(this).css('background-color'), $(this).css('color'));
});
@@ -149,7 +167,7 @@ jQuery(function($) {
my @results;
my $has_color_analyzer =
-eval { require Imger; require Convert::Color; 1 };
+eval { require Imager; require Convert::Color; 1 };
my $img = Imager->new;
if (my $file_hash = _UploadedFile( 'logo-upload' )) {
diff --git a/share/html/NoAuth/css/farbtastic.css b/share/html/NoAuth/css/farbtastic.css
new file mode 100644
index 0000000..17309b9
--- /dev/null
+++ b/share/html/NoAuth/css/farbtastic.css
@@ -0,0 +1,51 @@
+/**
+ * Farbtastic Color Picker 1.2
+ * © 2008 Steven Wittens
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+.farbtastic {
+ position: relative;
+}
+.farbtastic * {
+ position: absolute;
+ cursor: crosshair;
+}
+.farbtastic, .farbtastic .wheel {
+ width: 195px;
+ height: 195px;
+}
+.farbtastic .color, .farbtastic .overlay {
+ top: 47px;
+ left: 47px;
+ width: 101px;
+ height: 101px;
+}
+.farbtastic .wheel {
+ background: url(/NoAuth/images/farbtastic/wheel.png) no-repeat;
+ width: 195px;
+ height: 195px;
+}
+.farbtastic .overlay {
+ background: url(/NoAuth/images/farbtastic/mask.png) no-repeat;
+}
+.farbtastic .marker {
+ width: 17px;
+ height: 17px;
+ margin: -8px 0 0 -8px;
+ overflow: hidden;
+ background: url(/NoAuth/images/farbtastic/marker.png) no-repeat;
+}
+
diff --git a/share/html/NoAuth/images/farbtastic/marker.png b/share/html/NoAuth/images/farbtastic/marker.png
new file mode 100755
index 0000000..3929bbb
Binary files /dev/null and b/share/html/NoAuth/images/farbtastic/marker.png differ
diff --git a/share/html/NoAuth/images/farbtastic/mask.png b/share/html/NoAuth/images/farbtastic/mask.png
new file mode 100644
index 0000000..b0a4d40
Binary files /dev/null and b/share/html/NoAuth/images/farbtastic/mask.png differ
diff --git a/share/html/NoAuth/images/farbtastic/wheel.png b/share/html/NoAuth/images/farbtastic/wheel.png
new file mode 100644
index 0000000..97b343d
Binary files /dev/null and b/share/html/NoAuth/images/farbtastic/wheel.png differ
diff --git a/share/html/NoAuth/js/farbtastic.js b/share/html/NoAuth/js/farbtastic.js
new file mode 100644
index 0000000..7499b9c
--- /dev/null
+++ b/share/html/NoAuth/js/farbtastic.js
@@ -0,0 +1,347 @@
+/**
+ * Farbtastic Color Picker 1.2
+ * © 2008 Steven Wittens
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+
+(function ($){
+jQuery.fn.farbtastic = function (callback) {
+ $.farbtastic(this, callback);
+ return this;
+};
+
+jQuery.farbtastic = function (container, callback) {
+ var container = $(container).get(0);
+ return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
+}
+
+jQuery._farbtastic = function (container, callback) {
+ // Store farbtastic object
+ var fb = this;
+
+ // Insert markup
+ $(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
+ var e = $('.farbtastic', container);
+ fb.wheel = $('.wheel', container).get(0);
+ // Dimensions
+ fb.radius = 84;
+ fb.square = 100;
+ fb.width = 194;
+
+ // Fix background PNGs in IE6
+ if (navigator.appVersion.match(/MSIE [0-6]\./)) {
+ $('*', e).each(function () {
+ if (this.currentStyle.backgroundImage != 'none') {
+ var image = this.currentStyle.backgroundImage;
+ image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
+ $(this).css({
+ 'backgroundImage': 'none',
+ 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
+ });
+ }
+ });
+ }
+
+ /**
+ * Link to the given element(s) or callback.
+ */
+ fb.linkTo = function (callback) {
+ // Unbind previous nodes
+ if (typeof fb.callback == 'object') {
+ $(fb.callback).unbind('keyup', fb.updateValue);
+ }
+
+ // Reset color
+ fb.color = null;
+
+ // Bind callback or elements
+ if (typeof callback == 'function') {
+ fb.callback = callback;
+ }
+ else if (typeof callback == 'object' || typeof callback == 'string') {
+ fb.callback = $(callback);
+ fb.callback.bind('keyup', fb.updateValue);
+ if (fb.callback.get(0).value) {
+ fb.setColor(fb.callback.get(0).value);
+ }
+ }
+ return this;
+ }
+ fb.updateValue = function (event) {
+ if (this.value && this.value != fb.color) {
+ fb.setColor(this.value);
+ }
+ }
+
+ /**
+ * Change color with HTML syntax #123456
+ */
+ fb.setColor = function (color) {
+ var unpack = fb.unpack(color);
+ if (fb.color != color && unpack) {
+ fb.color = color;
+ fb.rgb = unpack;
+ fb.hsl = fb.RGBToHSL(fb.rgb);
+ fb.updateDisplay();
+ }
+ return this;
+ }
+
+ /**
+ * Change color with HSL triplet [0..1, 0..1, 0..1]
+ */
+ fb.setHSL = function (hsl) {
+ fb.hsl = hsl;
+ fb.rgb = fb.HSLToRGB(hsl);
+ fb.color = fb.pack(fb.rgb);
+ fb.updateDisplay();
+ return this;
+ }
+
+ /////////////////////////////////////////////////////
+
+ /**
+ * Retrieve the coordinates of the given event relative to the center
+ * of the widget.
+ */
+ fb.widgetCoords = function (event) {
+ var x, y;
+ var el = event.target || event.srcElement;
+ var reference = fb.wheel;
+
+ if (typeof event.offsetX != 'undefined') {
+ // Use offset coordinates and find common offsetParent
+ var pos = { x: event.offsetX, y: event.offsetY };
+
+ // Send the coordinates upwards through the offsetParent chain.
+ var e = el;
+ while (e) {
+ e.mouseX = pos.x;
+ e.mouseY = pos.y;
+ pos.x += e.offsetLeft;
+ pos.y += e.offsetTop;
+ e = e.offsetParent;
+ }
+
+ // Look for the coordinates starting from the wheel widget.
+ var e = reference;
+ var offset = { x: 0, y: 0 }
+ while (e) {
+ if (typeof e.mouseX != 'undefined') {
+ x = e.mouseX - offset.x;
+ y = e.mouseY - offset.y;
+ break;
+ }
+ offset.x += e.offsetLeft;
+ offset.y += e.offsetTop;
+ e = e.offsetParent;
+ }
+
+ // Reset stored coordinates
+ e = el;
+ while (e) {
+ e.mouseX = undefined;
+ e.mouseY = undefined;
+ e = e.offsetParent;
+ }
+ }
+ else {
+ // Use absolute coordinates
+ var pos = fb.absolutePosition(reference);
+ x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x;
+ y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y;
+ }
+ // Subtract distance to middle
+ return { x: x - fb.width / 2, y: y - fb.width / 2 };
+ }
+
+ /**
+ * Mousedown handler
+ */
+ fb.mousedown = function (event) {
+ // Capture mouse
+ if (!document.dragging) {
+ $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
+ document.dragging = true;
+ }
+
+ // Check which area is being dragged
+ var pos = fb.widgetCoords(event);
+ fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
+
+ // Process
+ fb.mousemove(event);
+ return false;
+ }
+
+ /**
+ * Mousemove handler
+ */
+ fb.mousemove = function (event) {
+ // Get coordinates relative to color picker center
+ var pos = fb.widgetCoords(event);
+
+ // Set new HSL parameters
+ if (fb.circleDrag) {
+ var hue = Math.atan2(pos.x, -pos.y) / 6.28;
+ if (hue < 0) hue += 1;
+ fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
+ }
+ else {
+ var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
+ var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
+ fb.setHSL([fb.hsl[0], sat, lum]);
+ }
+ return false;
+ }
+
+ /**
+ * Mouseup handler
+ */
+ fb.mouseup = function () {
+ // Uncapture mouse
+ $(document).unbind('mousemove', fb.mousemove);
+ $(document).unbind('mouseup', fb.mouseup);
+ document.dragging = false;
+ }
+
+ /**
+ * Update the markers and styles
+ */
+ fb.updateDisplay = function () {
+ // Markers
+ var angle = fb.hsl[0] * 6.28;
+ $('.h-marker', e).css({
+ left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
+ top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
+ });
+
+ $('.sl-marker', e).css({
+ left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
+ top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
+ });
+
+ // Saturation/Luminance gradient
+ $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
+
+ // Linked elements or callback
+ if (typeof fb.callback == 'object') {
+ // Set background/foreground color
+ $(fb.callback).css({
+ backgroundColor: fb.color,
+ color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
+ });
+
+ // Change linked value
+ $(fb.callback).each(function() {
+ if (this.value && this.value != fb.color) {
+ this.value = fb.color;
+ }
+ });
+ }
+ else if (typeof fb.callback == 'function') {
+ fb.callback.call(fb, fb.color);
+ }
+ }
+
+ /**
+ * Get absolute position of element
+ */
+ fb.absolutePosition = function (el) {
+ var r = { x: el.offsetLeft, y: el.offsetTop };
+ // Resolve relative to offsetParent
+ if (el.offsetParent) {
+ var tmp = fb.absolutePosition(el.offsetParent);
+ r.x += tmp.x;
+ r.y += tmp.y;
+ }
+ return r;
+ };
+
+ /* Various color utility functions */
+ fb.pack = function (rgb) {
+ var r = Math.round(rgb[0] * 255);
+ var g = Math.round(rgb[1] * 255);
+ var b = Math.round(rgb[2] * 255);
+ return '#' + (r < 16 ? '0' : '') + r.toString(16) +
+ (g < 16 ? '0' : '') + g.toString(16) +
+ (b < 16 ? '0' : '') + b.toString(16);
+ }
+
+ fb.unpack = function (color) {
+ if (color.length == 7) {
+ return [parseInt('0x' + color.substring(1, 3)) / 255,
+ parseInt('0x' + color.substring(3, 5)) / 255,
+ parseInt('0x' + color.substring(5, 7)) / 255];
+ }
+ else if (color.length == 4) {
+ return [parseInt('0x' + color.substring(1, 2)) / 15,
+ parseInt('0x' + color.substring(2, 3)) / 15,
+ parseInt('0x' + color.substring(3, 4)) / 15];
+ }
+ }
+
+ fb.HSLToRGB = function (hsl) {
+ var m1, m2, r, g, b;
+ var h = hsl[0], s = hsl[1], l = hsl[2];
+ m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
+ m1 = l * 2 - m2;
+ return [this.hueToRGB(m1, m2, h+0.33333),
+ this.hueToRGB(m1, m2, h),
+ this.hueToRGB(m1, m2, h-0.33333)];
+ }
+
+ fb.hueToRGB = function (m1, m2, h) {
+ h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
+ if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+ if (h * 2 < 1) return m2;
+ if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
+ return m1;
+ }
+
+ fb.RGBToHSL = function (rgb) {
+ var min, max, delta, h, s, l;
+ var r = rgb[0], g = rgb[1], b = rgb[2];
+ min = Math.min(r, Math.min(g, b));
+ max = Math.max(r, Math.max(g, b));
+ delta = max - min;
+ l = (min + max) / 2;
+ s = 0;
+ if (l > 0 && l < 1) {
+ s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
+ }
+ h = 0;
+ if (delta > 0) {
+ if (max == r && max != g) h += (g - b) / delta;
+ if (max == g && max != b) h += (2 + (b - r) / delta);
+ if (max == b && max != r) h += (4 + (r - g) / delta);
+ h /= 6;
+ }
+ return [h, s, l];
+ }
+
+ // Install mousedown handler (the others are set on the document on-demand)
+ $('*', e).mousedown(fb.mousedown);
+
+ // Init color
+ fb.setColor('#000000');
+
+ // Set linked elements/callback
+ if (callback) {
+ fb.linkTo(callback);
+ }
+}
+})(jQuery);
\ No newline at end of file
commit 1d1ba7bd23e6587d7dd29978b36accd1fcacb8f4
Merge: a7f761c 20add7d
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Tue Sep 7 21:50:50 2010 +0800
Merge branch 'custom-css' into 3.9-trunk
-----------------------------------------------------------------------
More information about the Rt-commit
mailing list