[Rt-commit] rt branch, 4.2/logo-color-picker, created. rt-4.0.2-155-ga4ea9c3
Alex Vandiver
alexmv at bestpractical.com
Mon Nov 28 16:52:44 EST 2011
The branch, 4.2/logo-color-picker has been created
at a4ea9c3b7a79bf6b6ce4c5b3c9da1787b7284560 (commit)
- Log -----------------------------------------------------------------
commit a4ea9c3b7a79bf6b6ce4c5b3c9da1787b7284560
Author: Thomas Sibley <trs at bestpractical.com>
Date: Sun Oct 16 17:07:51 2011 -0400
Pick theme colors directly from the logo
Currently supported by any browser that supports the <canvas> element.
Browsers which don't simply don't see the feature.
Alpha channel information is currently discarded, which can lead to
unexpected results when picking colors that make use of alpha. Ideally
the color wheel is modified to support alpha, and we just start setting
it in the CSS with rgba().
diff --git a/devel/third-party/README b/devel/third-party/README
index 876f134..3f6ebc8 100644
--- a/devel/third-party/README
+++ b/devel/third-party/README
@@ -21,3 +21,9 @@ jQuery UI Accordian component that goes into our minified jquery.ui-1.8.4.custom
jquery.tablesorter.js
http://tablesorter.com/jquery.tablesorter.js
jQuery tablesorter plugin version 2.05b
+
+eyedropper.svg
+The Noun Project
+http://thenounproject.com/noun/eye-dropper/
+Creative Commons - Attribution (CC BY 3.0)
+Modified version included at share/html/NoAuth/images/eyedropper.png
diff --git a/devel/third-party/eyedropper.svg b/devel/third-party/eyedropper.svg
new file mode 100644
index 0000000..be28958
--- /dev/null
+++ b/devel/third-party/eyedropper.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<path d="M83.479,33.786l11.265-11.265c5.419-5.419,6.887-12.737,3.279-16.344l-4.199-4.2c-3.608-3.608-10.926-2.14-16.345,3.279
+ L66.215,16.521c-2.104-2.078-5.685-1.881-8.014,0.448l-4.972,4.972c-2.337,2.337-2.527,5.935-0.426,8.036l0.624,0.624L10.646,73.382
+ c-2.133,2.133-2.894,4.775-3.699,7.573C5.87,84.7,4.647,88.945,0,93.592l0.854,0.854l1.359,1.359l1.98,1.98l1.21,1.21L6.407,100
+ c4.648-4.648,8.894-5.87,12.638-6.947c2.798-0.805,5.44-1.565,7.573-3.698l42.781-42.782l0.623,0.623
+ c2.102,2.102,5.7,1.911,8.036-0.425l4.973-4.972C85.359,39.47,85.557,35.89,83.479,33.786z M24.404,87.141
+ c-1.034,1.035-2.845,1.557-5.137,2.216c-3.154,0.908-7.244,2.09-11.702,5.479l-2.401-2.4c3.39-4.458,4.571-8.548,5.479-11.703
+ c0.659-2.292,1.181-4.102,2.215-5.136l42.782-42.782l3.673,3.673l4.2,4.2l3.673,3.673L24.404,87.141z"/>
+</svg>
diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index be651cb..7acb5e2 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -80,7 +80,12 @@
<select id="section"></select>
</li>
<li>
- <div class="description"><&|/l&>Select a color for the section</&>:</div>
+ <div class="description">
+ <&|/l&>Select a color for the section</&>:
+ <div id="logo-picker-hint" style="display: none;">
+ <&|/l&>You can also click on the logo above to get colors!</&>
+ </div>
+ </div>
% if ($colors) {
<div class="primary-colors">
% for (@$colors) {
@@ -93,6 +98,7 @@
</div>
% }
<div id="color-picker"></div>
+ <canvas id="logo-color-picker" title="<&|/l&>Click to choose a color</&>"></canvas>
</li>
</ol>
</div>
@@ -183,7 +189,35 @@ jQuery(function($) {
change_color($(this).css('background-color'), $(this).css('color'));
});
-
+ // Setup the canvas color picker
+ $("#logo-theme-editor img").load(function() {
+ var logo = $(this);
+ var canvas = $("#logo-color-picker");
+ var el_canvas = canvas.get(0);
+
+ if (!el_canvas.getContext) return;
+
+ var context = el_canvas.getContext("2d");
+ el_canvas.width = logo.width();
+ el_canvas.height = logo.height();
+ context.drawImage(logo.get(0), 0, 0);
+
+ logo.hide().after(canvas);
+ canvas.show().click(function(ev) {
+ ev.preventDefault();
+ var R = 0,
+ G = 1,
+ B = 2,
+ A = 3;
+ var pixel = this.getContext("2d").getImageData(ev.offsetX, ev.offsetY, 1, 1).data;
+ // Farbtastic expects values in the range of 0..1
+ var rgba = $.makeArray(pixel).map(function(v,i) { return v / 255 });
+ var wheel = $.farbtastic("#color-picker");
+ wheel.setHSL( wheel.RGBToHSL( rgba.slice(R,A) ) );
+ // XXX TODO factor in the alpha channel too
+ });
+ $('#logo-picker-hint').show();
+ });
});
</script>
<%INIT>
diff --git a/share/html/NoAuth/css/base/theme-editor.css b/share/html/NoAuth/css/base/theme-editor.css
index a30d88b..4a17f26 100644
--- a/share/html/NoAuth/css/base/theme-editor.css
+++ b/share/html/NoAuth/css/base/theme-editor.css
@@ -109,3 +109,8 @@
width: 78%;
}
+#logo-color-picker {
+ display: none; /* unhidden by javascript */
+ cursor: url(<% RT->Config->Get("WebImagesURL") %>/eyedropper.png), crosshair;
+}
+
diff --git a/share/html/NoAuth/images/eyedropper.png b/share/html/NoAuth/images/eyedropper.png
new file mode 100644
index 0000000..7b0431a
Binary files /dev/null and b/share/html/NoAuth/images/eyedropper.png differ
-----------------------------------------------------------------------
More information about the Rt-commit
mailing list