mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 09:15:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve _GenericEventListSummary.scss (#9005)

Browse source 
* Include mx_BaseAvatar

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

* Include style blocks of mx_MatrixChat_useCompactLayout

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>

* Set top padding to avatars on group layout only

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

* Remove a redundant declaration for bubble layout

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

* Set the same margin value to mx_GenericEventListSummary_avatars on every layout

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

* Remove margin-top from mx_GenericEventListSummary_toggle on IRC layout

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

* Remove block margin from mx_GenericEventListSummary_toggle on both IRC layout and modern layout

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

* Set spacing to mx_GenericEventListSummary instead of its child elements

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

* Apply the margin to every layout

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

* Move general rules up

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

* Apply block margin to mx_GenericEventListSummary_toggle of every layout

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

* Apply top margin to modern layout

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

* Include mx_MatrixChat_useCompactLayout

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

* Set top margin to mx_GenericEventListSummary insted of toggle

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

* Use a spacing variable

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

* Remove a redundant declaration

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

* Add a comment

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

* Apply display flex as a default value

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

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

@ -17,31 +17,45 @@ limitations under the License.
.mx_GenericEventListSummary {
position: relative;
.mx_GenericEventListSummary_avatars {
margin-right: $spacing-8;
}
&[data-layout=irc],
&[data-layout=group] {
.mx_GenericEventListSummary_toggle {
float: right;
margin: 8px 10px 0 0;
}
.mx_GenericEventListSummary_avatars {
padding-top: $spacing-8;
margin-inline: 0 10px;
}
}
&[data-layout=irc] {
.mx_GenericEventListSummary_avatars {
padding: 0;
margin: 0 9px 0 0;
}
&[data-layout=group] {
margin-top: $spacing-8;
}
&[data-layout=bubble] {
--maxWidth: 70%;
display: flex;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
.mx_GenericEventListSummary_toggle {
margin-block: 0;
&[aria-expanded=false] {
order: 9; // TODO: Remove
}
&[aria-expanded=true] {
margin-inline-start: auto; // reduce clickable area
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
}
}
.mx_GenericEventListSummary_line {
display: none;
}
&[data-expanded=false] {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 5px;
@ -50,7 +64,6 @@ limitations under the License.
// 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;
}
@ -65,26 +78,22 @@ limitations under the License.
background: transparent;
}
}
}
.mx_GenericEventListSummary_toggle {
margin-block: 0;
.mx_MatrixChat_useCompactLayout & {
font-size: $font-13px;
margin-top: $spacing-4;
&[aria-expanded=false] {
order: 9;
}
&[aria-expanded=true] {
margin-inline-start: auto; // reduce clickable area
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
}
.mx_EventTile_line {
line-height: $font-20px;
}
.mx_GenericEventListSummary_line {
display: none;
line-height: $font-22px;
}
.mx_GenericEventListSummary_avatars {
padding-top: 0;
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-13px;
}
}
}
@ -101,13 +110,12 @@ limitations under the License.
.mx_GenericEventListSummary_avatars {
display: inline-block;
margin-right: 8px;
line-height: $font-12px;
}
.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
.mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
}
.mx_GenericEventListSummary_line {
@ -115,24 +123,3 @@ limitations under the License.
margin-left: 63px;
line-height: $font-30px;
}
.mx_MatrixChat_useCompactLayout {
.mx_GenericEventListSummary {
font-size: $font-13px;
.mx_EventTile_line {
line-height: $font-20px;
}
}
.mx_GenericEventListSummary_line {
line-height: $font-22px;
}
.mx_GenericEventListSummary_toggle {
margin-top: 3px;
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-13px;
}
}