Set common width, white-space, and display values to MessageTimestamp (#8818)

* Add mx_MessageTimestamp to mx_PinnedEventTile_timestamp

Signed-off-by: Suguru Hirahara <[email protected]>

* 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 <[email protected]>

* Apply nowrap globally

Signed-off-by: Suguru Hirahara <[email protected]>

* MessageTimestamp on ThreadsList - Remove width setting and add font-size setting

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove redundant font-size declaration from Threadview

Signed-off-by: Suguru Hirahara <[email protected]>

* Fix timestamp position of timestamp on ThreadView in IRC layout

- GroupLayout is modern layout, not IRC layout

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove redundant font-size declaration from IRC layout

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove redundant color setting from timestamp on file panel

Signed-off-by: Suguru Hirahara <[email protected]>

* Cancel the default width to set a gap between the event tile line

Signed-off-by: Suguru Hirahara <[email protected]>

* Apply user-select: none globally

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

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 */

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;
 }

res/css/views/right_panel/_ThreadPanel.scss

@@ -121,7 +121,6 @@ limitations under the License.
     }
 
     .mx_MessageTimestamp {
-        font-size: $font-12px;
         color: $secondary-content;
     }
 

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;

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 {

res/css/views/rooms/_IRCLayout.scss

@@ -116,7 +116,6 @@ $irc-line-height: $font-18px;
         }
 
         .mx_MessageTimestamp {
-            font-size: $font-10px;
             text-align: right;
         }
 

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 {

src/components/views/rooms/PinnedEventTile.tsx

@@ -144,7 +144,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
             </div>
 
             <div className="mx_PinnedEventTile_footer">
-                <span className="mx_PinnedEventTile_timestamp">
+                <span className="mx_MessageTimestamp mx_PinnedEventTile_timestamp">
                     { formatDate(new Date(this.props.event.getTs())) }
                 </span>