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

Remove margin from E2E icon between avatar and hidden event #8584

Merged
merged 6 commits into from
Jun 15, 2022
Merged

Remove margin from E2E icon between avatar and hidden event #8584

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5aa40fa
Remove margin from warning E2E icon between an avatar and a hidden event
luixxiul May 13, 2022
3ac2190
Use a variable to ensure the same spacing around the E2E icon
luixxiul May 13, 2022
52bade6
Apply the style to E2E icon
luixxiul May 13, 2022
0dea00d
Rename variables
luixxiul May 20, 2022
77c7564
Merge branch 'develop' into EventTile_e2eIcon
luixxiul Jun 11, 2022
1620ea4
Merge branch 'develop' into EventTile_e2eIcon
luixxiul Jun 15, 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
12 changes: 7 additions & 5 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ limitations under the License.
.mx_EventTile[data-layout=bubble] {
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
--EventTile_bubble_gap-inline: 5px;

position: relative;
margin-top: var(--gutterSize);
Expand Down Expand Up @@ -268,12 +269,12 @@ limitations under the License.
}

.mx_EventTile_line {
--EventBubbleTile_line-margin-inline-end: -12px;
--EventTile_bubble_line-margin-inline-end: -12px;

position: relative;
display: flex;
gap: 5px;
margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px;
gap: 5px var(--EventTile_bubble_gap-inline);
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 -9px;
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);

Expand Down Expand Up @@ -600,7 +601,7 @@ limitations under the License.
.mx_EventTile_avatar {
position: static;
order: -1;
margin-right: 5px;
margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event
}

.mx_EventTile_line,
Expand All @@ -611,7 +612,8 @@ limitations under the License.
}

.mx_EventTile_e2eIcon {
margin-left: 9px;
margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here
align-self: center;
}

.mx_EventTile_line {
Expand Down