Show bigger user images on hover

Original user images are kinda small, with this users can see them more clearly.
bestpractical · Dec 31, 2024 · b7cbdb7 · b7cbdb7
1 parent 5b49505
commit b7cbdb7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/share/html/Elements/ShowUserImage b/share/html/Elements/ShowUserImage
@@ -52,5 +52,23 @@ $Tooltip => undef
 $Class => 'rt-user-image'
 </%args>
 <%init>
+my $src
+    = ( $session{CurrentUser}->Privileged ? '' : '/SelfService' )
+    . '/Helpers/UserImage/'
+    . $User->Id . '-'
+    . $User->ImageSignature;
+
+my $popover_content = qq{
+<div class="row">
+  <div class="col-auto">
+    <img class="$Class rounded" src="$src" />
+  </div>
+  <div class="col-auto">
+    <h5>@{[ $User->RealName || $User->Name ]}</h5>
+    <p>@{[ $User->EmailAddress || '' ]}</p>
+  </div>
+</div>
+};
 </%init>
-<img class="<%$Class%> img-fluid rounded" alt="Image for user <%$Tooltip%>" title="<%$Tooltip%>" src="<% $session{CurrentUser}->Privileged ? '' : '/SelfService' %>/Helpers/UserImage/<%$User->Id%>-<% $User->ImageSignature %>" loading="lazy" />
+<img class="<%$Class%> img-fluid rounded" alt="Image for user <%$Tooltip%>" title="<%$Tooltip%>" src="<% $src %>" loading="lazy" data-bs-toggle="popover" data-bs-custom-class="rt-user-image-popover" data-bs-content="<% $popover_content %>"
+/>
diff --git a/share/static/css/elevator/user.css b/share/static/css/elevator/user.css
@@ -17,6 +17,11 @@ img.rt-user-image {
     height: 1.5em;
 }
 
+.rt-user-image-popover img {
+    width: 4.5em;
+    height: 4.5em;
+}
+
 img.rt-user-image-lg {
     width: 100px;
     height: 100px;

diff --git a/share/static/js/util.js b/share/static/js/util.js
@@ -1226,6 +1226,13 @@ htmx.onLoad(function(elt) {
         jQuery(this).closest('form').find('input[name=User]').val(ui.item.id).change();
     });
 
+    elt.querySelectorAll('[data-bs-toggle="popover"]').forEach(function(elt) {
+        new bootstrap.Popover(elt, {
+            trigger: 'hover focus',
+            html: true,
+            sanitize: true
+        });
+    });
 });
 
 function filterSearchResults (type) {