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

Normalize inline spacing of image and file button on ThreadView #8664

Merged
merged 4 commits into from
May 21, 2022
Merged

Normalize inline spacing of image and file button on ThreadView #8664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
949a08a
Replace padding with margin for an image and a file button for group …
luixxiul May 21, 2022
316fb13
Remove !important flag as it is no longer required
luixxiul May 21, 2022
9c0be42
Remove an obsolete block of .mx_EventTile_mediaLine
luixxiul May 21, 2022
31a9cb4
Use a variable to ensure alignment
luixxiul May 21, 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
4 changes: 3 additions & 1 deletion res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,10 +243,12 @@ limitations under the License.
}

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

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

Expand Down
25 changes: 9 additions & 16 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -895,7 +895,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);

.mx_EventTile_line.mx_EventTile_mediaLine {
padding: 0 !important;
padding: 0;
max-width: 100%;

.mx_MFileBody {
Expand All @@ -907,7 +907,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
align-items: flex-end;

.mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 -13px 0 0; // align with normal messages
margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages
}
}
}
Expand Down Expand Up @@ -935,6 +935,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}

.mx_MFileBody,
.mx_MImageBody {
display: block; // Apply margin to span element
margin-inline-start: var(--ThreadView_group_spacing-start);
margin-inline-end: var(--ThreadView_group_spacing-end);
}

.mx_ReplyChain_wrapper {
.mx_MLocationBody {
margin-inline-start: 0;
Expand Down Expand Up @@ -965,20 +972,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
}

.mx_EventTile_mediaLine {
padding-inline-start: var(--ThreadView_group_spacing-start);
}
}

.mx_EventTile_mediaLine {
padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
padding-right: 50px;

.mx_MImageBody {
margin: 0;
padding: 0;
}
}

.mx_MessageComposer_sendMessage {
Expand Down