[Rt-commit] rt branch, 4.2/logo-color-picker, created. rt-4.0.2-190-g8f9b376

Thomas Sibley trs at bestpractical.com
Wed Mar 28 13:18:11 EDT 2012


The branch, 4.2/logo-color-picker has been created
        at  8f9b3769d159196dc9e08edec04d54e0a128c55b (commit)

- Log -----------------------------------------------------------------
commit 8f9b3769d159196dc9e08edec04d54e0a128c55b
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