From 78a98415ebfc46ebc5c7d37eb1537eb1756f4f52 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 30 Jun 2022 11:37:43 +0000 Subject: [PATCH] Set common width, white-space, and display values to MessageTimestamp (#8818) * Add mx_MessageTimestamp to mx_PinnedEventTile_timestamp Signed-off-by: Suguru Hirahara * Apply display: block globally to enable the width declaration - Unset display and width value of timestamp on pinned messages card Signed-off-by: Suguru Hirahara * Apply nowrap globally Signed-off-by: Suguru Hirahara * MessageTimestamp on ThreadsList - Remove width setting and add font-size setting Signed-off-by: Suguru Hirahara * Remove redundant font-size declaration from Threadview Signed-off-by: Suguru Hirahara * Fix timestamp position of timestamp on ThreadView in IRC layout - GroupLayout is modern layout, not IRC layout Signed-off-by: Suguru Hirahara * Remove redundant font-size declaration from IRC layout Signed-off-by: Suguru Hirahara * Remove redundant color setting from timestamp on file panel Signed-off-by: Suguru Hirahara * Cancel the default width to set a gap between the event tile line Signed-off-by: Suguru Hirahara * Apply user-select: none globally Signed-off-by: Suguru Hirahara --- res/css/structures/_FilePanel.scss | 1 - res/css/views/messages/_MessageTimestamp.scss | 5 +++++ res/css/views/right_panel/_ThreadPanel.scss | 1 - res/css/views/rooms/_EventBubbleTile.scss | 5 +++++ res/css/views/rooms/_EventTile.scss | 12 +++--------- res/css/views/rooms/_IRCLayout.scss | 1 - res/css/views/rooms/_PinnedEventTile.scss | 6 +++--- src/components/views/rooms/PinnedEventTile.tsx | 2 +- 8 files changed, 17 insertions(+), 16 deletions(-) diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index e2129e24dd..d863702d5c 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -103,7 +103,6 @@ limitations under the License. position: initial; font-size: $font-14px; opacity: 1.0; - color: $event-timestamp-color; } /* Overrides for the wrappers around the body tile */ diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss index d496ff82c8..ea11cc5a34 100644 --- a/res/css/views/messages/_MessageTimestamp.scss +++ b/res/css/views/messages/_MessageTimestamp.scss @@ -15,8 +15,13 @@ limitations under the License. */ .mx_MessageTimestamp { + --MessageTimestamp-max-width: 80px; + color: $event-timestamp-color; font-size: $font-10px; font-variant-numeric: tabular-nums; + display: block; // enable the width setting below width: $MessageTimestamp_width; + white-space: nowrap; + user-select: none; } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 50c61fa7ea..ca0b4409ca 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -121,7 +121,6 @@ limitations under the License. } .mx_MessageTimestamp { - font-size: $font-12px; color: $secondary-content; } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index def5816ed0..1717c611e2 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -64,6 +64,11 @@ limitations under the License. margin-left: var(--EventTile_bubble-margin-inline-start); font-size: $font-14px; + .mx_MessageTimestamp { + width: unset; // Cancel the default width + max-width: var(--MessageTimestamp-max-width); + } + .mx_ThreadSummary { clear: both; width: fit-content; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ab524ad2df..7ae672694c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -219,11 +219,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_MessageTimestamp { - display: block; - white-space: nowrap; left: 0px; text-align: center; - user-select: none; } &.mx_EventTile_continuation .mx_EventTile_line { @@ -861,8 +858,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_MessageTimestamp { - max-width: 80px; - width: auto; + font-size: $font-12px; + max-width: var(--MessageTimestamp-max-width); position: initial; } } @@ -894,10 +891,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss padding-inline-end: 0; } - .mx_MessageTimestamp { - font-size: $font-10px; - } - // handling for hidden events (e.g reactions) in the thread view &.mx_EventTile_info { padding-top: 0; @@ -1042,6 +1035,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_MessageTimestamp { top: 2px; // Align with mx_EventTile_content + position: absolute; // for IRC layout } .mx_EventTile_senderDetails { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 1e43132ba5..bff0175d35 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -116,7 +116,6 @@ $irc-line-height: $font-18px; } .mx_MessageTimestamp { - font-size: $font-10px; text-align: right; } diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index 82de811b28..47781a3b32 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -89,13 +89,13 @@ limitations under the License. .mx_PinnedEventTile_footer { grid-area: footer; - font-size: 10px; + font-size: $font-10px; line-height: 12px; .mx_PinnedEventTile_timestamp { - font-size: inherit; - line-height: inherit; color: $secondary-content; + display: unset; + width: unset; // Cancel the default width value } .mx_AccessibleButton_kind_link { diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index 8f6247b5f6..f9e4d85805 100644 --- a/src/components/views/rooms/PinnedEventTile.tsx +++ b/src/components/views/rooms/PinnedEventTile.tsx @@ -144,7 +144,7 @@ export default class PinnedEventTile extends React.Component {
- + { formatDate(new Date(this.props.event.getTs())) }