[Rt-commit] rt branch, 3.9-trunk, updated. rt-3.8.8-720-ge4f900a
Thomas Sibley
trs at bestpractical.com
Tue Sep 7 17:15:40 EDT 2010
The branch, 3.9-trunk has been updated
via e4f900a3659edcba5d7e7f62d130f23c4c61818d (commit)
from a2f5c421711acf53426c23cc763d87af6976eb4b (commit)
Summary of changes:
share/html/Admin/Global/Theme.html | 128 ++++++++++++++-------------
share/html/NoAuth/css/base/main.css | 1 +
share/html/NoAuth/css/base/theme-editor.css | 60 +++++++++++++
3 files changed, 128 insertions(+), 61 deletions(-)
create mode 100644 share/html/NoAuth/css/base/theme-editor.css
- Log -----------------------------------------------------------------
commit e4f900a3659edcba5d7e7f62d130f23c4c61818d
Author: Thomas Sibley <trs at bestpractical.com>
Date: Tue Sep 7 17:13:23 2010 -0400
Tidy up and re-layout the new branding/theme page
Hopefully these changes make it more user-friendly and easier to see
what's going on. There are still a few usability changes we need to
make, including a logo delete button and handling GIFs more gracefully.
We should also improve the selectors we use to account for links not
changing with text color.
diff --git a/share/html/Admin/Global/Theme.html b/share/html/Admin/Global/Theme.html
index 48f0a03..53d3e4b 100644
--- a/share/html/Admin/Global/Theme.html
+++ b/share/html/Admin/Global/Theme.html
@@ -51,73 +51,68 @@
Title => loc("Theme") &>
<& /Elements/ListActions, actions => \@results &>
-
<script type="text/javascript" src="/NoAuth/js/farbtastic.js"></script>
<link rel="stylesheet" href="/NoAuth/css/farbtastic.css" type="text/css" />
-<style type="text/css" media="screen" id="test">
-</style>
+<style type="text/css" media="screen" id="test"></style>
-<h1>Logo</h3>
-<div class="upload-logo">
-Upload Logo:
+<div id="simple-customize">
+<div id="upload-logo">
+ <h2>Logo</h2>
% if ($img) {
-<img src="/Helpers/UserLogo?<% time() %>" />
+ <img src="/Helpers/UserLogo?<% time() %>" />
% }
-<form method="POST" enctype="multipart/form-data">
-<input type="file" name="logo-upload" />
-<input type="submit">
-</form>
-</div>
-
-<h1>Customize Theme</h3>
-<div class="pick-section" style="float: left; width: 40%">
-<span class="description">Select a section</span>
-<select id="section">
-</select>
+ <form method="POST" enctype="multipart/form-data">
+ <label for="logo-upload"><&|/l&>Upload a new logo</&>:</label>
+ <input type="file" name="logo-upload" id="logo-upload" /><br />
+ <input type="submit" value="Upload" />
+ </form>
</div>
-<div class="pick-color" style="float: left; width: 50%">
-<span class="description">click on the color to apply to the selected section</span>
-<div class="clear"></div>
+<div id="customize-theme">
+ <h2>Customize the RT theme</h2>
+ <ol>
+ <li>
+ <label for="section"><&|/l&>Select a section</&>:</label>
+ <select id="section"></select>
+ </li>
+ <li>
+ <div class="description"><&|/l&>Select a color for the section</&>:</div>
% if ($colors) {
-Primary colors:<br/>
+<div class="primary-colors">
% for (@$colors) {
-% my $fg = $_->{l} >= 0.6 ? 'black' : 'white';
-<span class="color-template" style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>; width: 5em">test l=<% int(100*$_->{l})/100%></span>
+% my $fg = $_->{l} >= $text_threshold ? 'black' : 'white';
+<button type="button" class="color-template"
+ style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>;">
+ <&|/l&>Text</&>
+</button>
% }
+</div>
% }
-<div class="clear">
-<div id="picker"></div>
+ <div id="color-picker"></div>
+ </li>
+ </ol>
</div>
-
-
</div>
-<div class="clear"></div>
-
-<h1>Custom CSS (Advanced)</h1>
-<div class="custom-css">
-
-
-<form method="POST">
-
-<textarea rows=30 cols=60 id="user_css" name="user_css"><% $user_css %></textarea>
-
-<input id="try" type="button" value="Try">
-<input id="reset" type="reset" value="Reset" type="submit">
-<input name="reset_css" value="Reset to default RT Theme" type="submit">
-<input value="Save" type="submit">
-</form>
+<div id="custom-css">
+ <h2>Custom CSS (Advanced)</h2>
+
+ <form method="POST">
+ <textarea rows=20 id="user_css" name="user_css"><% $user_css %></textarea><br />
+ <input id="try" type="button" class="button" value="Try" />
+ <input id="reset" type="reset" value="Reset" type="submit" />
+ <input name="reset_css" value="Reset to default RT Theme" type="submit" />
+ <input value="Save" type="submit" />
+ </form>
</div>
-<script type="text/javascript">
+<script type="text/javascript">
var section_css_mapping = {
- 'default': ['body',
- 'input[type="reset"], input[type="submit"], input[class="button"]'],
- 'quickbar': ['div#quickbar'],
- 'mainbody': ['div#body'],
- 'navigation': ['div#nav'],
- 'page-menu': ['div#page-navigation ul#page-menu'],
+ 'Page': ['body', 'input[type="reset"], input[type="submit"], input[class="button"]'],
+ 'Header': ['div#quickbar'],
+ 'Page content': ['div#body'],
+ 'Navigation': ['div#nav'],
+ 'Page menu': ['div#page-navigation ul#page-menu'],
};
jQuery(function($) {
@@ -137,7 +132,6 @@ jQuery(function($) {
}, 1000);
});
-
function change_color(bg, fg) {
var section = $('select#section').val();
@@ -146,16 +140,24 @@ jQuery(function($) {
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+ '} ');
+ var newcss = "background: " + bg;
+
+ if (applying[name] != "body")
+ newcss += "; color: " + fg;
+
+ if (applying[name].match(/quickbar/))
+ newcss += "; border: none;"
+
+ css = css.replace(rule, applying[name]+" { "+newcss+" } ");
}
}
$('#user_css').val(css);
$("style#test").text(css);
}
- $('#picker').farbtastic(function(color){ change_color(color, this.hsl[2] > 0.5 ? '#000' : '#fff') });
+ $('#color-picker').farbtastic(function(color){ change_color(color, this.hsl[2] > <% $text_threshold %> ? '#000' : '#fff') });
- $('span.color-template').click(function() {
+ $('button.color-template').click(function() {
change_color($(this).css('background-color'), $(this).css('color'));
});
@@ -164,6 +166,7 @@ jQuery(function($) {
</script>
<%INIT>
+my $text_threshold = 0.6;
my @results;
my $has_color_analyzer =
@@ -204,19 +207,24 @@ if ($user_css) {
if (!$user_css) {
my $attr = $RT::System->FirstAttribute('UserCSS');
- $user_css = $attr ? $attr->Content : 'body {}
+ $user_css = $attr ? $attr->Content : '/* Page */
+body {}
+input[type="reset"], input[type="submit"], input[class="button"] {}
+/* Page content */
div#body {}
-div#header h1 { }
+/* Page title */
+div#header h1 {}
+/* Header */
div#quickbar {}
+/* Navigation */
div#nav {}
+/* Page menu */
div#page-navigation ul#page-menu {}
-
-input[type="reset"], input[type="submit"], input[class="button"] {}
';
}
@@ -245,14 +253,12 @@ sub analyze_img {
for (values %$color) {
$_->{rank} = $_->{s} * $_->{cnt};
}
- my @top5 = (sort { $b->{rank} <=> $a->{rank} } values %$color)[0..4];
+ my @top5 = (sort { $b->{rank} <=> $a->{rank} } values %$color)[0..5];
if ((scalar uniq map {$_->{rank}} @top5) == 1) {
warn "bad";
}
return \@top5;
}
-
-
</%INIT>
<%ARGS>
$user_css => ''
diff --git a/share/html/NoAuth/css/base/main.css b/share/html/NoAuth/css/base/main.css
index 76a4b15..ec61771 100644
--- a/share/html/NoAuth/css/base/main.css
+++ b/share/html/NoAuth/css/base/main.css
@@ -51,6 +51,7 @@
@import "misc.css";
@import "ticket-form.css";
@import "rights-editor.css";
+ at import "theme-editor.css";
% $m->callback(CallbackName => 'End');
diff --git a/share/html/NoAuth/css/base/theme-editor.css b/share/html/NoAuth/css/base/theme-editor.css
new file mode 100644
index 0000000..d8a0552
--- /dev/null
+++ b/share/html/NoAuth/css/base/theme-editor.css
@@ -0,0 +1,60 @@
+#upload-logo h2, #pick-section h2 {
+ margin: 0 0 0.5em 0;
+}
+
+#custom-css h2 {
+ margin: 0;
+}
+
+#upload-logo label {
+ font-weight: bold;
+}
+
+#simple-customize {
+ float: left;
+ width: 48%;
+}
+
+#custom-css {
+ float: right;
+ width: 48%;
+}
+
+#custom-css textarea {
+ width: 100%;
+}
+
+#customize-theme ol li {
+ font-size: 1.2em;
+ font-weight: bold;
+}
+
+#customize-theme ol li .description,
+#customize-theme ol li label
+{
+ font-weight: normal;
+}
+
+#customize-theme #section {
+ font-size: 1em;
+}
+
+.color-template {
+ height: 2em;
+ margin: 0 0 0.5em 0;
+}
+
+.primary-colors, #color-picker {
+ margin-top: 0.5em;
+}
+
+.primary-colors {
+ float: left;
+ width: 20%;
+}
+
+#color-picker {
+ float: right;
+ width: 78%;
+}
+
-----------------------------------------------------------------------
More information about the Rt-commit
mailing list