Show hover elements when keyboard focus is within an event tile (#31078)

* Show timestamps when keyboard focus is within an event tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Ensure toolbar navigation pattern works in MessageActionBar This requires all buttons within to be roving by using the ref callback given by useRovingTabIndex Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use PureComponent in EventTile to avoid mass re-rendering due to transitive onFocus/onBlur calls Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused timestamp event tile prop Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use MessageTimestamp to generate the wrapping anchor so that focusing it brings up the tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak MessageTimestamp Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch back to Component as we specify a shouldComponentUpdate already Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update jest tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update playwright timestamp masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix IRC layout Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use PureComponent in EventTile to avoid mass re-rendering due to transitive onFocus/onBlur calls Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused timestamp event tile prop Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use MessageTimestamp to generate the wrapping anchor so that focusing it brings up the tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak MessageTimestamp Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch back to Component as we specify a shouldComponentUpdate already Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update jest tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update playwright timestamp masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix IRC layout Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Lint styles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix layout picker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix pcss comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Playwright Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Playwright Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-10-28 09:33:02 +00:00
parent 7e04998a58
commit f6731ec318
78 changed files with 280 additions and 124 deletions
--- a/res/css/views/messages/_MessageTimestamp.pcss
+++ b/res/css/views/messages/_MessageTimestamp.pcss
@@ -13,13 +13,14 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_MessageTimestamp {
-    color: var(--MessageTimestamp-color);
+    color: var(--MessageTimestamp-color) !important; /* override anchor color */
    font-size: $font-10px;
    font-variant-numeric: tabular-nums;
    display: block; /* enable the width setting below */
    width: var(--MessageTimestamp-width);
    white-space: nowrap;
    user-select: none;
+    text-decoration: none;
 }

 .mx_MessageTimestamp_lateIcon {
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -200,10 +200,6 @@ $left-gutter: 64px;
               Replaces margin-top: -6px. This interacts better with a read
               marker being in between. Content overflows. */
            height: 1px;
-
-            a {
-                text-decoration: none;
-            }
        }

        &.mx_EventTile_highlight,
@@ -273,9 +269,9 @@ $left-gutter: 64px;
        align-items: flex-start;
        padding-top: 0;

-        > a {
-            text-decoration: none; /* timestamps are links which shouldn't be underlined */
+        .mx_MessageTimestamp {
            min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
+            text-align: right;
        }

        > * {
@@ -403,10 +399,6 @@ $left-gutter: 64px;
            margin: 0;
        }

-        .mx_MessageTimestamp {
-            text-align: right;
-        }
-
        .mx_EditMessageComposer_buttons {
            position: relative;
        }
--- a/res/css/views/settings/_LayoutSwitcher.pcss
+++ b/res/css/views/settings/_LayoutSwitcher.pcss
@@ -72,6 +72,10 @@ Please see LICENSE files in the repository root for full details.
                    flex-shrink: 1;
                }

+                &[data-layout="irc"] .mx_MessageTimestamp {
+                    display: none; /* hide the container used for spacing consistency */
+                }
+
                .mx_EventTile_line {
                    max-width: 100%;
                }