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

Commit

Permalink
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944)
Browse files Browse the repository at this point in the history 
* Stop using :not() pseudo class for mx_GenericEventListSummary

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

* Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width

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

* Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding

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

* Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss

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

* Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble])

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

* Move common style rules up

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

* Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout

There should not be spacing between avatars and info tile line on IRC Layout

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

* Apply the rule to group/modern layout only

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

* Apply the inline start padding to modern/group layout only

Overriding $left-gutter is not necessary for IRC layout

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

* Merge the style block for mx_EventTile_info .mx_EventTile_line

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

* Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout

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

* Add spacing between avatar and a single info event tile line on IRC layout

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

* Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard

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

* Fix padding of line with redacted body text

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
  • Loading branch information
@luixxiul
luixxiul committed Jul 6, 2022
1 parent 2706f14 commit 5349f30
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 23 deletions.
13 changes: 8 additions & 5 deletions res/css/views/right_panel/_TimelineCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,14 @@ limitations under the License.
}
}

.mx_GenericEventListSummary:not([data-layout=bubble]) {
.mx_EventTile_line,
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
.mx_GenericEventListSummary {
&[data-layout=irc],
&[data-layout=group] {
.mx_EventTile_line,
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
}
}
}

Expand Down
45 changes: 37 additions & 8 deletions res/css/views/rooms/_EventTile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,10 @@ $left-gutter: 64px;
&.mx_EventTile_continuation {
padding-top: 0px !important;
}

&.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
}
}

&[data-layout=bubble] {
Expand Down Expand Up @@ -366,17 +370,42 @@ $left-gutter: 64px;
}
}

.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
padding-left: $left-gutter;
.mx_GenericEventListSummary {
&[data-layout=irc],
&[data-layout=group] {
.mx_EventTile_line .mx_RedactedBody {
line-height: 1; // remove spacing between lines
}
}

.mx_RedactedBody {
line-height: 1; // remove spacing between lines
&[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

&::before {
left: var(--right-padding);
}
}

// Apply only collapsed events block
> .mx_EventTile_line {
padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding
}
}
}

.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
&[data-layout=group] {
.mx_EventTile_line {
padding-left: $left-gutter;
}

.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
}
}
}

.mx_EventTile_content {
Expand Down
17 changes: 7 additions & 10 deletions res/css/views/rooms/_IRCLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

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

.mx_IRCLayout {
--name-width: 70px;
--icon-width: 14px;
--right-padding: 5px;

line-height: $irc-line-height !important;

Expand All @@ -36,7 +36,7 @@ $irc-line-height: $font-18px;
padding-top: 0;

> * {
margin-right: $right-padding;
margin-right: var(--right-padding);
}

.mx_EventTile_msgOption {
Expand Down Expand Up @@ -157,26 +157,23 @@ $irc-line-height: $font-18px;

.mx_EventTile_emote {
.mx_EventTile_avatar {
margin-left: calc(var(--name-width) + $icon-width + $right-padding);
margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
}
}

blockquote {
margin: 0;
}

.mx_GenericEventListSummary > .mx_EventTile_line {
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
}

.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: calc(var(--name-width) + 10px + $icon-width);
left: calc(var(--name-width) + 10px + var(--icon-width));
top: 0;
margin-right: var(--right-padding);
}

.mx_EventTile_line {
left: calc(var(--name-width) + 10px + $icon-width);
left: calc(var(--name-width) + 10px + var(--icon-width));
}

.mx_TextualEvent {
Expand Down

0 comments on commit 5349f30

Please sign in to comment.