Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Fix position of the message action bar on left side bubbles #8398

Merged
merged 11 commits into from
May 16, 2022
Merged

Fix position of the message action bar on left side bubbles #8398

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4e502fb
Fix position of the message action bar on data-self=false bubble
luixxiul Apr 23, 2022
3776461
Merge branch 'develop' into EventBubbleTile_MessageActionBar
luixxiul Apr 30, 2022
1e23603
Merge branch 'develop' into EventBubbleTile_MessageActionBar
luixxiul May 3, 2022
19cc217
Merge branch 'develop' into EventBubbleTile_MessageActionBar
luixxiul May 5, 2022
d41870d
Merge branch 'develop' into EventBubbleTile_MessageActionBar
luixxiul May 7, 2022
726e744
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul May 12, 2022
03b5f20
Use variables for MessageActionBar
luixxiul May 12, 2022
f092342
Set the right property to [data-self=true]
luixxiul May 12, 2022
358c98a
Remove space for "React" and "Reply" buttons inside MessageActionBar …
luixxiul May 12, 2022
e0ae174
Merge branch 'develop' into EventBubbleTile_MessageActionBar
luixxiul May 13, 2022
2f10b39
Merge branch 'develop' into EventBubbleTile_MessageActionBar
luixxiul May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions res/css/views/messages/_MessageActionBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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] {
Expand Down
10 changes: 8 additions & 2 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ limitations under the License.

.mx_MessageActionBar {
top: -28px;
right: 0;
z-index: 9; // above the avatar
}

Expand Down Expand Up @@ -150,7 +149,8 @@ limitations under the License.
}

.mx_MessageActionBar {
right: -100px; // to make sure it doesn't overflow to the left or cover sender profile
inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
right: initial; // Reset the default value
}

.mx_ThreadSummary {
Expand Down Expand Up @@ -204,6 +204,7 @@ limitations under the License.
order: -1;
}
}

.mx_EventTile_avatar {
top: -19px; // height of the sender block
right: -35px;
Expand All @@ -213,6 +214,10 @@ limitations under the License.
background: $eventbubble-self-bg;
}

.mx_MessageActionBar {
inset-inline-end: 0;
}

--backgroundColor: $eventbubble-self-bg;
}

Expand Down Expand Up @@ -599,6 +604,7 @@ limitations under the License.
margin-right: 0;

.mx_MessageActionBar {
inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
right: 48px; // align with that of right-column bubbles
}

Expand Down
6 changes: 0 additions & 6 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down