[Rt-commit] rt branch, 5.0/update-theme-editor, created. rt-5.0.0beta1-6-g3fd34c2e95
Craig Kaiser
craig at bestpractical.com
Wed Jun 17 12:06:23 EDT 2020
The branch, 5.0/update-theme-editor has been created
at 3fd34c2e952c1cdb0650916f21e5209b6cd9ec47 (commit)
- Log -----------------------------------------------------------------
commit 0254af0f95e17d26b93021e36cbba72f4739c596
Author: craig kaiser <craig at bestpractical.com>
Date: Tue Jun 16 08:32:52 2020 -0400
Use padding in place of margin for spacing between page header
Using margin-top results in strange coloring when editing the div#header
div's background color.
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index 4c2993c602..ff055b2fbc 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -98,7 +98,7 @@ div#quickbar {
}
div#header {
- margin-top: 1.1em;
+ padding-top: 1.1em;
border-bottom-color: #547CCC;
border-bottom-width: 2px;
border-bottom-style: solid;
commit 8c694e8b234ab418be5b0b94c9f3c5a46f68739d
Author: craig kaiser <craig at bestpractical.com>
Date: Tue Jun 16 10:10:30 2020 -0400
Add class for theme editor to use when setting 'Page content' CSS
Without this class Bootstrap cards will not have their background color
changed.
diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index 486cc5ec15..d09549bed9 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -128,7 +128,7 @@ my @sections = (
['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']],
['Title bar' => ['div#header']],
['Page title' => ['div#header h1']],
- ['Page content' => ['div#body']],
+ ['Page content' => ['div#body', '.body-content-class']],
['Buttons' => ['input[type="reset"], input[type="submit"], input[class="button"]']],
['Button hover' => ['input[type="reset"]:hover, input[type="submit"]:hover, input[class="button"]:hover']],
['Search results' => ['table.collection-as-table th.collection-as-table a']],
@@ -147,6 +147,7 @@ jQuery(function($) {
.attr('value', v[0])
.text(v[0]));
});
+ $('select#sectionoption[value="'+section_css_mapping[0][0]+'"]').attr("selected",true);
function update_sitecss(text) {
if (!text)
diff --git a/share/html/Widgets/TitleBoxStart b/share/html/Widgets/TitleBoxStart
index b6808d8279..7d8d1ab6a7 100644
--- a/share/html/Widgets/TitleBoxStart
+++ b/share/html/Widgets/TitleBoxStart
@@ -45,7 +45,7 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
-<div class="titlebox card<% $class ? " $class " : '' %><% $rolledup ? " rolled-up" : ""%>" id="<% $id %>"\
+<div class="titlebox body-content-class card<% $class ? " $class " : '' %><% $rolledup ? " rolled-up" : ""%>" id="<% $id %>"\
% for my $key (keys %$data) {
data-<% $key %>="<% $data->{$key} %>"\
% }
diff --git a/share/static/css/elevator-light/layout.css b/share/static/css/elevator-light/layout.css
index ff055b2fbc..51c22d93b4 100644
--- a/share/static/css/elevator-light/layout.css
+++ b/share/static/css/elevator-light/layout.css
@@ -4,6 +4,10 @@ html {
font-size: 13px;
}
+body-content-class {
+ /* This class is used for the theme editor tool */
+}
+
div#body {
padding: 0 20px;
margin-right: 0;
commit c49956d360e58344ae71ba4eb956cef70521ac3c
Author: craig kaiser <craig at bestpractical.com>
Date: Tue Jun 16 10:25:41 2020 -0400
Add default value for theme section select input
diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index d09549bed9..aec484130c 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -147,7 +147,9 @@ jQuery(function($) {
.attr('value', v[0])
.text(v[0]));
});
- $('select#sectionoption[value="'+section_css_mapping[0][0]+'"]').attr("selected",true);
+ // Refresh selectpicker so we have a default value
+ $('select#section').val(section_css_mapping[0][0]);
+ $('.selectpicker').selectpicker('refresh')
function update_sitecss(text) {
if (!text)
commit 9fe969e016ef58cf465ea3c8b1f0ab890e52e0c7
Author: craig kaiser <craig at bestpractical.com>
Date: Wed Jun 17 08:59:25 2020 -0400
Use Bootstrap4 styles for Theme.html
diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index aec484130c..3bacf7fb54 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -53,73 +53,85 @@
<script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/static/js/farbtastic.js"></script>
-<div id="simple-customize">
-<div id="upload-logo">
- <h2>Logo</h2>
- <& /Elements/Logo, id => 'logo-theme-editor', ShowName => 0 &>
- <form method="POST" enctype="multipart/form-data">
- <div class="form-row">
- <div class="col-auto">
- <div class="custom-file">
- <input type="file" name="logo-upload" class="custom-file-input" id="logo-upload" />
- <label class="custom-file-label" for="logo-upload"><&|/l&>Upload a new logo</&></label>
- </div>
+<div class="row">
+
+ <div id="simple-customize" class="col-6">
+ <div id="upload-logo">
+ <h2>Logo</h2>
+ <& /Elements/Logo, id => 'logo-theme-editor', ShowName => 0 &>
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" checked="checked" class="custom-control-input" id="logo-size" value=1 onchange="setLogoSize()">
+ <label class="custom-control-label" for="logo-size">Shrink logo</label>
</div>
- </div>
- <div class="gd-support">
+
+ <form method="POST" enctype="multipart/form-data">
+ <div class="form-row">
+ <div class="col-auto">
+ <div class="custom-file">
+ <input type="file" name="logo-upload" class="custom-file-input" id="logo-upload" />
+ <label class="custom-file-label" for="logo-upload"><&|/l&>Upload a new logo</&></label>
+ </div>
+ </div>
+ </div>
+ <div class="gd-support">
% if ($valid_image_types) {
- <&|/l, $valid_image_types &>Your system supports automatic color suggestions for: [_1]</&>
+ <&|/l, $valid_image_types &>Your system supports automatic color suggestions for: [_1]</&>
% } else {
- <&|/l&>GD is disabled or not installed. You can upload an image, but you won't get automatic color suggestions.</&>
+ <&|/l&>GD is disabled or not installed. You can upload an image, but you won't get automatic color suggestions.</&>
% }
+ </div>
+ <input class="button btn btn-primary" name="reset_logo" value="<&|/l&>Reset to default RT Logo</&>" type="submit" />
+ <input class="button btn btn-primary" type="submit" value="<&|/l&>Upload</&>" />
+ </form>
</div>
- <input class="button btn btn-primary" name="reset_logo" value="<&|/l&>Reset to default RT Logo</&>" type="submit" />
- <input class="button btn btn-primary" type="submit" value="<&|/l&>Upload</&>" />
- </form>
+ </div>
+
+ <div id="custom-css" class="col-6">
+ <h2><&|/l&>Custom CSS (Advanced)</&></h2>
+
+ <form method="POST" id="custom-css-form">
+ <textarea classs="form-control" rows=20 id="user_css" name="user_css" wrap="off"><% $user_css %></textarea><br />
+ <input id="try" type="submit" class="button btn btn-primary" value="<&|/l&>Try</&>" />
+ <input id="reset" type="reset" class="button btn btn-primary" value="<&|/l&>Reset</&>" type="submit" />
+ <input name="reset_css" class="button btn btn-primary" value="<&|/l&>Reset to default RT Theme</&>" type="submit" />
+ <input class="button btn btn-primary" value="<&|/l&>Save</&>" type="submit" />
+ </form>
+ </div>
</div>
-<div id="customize-theme">
- <h2><&|/l&>Customize the RT theme</&></h2>
- <ol class="list-group-compact list-group">
- <li class="list-group-item">
- <label for="section"><&|/l&>Select a section</&>:</label>
- <select class="selectpicker" id="section"></select>
- </li>
- <li class="list-group-item">
- <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!</&>
+<br>
+
+<div class="row">
+ <div id="customize-theme" class="col-6">
+ <h2><&|/l&>Customize the RT theme</&></h2>
+ <ol class="list-group-compact list-group">
+ <li class="list-group-item">
+ <label for="section"><&|/l&>Select a section</&>:</label>
+ <select class="selectpicker" id="section"></select>
+ </li>
+ <li class="list-group-item">
+ <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>
- </div>
% if ($colors) {
-<div class="button btn btn-primary primary-colors">
+ <div class="button btn btn-primary primary-colors">
% for (@$colors) {
% my $fg = $_->{l} >= $text_threshold ? 'black' : 'white';
-<button type="button" class="button btn btn-primary color-template"
- style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>;">
+ <button type="button" class="button btn btn-primary color-template"
+ style="background-color: rgb(<% $_->{c} %>); color: <% $fg %>;">
<&|/l&>Text</&>
-</button>
+ </button>
% }
-</div>
+ </div>
% }
- <div id="color-picker"></div>
- <canvas id="logo-color-picker" title="<&|/l&>Click to choose a color</&>"></canvas>
- </li>
- </ol>
-</div>
-</div>
-
-<div id="custom-css">
- <h2><&|/l&>Custom CSS (Advanced)</&></h2>
-
- <form method="POST">
- <textarea classs="form-control" rows=20 id="user_css" name="user_css" wrap="off"><% $user_css %></textarea><br />
- <input id="try" type="submit" class="button btn btn-primary" value="<&|/l&>Try</&>" />
- <input id="reset" type="reset" class="button btn btn-primary" value="<&|/l&>Reset</&>" type="submit" />
- <input name="reset_css" class="button btn btn-primary" value="<&|/l&>Reset to default RT Theme</&>" type="submit" />
- <input class="button btn btn-primary" value="<&|/l&>Save</&>" type="submit" />
- </form>
+ <div id="color-picker"></div>
+ <canvas id="logo-color-picker" title="<&|/l&>Click to choose a color</&>"></canvas>
+ </li>
+ </ol>
+ </div>
</div>
<%ONCE>
diff --git a/share/static/css/elevator-light/theme-editor.css b/share/static/css/elevator-light/theme-editor.css
index bdebe256ed..4646f96832 100644
--- a/share/static/css/elevator-light/theme-editor.css
+++ b/share/static/css/elevator-light/theme-editor.css
@@ -1,10 +1,3 @@
-#upload-logo h2, #pick-section h2 {
- margin: 0 0 0.5em 0;
-}
-
-#custom-css h2 {
- margin: 0;
-}
#upload-logo label {
font-weight: bold;
@@ -14,16 +7,6 @@
border: none;
}
-#simple-customize {
- float: left;
- width: 48%;
-}
-
-#custom-css {
- float: left;
- width: 48%;
-}
-
#custom-css textarea {
width: 100%;
}
@@ -65,5 +48,11 @@
#logo-color-picker {
display: none; /* unhidden by javascript */
cursor: url(../../../static/images/eyedropper.png), crosshair;
+ z-index: 1;
+ position: relative;
}
+#custom-css-form {
+ z-index: 2;
+ position: relative;
+}
commit 8a2b08e218aeaecaf7429b3de71242e975af190e
Author: craig kaiser <craig at bestpractical.com>
Date: Wed Jun 17 09:00:56 2020 -0400
Add Expand/Preview button to Theme.html logo image
diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index 3bacf7fb54..2800d26c4b 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -59,10 +59,7 @@
<div id="upload-logo">
<h2>Logo</h2>
<& /Elements/Logo, id => 'logo-theme-editor', ShowName => 0 &>
- <div class="custom-control custom-checkbox">
- <input type="checkbox" checked="checked" class="custom-control-input" id="logo-size" value=1 onchange="setLogoSize()">
- <label class="custom-control-label" for="logo-size">Shrink logo</label>
- </div>
+ <button onclick="setLogoSize()" class="button btn btn-primary" id="logo-size"><&|/l&>Full Size</&></button>
<form method="POST" enctype="multipart/form-data">
<div class="form-row">
@@ -248,27 +245,56 @@ jQuery(window).on('load',function() {
if (!el_canvas.getContext) return;
- var context = el_canvas.getContext("2d");
+ setLogoSize();
+});
+
+function setLogoSize() {
+ var logo = jQuery("#logo-theme-editor img");
+ var canvas = jQuery("#logo-color-picker");
+ var el_canvas = canvas.get(0);
+
+ if (!el_canvas.getContext) return;
+ // Set logo to same size as CSS input
+ var container = jQuery('#user_css');
+
+ var context = el_canvas.getContext("2d");
+ var button = jQuery('#logo-size');
+
+ if ( button.text() == '<&|/l&>Preview</&>' ) {
+ var ratio = Math.min(container.width() / logo.width(), container.height() / logo.height());
+
+ el_canvas.width = logo.width()*ratio;
+ el_canvas.height = logo.height()*ratio;
+
+ // Re-draw our scaled down image
+ context.drawImage(logo.get(0), 0, 0, logo.width()*ratio, logo.height()*ratio );
+
+ button.text( "<&|/l&>Full Size</&>" );
+ }
+ else {
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();
-});
+ context.drawImage(logo.get(0), 0, 0);
+ button.text( "<&|/l&>Preview</&>" );
+ }
+
+ 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 = jQuery.makeArray(pixel).map(function(v,i) { return v / 255 });
+ var wheel = jQuery.farbtastic("#color-picker");
+ wheel.setHSL( wheel.RGBToHSL( rgba.slice(R,A) ) );
+ // XXX TODO factor in the alpha channel too
+ });
+ jQuery('#logo-picker-hint').show();
+}
</script>
<%INIT>
unless ($session{'CurrentUser'}->HasRight( Object=> RT->System, Right => 'SuperUser')) {
commit 3fd34c2e952c1cdb0650916f21e5209b6cd9ec47
Author: craig kaiser <craig at bestpractical.com>
Date: Wed Jun 17 09:10:44 2020 -0400
Add HTML section for setting header border color from Theme.html
diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index 2800d26c4b..a15d805b2b 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -144,6 +144,7 @@ my @sections = (
['Portlet Text' => ['.titlebox .titlebox-title .left a, .titlebox .titlebox-title .left']],
['Selected bubble' => ['.selectize-control.multi .selectize-input [data-value]']],
['Selected bubble (active)' => ['.selectize-control.multi .selectize-input [data-value].active']],
+ ['Header bottom border' => ['div#header']],
);
</%ONCE>
<script type="text/javascript">
@@ -197,6 +198,10 @@ jQuery(function($) {
if (applying[name] != "body")
newcss += "; color: " + fg;
+ /* Page header bottom border */
+ if (applying[name].match(/div#header/))
+ newcss = "border-bottom-color: " + bg;
+
/* Kill the border on the quickbar if we're styling it */
if (applying[name].match(/quickbar/))
newcss += "; border: none;"
-----------------------------------------------------------------------
More information about the rt-commit
mailing list