Set common width, white-space, and display values to MessageTimestamp (…

…#8818) * Add mx_MessageTimestamp to mx_PinnedEventTile_timestamp Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * 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 <luixxiul@users.noreply.github.com> * Apply nowrap globally Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * MessageTimestamp on ThreadsList - Remove width setting and add font-size setting Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant font-size declaration from Threadview Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix timestamp position of timestamp on ThreadView in IRC layout - GroupLayout is modern layout, not IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant font-size declaration from IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant color setting from timestamp on file panel Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Cancel the default width to set a gap between the event tile line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply user-select: none globally Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jun 30, 2022 · 78a9841 · luixxiul · Jun 30, 2022 · 78a9841
1 parent d4a4eea
commit 78a9841
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>