PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move style declarations out of :not([data-layout=bubble]) in ThreadView (#9020)

Browse source 
* Move mx_EventTile out of mx_EventTile:not([data-layout=bubble]) in mx_ThreadView

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

* Use a logical property

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

* Remove a redundant declaration

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

* Apply zero inline start padding to group layout only

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

* Reorder style blocks; irc/group before bubble

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

* Move styles for mx_EventTile_avatar of info event lines on ThreadView out of :not() pseudo class

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

* Move styles in mx_GenericEventListSummary on ThreadView out of :not() pseudo class

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

* Shorthand for inline margin

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

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-08 09:38:06 +00:00 committed by GitHub
parent eff0395771
commit 4fb11968fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
res/css/views/rooms/_EventTile.scss
View file

@ -326,7 +326,7 @@ $left-gutter: 64px;
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px + $selected-message-border-width); padding-inline-start: calc($left-gutter + 18px + $selected-message-border-width);
} }
} }
} }
@ -957,8 +957,7 @@ $left-gutter: 64px;
} }
.mx_EventTile_line { .mx_EventTile_line {
padding-top: var(--BaseCard_EventTile_line-padding-block); padding-block: var(--BaseCard_EventTile_line-padding-block);
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
} }
.mx_EventTile_line, .mx_EventTile_line,
@ -1004,16 +1003,14 @@ $left-gutter: 64px;
&[data-layout=group] { &[data-layout=group] {
padding-top: 0; padding-top: 0;
.mx_MessageTimestamp {
top: 2px; // Align with avatar
}
}
&:not([data-layout=bubble]) {
.mx_EventTile_avatar { .mx_EventTile_avatar {
left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
z-index: 9; // position above the hover styling z-index: 9; // position above the hover styling
} }
.mx_MessageTimestamp {
top: 2px; // Align with avatar
}
} }
&[data-layout=bubble] { &[data-layout=bubble] {
@ -1023,19 +1020,11 @@ $left-gutter: 64px;
} }
} }
&:not([data-layout=bubble]) { &[data-layout=irc],
padding-top: $spacing-16; &[data-layout=group] {
padding-block-start: $spacing-16;
&:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-inline-start: 0; // Override
}
.mx_EventTile_line { .mx_EventTile_line {
padding-top: var(--BaseCard_EventTile_line-padding-block);
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
.mx_EventTile_content { .mx_EventTile_content {
&.mx_EditMessageComposer { &.mx_EditMessageComposer {
padding-inline-start: 0; // align start of first letter with that of the event body padding-inline-start: 0; // align start of first letter with that of the event body
@ -1044,34 +1033,6 @@ $left-gutter: 64px;
} }
} }
&[data-layout=bubble] {
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; // enable background color on hover
}
.mx_ReactionsRow {
position: relative; // display on hover
}
.mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0;
padding-inline-start: 0;
max-width: var(--EventBubbleTile_line-max-width);
}
&[data-self=true] {
align-items: flex-end;
.mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
}
}
}
&[data-layout=group] { &[data-layout=group] {
width: 100%; width: 100%;
@ -1139,13 +1100,51 @@ $left-gutter: 64px;
position: absolute; // for IRC layout position: absolute; // for IRC layout
top: 2px; // Align with mx_EventTile_content top: 2px; // Align with mx_EventTile_content
} }
&:hover {
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-inline-start: 0;
}
}
}
&[data-layout=bubble] {
margin-inline: var(--BaseCard_EventTile-spacing-inline);
&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; // enable background color on hover
}
.mx_ReactionsRow {
position: relative; // display on hover
}
.mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0;
padding-inline-start: 0;
max-width: var(--EventBubbleTile_line-max-width);
}
&[data-self=true] {
align-items: flex-end;
.mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
}
}
} }
} }
.mx_GenericEventListSummary { .mx_GenericEventListSummary {
&:not([data-layout=bubble]) > .mx_EventTile_line { &[data-layout=irc],
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text &[data-layout=group] {
padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text > .mx_EventTile_line {
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
}
} }
} }
} }