From aac8b2462334296336846d2886e7c74f722c4124 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 3 Jul 2022 22:59:05 +0900 Subject: [PATCH 1/5] Remove min-width:100% hack from mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] Signed-off-by: Suguru Hirahara --- .../views/elements/_GenericEventListSummary.scss | 6 +++--- res/css/views/rooms/_EventBubbleTile.scss | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index 243506a447b..ab0a4f3f6f4 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -43,8 +43,8 @@ limitations under the License. &[data-expanded=false] { display: flex; align-items: center; - justify-content: flex-start; - padding: 0 49px; // Align with left edge of bubble tiles + justify-content: space-between; + padding-inline-start: 49px; // Align with left edge of bubble tiles } // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but @@ -68,7 +68,6 @@ limitations under the License. .mx_GenericEventListSummary_toggle { margin-block: 0; - margin-inline-end: 55px; &[aria-expanded=false] { order: 9; @@ -77,6 +76,7 @@ limitations under the License. &[aria-expanded=true] { margin-inline-start: auto; // reduce clickable area + margin-inline-end: 55px; } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 08acc7b3b32..41ecbc0edc3 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -595,6 +595,13 @@ limitations under the License. display: flex; align-items: center; justify-content: flex-start; + + .mx_EventTile_line, + .mx_EventTile_info { + min-width: 100%; + // Preserve alignment with left edge of text in bubbles + margin: 0; + } } .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], @@ -610,13 +617,6 @@ limitations under the License. margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event } - .mx_EventTile_line, - .mx_EventTile_info { - min-width: 100%; - // Preserve alignment with left edge of text in bubbles - margin: 0; - } - .mx_EventTile_e2eIcon { margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here align-self: center; From 5d4bbf001198262d6b68bdaeed74ba496c227bc6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 3 Jul 2022 23:01:37 +0900 Subject: [PATCH 2/5] Align the right edge of expand / collapse link buttons with a variable Signed-off-by: Suguru Hirahara --- res/css/views/elements/_GenericEventListSummary.scss | 2 +- res/css/views/rooms/_EventBubbleTile.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index ab0a4f3f6f4..fc369c417c9 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -76,7 +76,7 @@ limitations under the License. &[aria-expanded=true] { margin-inline-start: auto; // reduce clickable area - margin-inline-end: 55px; + margin-inline-end: var(--EventBubbleTile-margin-inline-end); } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 41ecbc0edc3..6f29fc382c4 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -28,7 +28,8 @@ limitations under the License. --gutterSize: 11px; --cornerRadius: 12px; --maxWidth: 70%; - margin-right: 60px; + --EventBubbleTile-margin-inline-end: 60px; + margin-right: var(--EventBubbleTile-margin-inline-end); } .mx_RoomView_searchResultsPanel { From a9e7c0ce19f8994d733387856ed90c07f39477f3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 6 Jul 2022 12:23:56 +0900 Subject: [PATCH 3/5] Set column-gap instead Signed-off-by: Suguru Hirahara --- res/css/views/elements/_GenericEventListSummary.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index fc369c417c9..c4f8cdf2389 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -45,6 +45,7 @@ limitations under the License. align-items: center; justify-content: space-between; padding-inline-start: 49px; // Align with left edge of bubble tiles + column-gap: 5px; } // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but @@ -71,7 +72,6 @@ limitations under the License. &[aria-expanded=false] { order: 9; - margin-inline-start: 5px; } &[aria-expanded=true] { From 582333bf8ca922710aaf71ff032d25f3e96f1577 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 6 Jul 2022 15:39:44 +0900 Subject: [PATCH 4/5] Apply common margin values to event tiles and event list summaries Signed-off-by: Suguru Hirahara --- res/css/views/elements/_GenericEventListSummary.scss | 3 +-- res/css/views/rooms/_EventBubbleTile.scss | 11 +++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index c4f8cdf2389..c83b726d0ef 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -44,7 +44,6 @@ limitations under the License. display: flex; align-items: center; justify-content: space-between; - padding-inline-start: 49px; // Align with left edge of bubble tiles column-gap: 5px; } @@ -76,7 +75,7 @@ limitations under the License. &[aria-expanded=true] { margin-inline-start: auto; // reduce clickable area - margin-inline-end: var(--EventBubbleTile-margin-inline-end); + margin-inline-end: var(--EventTile_bubble-margin-inline-end); } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 6f29fc382c4..8e998b13378 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -28,8 +28,13 @@ limitations under the License. --gutterSize: 11px; --cornerRadius: 12px; --maxWidth: 70%; - --EventBubbleTile-margin-inline-end: 60px; - margin-right: var(--EventBubbleTile-margin-inline-end); + + // For both event tile and event list summary + --EventTile_bubble-margin-inline-start: 49px; + --EventTile_bubble-margin-inline-end: 60px; + + margin-inline-start: var(--EventTile_bubble-margin-inline-start); + margin-inline-end: var(--EventTile_bubble-margin-inline-end); } .mx_RoomView_searchResultsPanel { @@ -49,8 +54,6 @@ limitations under the License. } .mx_EventTile[data-layout=bubble] { - --EventTile_bubble-margin-inline-start: 49px; - --EventTile_bubble-margin-inline-end: 60px; --EventTile_bubble_line-margin-inline-start: -9px; --EventTile_bubble_line-margin-inline-end: -12px; --EventTile_bubble_gap-inline: 5px; From a719dc5a7e8d5faa45886be82db89439da308076 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 6 Jul 2022 15:40:08 +0900 Subject: [PATCH 5/5] Add a comment Signed-off-by: Suguru Hirahara --- res/css/views/elements/_GenericEventListSummary.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index c83b726d0ef..a3bbd13663d 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -75,7 +75,7 @@ limitations under the License. &[aria-expanded=true] { margin-inline-start: auto; // reduce clickable area - margin-inline-end: var(--EventTile_bubble-margin-inline-end); + margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin } }