From 4e502fb3031d17557b5edfe76eef254cc9c2b62d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 23 Apr 2022 19:03:04 +0000 Subject: [PATCH 1/4] Fix position of the message action bar on data-self=false bubble - Fix position of the bar on GenericEventListSummary as well - Override default value `right: 8px` of MessageActionBar Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 4329d37c0eb..e41d6560da1 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -146,7 +146,8 @@ limitations under the License. } .mx_MessageActionBar { - right: -100px; // to make sure it doesn't overflow to the left or cover sender profile + right: initial; + left: calc(100% - 32px); // 32px: width of a message action bar item } --backgroundColor: $eventbubble-others-bg; @@ -195,6 +196,7 @@ limitations under the License. order: -1; } } + .mx_EventTile_avatar { top: -19px; // height of the sender block right: -35px; @@ -582,7 +584,8 @@ limitations under the License. margin-right: 0; .mx_MessageActionBar { - right: 127px; // align with that of right-column bubbles + right: initial; + left: calc(100% - 161px); // align with that of right-column bubbles } .mx_ReadReceiptGroup { From 03b5f20acde8fccd7c69dd28b6a0eb76b030fd87 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 01:26:31 +0900 Subject: [PATCH 2/4] Use variables for MessageActionBar Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 9 ++++++--- res/css/views/rooms/_EventBubbleTile.scss | 8 ++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index e270a8512fa..030b0d92c4c 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -16,11 +16,14 @@ limitations under the License. */ .mx_MessageActionBar { + --MessageActionBar-size-button: 28px; + --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2 + position: absolute; visibility: hidden; cursor: pointer; display: flex; - height: 32px; + height: var(--MessageActionBar-size-box); line-height: $font-24px; border-radius: 8px; background: $background; @@ -64,8 +67,8 @@ limitations under the License. } .mx_MessageActionBar_maskButton { - width: 28px; - height: 28px; + width: var(--MessageActionBar-size-button); + height: var(--MessageActionBar-size-button); &:disabled, &[disabled] { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 69cea6ef950..0ca9b396490 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -150,8 +150,8 @@ limitations under the License. } .mx_MessageActionBar { - right: initial; - left: calc(100% - 32px); // 32px: width of a message action bar item + inset-inline-start: calc(100% - var(--MessageActionBar-size-box)); + right: initial; // Reset the default value } .mx_ThreadSummary { @@ -601,8 +601,8 @@ limitations under the License. margin-right: 0; .mx_MessageActionBar { - right: initial; - left: calc(100% - 161px); // align with that of right-column bubbles + inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar + right: 48px; // align with that of right-column bubbles } .mx_ReadReceiptGroup { From f0923429509547e5ce5eee82110246df5d4387c8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 01:41:53 +0900 Subject: [PATCH 3/4] Set the right property to [data-self=true] Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 0ca9b396490..7c7103fbffe 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -109,7 +109,6 @@ limitations under the License. .mx_MessageActionBar { top: -28px; - right: 0; z-index: 9; // above the avatar } @@ -215,6 +214,10 @@ limitations under the License. background: $eventbubble-self-bg; } + .mx_MessageActionBar { + inset-inline-end: 0; + } + --backgroundColor: $eventbubble-self-bg; } From 358c98ae04af5d87069f65b924d61b28ef0c2ddc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 01:55:27 +0900 Subject: [PATCH 4/4] Remove space for "React" and "Reply" buttons inside MessageActionBar on the left side bubble inside ThreadView This commit removes space reserved for those buttons on deleted or "Unable to decrypt" message bubble inside ThreadView. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 60f72600bf5..423b6ea8e5b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -892,12 +892,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss margin: 0 -13px 0 0; // align with normal messages } } - - &[data-self=false] { - .mx_MessageActionBar { - right: -60px; // smaller overlap, otherwise it'll overflow on the right - } - } } .mx_EventTile[data-layout=group] {