[Rt-commit] rt branch, 5.0.0-releng, updated. rt-5.0.0beta2-36-gae7a4bd0cc

? sunnavy sunnavy at bestpractical.com
Tue Jul 7 11:57:36 EDT 2020


The branch, 5.0.0-releng has been updated
       via  ae7a4bd0cce65d704d230622e5421051703b501b (commit)
       via  8f83749f922108867c7876b48647438c8871aac5 (commit)
       via  6f95ad959e3933e9fa03e9775c8f42f3916e8a10 (commit)
       via  e3bed5712bad8dcc274f7aac6a61418bc2595a82 (commit)
       via  92fc94448c31a36552642d65b5c9a9076931c3bc (commit)
       via  dc75ea4b170bb24f5777ca16bc2561cdfdfb0687 (commit)
       via  0254af0f95e17d26b93021e36cbba72f4739c596 (commit)
      from  c0cd7c9a10545014a1b387d72f729ba72576e9cc (commit)

Summary of changes:
 share/html/Admin/Tools/Theme.html                | 185 ++++++++++++++---------
 share/html/Widgets/TitleBoxStart                 |   2 +-
 share/static/css/elevator-dark/main.css          |  10 ++
 share/static/css/elevator-light/layout.css       |   2 +-
 share/static/css/elevator-light/theme-editor.css |  23 +--
 5 files changed, 131 insertions(+), 91 deletions(-)

- Log -----------------------------------------------------------------
commit dc75ea4b170bb24f5777ca16bc2561cdfdfb0687
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..5152514b40 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']],
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} %>"\
 % }

commit 92fc94448c31a36552642d65b5c9a9076931c3bc
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 5152514b40..2b62a448fd 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -147,6 +147,9 @@ jQuery(function($) {
                            .attr('value', v[0])
                            .text(v[0]));
     });
+    // Refresh selectpicker so we have a default value, at least for Firefox
+    $('select#section').val(section_css_mapping[0][0]);
+    $('.selectpicker').selectpicker('refresh');
 
     function update_sitecss(text) {
         if (!text)

commit e3bed5712bad8dcc274f7aac6a61418bc2595a82
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 2b62a448fd..49ec83866b 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 class="form-control mb-2" rows="20" id="user_css" name="user_css" wrap="off"><% $user_css %></textarea>
+      <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 6f95ad959e3933e9fa03e9775c8f42f3916e8a10
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 49ec83866b..a188db8c32 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 8f83749f922108867c7876b48647438c8871aac5
Author: craig kaiser <craig at bestpractical.com>
Date:   Mon Jun 29 14:59:50 2020 -0400

    Do not remove farbtastic background in darkmode

diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 3874c165ab..4e6b756e19 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -1,5 +1,15 @@
 @import "../elevator-light/main.css";
 
+.darkmode .farbtastic .wheel {
+  background: url(../../../static/images/farbtastic/wheel.png) no-repeat !important;
+}
+.darkmode .farbtastic .overlay {
+  background: url(../../../static/images/farbtastic/mask.png) no-repeat !important;
+}
+.darkmode .farbtastic .marker, .darkmode .farbtastic .marker {
+  background: url(../../../static/images/farbtastic/marker.png) no-repeat !important;
+}
+
 .darkmode, .darkmode * {
     background: #2C3539 !important;
     color: #ededed !important;

commit ae7a4bd0cce65d704d230622e5421051703b501b
Merge: c0cd7c9a10 8f83749f92
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jul 7 23:55:21 2020 +0800

    Merge branch '5.0/update-theme-editor' into 5.0.0-releng


-----------------------------------------------------------------------


More information about the rt-commit mailing list