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

Remove 100% min-width hack from mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] #8992

Merged
merged 5 commits into from
Jul 6, 2022
Merged

Remove 100% min-width hack from mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] #8992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aac8b24
Remove min-width:100% hack from mx_GenericEventListSummary[data-layou…
luixxiul Jul 3, 2022
5d4bbf0
Align the right edge of expand / collapse link buttons with a variable
luixxiul Jul 3, 2022
a9e7c0c
Set column-gap instead
luixxiul Jul 6, 2022
582333b
Apply common margin values to event tiles and event list summaries
luixxiul Jul 6, 2022
a719dc5
Add a comment
luixxiul Jul 6, 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
7 changes: 3 additions & 4 deletions res/css/views/elements/_GenericEventListSummary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
column-gap: 5px;
}

// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
Expand All @@ -68,15 +68,14 @@ limitations under the License.

.mx_GenericEventListSummary_toggle {
margin-block: 0;
margin-inline-end: 55px;

&[aria-expanded=false] {
order: 9;
margin-inline-start: 5px;
}

&[aria-expanded=true] {
margin-inline-start: auto; // reduce clickable area
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
}
}

Expand Down
24 changes: 14 additions & 10 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,13 @@ limitations under the License.
--gutterSize: 11px;
--cornerRadius: 12px;
--maxWidth: 70%;
margin-right: 60px;

// 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 {
Expand All @@ -48,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;
Expand Down Expand Up @@ -595,6 +599,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],
Expand All @@ -610,13 +621,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;
Expand Down