From 9fc4410ee91c79f435aaf47d07dbf56d2f8d569a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 4 May 2023 12:19:26 +0000 Subject: [PATCH] Update style rules of `MessageTimestamp` (#10780) * Remove an obsolete variable - `$MessageTimestamp_width_hover` Added by 9b54aba4c06eab89b494a777c8a77e3f14edd948 Deprecated 5343be7814e9fd120c3779aa8a33951716cb2d0e * Replace a variable with a custom property - $MessageTimestamp_width * Merge with an existing property in :root rename * Manage the variable on _MessageTimestamp.pcss --- cypress/e2e/timeline/timeline.spec.ts | 6 +++--- res/css/_common.pcss | 4 ---- res/css/views/messages/_EventTileBubble.pcss | 2 +- res/css/views/messages/_MessageTimestamp.pcss | 7 +++++-- res/css/views/right_panel/_TimelineCard.pcss | 4 ++-- res/css/views/rooms/_EventTile.pcss | 7 ++++--- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index c2743a3c89..331496a969 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -171,7 +171,7 @@ describe("Timeline", () => { // Check the profile resizer's place // See: _IRCLayout // --RoomView_MessageList-padding = 18px (See: _RoomView.pcss) - // --MessageTimestamp-width = $MessageTimestamp_width = 46px (See: _common.pcss) + // --MessageTimestamp-width = 46px (See: _MessageTimestamp.pcss) // --icon-width = 14px // --right-padding = 5px // --name-width = 80px @@ -371,7 +371,7 @@ describe("Timeline", () => { // Check inline start spacing of collapsed GELS // See: _EventTile.pcss // .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line - // = var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding) + // = var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding) // = 80 + 14 + 46 + 2 * 5 // = 150px cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line").should( @@ -388,7 +388,7 @@ describe("Timeline", () => { .should("have.css", "margin-inline-end", "0px"); // --icon-width should be applied cy.get(".mx_EventTile .mx_EventTile_avatar > .mx_BaseAvatar").should("have.css", "width", "14px"); - // $MessageTimestamp_width should be applied + // var(--MessageTimestamp-width) should be applied cy.get(".mx_EventTile > a").should("have.css", "min-width", "46px"); // Record alignment of collapsed GELS and messages on messagePanel cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS and messages on IRC layout", { percyCSS }); diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 1502b60c70..4043672044 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -27,9 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */ $selected-message-border-width: 4px; -$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ -$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width); - $slider-dot-size: 1em; $slider-selection-dot-size: 2.4em; @@ -41,7 +38,6 @@ $timeline-image-border-radius: 8px; --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */ --transition-short: 0.1s; --transition-standard: 0.3s; - --MessageTimestamp-width: $MessageTimestamp_width; --buttons-dialog-gap-row: $spacing-8; --buttons-dialog-gap-column: $spacing-8; } diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss index b2741ac59f..7facf259a1 100644 --- a/res/css/views/messages/_EventTileBubble.pcss +++ b/res/css/views/messages/_EventTileBubble.pcss @@ -21,7 +21,7 @@ limitations under the License. padding: 10px; /* TODO: Use a spacing variable */ border-radius: 8px; /* Reserve space for external timestamps, but also cap the width */ - max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px); + max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content min-content; diff --git a/res/css/views/messages/_MessageTimestamp.pcss b/res/css/views/messages/_MessageTimestamp.pcss index 1b94ad3a6f..80f64df09e 100644 --- a/res/css/views/messages/_MessageTimestamp.pcss +++ b/res/css/views/messages/_MessageTimestamp.pcss @@ -14,15 +14,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MessageTimestamp { +:root { + --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */ --MessageTimestamp-max-width: 80px; --MessageTimestamp-color: $event-timestamp-color; +} +.mx_MessageTimestamp { color: var(--MessageTimestamp-color); font-size: $font-10px; font-variant-numeric: tabular-nums; display: block; /* enable the width setting below */ - width: $MessageTimestamp_width; + width: var(--MessageTimestamp-width); white-space: nowrap; user-select: none; } diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss index acfeaf7555..9142f8d5ec 100644 --- a/res/css/views/right_panel/_TimelineCard.pcss +++ b/res/css/views/right_panel/_TimelineCard.pcss @@ -55,7 +55,7 @@ limitations under the License. &.mx_EventTile_info .mx_EventTile_line, .mx_EventTile_line { padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); - padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */ + padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */ .mx_EventTile_e2eIcon { inset-inline-start: $spacing-8; @@ -157,7 +157,7 @@ limitations under the License. .mx_EventTile_line, .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { padding-inline-start: var(--BaseCard_EventTile-spacing-inline); - padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */ + padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */ } } } diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index bde48014d3..0c42a99f76 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -295,7 +295,7 @@ $left-gutter: 64px; > a { text-decoration: none; /* timestamps are links which shouldn't be underlined */ - min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */ + min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */ } > * { @@ -650,7 +650,7 @@ $left-gutter: 64px; /* add --right-padding value of MessageTimestamp and avatar only */ /* stylelint-disable-next-line declaration-colon-space-after */ padding-left: calc( - var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding) + var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding) ); } } @@ -1218,7 +1218,8 @@ $left-gutter: 64px; padding-top: 0; .mx_EventTile_avatar { - left: calc($MessageTimestamp_width + 14px - 4px); /* 14px: avatar width, 4px: align with text */ + /* 14px: avatar width, 4px: align with text */ + left: calc(var(--MessageTimestamp-width) + 14px - 4px); z-index: 9; /* position above the hover styling */ }