[Rt-commit] rt branch 5.0-releng/replace-more-icons created. rt-5.0.4beta1-4-g5a9672d15d
BPS Git Server
git at git.bestpractical.com
Thu Apr 27 15:31:20 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-releng/replace-more-icons has been created
at 5a9672d15dcd6095b69b7b8cfc2aa9b01cfe536a (commit)
- Log -----------------------------------------------------------------
commit 5a9672d15dcd6095b69b7b8cfc2aa9b01cfe536a
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 3a644512f0..e300cea863 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 85b3d85ed3516761b5d71fd28012786b895e2af1
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..3a644512f0 100644
--- a/lib/RT/Interface/Web/MenuBuilder.pm
+++ b/lib/RT/Interface/Web/MenuBuilder.pm
@@ -680,7 +680,7 @@ sub BuildMainNav {
if ( $search_results_page_menu && $has_query ) {
$search_results_page_menu->child(
- current_search => title => q{<span class="fas fa-list"></span>},
+ current_search => title => GetSVGImage('link-45deg'),
escape_title => 0,
sort_order => -1,
path => "/Search/Results.html$args",
@@ -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;
commit ded6d7c37fc7b38719f5ee5f4f2b5fab27aaaa08
Merge: 762f5bdb7b 45807b3e1a
Author: Jim Brandt <jbrandt at bestpractical.com>
Date: Wed Apr 26 09:36:45 2023 -0400
Merge branch '5.0/search-filter-owner-dropdown-size' into 5.0.4-releng
-----------------------------------------------------------------------
hooks/post-receive
--
rt
More information about the rt-commit
mailing list