[Rt-commit] rt branch, custom-css, created. rt-3.8.8-526-g5035464
Chia-liang Kao
clkao at bestpractical.com
Tue Aug 24 13:14:32 EDT 2010
The branch, custom-css has been created
at 50354648319ff369a97facd5000338dade8235c6 (commit)
- Log -----------------------------------------------------------------
commit baaefeefbe4338a4358dd92c617a3435bd7e9822
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Tue Aug 17 20:10:55 2010 +0800
basic dynamic css apply test.
diff --git a/share/html/Admin/Elements/SystemTabs b/share/html/Admin/Elements/SystemTabs
index cb51fb6..bbf4271 100755
--- a/share/html/Admin/Elements/SystemTabs
+++ b/share/html/Admin/Elements/SystemTabs
@@ -73,6 +73,9 @@
I => { title => loc('RT at a glance'),
path => 'Admin/Global/MyRT.html',
},
+ J => { title => loc('Theme'),
+ path => 'Admin/Global/Theme.html',
+ },
};
diff --git a/share/html/Admin/Elements/SystemTabs b/share/html/Admin/Global/Theme.html
old mode 100755
new mode 100644
similarity index 58%
copy from share/html/Admin/Elements/SystemTabs
copy to share/html/Admin/Global/Theme.html
index cb51fb6..7ec00aa
--- a/share/html/Admin/Elements/SystemTabs
+++ b/share/html/Admin/Global/Theme.html
@@ -45,55 +45,41 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
-<& /Admin/Elements/Tabs, subtabs => $tabs,
- current_tab => 'Admin/Global/',
- current_subtab => $current_tab,
- Title => $Title &>
+<& /Admin/Elements/Header, Title => loc("Theme") &>
+<& /Admin/Elements/SystemTabs,
+ current_tab => 'Admin/Global/Theme.html',
+ Title => loc("Theme") &>
+<& /Elements/ListActions, actions => \@results &>
-<%INIT>
- my $tabs = {
-
- A => { title => loc('Scrips'),
- path => 'Admin/Global/Scrips.html',
- },
- B => { title => loc('Templates'),
- path => 'Admin/Global/Templates.html',
- },
-
- F => { title => loc('Custom Fields'),
- path => 'Admin/Global/CustomFields/index.html',
- },
+<style type="text/css" media="screen" id="test">
+</style>
- G => { title => loc('Group Rights'),
- path => 'Admin/Global/GroupRights.html',
- },
- H => { title => loc('User Rights'),
- path => 'Admin/Global/UserRights.html',
- },
- I => { title => loc('RT at a glance'),
- path => 'Admin/Global/MyRT.html',
- },
-};
+Csutom CSS:
+<textarea rows=30 cols=60 id="user_css">
+body {background: orange}
- # Now let callbacks add their extra tabs
- $m->callback( %ARGS, tabs => $tabs );
+div#header h1 { color:black }
- if ($current_tab) {
- foreach my $tab (sort keys %{$tabs}) {
- if ($tabs->{$tab}->{'path'} eq $current_tab) {
- $tabs->{$tab}->{"subtabs"} = $subtabs || {};
- $tabs->{$tab}->{"current_subtab"} = $current_subtab;
- }
- }
- }
-</%INIT>
+input[type="reset"], input[type="submit"], input[class="button"] {background: green}
+
+</textarea>
+
+<input id="try" type="button" value="Try">
+
+<script type="text/javascript">
+jQuery(function($) {
+ $('#try').click(function() {
+ $("style#test").text($('#user_css').val());
+ })
-
+});
+</script>
+
+<%INIT>
+my @results;
+
+</%INIT>
<%ARGS>
-$id => undef
-$current_tab => undef
-$subtabs => undef
-$current_subtab => undef
-$Title => undef
+
</%ARGS>
commit dd2763e6f7b1056b47aaf0e2603aded2fec651b5
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Wed Aug 18 23:51:23 2010 +0800
primary color analyzer.
diff --git a/share/html/Admin/Global/Theme.html b/share/html/Admin/Global/Theme.html
index 7ec00aa..de5604c 100644
--- a/share/html/Admin/Global/Theme.html
+++ b/share/html/Admin/Global/Theme.html
@@ -54,6 +54,21 @@
<style type="text/css" media="screen" id="test">
</style>
+Upload Logo:
+<form method="POST" enctype="multipart/form-data">
+<input type="file" name="logo-upload" />
+<input type="submit">
+</form>
+
+% if ($colors) {
+Primary colors:
+% for (@$colors) {
+% my $fg = $_->{l} >= 0.6 ? 'black' : 'white';
+<span style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>; width: 5em">test l=<% $_->{l}%>></span>
+% }
+% }
+
+<div class="clear">
Csutom CSS:
<textarea rows=30 cols=60 id="user_css">
@@ -79,6 +94,51 @@ jQuery(function($) {
<%INIT>
my @results;
+use Imager;
+use Graphics::Color::RGB;
+
+my $img = Imager->new;
+if (my $file_hash = _UploadedFile( 'logo-upload' )) {
+ my ($id, $msg) = $RT::System->SetAttribute( Name => "UserLogo", Description => "User-provided logo", Content => \$file_hash->{LargeContent} );
+ $img->read(data => $file_hash->{LargeContent} );
+}
+else {
+ my $attr = $RT::System->FirstAttribute('UserLogo');
+ my $content = $attr->Content;
+ $img->read(data => $$content) or die "Cannot read: ", $img->errstr;
+}
+
+my $colors = $img ? analyze_img($img) : undef;
+use List::MoreUtils qw(uniq);
+
+sub analyze_img {
+ my $img = shift;
+ my $color;
+
+ for my $i (0..$img->getwidth-1) {
+ for my $j (0..$img->getheight-1) {
+ my @color = $img->getpixel(x=>$i, y=>$j)->rgba;
+ my $hsl = Graphics::Color::RGB->new( red => $color[0] / 255, green => $color[2] / 255, blue => $color[2] / 255, alpha => $color[3] / 255 )->to_hsl;
+ my ($h,$s,$l) = $hsl->as_array;
+ pop @color;
+ my $c = join(',', at color);
+ next if $l < 0.1;
+ $color->{$c} ||= { h => $h, s => $s, l => $l, cnt => 0, c => $c};
+ $color->{$c}->{cnt}++;
+ }
+ }
+
+ for (values %$color) {
+ $_->{rank} = $_->{s} * $_->{cnt};
+ }
+ my @top5 = (sort { $b->{rank} <=> $a->{rank} } values %$color)[0..4];
+ if ((scalar uniq map {$_->{rank}} @top5) == 1) {
+ warn "bad";
+ }
+ return \@top5;
+}
+
+
</%INIT>
<%ARGS>
commit abf51c322ef1b9eac46e8623e814e7222f9133cf
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Wed Aug 25 00:23:54 2010 +0800
store content-type and helper to show user logo.
diff --git a/share/html/Admin/Global/Theme.html b/share/html/Admin/Global/Theme.html
index de5604c..05b5852 100644
--- a/share/html/Admin/Global/Theme.html
+++ b/share/html/Admin/Global/Theme.html
@@ -55,6 +55,9 @@
</style>
Upload Logo:
+% if ($img) {
+<img src="/Helpers/UserLogo?<% time() %>" />
+% }
<form method="POST" enctype="multipart/form-data">
<input type="file" name="logo-upload" />
<input type="submit">
@@ -99,13 +102,22 @@ use Graphics::Color::RGB;
my $img = Imager->new;
if (my $file_hash = _UploadedFile( 'logo-upload' )) {
- my ($id, $msg) = $RT::System->SetAttribute( Name => "UserLogo", Description => "User-provided logo", Content => \$file_hash->{LargeContent} );
+ my ($id, $msg) = $RT::System->SetAttribute( Name => "UserLogo",
+ Description => "User-provided logo",
+ Content => {
+ type => $file_hash->{ContentType},
+ data => $file_hash->{LargeContent} } );
$img->read(data => $file_hash->{LargeContent} );
}
else {
my $attr = $RT::System->FirstAttribute('UserLogo');
my $content = $attr->Content;
- $img->read(data => $$content) or die "Cannot read: ", $img->errstr;
+ if (ref($content) eq 'HASH') {
+ $img->read(data => $content->{data}) or die "Cannot read: ", $img->errstr;
+ }
+ else {
+ $RT::System->DeleteAttribute('UserLogo');
+ }
}
my $colors = $img ? analyze_img($img) : undef;
diff --git a/share/html/Helpers/UserLogo b/share/html/Helpers/UserLogo
new file mode 100644
index 0000000..6cf1735
--- /dev/null
+++ b/share/html/Helpers/UserLogo
@@ -0,0 +1,11 @@
+<%INIT>
+RT::Interface::Web::StaticFileHeaders();
+if ( my $attr = $RT::System->FirstAttribute('UserLogo') ) {
+ my $content = $attr->Content;
+ $r->content_type($content->{type}) ;
+ $m->out( $content->{data} );
+ $m->abort;
+}
+
+
+</%INIT>
commit 2c8454e6c8db986143ecae83e93bbe33360d8379
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Wed Aug 25 01:07:30 2010 +0800
more style application and save
diff --git a/share/html/Admin/Global/Theme.html b/share/html/Admin/Global/Theme.html
index 05b5852..ad4a4c6 100644
--- a/share/html/Admin/Global/Theme.html
+++ b/share/html/Admin/Global/Theme.html
@@ -67,29 +67,61 @@ Upload Logo:
Primary colors:
% for (@$colors) {
% my $fg = $_->{l} >= 0.6 ? 'black' : 'white';
-<span 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=<% $_->{l}%>></span>
% }
% }
-
+<div class="clear">
+<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>
<div class="clear">
-Csutom CSS:
-<textarea rows=30 cols=60 id="user_css">
-body {background: orange}
-
-div#header h1 { color:black }
+Csutom CSS (Advanced):<br />
-input[type="reset"], input[type="submit"], input[class="button"] {background: green}
+<form method="POST">
-</textarea>
+<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 value="Save" type="submit">
+</form>
<script type="text/javascript">
+
+var section = 'main';
+
+var section_css_mapping = {
+ main: ['body',
+ 'div#body',
+ 'div#quickbar',
+ 'input[type="reset"], input[type="submit"], input[class="button"]']
+};
+
jQuery(function($) {
- $('#try').click(function() {
$("style#test").text($('#user_css').val());
- })
+ $('#try').click(function() {
+ $("style#test").text($('#user_css').val());
+ });
+
+
+ $('span.color-template').click(function() {
+ var bg = $(this).css('background-color');
+ var fg = $(this).css('color');
+ var applying = section_css_mapping[section];
+ var css = $('#user_css').val();
+ if (applying) {
+ for (var name in applying) {
+ var rule = new RegExp('\\b'+applying[name]+'\\s*{.*?}');
+ css = css.replace(rule, applying[name]+' { background: '+bg+'; color: '+fg+ '} ');
+ }
+ }
+ $('#user_css').val(css);
+ $("style#test").text(css);
+
+ });
+
});
</script>
@@ -120,6 +152,33 @@ else {
}
}
+if ($user_css) {
+ if ($ARGS{'reset_css'}) {
+ $RT::System->DeleteAttribute('UserCSS');
+ undef $user_css;
+ }
+ else {
+ my ($id, $msg) = $RT::System->SetAttribute( Name => "UserCSS",
+ Description => "User-provided css",
+ Content => $user_css );
+ }
+}
+
+if (!$user_css) {
+ my $attr = $RT::System->FirstAttribute('UserCSS');
+ $user_css = $attr ? $attr->Content : 'body {}
+
+div#body {}
+
+div#header h1 { }
+
+div#quickbar {}
+
+input[type="reset"], input[type="submit"], input[class="button"] {}
+';
+
+}
+
my $colors = $img ? analyze_img($img) : undef;
use List::MoreUtils qw(uniq);
@@ -153,5 +212,5 @@ sub analyze_img {
</%INIT>
<%ARGS>
-
+$user_css => ''
</%ARGS>
diff --git a/share/html/Elements/Header b/share/html/Elements/Header
index 9a9f132..ed1b95f 100755
--- a/share/html/Elements/Header
+++ b/share/html/Elements/Header
@@ -75,6 +75,12 @@
% if ($m->comp_exists($stylesheet_plugin) ) {
<& $stylesheet_plugin &>
% }
+% if (my $attr = $RT::System->FirstAttribute('UserCSS')) {
+<style type="text/css" media="screen">
+<% $attr->Content %>
+</style>
+% }
+
% $m->callback( %ARGS, CallbackName => 'Head' );
</head>
commit 50354648319ff369a97facd5000338dade8235c6
Author: Chia-liang Kao <clkao at bestpractical.com>
Date: Wed Aug 25 01:14:06 2010 +0800
sections
diff --git a/share/html/Admin/Global/Theme.html b/share/html/Admin/Global/Theme.html
index ad4a4c6..42cf870 100644
--- a/share/html/Admin/Global/Theme.html
+++ b/share/html/Admin/Global/Theme.html
@@ -63,6 +63,12 @@ Upload Logo:
<input type="submit">
</form>
+<div class="pick-section">
+<select id="section">
+</select>
+</div>
+
+<div class="pick-color">
% if ($colors) {
Primary colors:
% for (@$colors) {
@@ -75,6 +81,8 @@ Primary colors:
<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>
+</div>
+
<div class="clear">
Csutom CSS (Advanced):<br />
@@ -90,16 +98,19 @@ Csutom CSS (Advanced):<br />
<script type="text/javascript">
-var section = 'main';
-
var section_css_mapping = {
- main: ['body',
- 'div#body',
- 'div#quickbar',
- 'input[type="reset"], input[type="submit"], input[class="button"]']
+ default: ['body',
+ 'input[type="reset"], input[type="submit"], input[class="button"]'],
+ quickbar: ['div#quickbar'],
+ mainbody: ['div#body']
};
jQuery(function($) {
+
+ for (var section in section_css_mapping) {
+ $('select#section').append($("<option/>").attr('value', section).text(section));
+ }
+
$("style#test").text($('#user_css').val());
$('#try').click(function() {
$("style#test").text($('#user_css').val());
@@ -109,6 +120,8 @@ jQuery(function($) {
$('span.color-template').click(function() {
var bg = $(this).css('background-color');
var fg = $(this).css('color');
+ var section = $('select#section').val();
+
var applying = section_css_mapping[section];
var css = $('#user_css').val();
if (applying) {
-----------------------------------------------------------------------
More information about the Rt-commit
mailing list