mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Move style rules of GenericEventListSummary from _EventBubbleTile.scss to _GenericEventListSummary.scss (#8713)

Browse source 
* Move declarations of mx_GenericEventListSummary to _GenericEventListSummary.scss

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

* Move declarations of mx_GenericEventListSummary[data-expanded=false] to _GenericEventListSummary.scss

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

* Move declarations of mx_GenericEventListSummary[data-expanded=true] to _GenericEventListSummary.scss

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

* de-nestify style rules

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

* Remove a padding declaration for _EventBubbleTile.scss to set correct cascading order

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

* GenericEventListSummary_toggle for ':not([data-layout=bubble])'

Stop setting margin values as default ones

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

* GenericEventListSummary_avatars for ':not([data-layout=bubble])'

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

* Extract flexbox declarations into _GenericEventListSummary.scss

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

* Move declarations of '&[data-layout=bubble]' up

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

* Extract background color into _GenericEventListSummary.scss

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

* Merge style rules of background of EventTile_bad

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

* Move .mx_GenericEventListSummary_avatars block from _IRCLayout.scsss to _GenericEventListSummary.scss

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

* de-nestify style rules

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

* Stop using :not() pseudo class

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-28 13:05:19 +00:00 committed by GitHub
parent 8b841951db
commit 2571042480
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 113 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
res/css/views/elements/_GenericEventListSummary.scss
View file

@ -16,6 +16,76 @@ limitations under the License.
.mx_GenericEventListSummary {
position: relative;
&[data-layout=irc],
&[data-layout=group] {
.mx_GenericEventListSummary_toggle {
float: right;
margin: 8px 10px 0 0;
}
.mx_GenericEventListSummary_avatars {
padding-top: $spacing-8;
}
}
&[data-layout=irc] {
.mx_GenericEventListSummary_avatars {
padding: 0;
margin: 0 9px 0 0;
}
}
&[data-layout=bubble] {
--maxWidth: 70%;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
&[data-expanded=false] {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 49px; // Align with left edge of bubble tiles
}
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
&[data-expanded=true] {
display: flex;
flex-direction: column;
margin: 0;
}
&::after {
content: "";
clear: both;
}
&:hover {
&::before {
background: transparent;
}
}
.mx_GenericEventListSummary_toggle {
margin: 0 55px 0 5px;
&[aria-expanded=false] {
order: 9;
}
&[aria-expanded=true] {
text-align: right;
}
}
.mx_GenericEventListSummary_line {
display: none;
}
.mx_GenericEventListSummary_avatars {
padding-top: 0;
}
}
}
.mx_GenericEventListSummary_unstyledList {
@ -31,7 +101,6 @@ limitations under the License.
.mx_GenericEventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: $font-12px;
}
@ -43,9 +112,6 @@ limitations under the License.
.mx_GenericEventListSummary_toggle {
color: $accent;
cursor: pointer;
float: right;
margin-right: 10px;
margin-top: 8px;
}
.mx_GenericEventListSummary_line {

82
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -489,6 +489,12 @@ limitations under the License.
}
&.mx_EventTile_bad {
&:hover {
&::before {
background: transparent;
}
}
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
.mx_EventTile_line {
display: grid;
@ -588,6 +594,15 @@ limitations under the License.
}
}
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
.mx_EventTile.mx_EventTile_info[data-layout=bubble] {
padding: 5px 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
.mx_EventTile.mx_EventTile_info[data-layout=bubble],
@ -595,11 +610,6 @@ limitations under the License.
--backgroundColor: transparent;
--gutterSize: 0;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
.mx_EventTile_avatar {
position: static;
order: -1;
@ -634,74 +644,19 @@ limitations under the License.
}
.mx_GenericEventListSummary[data-layout=bubble] {
--maxWidth: 70%;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
.mx_GenericEventListSummary_toggle {
margin: 0 55px 0 5px;
float: none;
&[aria-expanded=false] {
order: 9;
}
&[aria-expanded=true] {
text-align: right;
}
}
.mx_GenericEventListSummary_line {
display: none;
}
.mx_GenericEventListSummary_avatars {
padding-top: 0;
}
.mx_EventTile {
&.mx_EventTile_info {
.mx_EventTile_line {
.mx_EventTile.mx_EventTile_info .mx_EventTile_line {
// Avoid overflow of event info by cancelling width settings
width: 100%;
min-width: 0;
max-width: 100%;
}
}
}
/* events that do not require bubble layout */
.mx_EventTile_line {
background: transparent;
}
&:hover {
&::before {
background: transparent;
}
}
&::after {
content: "";
clear: both;
}
&[data-expanded=false] {
// Align with left edge of bubble tiles
padding: 0 49px;
// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
+ .mx_EventTile[data-layout=bubble][data-self=true] {
&[data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
margin-top: 20px;
}
}
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
&[data-expanded=true] {
display: flex;
flex-direction: column;
margin: 0;
.mx_EventTile_info {
&[data-expanded=true] .mx_EventTile_info {
padding: 2px 0;
margin-right: 0;
@ -720,7 +675,6 @@ limitations under the License.
}
}
}
}
.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
flex-direction: column; // restore the centering

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

@ -307,15 +307,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
.mx_GenericEventListSummary:not([data-layout=bubble]) {
.mx_EventTile_line {
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
padding-left: $left-gutter;
.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 {

9
res/css/views/rooms/_IRCLayout.scss
View file

@ -120,17 +120,10 @@ $irc-line-height: $font-18px;
margin: 0;
}
.mx_GenericEventListSummary {
> .mx_EventTile_line {
.mx_GenericEventListSummary > .mx_EventTile_line {
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
}
.mx_GenericEventListSummary_avatars {
padding: 0;
margin: 0 9px 0 0;
}
}
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: calc(var(--name-width) + 10px + $icon-width);