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

Commit

Permalink
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#…
Browse files Browse the repository at this point in the history 
…8994)

* Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply avatar position settings to modern/group layout only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete style block

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove inline padding setting from mx_EventTile_line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a correct variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix misalignment of avatars and textual events on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Align avatars and hidden events on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
  • Loading branch information
@luixxiul
luixxiul committed Jul 12, 2022
1 parent 780a903 commit c175263
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 40 deletions.
73 changes: 40 additions & 33 deletions res/css/views/rooms/_EventTile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,12 @@ $left-gutter: 64px;
}
}

&.mx_EventTile_info {
.mx_EventTile_e2eIcon {
top: 0;
}
}

&.mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}
Expand Down Expand Up @@ -267,6 +273,15 @@ $left-gutter: 64px;
padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
}
}

&.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-inset-inline-start);
top: 0;
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}
}
}

&[data-layout=group] {
Expand Down Expand Up @@ -338,8 +353,31 @@ $left-gutter: 64px;
padding-top: 0px !important;
}

&.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
&.mx_EventTile_info {
$spacing-block-start: 3px;
$spacing-block-end: 2px;

padding-top: 0;

.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
margin: $spacing-block-start 0 $spacing-block-end;
}

.mx_EventTile_avatar {
top: initial;
inset-inline-start: $left-gutter;
height: 14px;
}

.mx_EventTile_line {
padding-block: $spacing-block-start $spacing-block-end;
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area

.mx_MessageTimestamp {
top: 0;
}
}
}

&:hover {
Expand Down Expand Up @@ -370,33 +408,6 @@ $left-gutter: 64px;
font-size: $font-14px;
position: relative;

&.mx_EventTile_info {
padding-top: 0;

.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
margin: 3px 0 2px; // Align with mx_EventTile_line
}

.mx_EventTile_e2eIcon {
top: 0;
}

.mx_EventTile_avatar {
top: initial;
inset-inline-start: $left-gutter;
height: 14px;
}

.mx_EventTile_line {
padding-block: 3px 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon

.mx_MessageTimestamp {
top: 0;
}
}
}

/* 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 Expand Up @@ -425,10 +436,6 @@ $left-gutter: 64px;
}

&[data-layout=irc] {
.mx_EventTile_info .mx_EventTile_line {
padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
}

.mx_EventTile_line .mx_RedactedBody {
padding-left: 24px; // 25px - 1px

Expand Down
12 changes: 5 additions & 7 deletions res/css/views/rooms/_IRCLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ $irc-line-height: $font-18px;
line-height: $irc-line-height !important;

.mx_EventTile {
--EventTile_irc_line-padding-block: 1px;

// timestamps are links which shouldn't be underlined
> a {
text-decoration: none;
Expand Down Expand Up @@ -129,10 +131,11 @@ $irc-line-height: $font-18px;
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
display: inline-block;
// add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
padding: 1px 0;
padding: var(--EventTile_irc_line-padding-block) 0;
}

.mx_ReplyTile {
Expand Down Expand Up @@ -162,16 +165,11 @@ $irc-line-height: $font-18px;
}

.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-inset-inline-start);
top: 0;
margin-right: var(--right-padding);
}

.mx_EventTile_line {
left: var(--EventTile_irc_line_info-inset-inline-start);
}

.mx_ViewSourceEvent, // For hidden events
.mx_TextualEvent {
line-height: $irc-line-height;
}
Expand Down

0 comments on commit c175263

Please sign in to comment.