From 8d6176c018d30c4cc40e9de881efd3c37a167777 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 18 May 2022 19:17:25 +0900 Subject: [PATCH 1/8] Use the inherited value of padding for ReactionsRow of EventTile on TimelineCard in IRC/modern layout Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index e1b28aabecb..1ac9dbe65cc 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -80,7 +80,7 @@ limitations under the License. } .mx_ReactionsRow { - padding: 0; + padding-inline: 0; // See margin setting of ReactionsRow on _EventTile.scss margin-right: 8px; From 7f5e75eef8ec5df9cac68cad31b4fc1733833431 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 19 May 2022 01:27:34 +0900 Subject: [PATCH 2/8] Replace padding around reactions row with margin Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 5 +---- res/css/views/rooms/_EventTile.scss | 3 +-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 1ac9dbe65cc..c239c628edd 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -80,10 +80,7 @@ limitations under the License. } .mx_ReactionsRow { - padding-inline: 0; - - // See margin setting of ReactionsRow on _EventTile.scss - margin-right: 8px; + margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss } .mx_ThreadSummary { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1be9b2a0666..1327d0053ca 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -270,8 +270,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_ReactionsRow { - margin: 0; - padding: 4px 64px; + margin: $spacing-4 64px; } } From 1336ab88814afd13fa14254cdd2ccdb2f83c2f8f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 19 May 2022 01:45:53 +0900 Subject: [PATCH 3/8] Align reactions row with event tile bubble Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 10 +++++----- res/css/views/rooms/_EventTile.scss | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 161fe9a6cc1..77921120802 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -55,6 +55,8 @@ 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; position: relative; margin-top: var(--gutterSize); @@ -268,12 +270,11 @@ limitations under the License. } .mx_EventTile_line { - --EventBubbleTile_line-margin-inline-end: -12px; - position: relative; display: flex; gap: 5px; - margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; + margin-block: 0; + margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end); border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); @@ -485,8 +486,7 @@ limitations under the License. } .mx_ReactionsRow { - margin-right: -18px; - margin-left: -9px; + margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end); } &.mx_EventTile_bad { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1327d0053ca..4b94074ecec 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -976,7 +976,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss align-items: flex-end; .mx_EventTile_line.mx_EventTile_mediaLine { - margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages + margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages } } } From 13cd58155da03b0b09a15ae875e099a4e190f647 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 20 May 2022 21:07:37 +0900 Subject: [PATCH 4/8] Apply a flexbox to ReactionsRow of data-self=false as well Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 26 +++++++++++++++-------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 77921120802..f3651dd8430 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -178,6 +178,17 @@ limitations under the License. border-color: $quinary-content; } + .mx_ReactionsRow { + display: flex; + flex-flow: wrap; + gap: $spacing-4; + margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end); + + .mx_ReactionsRowButton { + margin: 0; + } + } + &[data-self=false] { .mx_EventTile_line { border-bottom-right-radius: var(--cornerRadius); @@ -206,6 +217,10 @@ limitations under the License. margin-inline-end: auto; } + .mx_ReactionsRow { + justify-content: flex-start; + } + --backgroundColor: $eventbubble-others-bg; } @@ -243,13 +258,10 @@ limitations under the License. } .mx_ReactionsRow { - float: right; - clear: right; - display: flex; + justify-content: flex-end; - /* Moving the "add reaction button" before the reactions */ > :last-child { - order: -1; + order: -1; // Moving the "add reaction button" before the reactions } } @@ -485,10 +497,6 @@ limitations under the License. } } - .mx_ReactionsRow { - margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end); - } - &.mx_EventTile_bad { /* Special layout scenario for "Unable To Decrypt (UTD)" events */ .mx_EventTile_line { From 0ea563d1cf725c53ef9ecdfe52f4917a5fbf66d3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 21 May 2022 02:38:48 +0900 Subject: [PATCH 5/8] Extract common declarations for ReactionsRow from _EventBubbleTile.scss Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 7 ------- res/css/views/rooms/_EventTile.scss | 11 +++++++++++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index f3651dd8430..174970b3fc2 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -179,14 +179,7 @@ limitations under the License. } .mx_ReactionsRow { - display: flex; - flex-flow: wrap; - gap: $spacing-4; margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end); - - .mx_ReactionsRowButton { - margin: 0; - } } &[data-self=false] { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 4b94074ecec..136df578a23 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -65,6 +65,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } + .mx_ReactionsRow { + display: flex; + flex-flow: wrap; + align-items: center; + gap: $spacing-4; + + .mx_ReactionsRowButton { + margin: 0; + } + } + &[data-layout=group] { .mx_EventTile_line { line-height: var(--GroupLayout-EventTile-line-height); From d372fa2b8c0dd327a98de647aca45a6d5ba02278 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 11 Jun 2022 15:29:20 +0900 Subject: [PATCH 6/8] Remove redundant margin declarations Spacing is now taken care of by gap property Signed-off-by: Suguru Hirahara --- res/css/views/messages/_ReactionsRowButton.scss | 1 - res/css/views/rooms/_EventTile.scss | 4 ---- 2 files changed, 5 deletions(-) diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 4bbfc3ed274..ce78e21f492 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_ReactionsRowButton { display: inline-flex; line-height: $font-20px; - margin-right: 6px; padding: 1px 6px; border: 1px solid $message-action-bar-border-color; border-radius: 10px; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 136df578a23..4422cf28602 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -70,10 +70,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss flex-flow: wrap; align-items: center; gap: $spacing-4; - - .mx_ReactionsRowButton { - margin: 0; - } } &[data-layout=group] { From e8a0913ec1eb17d430c3e8d1d1337c80934267cc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 11 Jun 2022 15:33:07 +0900 Subject: [PATCH 7/8] Remove a redundant declaration - cursor value can be inherited from AccessibleButton Signed-off-by: Suguru Hirahara --- res/css/views/messages/_ReactionsRowButton.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index ce78e21f492..d8bc626eff4 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -21,7 +21,6 @@ limitations under the License. border: 1px solid $message-action-bar-border-color; border-radius: 10px; background-color: $header-panel-bg-color; - cursor: pointer; user-select: none; vertical-align: middle; From cfa0b15b4e0e0290084b2a58de2482329d0f2bcb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 11 Jun 2022 15:39:54 +0900 Subject: [PATCH 8/8] Remove a declaration not working vertical-align property only applies to inline-level elements Signed-off-by: Suguru Hirahara --- res/css/views/messages/_ReactionsRowButton.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index d8bc626eff4..138782ddb2a 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -22,7 +22,6 @@ limitations under the License. border-radius: 10px; background-color: $header-panel-bg-color; user-select: none; - vertical-align: middle; &:hover { border-color: $reaction-row-button-hover-border-color;