[Rt-commit] rt branch 5.0.4-releng updated. rt-5.0.4beta1-5-g88300dd55f
BPS Git Server
git at git.bestpractical.com
Thu Apr 27 16:27:24 UTC 2023
This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "rt".
The branch, 5.0.4-releng has been updated
via 88300dd55f1436234caa7fcac465a1d2992468bb (commit)
via a8313e81acc99cccf68d1da467da38ee6299c4ef (commit)
via 4c57cb255ce873090e7abaea7bbd269829fc1585 (commit)
via ded6d7c37fc7b38719f5ee5f4f2b5fab27aaaa08 (commit)
via 45807b3e1af61c4f82fc10d23ea4df04a58dd2ce (commit)
from 762f5bdb7b28425f922a68c0790e9431c20985f8 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
- Log -----------------------------------------------------------------
commit 88300dd55f1436234caa7fcac465a1d2992468bb
Merge: 762f5bdb7b a8313e81ac
Author: sunnavy <sunnavy at bestpractical.com>
Date: Fri Apr 28 00:00:15 2023 +0800
Merge branch '5.0-releng/replace-more-icons' into 5.0.4-releng
commit a8313e81acc99cccf68d1da467da38ee6299c4ef
Author: Jim Brandt <jbrandt at bestpractical.com>
Date: Thu Apr 27 11:14:07 2023 -0400
Replace funnel svg icon with inline version
This allows it to pick up the CSS from the parent.
When using the svg with an img, that wasn't possible, so the
color was hard-coded into the svg. This would have made it
very difficult for new themes to modify.
Also add the role attribute for better accessibility.
diff --git a/lib/RT/Interface/Web/MenuBuilder.pm b/lib/RT/Interface/Web/MenuBuilder.pm
index a3f3b4b7bc..696d21b9af 100644
--- a/lib/RT/Interface/Web/MenuBuilder.pm
+++ b/lib/RT/Interface/Web/MenuBuilder.pm
@@ -1776,8 +1776,10 @@ sub BuildSelfServiceNav {
# rather than pasting svg markup in many different places in templates.
our %SVG_IMAGES = (
- 'link-45deg' => '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
-</svg>'
+ 'link-45deg' => '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16" role="img"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+</svg>',
+ 'funnel' => '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16" role="img"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/></svg>',
+ 'funnel-fill' => '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel-fill" viewBox="0 0 16 16" role="img"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/></svg>',
);
sub GetSVGImage {
diff --git a/share/html/Elements/CollectionAsTable/Header b/share/html/Elements/CollectionAsTable/Header
index 49deac9bfe..33fe27a1b8 100644
--- a/share/html/Elements/CollectionAsTable/Header
+++ b/share/html/Elements/CollectionAsTable/Header
@@ -234,8 +234,9 @@ foreach my $col ( @Format ) {
if ( $field ) {
my $tooltip = loc( 'Filter on [_1]', loc($field) );
my $icon = exists $filter_data{filter}{$field} ? 'funnel-fill' : 'funnel';
+ $icon = RT::Interface::Web::MenuBuilder::GetSVGImage($icon);
$m->out(
- qq{ <a href="javascript:void(0)" class="btn btn-primary button search-filter"><img src="/static/images/$icon.svg" role="img" data-toggle="tooltip" data-placement="bottom" data-original-title="$tooltip"></span></a>}
+ qq{ <a href="javascript:void(0)" class="btn btn-primary button search-filter" data-toggle="tooltip" data-placement="bottom" data-original-title="$tooltip">$icon</a>}
);
$m->out( $m->scomp( '/Elements/SearchFilter', Attribute => $field, FilterData => \%filter_data, %ARGS ) );
}
commit 4c57cb255ce873090e7abaea7bbd269829fc1585
Author: Jim Brandt <jbrandt at bestpractical.com>
Date: Thu Apr 27 10:13:28 2023 -0400
Render menu link icon as inline svg rather than CSS class
When loading search results, the page menu would load
without the link icon, all search results would load,
then the JS would run and the link icon would jump into
the menu. At the top of the screen, it was very
noticeable.
Convert to inline svg to load when the page loads and
still retain the ability to style the icon. The
new link svg is from Bootstrap icons.
diff --git a/lib/RT/Interface/Web/MenuBuilder.pm b/lib/RT/Interface/Web/MenuBuilder.pm
index 4b857a0116..a3f3b4b7bc 100644
--- a/lib/RT/Interface/Web/MenuBuilder.pm
+++ b/lib/RT/Interface/Web/MenuBuilder.pm
@@ -710,7 +710,7 @@ sub BuildMainNav {
$current_search_menu->child(
'permalink',
sort_order => 2, # Put it between "Edit Search" and "Advanced"
- title => '<span class="fas fa-link"></span>',
+ title => GetSVGImage('link-45deg'),
escape_title => 0,
class => 'permalink',
path => "$request_path?sc=$short_query{sc}",
@@ -1761,4 +1761,37 @@ sub BuildSelfServiceNav {
$HTML::Mason::Commands::m->callback( CallbackName => 'SelfService', Path => $request_path, ARGSRef => \%args, CallbackPage => '/Elements/Tabs' );
}
+# If you want to apply CSS, like colors, to SVG icons, they must be inlined
+# with a svg tag. Currently this is the only way to allow regular CSS
+# cascading to work, so this is a better option than using <img> tags
+# and not being able to match colors for different themes, for
+# example. This has some drawbacks, like making each page a bit
+# heavier and not being able to cache the icons. We accept this to
+# be able to use SVGs.
+
+# Inline content also avoids seeing images jump onto the page last
+# when added via CSS+JS as provided with some icon libraries.
+
+# This is a single place to store and manage the SVG images and icons
+# rather than pasting svg markup in many different places in templates.
+
+our %SVG_IMAGES = (
+ 'link-45deg' => '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+</svg>'
+);
+
+sub GetSVGImage {
+ my $image_name = shift;
+
+ my $svg;
+ if ( exists $SVG_IMAGES{$image_name} ) {
+ $svg = $SVG_IMAGES{$image_name};
+ }
+ else {
+ $svg = "<span class=\"error\">SVG $image_name not found</span>";
+ }
+
+ return $svg;
+}
+
1;
-----------------------------------------------------------------------
Summary of changes:
lib/RT/Interface/Web/MenuBuilder.pm | 37 +++++++++++++++++++++++++++-
share/html/Elements/CollectionAsTable/Header | 3 ++-
share/html/Elements/SearchFilter | 2 +-
share/html/Elements/SelectOwnerDropdown | 3 ++-
4 files changed, 41 insertions(+), 4 deletions(-)
hooks/post-receive
--
rt
More information about the rt-commit
mailing list