From f98fcd7357067e2abd3ef6109eeeb50c55884ea9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 6 Mar 2023 01:50:00 +0900 Subject: [PATCH 01/30] Fix timestamp on bubble layout on threadview Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index a7bc52d7359..39aa6913a0b 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1042,10 +1042,7 @@ $left-gutter: 64px; /* handling for hidden events (e.g reactions) in the thread view */ &.mx_EventTile_info { .mx_EventTile_avatar { - position: absolute; - top: 1.5px; /* Align with hidden event content */ - margin-top: 0; - margin-bottom: 0; + margin-block: 0; width: 14px; /* avatar img size */ height: 14px; /* avatar img size */ } @@ -1074,6 +1071,8 @@ $left-gutter: 64px; padding-top: 0; .mx_EventTile_avatar { + position: absolute; + top: 1.5px; /* Align with hidden event content */ left: calc($MessageTimestamp_width + 14px - 4px); /* 14px: avatar width, 4px: align with text */ z-index: 9; /* position above the hover styling */ } @@ -1093,15 +1092,27 @@ $left-gutter: 64px; } &[data-layout="bubble"] { + margin-inline: var(--EventTile_bubble-margin-inline-start) 0; + + /* Override "flex-direction: column" for .mx_ThreadView .mx_EventTile */ + /* Required to place mx_EventTile_senderDetails and mx_EventTile_line horizontally with flexbox */ + flex-direction: row; + + &::before { + inset-inline-start: calc(-1 * var(--EventTile_bubble-margin-inline-start)); + inset-inline-end: calc(-1 * var(--EventTile_bubble-margin-inline-end)); + } + .mx_EventTile_avatar { - inset-inline-start: 0; + margin-inline-end: var(--EventTile_bubble_gap-inline); } - &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { - .mx_EventTile_content, - .mx_RedactedBody { - margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); + .mx_MessageActionBar { + /* stylelint-disable-next-line declaration-colon-space-after */ + inset-inline-end: calc( + var(--BaseCard_EventTile-spacing-inline) + var(--EventTile_bubble_line-margin-inline-end) + ); } } } From 556daaeabc19455f74ca1be2511465924d3ab907 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 6 Mar 2023 03:53:58 +0900 Subject: [PATCH 02/30] Fix info event line styles on bubble layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 39aa6913a0b..5d9bbad76cf 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1092,29 +1092,39 @@ $left-gutter: 64px; } &[data-layout="bubble"] { + /* Same setting as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; - /* Override "flex-direction: column" for .mx_ThreadView .mx_EventTile */ - /* Required to place mx_EventTile_senderDetails and mx_EventTile_line horizontally with flexbox */ + /* Override "flex-direction: column" of ".mx_ThreadView .mx_EventTile" */ + /* Required to place mx_EventTile_senderDetails and mx_EventTile_line horizontally */ flex-direction: row; + /* Align shadow on hover */ &::before { + /* Apply the same value as the main timeline */ inset-inline-start: calc(-1 * var(--EventTile_bubble-margin-inline-start)); - inset-inline-end: calc(-1 * var(--EventTile_bubble-margin-inline-end)); - } - - .mx_EventTile_avatar { - margin-inline-end: var(--EventTile_bubble_gap-inline); + inset-inline-end: 0; } .mx_EventTile_line { + /* Not available on the actual UI anyway as the hidden event expand button is hidden above */ + .mx_ViewSourceEvent { + flex: auto; /* Fill the line */ + } + .mx_MessageActionBar { + /* Align with MessageActionBar of normal bubbles */ /* stylelint-disable-next-line declaration-colon-space-after */ inset-inline-end: calc( var(--BaseCard_EventTile-spacing-inline) + var(--EventTile_bubble_line-margin-inline-end) ); } } + + &[data-self="true"] { + /* Override "align-items: flex-end" to align the avatar and mx_EventTile_line at the center */ + align-items: center; + } } } From 66ecfac20873789cd2b52911968b7fa48c0f1371 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 6 Mar 2023 04:40:33 +0900 Subject: [PATCH 03/30] Fix read receipt group on ThreadView on modern/group layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 15 ++++++++------- src/components/views/rooms/EventTile.tsx | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5d9bbad76cf..eba5ef1ad23 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1032,9 +1032,6 @@ $left-gutter: 64px; --ThreadView_group_spacing-end: 8px; /* same as padding */ .mx_EventTile { - display: flex; - flex-direction: column; - .mx_EventTile_roomName { display: none; } @@ -1068,6 +1065,7 @@ $left-gutter: 64px; &[data-layout="irc"], &[data-layout="group"] { + display: block; padding-top: 0; .mx_EventTile_avatar { @@ -1081,6 +1079,11 @@ $left-gutter: 64px; top: 2px; /* Align with avatar */ } + .mx_ReadReceiptGroup { + /* This aligns the avatar with the hidden event line by overriding the inherited value */ + inset-block-start: calc(-$font-22px); + } + &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { .mx_EventTile_content, @@ -1092,13 +1095,11 @@ $left-gutter: 64px; } &[data-layout="bubble"] { + display: flex; + /* Same setting as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; - /* Override "flex-direction: column" of ".mx_ThreadView .mx_EventTile" */ - /* Required to place mx_EventTile_senderDetails and mx_EventTile_line horizontally */ - flex-direction: row; - /* Align shadow on hover */ &::before { /* Apply the same value as the main timeline */ diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index c416c9005de..d99cffa068e 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1197,8 +1197,8 @@ export class UnwrappedEventTile extends React.Component {timestamp} - {msgOption} , + msgOption, reactionsRow, ], ); From c2f0cf639075d2dee898ef01a2a3e919ce7f235c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 6 Mar 2023 05:12:36 +0900 Subject: [PATCH 04/30] Align read receipt groups of hidden event lines and normal bubble tiles Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index eba5ef1ad23..6f043f11ff3 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1122,6 +1122,11 @@ $left-gutter: 64px; } } + .mx_ReadReceiptGroup { + /* Move read receipt group inside ThreadView */ + inset-inline-end: 0; + } + &[data-self="true"] { /* Override "align-items: flex-end" to align the avatar and mx_EventTile_line at the center */ align-items: center; @@ -1217,6 +1222,11 @@ $left-gutter: 64px; max-width: var(--EventBubbleTile_line-max-width); } + .mx_ReadReceiptGroup { + /* 42px: magic number. Need to replace with a variable */ + inset-inline-end: calc(-1 * calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - 42px)); + } + &[data-self="true"] { align-items: flex-end; From 6e1688bfab827f6e1152087de5d9ddcc43c2752d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Mar 2023 23:59:03 +0900 Subject: [PATCH 05/30] Enable the test to check whether read receipt group is visible on bubble layout Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 75585c888b3..0b6b9803cab 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -130,14 +130,8 @@ describe("Threads", () => { cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => { - // TODO: remove this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout - // See: https://github.com/vector-im/element-web/issues/23569 - cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("exist"); - // Make sure the avatar inside ReadReceiptGroup is visible on bubble layout - // TODO: enable this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout - // See: https://github.com/vector-im/element-web/issues/23569 - // cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); + cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); }); // Re-enable the group layout From 41638c545f75e35dd43f3981d719038b7c8c3731 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 01:24:26 +0900 Subject: [PATCH 06/30] Edit padding of hidden event lines Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 6f043f11ff3..01197c1aa59 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1052,8 +1052,6 @@ $left-gutter: 64px; &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { $line-height: $font-12px; - - padding-inline-start: 0; line-height: $line-height; .mx_EventTile_content, @@ -1086,12 +1084,22 @@ $left-gutter: 64px; &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { + padding-inline-start: var(--ThreadView_group_spacing-start); + .mx_EventTile_content, .mx_RedactedBody { /* 14px: avatar width, 6px: 20px - 14px */ margin-inline-start: calc(14px + 6px); } } + + &:hover { + &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, + &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, + &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { + padding-inline-start: var(--ThreadView_group_spacing-start); + } + } } &[data-layout="bubble"] { From fd669a33bd99cf20d3c14dcca33cd49de75996fe Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 01:59:17 +0900 Subject: [PATCH 07/30] Edit the test to check mx_EventTile_line margin of hidden event on bubble layout Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 0b6b9803cab..3a5fb7ebf45 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -196,13 +196,11 @@ describe("Threads", () => { cy.get( ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last", ).within(() => { - cy.get(".mx_EventTile_line .mx_EventTile_content") - // 76px: ThreadViewGroupSpacingStart + 14px + 6px - // 14px: avatar width - // See: _EventTile.pcss - .should("have.css", "margin-inline-start", "76px"); cy.get(".mx_EventTile_line") - // Make sure the margin is NOT applied to mx_EventTile_line + // 49px: --EventTile_bubble-margin-inline-start + .should("have.css", "margin-inline-start", "49px"); + cy.get(".mx_EventTile_line .mx_EventTile_content") + // Make sure the margin is NOT applied to mx_EventTile_content .should("have.css", "margin-inline-start", "0px"); }); From a26a154ade03f427ed31bd78646417dcfb7472e9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 02:18:43 +0900 Subject: [PATCH 08/30] Edit the test to check mx_EventTile inline start margin of hidden event on bubble layout Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 3a5fb7ebf45..aceff45a0e7 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -193,13 +193,11 @@ describe("Threads", () => { cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); // Make sure the CSS style for spacing is applied to the hidden event on bubble layout - cy.get( - ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last", - ).within(() => { - cy.get(".mx_EventTile_line") + cy.get(".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble]").within(() => { + cy.get(".mx_EventTile_info.mx_EventTile_last") // 49px: --EventTile_bubble-margin-inline-start .should("have.css", "margin-inline-start", "49px"); - cy.get(".mx_EventTile_line .mx_EventTile_content") + cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line .mx_EventTile_content") // Make sure the margin is NOT applied to mx_EventTile_content .should("have.css", "margin-inline-start", "0px"); }); From 6b5f5151b85db2b154d19d0a4b512649286be4bf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 03:08:49 +0900 Subject: [PATCH 09/30] Edit read receipt group on bubble layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 01197c1aa59..e7bb58501c0 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1213,10 +1213,12 @@ $left-gutter: 64px; } &[data-layout="bubble"] { - margin-inline: var(--BaseCard_EventTile-spacing-inline); + margin-inline-start: var(--BaseCard_EventTile-spacing-inline); + margin-inline-end: var(--EventTile_bubble-margin-inline-end); &::before { - inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline)); + inset-inline-start: calc(-1 * var(--BaseCard_EventTile-spacing-inline)); + inset-inline-end: calc(-1 * var(--EventTile_bubble-margin-inline-end)); z-index: auto; /* enable background color on hover */ } @@ -1231,8 +1233,13 @@ $left-gutter: 64px; } .mx_ReadReceiptGroup { - /* 42px: magic number. Need to replace with a variable */ - inset-inline-end: calc(-1 * calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - 42px)); + /* Moving inside ThreadView, adding 8px space to the right edge of the ThreadPanel */ + /* stylelint-disable-next-line declaration-colon-space-after */ + inset-inline-end: calc( + -1 * calc( + var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - $container-gap-width + - var(--BaseCard_padding-inline)) + ); } &[data-self="true"] { From 691e00b8c5391ac462a440931bd747ff52f88326 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 03:59:48 +0900 Subject: [PATCH 10/30] Snapshot of the edited EventTile Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index aceff45a0e7..7ee326a1211 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -292,11 +292,27 @@ describe("Threads", () => { cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom"); cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Great!"); - // User edits & asserts + // User edits cy.contains(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line", "Great!").within(() => { cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover - cy.get(".mx_BasicMessageComposer_input").type(" How about yourself?{enter}"); + cy.get(".mx_BasicMessageComposer_input").type(" How about yourself?"); }); + + // Ensure the read receipt group on the edited message EventTile is visible + cy.get(".mx_ThreadView .mx_EventTile_isEditing .mx_EventTile_receiptSent").should("be.visible"); + + // Take snapshot of the edited EventTile on modern layout + cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").percySnapshotElement( + "EditMessageComposer on bubble layout", + { + percyCSS, + }, + ); + + // User saves the edit + cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_BasicMessageComposer_input").type("{enter}"); + + // User asserts cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom"); cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should( "contain", From deb38da150eed38611cd09ff2bdc65194e2897d5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 04:45:59 +0900 Subject: [PATCH 11/30] Edit comments and declarations Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index e7bb58501c0..60eb91bce58 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1078,8 +1078,7 @@ $left-gutter: 64px; } .mx_ReadReceiptGroup { - /* This aligns the avatar with the hidden event line by overriding the inherited value */ - inset-block-start: calc(-$font-22px); + inset-block-start: calc(-$font-22px); /* Align with hidden event content */ } &.mx_EventTile_selected .mx_EventTile_line, @@ -1105,14 +1104,13 @@ $left-gutter: 64px; &[data-layout="bubble"] { display: flex; - /* Same setting as the main timeline */ + /* Same declaration as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; - /* Align shadow on hover */ + /* Shadow on hover */ &::before { /* Apply the same value as the main timeline */ - inset-inline-start: calc(-1 * var(--EventTile_bubble-margin-inline-start)); - inset-inline-end: 0; + inset-inline: calc(-1 * var(--EventTile_bubble-margin-inline-start)) 0; } .mx_EventTile_line { @@ -1136,7 +1134,7 @@ $left-gutter: 64px; } &[data-self="true"] { - /* Override "align-items: flex-end" to align the avatar and mx_EventTile_line at the center */ + /* Align the avatar and mx_EventTile_line at the center on hidden event tile line */ align-items: center; } } From 6cb5e59f5ea6fe6a8f18e90392855d3730c1e449 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 05:12:44 +0900 Subject: [PATCH 12/30] Add a comment Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 60eb91bce58..237ebfa4b26 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1212,7 +1212,7 @@ $left-gutter: 64px; &[data-layout="bubble"] { margin-inline-start: var(--BaseCard_EventTile-spacing-inline); - margin-inline-end: var(--EventTile_bubble-margin-inline-end); + margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* Reserve space for read receipt group */ &::before { inset-inline-start: calc(-1 * var(--BaseCard_EventTile-spacing-inline)); From 30162b494f1be392764da6a763fedabd147fbc8c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 05:34:26 +0900 Subject: [PATCH 13/30] Remove inset declaration for MessageActionBar on hidden events Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 237ebfa4b26..f1d099f4140 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1118,14 +1118,6 @@ $left-gutter: 64px; .mx_ViewSourceEvent { flex: auto; /* Fill the line */ } - - .mx_MessageActionBar { - /* Align with MessageActionBar of normal bubbles */ - /* stylelint-disable-next-line declaration-colon-space-after */ - inset-inline-end: calc( - var(--BaseCard_EventTile-spacing-inline) + var(--EventTile_bubble_line-margin-inline-end) - ); - } } .mx_ReadReceiptGroup { From a663e7fe57624c67c985148e8881e8377605205e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 06:00:41 +0900 Subject: [PATCH 14/30] lint Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index f1d099f4140..06a31854680 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1226,9 +1226,8 @@ $left-gutter: 64px; /* Moving inside ThreadView, adding 8px space to the right edge of the ThreadPanel */ /* stylelint-disable-next-line declaration-colon-space-after */ inset-inline-end: calc( - -1 * calc( - var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - $container-gap-width - - var(--BaseCard_padding-inline)) + -1 * calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - $container-gap-width - + var(--BaseCard_padding-inline)) ); } From 41ee51da191fb4a18e75d71528961692ba779eac Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 15:37:02 +0900 Subject: [PATCH 15/30] Apply the override to selected hidden event line only Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 06a31854680..b02497c78f5 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1083,8 +1083,6 @@ $left-gutter: 64px; &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { - padding-inline-start: var(--ThreadView_group_spacing-start); - .mx_EventTile_content, .mx_RedactedBody { /* 14px: avatar width, 6px: 20px - 14px */ @@ -1092,6 +1090,12 @@ $left-gutter: 64px; } } + &.mx_EventTile_selected .mx_EventTile_line { + /* Override .mx_EventTile[data-layout="group"].mx_EventTile_info.mx_EventTile_selected + .mx_EventTile_line */ + padding-inline-start: var(--ThreadView_group_spacing-start); + } + &:hover { &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, From 9c1903892713b121a81f664e87dcb90c8ed9e112 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 15:37:22 +0900 Subject: [PATCH 16/30] Add comments Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index b02497c78f5..fb3cc67baf0 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1054,7 +1054,9 @@ $left-gutter: 64px; $line-height: $font-12px; line-height: $line-height; + /* hidden event content */ .mx_EventTile_content, + /* redacted hidden event */ .mx_RedactedBody { width: auto; font-size: $line-height; @@ -1063,8 +1065,8 @@ $left-gutter: 64px; &[data-layout="irc"], &[data-layout="group"] { - display: block; - padding-top: 0; + display: block; /* "flex" is applied to bubble layout */ + padding-block-start: 0; /* Override .mx_ThreadView .mx_EventTile[data-layout="group"] */ .mx_EventTile_avatar { position: absolute; @@ -1085,6 +1087,7 @@ $left-gutter: 64px; .mx_EventTile_line { .mx_EventTile_content, .mx_RedactedBody { + /* Add space between avatar and hidden event content */ /* 14px: avatar width, 6px: 20px - 14px */ margin-inline-start: calc(14px + 6px); } @@ -1100,13 +1103,13 @@ $left-gutter: 64px; &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-inline-start: var(--ThreadView_group_spacing-start); + padding-inline-start: var(--ThreadView_group_spacing-start); /* Override */ } } } &[data-layout="bubble"] { - display: flex; + display: flex; /* "block" is applied to IRC and group (modern) layout */ /* Same declaration as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; @@ -1201,7 +1204,7 @@ $left-gutter: 64px; &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-inline-start: 0; + padding-inline-start: 0; /* TODO: investigate where this is used */ } } } From 5b7784bfcdb5caba11f4eb6522c14d3d80c48223 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 18:39:55 +0900 Subject: [PATCH 17/30] Sort declarations semantically Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index fb3cc67baf0..03e9f4eee30 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1044,11 +1044,6 @@ $left-gutter: 64px; height: 14px; /* avatar img size */ } - .mx_ViewSourceEvent_toggle { - display: none; /* hide the hidden event expand button, not enough - space, view source can still be used */ - } - &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { $line-height: $font-12px; @@ -1063,6 +1058,11 @@ $left-gutter: 64px; } } + .mx_ViewSourceEvent_toggle { + display: none; /* hide the hidden event expand button, not enough + space, view source can still be used */ + } + &[data-layout="irc"], &[data-layout="group"] { display: block; /* "flex" is applied to bubble layout */ @@ -1075,14 +1075,6 @@ $left-gutter: 64px; z-index: 9; /* position above the hover styling */ } - .mx_MessageTimestamp { - top: 2px; /* Align with avatar */ - } - - .mx_ReadReceiptGroup { - inset-block-start: calc(-$font-22px); /* Align with hidden event content */ - } - &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { .mx_EventTile_content, @@ -1099,6 +1091,14 @@ $left-gutter: 64px; padding-inline-start: var(--ThreadView_group_spacing-start); } + .mx_MessageTimestamp { + top: 2px; /* Align with avatar */ + } + + .mx_ReadReceiptGroup { + inset-block-start: calc(-$font-22px); /* Align with hidden event content */ + } + &:hover { &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, From 6c9c48db79b91993b7bf727ef7900b4f0e3837ed Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 19:23:54 +0900 Subject: [PATCH 18/30] Check spacing of selected hidden event Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 7ee326a1211..d752ba3c7ef 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -189,6 +189,19 @@ describe("Threads", () => { percyCSS, }); + cy.get(".mx_ThreadView .mx_GenericEventListSummary[data-layout=group]").within(() => { + cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line") + // Select the hidden event + .rightclick(); + + // Ensure the same CSS style for spacing is applied to the selected hidden event + cy.get(".mx_EventTile_info.mx_EventTile_selected.mx_EventTile_last .mx_EventTile_line").should( + "have.css", + "padding-inline-start", + ThreadViewGroupSpacingStart, + ); + }); + // Enable bubble layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); From 738ffc2d3869d24eb3ffbc6856a139346a719632 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 19:25:21 +0900 Subject: [PATCH 19/30] Add a new line Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index d752ba3c7ef..a5f6a02d62f 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -210,6 +210,7 @@ describe("Threads", () => { cy.get(".mx_EventTile_info.mx_EventTile_last") // 49px: --EventTile_bubble-margin-inline-start .should("have.css", "margin-inline-start", "49px"); + cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line .mx_EventTile_content") // Make sure the margin is NOT applied to mx_EventTile_content .should("have.css", "margin-inline-start", "0px"); From f452adb5d90d9c07392cfedc9d6cb63f5ab1634d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 19:54:50 +0900 Subject: [PATCH 20/30] Edit a comment Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 03e9f4eee30..0e294bcb606 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1230,7 +1230,7 @@ $left-gutter: 64px; } .mx_ReadReceiptGroup { - /* Moving inside ThreadView, adding 8px space to the right edge of the ThreadPanel */ + /* Moving inside ThreadView, creating 8px space between the right edge of the ThreadPanel */ /* stylelint-disable-next-line declaration-colon-space-after */ inset-inline-end: calc( -1 * calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - $container-gap-width - From dc6b38d2017204ace7742be81466014e2fdcf4f1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Mar 2023 22:51:22 +0900 Subject: [PATCH 21/30] Check if the option buttons of MessageActionBar is visible Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index a5f6a02d62f..b256849d891 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -129,9 +129,27 @@ describe("Threads", () => { // Enable the bubble layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); - cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => { + cy.get(".mx_ThreadView").within(() => { // Make sure the avatar inside ReadReceiptGroup is visible on bubble layout - cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); + cy.get( + ".mx_EventTile[data-layout='bubble'].mx_EventTile_last .mx_ReadReceiptGroup .mx_BaseAvatar_image", + ).should("be.visible"); + + // Make sure the option button of MessageActionBar on the left bubble is visible + cy.get(".mx_EventTile[data-layout='bubble'][data-self='false']") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_MessageActionBar [aria-label='Options']").should("be.visible"); + }); + + // Make sure the option button of MessageActionBar on the right bubble is visible + cy.get(".mx_EventTile[data-layout='bubble'][data-self='true']") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_MessageActionBar [aria-label='Options']").should("be.visible"); + }); }); // Re-enable the group layout From 6684e0b7f33161e270e3a4d1135961ce928c7675 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 03:53:46 +0900 Subject: [PATCH 22/30] Create a variable to display the read receipts group on TimelineCard and ThreadPanel on the same position Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.pcss | 8 +++++++- res/css/views/right_panel/_TimelineCard.pcss | 10 +++------- res/css/views/rooms/_EventTile.pcss | 7 +------ res/css/views/rooms/_ReadReceiptGroup.pcss | 5 ++++- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index 22720a99e03..619c8bc80f7 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -16,9 +16,15 @@ limitations under the License. .mx_BaseCard { --BaseCard_padding-inline: $spacing-8; + --BaseCard_header-button-size: 24px; --BaseCard_EventTile_line-padding-block: 2px; --BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */ - --BaseCard_header-button-size: 24px; + + /* Moving the read receipts group inside BaseCard */ + /* stylelint-disable-next-line declaration-colon-space-after */ + --BaseCard_EventTile_bubble_RR-inset-inline-end: calc( + -1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + var(--BaseCard_padding-inline) + ); padding: 0 var(--BaseCard_padding-inline); overflow: hidden; diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss index 13f949b39e5..f4ccac7cca7 100644 --- a/res/css/views/right_panel/_TimelineCard.pcss +++ b/res/css/views/right_panel/_TimelineCard.pcss @@ -170,16 +170,12 @@ limitations under the License. flex-basis: 48px; /* 12 (padding on message list) + 36 (padding on event lines) */ } - .mx_GenericEventListSummary_unstyledList, /* RR next to a message on the event list summary */ + .mx_GenericEventListSummary_unstyledList, .mx_RoomView_MessageList { - /* RR next to a message on the messsge list */ .mx_EventTile[data-layout="bubble"] { + /* RR next to a message on the event list summary and the messsge list */ .mx_ReadReceiptGroup { - /* 6px: scroll bar width (magic number) */ - /* stylelint-disable-next-line declaration-colon-space-after */ - inset-inline-end: calc( - -1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px - ); + inset-inline-end: var(--BaseCard_EventTile_bubble_RR-inset-inline-end); } &.mx_EventTile_info { diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 0e294bcb606..5e23ca92ae7 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1230,12 +1230,7 @@ $left-gutter: 64px; } .mx_ReadReceiptGroup { - /* Moving inside ThreadView, creating 8px space between the right edge of the ThreadPanel */ - /* stylelint-disable-next-line declaration-colon-space-after */ - inset-inline-end: calc( - -1 * calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) - $container-gap-width - - var(--BaseCard_padding-inline)) - ); + inset-inline-end: var(--BaseCard_EventTile_bubble_RR-inset-inline-end); } &[data-self="true"] { diff --git a/res/css/views/rooms/_ReadReceiptGroup.pcss b/res/css/views/rooms/_ReadReceiptGroup.pcss index c61ec9f68eb..b4af4f8f89c 100644 --- a/res/css/views/rooms/_ReadReceiptGroup.pcss +++ b/res/css/views/rooms/_ReadReceiptGroup.pcss @@ -14,9 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ReadReceiptGroup { +/* Required due to alphabetic order of CSS import */ +:root { --ReadReceiptGroup_EventBubbleTile-spacing-end: 78px; +} +.mx_ReadReceiptGroup { position: relative; display: inline-block; user-select: none; From e63aa2b582b5618ffaa3912a12a11ae6fb6740c5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 05:58:37 +0900 Subject: [PATCH 23/30] Remove the obsolete declaration The declaration has been introduced with 73d346ee2df773fc8358265a3a819f1bdb798535 introducing bubble layout in ThreadView. It has been required because '.mx_ThreadView .mx_EventTile' was styled with flexbox. The flexbox model was deprecated, and the declaration is no longer necessary. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5e23ca92ae7..7f223009eea 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1234,8 +1234,6 @@ $left-gutter: 64px; } &[data-self="true"] { - align-items: flex-end; - .mx_EventTile_line.mx_EventTile_mediaLine { margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */ } From d1f9ebabedcdc6890c3d4efa8dfca7bd99a58697 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 06:25:34 +0900 Subject: [PATCH 24/30] Remove redundant declarations The declarations are specified by _EventBubbleTile.pcss, therefore they are not required here. display:block is not needed here. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 7f223009eea..a75d408259f 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1065,7 +1065,6 @@ $left-gutter: 64px; &[data-layout="irc"], &[data-layout="group"] { - display: block; /* "flex" is applied to bubble layout */ padding-block-start: 0; /* Override .mx_ThreadView .mx_EventTile[data-layout="group"] */ .mx_EventTile_avatar { @@ -1109,8 +1108,6 @@ $left-gutter: 64px; } &[data-layout="bubble"] { - display: flex; /* "block" is applied to IRC and group (modern) layout */ - /* Same declaration as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; @@ -1131,11 +1128,6 @@ $left-gutter: 64px; /* Move read receipt group inside ThreadView */ inset-inline-end: 0; } - - &[data-self="true"] { - /* Align the avatar and mx_EventTile_line at the center on hidden event tile line */ - align-items: center; - } } } From 2acac198f93e5be8bacdd86e1685c066b4a83288 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 06:41:31 +0900 Subject: [PATCH 25/30] Edit a comment Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index a75d408259f..e2ca69d431a 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1085,8 +1085,8 @@ $left-gutter: 64px; } &.mx_EventTile_selected .mx_EventTile_line { - /* Override .mx_EventTile[data-layout="group"].mx_EventTile_info.mx_EventTile_selected - .mx_EventTile_line */ + /* Override + .mx_EventTile[data-layout="group"].mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line */ padding-inline-start: var(--ThreadView_group_spacing-start); } From e87f979251de50b134364db846c81ff414f76eb0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 06:52:59 +0900 Subject: [PATCH 26/30] Apply spacing style of hidden event line on modern layout to one on bubble layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index e2ca69d431a..e4e54d78408 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1065,7 +1065,7 @@ $left-gutter: 64px; &[data-layout="irc"], &[data-layout="group"] { - padding-block-start: 0; /* Override .mx_ThreadView .mx_EventTile[data-layout="group"] */ + padding-block: 0; /* Override .mx_ThreadView .mx_EventTile[data-layout="group"] */ .mx_EventTile_avatar { position: absolute; @@ -1108,6 +1108,10 @@ $left-gutter: 64px; } &[data-layout="bubble"] { + /* Override + .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info */ + padding-block: 0; + /* Same declaration as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; @@ -1118,6 +1122,9 @@ $left-gutter: 64px; } .mx_EventTile_line { + /* Apply the same declaration as mx_EventTile_line on IRC and modern layouts */ + padding-block: var(--BaseCard_EventTile_line-padding-block); + /* Not available on the actual UI anyway as the hidden event expand button is hidden above */ .mx_ViewSourceEvent { flex: auto; /* Fill the line */ From 7741c611c82acaedd0e1bd38c168eafc18e0de0c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 07:04:33 +0900 Subject: [PATCH 27/30] Merge styles and apply the same style rules of block padding to all of the layouts Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index e4e54d78408..70caa184176 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1063,10 +1063,23 @@ $left-gutter: 64px; space, view source can still be used */ } + /* Required for override */ &[data-layout="irc"], - &[data-layout="group"] { - padding-block: 0; /* Override .mx_ThreadView .mx_EventTile[data-layout="group"] */ + &[data-layout="group"], + &[data-layout="bubble"] { + /* Override + .mx_ThreadView .mx_EventTile[data-layout="group"], + .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info */ + padding-block: 0; + + /* Add padding to hidden event line of all of the layouts, including bubble layout */ + .mx_EventTile_line { + padding-block: var(--BaseCard_EventTile_line-padding-block); + } + } + &[data-layout="irc"], + &[data-layout="group"] { .mx_EventTile_avatar { position: absolute; top: 1.5px; /* Align with hidden event content */ @@ -1108,10 +1121,6 @@ $left-gutter: 64px; } &[data-layout="bubble"] { - /* Override - .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info */ - padding-block: 0; - /* Same declaration as the main timeline */ margin-inline: var(--EventTile_bubble-margin-inline-start) 0; @@ -1122,9 +1131,6 @@ $left-gutter: 64px; } .mx_EventTile_line { - /* Apply the same declaration as mx_EventTile_line on IRC and modern layouts */ - padding-block: var(--BaseCard_EventTile_line-padding-block); - /* Not available on the actual UI anyway as the hidden event expand button is hidden above */ .mx_ViewSourceEvent { flex: auto; /* Fill the line */ From bce1619dfa6ef37555071305c5d56bda5c39603c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 16:27:18 +0900 Subject: [PATCH 28/30] Removing a nesting Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 70caa184176..69768e714bb 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1130,11 +1130,9 @@ $left-gutter: 64px; inset-inline: calc(-1 * var(--EventTile_bubble-margin-inline-start)) 0; } - .mx_EventTile_line { - /* Not available on the actual UI anyway as the hidden event expand button is hidden above */ - .mx_ViewSourceEvent { - flex: auto; /* Fill the line */ - } + /* Not available on the actual UI anyway as the hidden event expand button is hidden above */ + .mx_ViewSourceEvent { + flex: auto; /* Fill the line */ } .mx_ReadReceiptGroup { From 9cd24ff0ea32a8317780ed20f15dd120fa7fe18e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Mar 2023 16:44:23 +0900 Subject: [PATCH 29/30] Remove width declaration here to let inherited value enabled Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 69768e714bb..5847f0a229f 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1053,7 +1053,6 @@ $left-gutter: 64px; .mx_EventTile_content, /* redacted hidden event */ .mx_RedactedBody { - width: auto; font-size: $line-height; } } @@ -1130,11 +1129,6 @@ $left-gutter: 64px; inset-inline: calc(-1 * var(--EventTile_bubble-margin-inline-start)) 0; } - /* Not available on the actual UI anyway as the hidden event expand button is hidden above */ - .mx_ViewSourceEvent { - flex: auto; /* Fill the line */ - } - .mx_ReadReceiptGroup { /* Move read receipt group inside ThreadView */ inset-inline-end: 0; From 1e9bb9afb7349ebc8dc500a4aff97b665ebf8383 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Mar 2023 13:27:27 +0000 Subject: [PATCH 30/30] Update res/css/views/right_panel/_TimelineCard.pcss English lesson Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- res/css/views/right_panel/_TimelineCard.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss index f4ccac7cca7..d346d4d59a2 100644 --- a/res/css/views/right_panel/_TimelineCard.pcss +++ b/res/css/views/right_panel/_TimelineCard.pcss @@ -173,7 +173,7 @@ limitations under the License. .mx_GenericEventListSummary_unstyledList, .mx_RoomView_MessageList { .mx_EventTile[data-layout="bubble"] { - /* RR next to a message on the event list summary and the messsge list */ + /* RR next to a message, in either an event list summary or the message list */ .mx_ReadReceiptGroup { inset-inline-end: var(--BaseCard_EventTile_bubble_RR-inset-inline-end); }