Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Organize rules of GenericEventListSummary on bubble layout (#8599)

Browse Source 
* Organize - data-expanded=false

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

* Organize - data-expanded=true

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

* Organize - EventTile

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

* Dedupe mx_GenericEventListSummary[data-layout=bubble]

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-05-18 13:10:02 +00:00 committed by GitHub
parent bb46846981
commit 9b92eca73d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -606,42 +606,42 @@ limitations under the License.
content: "";
clear: both;
}
}
.mx_GenericEventListSummary[data-expanded=false][data-layout=bubble] {
// Align with left edge of bubble tiles
padding: 0 49px;
}
&[data-expanded=false] {
// Align with left edge of bubble tiles
padding: 0 49px;
// 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.
.mx_GenericEventListSummary[data-expanded=true][data-layout=bubble] {
display: flex;
flex-direction: column;
margin: 0;
.mx_EventTile_info {
padding: 2px 0;
margin-right: 0;
.mx_MessageActionBar {
inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
right: 48px; // align with that of right-column bubbles
}
.mx_ReadReceiptGroup {
right: -18px; // match alignment to RRs of chat bubbles
}
&::before {
right: 0; // match alignment of the hover background to that of chat bubbles
// 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] {
margin-top: 20px;
}
}
}
// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
.mx_GenericEventListSummary[data-layout=bubble][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 {
padding: 2px 0;
margin-right: 0;
.mx_MessageActionBar {
inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
right: 48px; // align with that of right-column bubbles
}
.mx_ReadReceiptGroup {
right: -18px; // match alignment to RRs of chat bubbles
}
&::before {
right: 0; // match alignment of the hover background to that of chat bubbles
}
}
}
}
/* events that do not require bubble layout */