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

Remove line-height declarations from _ReplyTile.scss #8932

Merged
merged 7 commits into from
Jun 29, 2022
Merged

Remove line-height declarations from _ReplyTile.scss #8932

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d3146ab
Set line-height for ReplyTile on IRC, modern, and bubble layout
luixxiul Jun 27, 2022
0f832e1
Move line-height style block to _EventTile.scss
luixxiul Jun 29, 2022
523a60b
Move line-height style block to _EventTile.scss
luixxiul Jun 29, 2022
c92899e
Revert "Move line-height style block to _EventTile.scss"
luixxiul Jun 29, 2022
a9b110c
Revert "Move line-height style block to _EventTile.scss"
luixxiul Jun 29, 2022
014bb44
Revert "Set line-height for ReplyTile on IRC, modern, and bubble layout"
luixxiul Jun 29, 2022
9f0c89b
Remove line-height declarations to let inherited values used
luixxiul Jun 29, 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
3 changes: 2 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 @@ -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_line-line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
--EventTile_bubble_line-margin-inline-start: -9px;
--EventTile_bubble_line-margin-inline-end: -12px;
--EventTile_bubble_gap-inline: 5px;
Expand Down Expand Up @@ -121,7 +122,7 @@ limitations under the License.

width: fit-content;
max-width: var(--EventBubbleTile_line-max-width); // Align message bubble and displayName
line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
line-height: var(--EventTile_bubble_line-line-height);
}

// other users profile on bubble layout
Expand Down
20 changes: 19 additions & 1 deletion res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}

&[data-layout=irc] {
.mx_ReplyTile .mx_EventTile_content {
line-height: var(--irc-line-height);
}
}

&[data-layout=group] {
--EventTile_group_line-line-height: $font-22px;

> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
Expand All @@ -124,7 +132,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-top: 1px;
padding-bottom: 3px;
padding-left: $left-gutter;
line-height: $font-22px;
line-height: var(--EventTile_group_line-line-height);
robintown marked this conversation as resolved.
Show resolved Hide resolved
}

.mx_EventTile_e2eIcon {
Expand All @@ -135,6 +143,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
margin-right: 10px;
}

.mx_ReplyTile .mx_EventTile_content {
line-height: var(--EventTile_group_line-line-height);
}

.mx_ThreadSummary,
.mx_ThreadSummaryIcon {
margin-left: $left-gutter;
Expand All @@ -144,6 +156,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
margin: $spacing-4 64px;
}
}

&[data-layout=bubble] {
.mx_ReplyTile .mx_EventTile_content {
line-height: var(--EventTile_bubble_line-line-height);
}
}
}

.mx_EventTile:not([data-layout=bubble]) {
Expand Down
10 changes: 5 additions & 5 deletions res/css/views/rooms/_IRCLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ limitations under the License.

$icon-width: 14px;
$right-padding: 5px;
$irc-line-height: $font-18px;

.mx_IRCLayout {
--name-width: 70px;
--irc-line-height: $font-18px;

line-height: $irc-line-height !important;
line-height: var(--irc-line-height) !important;

.mx_EventTile {
// timestamps are links which shouldn't be underlined
Expand All @@ -44,7 +44,7 @@ $irc-line-height: $font-18px;
flex-shrink: 0;

.mx_ReadReceiptGroup {
top: -0.3rem; // ($irc-line-height - avatar height) / 2
top: -0.3rem; // (var(--irc-line-height) - avatar height) / 2
}
}

Expand All @@ -62,7 +62,7 @@ $irc-line-height: $font-18px;
order: 1;
position: relative;
flex-shrink: 0;
height: $irc-line-height;
height: var(--irc-line-height);
display: flex;
align-items: center;

Expand Down Expand Up @@ -135,7 +135,7 @@ $irc-line-height: $font-18px;
}

.mx_TextualEvent {
line-height: $irc-line-height;
line-height: var(--irc-line-height);
}
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/views/rooms/_ReplyTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ limitations under the License.
// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
.mx_EventTile_content {
$reply-lines: 2;
$line-height: $font-22px;
$line-height: $font-22px; // Same as var(--EventTile_group_line-line-height)

text-overflow: ellipsis;
display: -webkit-box;
Expand Down