]>
Commit | Line | Data |
---|---|---|
84fb5b46 MKG |
1 | %# BEGIN BPS TAGGED BLOCK {{{ |
2 | %# | |
3 | %# COPYRIGHT: | |
4 | %# | |
403d7b0b | 5 | %# This software is Copyright (c) 1996-2013 Best Practical Solutions, LLC |
84fb5b46 MKG |
6 | %# <sales@bestpractical.com> |
7 | %# | |
8 | %# (Except where explicitly superseded by other copyright notices) | |
9 | %# | |
10 | %# | |
11 | %# LICENSE: | |
12 | %# | |
13 | %# This work is made available to you under the terms of Version 2 of | |
14 | %# the GNU General Public License. A copy of that license should have | |
15 | %# been provided with this software, but in any event can be snarfed | |
16 | %# from www.gnu.org. | |
17 | %# | |
18 | %# This work is distributed in the hope that it will be useful, but | |
19 | %# WITHOUT ANY WARRANTY; without even the implied warranty of | |
20 | %# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | |
21 | %# General Public License for more details. | |
22 | %# | |
23 | %# You should have received a copy of the GNU General Public License | |
24 | %# along with this program; if not, write to the Free Software | |
25 | %# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA | |
26 | %# 02110-1301 or visit their web page on the internet at | |
27 | %# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html. | |
28 | %# | |
29 | %# | |
30 | %# CONTRIBUTION SUBMISSION POLICY: | |
31 | %# | |
32 | %# (The following paragraph is not intended to limit the rights granted | |
33 | %# to you to modify and distribute this software under the terms of | |
34 | %# the GNU General Public License and is only of importance to you if | |
35 | %# you choose to contribute your changes and enhancements to the | |
36 | %# community by submitting them to Best Practical Solutions, LLC.) | |
37 | %# | |
38 | %# By intentionally submitting any modifications, corrections or | |
39 | %# derivatives to this work, or any other work intended for use with | |
40 | %# Request Tracker, to Best Practical Solutions, LLC, you confirm that | |
41 | %# you are the copyright holder for those contributions and you grant | |
42 | %# Best Practical Solutions, LLC a nonexclusive, worldwide, irrevocable, | |
43 | %# royalty-free, perpetual, license to use, copy, create derivative | |
44 | %# works based on those contributions, and sublicense and distribute | |
45 | %# those contributions and any derivatives thereof. | |
46 | %# | |
47 | %# END BPS TAGGED BLOCK }}} | |
48 | <& /Admin/Elements/Header, | |
49 | Title => loc("Theme"), | |
50 | &> | |
51 | <& /Elements/Tabs &> | |
52 | <& /Elements/ListActions, actions => \@results &> | |
53 | ||
af59614d | 54 | <script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/static/js/farbtastic.js"></script> |
84fb5b46 MKG |
55 | |
56 | <div id="simple-customize"> | |
57 | <div id="upload-logo"> | |
58 | <h2>Logo</h2> | |
59 | <& /Elements/Logo, id => 'logo-theme-editor', ShowName => 0 &> | |
60 | <form method="POST" enctype="multipart/form-data"> | |
61 | <label for="logo-upload"><&|/l&>Upload a new logo</&>:</label> | |
62 | <input type="file" name="logo-upload" id="logo-upload" /><br /> | |
63 | <div class="gd-support"> | |
64 | % if (%gd_can) { | |
65 | <&|/l, $valid_image_types &>Your system supports automatic color suggestions for: [_1]</&> | |
66 | % } else { | |
67 | <&|/l&>GD is disabled or not installed. You can upload an image, but you won't get automatic color suggestions.</&> | |
68 | % } | |
69 | </div> | |
70 | <input name="reset_logo" value="Reset to default RT Logo" type="submit" /> | |
71 | <input type="submit" value="Upload" /> | |
72 | </form> | |
73 | </div> | |
74 | ||
75 | <div id="customize-theme"> | |
76 | <h2>Customize the RT theme</h2> | |
77 | <ol> | |
78 | <li> | |
79 | <label for="section"><&|/l&>Select a section</&>:</label> | |
80 | <select id="section"></select> | |
81 | </li> | |
82 | <li> | |
af59614d MKG |
83 | <div class="description"> |
84 | <&|/l&>Select a color for the section</&>: | |
85 | <div id="logo-picker-hint" style="display: none;"> | |
86 | <&|/l&>You can also click on the logo above to get colors!</&> | |
87 | </div> | |
88 | </div> | |
84fb5b46 MKG |
89 | % if ($colors) { |
90 | <div class="primary-colors"> | |
91 | % for (@$colors) { | |
92 | % my $fg = $_->{l} >= $text_threshold ? 'black' : 'white'; | |
93 | <button type="button" class="color-template" | |
94 | style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>;"> | |
95 | <&|/l&>Text</&> | |
96 | </button> | |
97 | % } | |
98 | </div> | |
99 | % } | |
100 | <div id="color-picker"></div> | |
af59614d | 101 | <canvas id="logo-color-picker" title="<&|/l&>Click to choose a color</&>"></canvas> |
84fb5b46 MKG |
102 | </li> |
103 | </ol> | |
104 | </div> | |
105 | </div> | |
106 | ||
107 | <div id="custom-css"> | |
108 | <h2>Custom CSS (Advanced)</h2> | |
af59614d | 109 | |
84fb5b46 MKG |
110 | <form method="POST"> |
111 | <textarea rows=20 id="user_css" name="user_css" wrap="off"><% $user_css %></textarea><br /> | |
112 | <input id="try" type="button" class="button" value="Try" /> | |
113 | <input id="reset" type="reset" value="Reset" type="submit" /> | |
114 | <input name="reset_css" value="Reset to default RT Theme" type="submit" /> | |
115 | <input value="Save" type="submit" /> | |
116 | </form> | |
117 | </div> | |
118 | ||
119 | <%ONCE> | |
120 | my @sections = ( | |
af59614d MKG |
121 | ['Page' => ['body', 'div#body']], |
122 | ['Menu bar' => ['div#quickbar', '#main-navigation #app-nav.sf-shadow > li, #main-navigation #app-nav.sf-shadow > li > a, #prefs-menu > li, #prefs-menu > li > a, #logo .rtname']], | |
123 | ['Title bar' => ['div#header']], | |
84fb5b46 MKG |
124 | ['Page title' => ['div#header h1']], |
125 | ['Page content' => ['div#body']], | |
126 | ['Buttons' => ['input[type="reset"], input[type="submit"], input[class="button"]']], | |
127 | ['Button hover' => ['input[type="reset"]:hover, input[type="submit"]:hover, input[class="button"]:hover']], | |
128 | ); | |
129 | </%ONCE> | |
130 | <script type="text/javascript"> | |
131 | var section_css_mapping = <% JSON(\@sections) |n%>; | |
132 | ||
133 | jQuery(function($) { | |
134 | ||
135 | jQuery.each(section_css_mapping, function(i,v){ | |
136 | $('select#section').append($("<option/>") | |
137 | .attr('value', v[0]) | |
138 | .text(v[0])); | |
139 | }); | |
140 | ||
141 | $("style#sitecss").text($('#user_css').val()); | |
142 | $('#try').click(function() { | |
143 | $("style#sitecss").text($('#user_css').val()); | |
144 | }); | |
145 | ||
146 | $('#reset').click(function() { | |
147 | setTimeout(function() { | |
148 | $("style#sitecss").text($('#user_css').val()); | |
149 | }, 1000); | |
150 | }); | |
151 | ||
152 | function change_color(bg, fg) { | |
153 | var section = $('select#section').val(); | |
154 | ||
155 | var applying = jQuery.grep(section_css_mapping, function(a){ return a[0] == section })[0][1]; | |
156 | var css = $('#user_css').val(); | |
157 | if (applying) { | |
158 | var specials = new RegExp("([.*+?|()\\[\\]{}\\\\])", "g"); | |
159 | for (var name in applying) { | |
160 | var selector = (applying[name]).replace(specials, "\\$1"); | |
161 | var rule = new RegExp('^'+selector+'\\s*\{.*?\}', "m"); | |
162 | var newcss = "background: " + bg; | |
163 | ||
164 | /* Don't set the text color on <body> as it affects too much */ | |
165 | if (applying[name] != "body") | |
166 | newcss += "; color: " + fg; | |
167 | ||
168 | /* Kill the border on the quickbar if we're styling it */ | |
169 | if (applying[name].match(/quickbar/)) | |
170 | newcss += "; border: none;" | |
171 | ||
172 | /* Page title's text color is the selected color */ | |
af59614d | 173 | if (applying[name].match(/h1/)) |
84fb5b46 MKG |
174 | newcss = "color: " + bg; |
175 | ||
176 | /* Nav doesn't need a background, but it wants text color */ | |
177 | if (applying[name].match(/#main-navigation/)) | |
178 | newcss = "color: " + fg; | |
179 | ||
180 | css = css.replace(rule, applying[name]+" { "+newcss+" }"); | |
181 | } | |
182 | } | |
183 | $('#user_css').val(css); | |
184 | $("style#sitecss").text(css); | |
185 | } | |
186 | ||
187 | $('#color-picker').farbtastic(function(color){ change_color(color, this.hsl[2] > <% $text_threshold %> ? '#000' : '#fff') }); | |
188 | ||
189 | $('button.color-template').click(function() { | |
190 | change_color($(this).css('background-color'), $(this).css('color')); | |
191 | }); | |
192 | ||
af59614d MKG |
193 | // Setup the canvas color picker |
194 | $("#logo-theme-editor img").load(function() { | |
195 | var logo = $(this); | |
196 | var canvas = $("#logo-color-picker"); | |
197 | var el_canvas = canvas.get(0); | |
198 | ||
199 | if (!el_canvas.getContext) return; | |
200 | ||
201 | var context = el_canvas.getContext("2d"); | |
202 | el_canvas.width = logo.width(); | |
203 | el_canvas.height = logo.height(); | |
204 | context.drawImage(logo.get(0), 0, 0); | |
205 | ||
206 | logo.hide().after(canvas); | |
207 | canvas.show().click(function(ev) { | |
208 | ev.preventDefault(); | |
209 | var R = 0, | |
210 | G = 1, | |
211 | B = 2, | |
212 | A = 3; | |
213 | var pixel = this.getContext("2d").getImageData(ev.offsetX, ev.offsetY, 1, 1).data; | |
214 | // Farbtastic expects values in the range of 0..1 | |
215 | var rgba = $.makeArray(pixel).map(function(v,i) { return v / 255 }); | |
216 | var wheel = $.farbtastic("#color-picker"); | |
217 | wheel.setHSL( wheel.RGBToHSL( rgba.slice(R,A) ) ); | |
218 | // XXX TODO factor in the alpha channel too | |
219 | }); | |
220 | $('#logo-picker-hint').show(); | |
221 | }); | |
84fb5b46 MKG |
222 | }); |
223 | </script> | |
224 | <%INIT> | |
225 | unless ($session{'CurrentUser'}->HasRight( Object=> RT->System, Right => 'SuperUser')) { | |
226 | Abort(loc('This feature is only available to system administrators.')); | |
227 | } | |
228 | ||
229 | use Digest::MD5 'md5_hex'; | |
230 | ||
231 | my $text_threshold = 0.6; | |
232 | my @results; | |
233 | my $imgdata; | |
234 | ||
235 | if (my $file_hash = _UploadedFile( 'logo-upload' )) { | |
236 | my ($id, $msg) = RT->System->SetAttribute( Name => "UserLogo", | |
237 | Description => "User-provided logo", | |
238 | Content => { | |
239 | type => $file_hash->{ContentType}, | |
240 | data => $file_hash->{LargeContent}, | |
241 | hash => md5_hex($file_hash->{LargeContent}), | |
242 | } ); | |
243 | push @results, loc("Unable to set UserLogo: [_1]", $msg) unless $id; | |
244 | ||
245 | $imgdata = $file_hash->{LargeContent}; | |
246 | } | |
247 | elsif ($ARGS{'reset_logo'}) { | |
248 | RT->System->DeleteAttribute('UserLogo'); | |
249 | } | |
250 | else { | |
251 | if (my $attr = RT->System->FirstAttribute('UserLogo')) { | |
252 | my $content = $attr->Content; | |
253 | if (ref($content) eq 'HASH') { | |
254 | $imgdata = $content->{data}; | |
255 | } | |
256 | else { | |
257 | RT->System->DeleteAttribute('UserLogo'); | |
258 | } | |
259 | } | |
260 | } | |
261 | ||
262 | if ($user_css) { | |
263 | if ($ARGS{'reset_css'}) { | |
264 | RT->System->DeleteAttribute('UserCSS'); | |
265 | undef $user_css; | |
266 | } | |
267 | else { | |
268 | my ($id, $msg) = RT->System->SetAttribute( Name => "UserCSS", | |
269 | Description => "User-provided css", | |
270 | Content => $user_css ); | |
271 | push @results, loc("Unable to set UserCSS: [_1]", $msg) unless $id; | |
272 | } | |
273 | } | |
274 | ||
275 | if (!$user_css) { | |
276 | my $attr = RT->System->FirstAttribute('UserCSS'); | |
277 | $user_css = $attr ? $attr->Content : join( | |
278 | "\n\n" => map { | |
279 | join "\n" => "/* ". $_->[0] ." */", | |
280 | map { "$_ {}" } @{$_->[1]} | |
281 | } @sections | |
282 | ); | |
283 | } | |
284 | ||
285 | # XXX: move this to some other modules | |
286 | ||
287 | use List::MoreUtils qw(uniq); | |
288 | ||
289 | my $has_color_analyzer = eval { require Convert::Color; 1 }; | |
290 | my $colors; | |
291 | my %gd_can; | |
292 | my $valid_image_types; | |
293 | ||
294 | if (not RT->Config->Get('DisableGD') and $has_color_analyzer) { | |
295 | require GD; | |
296 | ||
297 | # Always find out what GD can read... | |
298 | for my $type (qw(Png Jpeg Gif)) { | |
299 | $gd_can{$type}++ if GD::Image->can("newFrom${type}Data"); | |
300 | } | |
301 | $valid_image_types = join(", ", map { uc } sort { lc $a cmp lc $b } keys %gd_can); | |
302 | ||
303 | # ...but only analyze the image if we have data | |
304 | if ($imgdata) { | |
305 | if ( my $img = GD::Image->new($imgdata) ) { | |
306 | $colors = analyze_img($img); | |
307 | } | |
308 | else { | |
309 | # This has to be one damn long line because the loc() needs to be | |
310 | # source parsed correctly. | |
311 | push @results, loc("Automatically suggested theme colors aren't available for your image. This might be because you uploaded an image type that your installed version of GD doesn't support. Supported types are: [_1]. You can recompile libgd and GD.pm to include support for other image types.", $valid_image_types); | |
312 | } | |
313 | } | |
314 | } | |
315 | ||
316 | sub analyze_img { | |
317 | my $img = shift; | |
318 | my $color; | |
319 | ||
320 | for my $i (0..$img->width-1) { | |
321 | for my $j (0..$img->height-1) { | |
322 | my @color = $img->rgb( $img->getPixel($i,$j) ); | |
323 | my $hsl = Convert::Color->new('rgb:'.join(',',map { $_ / 255 } @color))->convert_to('hsl'); | |
324 | my $c = join(',',@color); | |
325 | next if $hsl->lightness < 0.1; | |
326 | $color->{$c} ||= { h => $hsl->hue, s => $hsl->saturation, l => $hsl->lightness, cnt => 0, c => $c}; | |
327 | $color->{$c}->{cnt}++; | |
328 | } | |
329 | } | |
330 | ||
331 | for (values %$color) { | |
332 | $_->{rank} = $_->{s} * $_->{cnt}; | |
333 | } | |
334 | my @top5 = grep { defined and $_->{'l'} and $_->{'c'} } | |
335 | (sort { $b->{rank} <=> $a->{rank} } values %$color)[0..5]; | |
336 | if ((scalar uniq map {$_->{rank}} @top5) == 1) { | |
337 | warn "bad"; | |
338 | } | |
339 | return \@top5; | |
340 | } | |
341 | </%INIT> | |
342 | <%ARGS> | |
343 | $user_css => '' | |
344 | </%ARGS> |