imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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: ""; content: "";
clear: both; clear: both;
} }
}
.mx_GenericEventListSummary[data-expanded=false][data-layout=bubble] { &[data-expanded=false] {
// Align with left edge of bubble tiles // Align with left edge of bubble tiles
padding: 0 49px; padding: 0 49px;
}
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. + .mx_EventTile[data-layout=bubble][data-self=true] {
.mx_GenericEventListSummary[data-expanded=true][data-layout=bubble] { margin-top: 20px;
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 // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] { // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
margin-top: 20px; &[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 */ /* events that do not require bubble layout */