[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