OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) 

* 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>
pull/28788/head^2
Suguru Hirahara 2022-07-06 10:44:23 +00:00 committed by GitHub
parent 2706f14456
commit 5349f301da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/right_panel/_TimelineCard.scss
View File

@ -149,13 +149,16 @@ limitations under the License.
}
}
.mx_GenericEventListSummary:not([data-layout=bubble]) {
.mx_GenericEventListSummary {
&[data-layout=irc],
&[data-layout=group] {
.mx_EventTile_line,
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .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_WhoIsTypingTile {
margin-left: -12px; // undo padding on the message list

43
res/css/views/rooms/_EventTile.scss
View File

@ -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] {
@ -366,17 +370,42 @@ $left-gutter: 64px;
}
}
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
padding-left: $left-gutter;
.mx_RedactedBody {
.mx_GenericEventListSummary {
&[data-layout=irc],
&[data-layout=group] {
.mx_EventTile_line .mx_RedactedBody {
line-height: 1; // remove spacing between lines
}
}
}
.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 {
&[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
}
}
&[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 {

17
res/css/views/rooms/_IRCLayout.scss
View File

@ -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;
@ -36,7 +36,7 @@ $irc-line-height: $font-18px;
padding-top: 0;
> * {
margin-right: $right-padding;
margin-right: var(--right-padding);
}
.mx_EventTile_msgOption {
@ -157,7 +157,7 @@ $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));
}
}
@ -165,18 +165,15 @@ $irc-line-height: $font-18px;
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 {