Add contrast toggle transaction action

Add contrast toggle that swaps messagebody background between light and dark
theme colors for improved readability of emails with inline styles that clash
with the current theme.

The contrast toggle is only added for create, reply, and comment transactions.

Author: bkembreeBPS

etc/RT_Config.pm.in

@@ -2428,6 +2428,7 @@ Set(
     'gear-fill' => '<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>',
     'info' => '<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>',
     'key' => '<path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5"/><path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>',
+    'circle-half' => '<path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>',
     'left' => '<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>',
     'link' => '<path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9q-.13 0-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6z"/>',
     'link-45deg' => '<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"/>',

share/html/Elements/ShowTransaction

@@ -47,8 +47,14 @@
 %# END BPS TAGGED BLOCK }}}
 <div class="<% join ' ', @classes %>" data-transaction-id="<% $Transaction->id %>">
   <div class="metadata">
-% if ( @action_icons ) {
+% if ( $toggle_contrast || @action_icons ) {
     <span class="actions">
+%   if ( $toggle_contrast ) {
+      <span class="rt-inline-icon border rounded"><% $toggle_contrast |n %></span>
+%     if ( @action_icons ) {
+      <span class="vr"></span>
+%     }
+%   }
 %   for my $action ( @action_icons ) {
       <span class="rt-inline-icon border rounded"><% $action |n %></span>
 %   }
@@ -343,6 +349,14 @@ elsif ( %$Attachments && $ShowActions ) {
     }
 }
 
+# Toggle contrast icon for message transactions with a messagebody
+my $toggle_contrast;
+if ( %$Attachments && $ShowBody && $txn_type =~ /^(?:Create|Correspond|Comment)$/ ) {
+    $toggle_contrast = '<a href="#" class="toggle-contrast-link">'
+        . GetSVGImage( Name => 'circle-half', Title => loc('Toggle contrast') )
+        . '</a>';
+}
+
 my $CreatorObj = $Transaction->CreatorObj;
 
 $m->callback(

share/static/css/elevator/history.css

@@ -22,6 +22,17 @@ div.history-container {
     padding: 0.25em;
 }
 
+.history .transaction .actions .vr {
+    align-self: center;
+    min-height: 0;
+    height: 1.5em;
+    opacity: 0.5;
+}
+
+.history .transaction .actions .rt-inline-icon.active {
+    border-color: var(--bs-primary) !important;
+}
+
 .history .transaction div.metadata span.type {
     text-align: center;
     float: left;
@@ -405,6 +416,40 @@ div.history-container {
     }
 }
 
+/* Toggle contrast: swap to the opposite theme's colors for readable email content */
+
+/* In dark mode, toggle to light theme colors */
+[data-bs-theme=dark] .history .transaction .messagebody.toggle-contrast {
+    background-color: var(--bs-light);
+    color: var(--bs-dark);
+    border-radius: 0.25em;
+    border-top-color: transparent;
+}
+
+[data-bs-theme=dark] .history .transaction .messagebody.toggle-contrast a {
+    color: var(--bs-primary);
+}
+
+[data-bs-theme=dark] .history .transaction .messagebody.toggle-contrast a:visited {
+    color: var(--bs-indigo);
+}
+
+/* In light mode, toggle to dark theme colors */
+[data-bs-theme=light] .history .transaction .messagebody.toggle-contrast {
+    background-color: var(--bs-dark);
+    color: var(--bs-light);
+    border-radius: 0.25em;
+    border-top-color: transparent;
+}
+
+[data-bs-theme=light] .history .transaction .messagebody.toggle-contrast a {
+    color: var(--bs-info);
+}
+
+[data-bs-theme=light] .history .transaction .messagebody.toggle-contrast a:visited {
+    color: var(--bs-purple);
+}
+
 /* Transaction filter dropdown styles */
 .transaction-filter-dropdown {
     width: fit-content;

share/static/js/init.js

@@ -1137,6 +1137,13 @@ jQuery(document).on('click', '.toggle-txn-details', function (e) {
     return toggleTransactionDetails.apply(this);
 });
 
+jQuery(document).on('click', '.toggle-contrast-link', function (e) {
+    e.preventDefault();
+    jQuery(this).closest('.rt-inline-icon').toggleClass('active');
+    var txn = jQuery(this).closest('.transaction');
+    txn.find('.messagebody').toggleClass('toggle-contrast');
+});
+
 jQuery(document).on('change', '.article-basics [name="Type"]', function () {
     if (jQuery(this).val() == 'Content') {
         jQuery('#article-type-links').addClass('hidden');