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

Move mx_EventTile_line and mx_EventTile_reply out of mx_EventTile:not([data-layout=bubble]) #8910

Merged
merged 7 commits into from
Jun 29, 2022
Merged

Move mx_EventTile_line and mx_EventTile_reply out of mx_EventTile:not([data-layout=bubble]) #8910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8c37854
Move .mx_EventTile_line and mx_EventTile_reply out of mx_EventTile:no…
luixxiul Jun 25, 2022
2283313
Apply padding-left only to modern=group layout
luixxiul Jun 25, 2022
b5c9d54
Separate selectors
luixxiul Jun 25, 2022
71249ac
Move .mx_EventTile_line out of mx_EventTile:not([data-layout=bubble])…
luixxiul Jun 26, 2022
a95dace
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble])
luixxiul Jun 26, 2022
c2582a7
Use logical properties
luixxiul Jun 26, 2022
f8cc86b
Use a spacing variable
luixxiul Jun 27, 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
34 changes: 17 additions & 17 deletions res/css/views/right_panel/_TimelineCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,25 @@ limitations under the License.
.mx_EventTile {
&[data-layout=irc],
&[data-layout=group] {
&.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden

.mx_EventTile_e2eIcon {
inset-inline-start: $spacing-8;
}
}

&.mx_EventTile_info {
.mx_EventTile_avatar {
inset-inline-start: 18px;
}
}

.mx_EventTile_avatar {
position: absolute; // for IRC layout
left: -3px;
inset-inline-start: -3px;
}

.mx_EventTile_msgOption {
Expand Down Expand Up @@ -78,27 +94,11 @@ limitations under the License.
}

&:not([data-layout="bubble"]) {
&.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden

.mx_EventTile_e2eIcon {
inset-inline-start: 8px;
}
}

.mx_MessageTimestamp {
position: absolute; // for modern layout and IRC layout
inset-inline-start: auto;
inset-inline-end: 0;
}

&.mx_EventTile_info {
.mx_EventTile_avatar {
left: 18px;
}
}
}
}

Expand Down
22 changes: 11 additions & 11 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_MImageBody {
margin-right: 34px;
}

.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
border-radius: 8px;
}

.mx_EventTile_reply {
margin-right: 10px;
}
}

&[data-layout=group] {
Expand Down Expand Up @@ -113,6 +123,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
padding-left: $left-gutter;
line-height: $font-22px;
}

Expand Down Expand Up @@ -197,17 +208,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
clear: both;
}

.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 8px;
}

.mx_EventTile_reply {
margin-right: 10px;
}

/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_IRCLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ $irc-line-height: $font-18px;
}
}

.mx_EventTile_line, .mx_EventTile_reply {
padding: 0;
.mx_EventTile_line,
.mx_EventTile_reply {
display: flex;
flex-direction: column;
order: 3;
Expand Down