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

Improve style rules of threads list (#8706)

Browse source 
* Remove obsolete declarations - border-radius of EventTile_line

The border-radius is specified with .mx_EventTile[data-shape="ThreadsList"]

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

* Move declarations for ThreadSummary on Threadslist from _ThreadsPanel.scss to _EventTile.scss

To .mx_EventTile[data-shape=ThreadsList]

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

* mx_ThreadPanel_replies block is used only on threads list after all

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

* &::after and &::before

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

* Set shorthand property and use variables

- Shorthand for inset property of border between threads
- Use variables

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

* Change 'ThreadPanel_ThreadsAmount' class name to 'ThreadPanel_replies_amount'

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

* specific to prevent regressions

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-07 13:55:11 +00:00 committed by GitHub
parent 5da187d520
commit 3a20cb1703
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -284,18 +284,6 @@ limitations under the License.
}
}
.mx_ThreadPanel_replies {
margin-top: $spacing-8;
display: flex;
align-items: center;
position: relative;
.mx_ThreadPanel_ThreadsAmount {
@mixin ThreadsAmount;
font-size: $font-12px; // Same font size as the counter on the main panel
}
}
.mx_ThreadPanel_viewInRoom::before {
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
}

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

@ -728,6 +728,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
$borderRadius: 8px;
$padding: $spacing-8;
$hrHeight: 1px;
$notification-dot-size: 8px; // notification dot next to the timestamp
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); // include the height of horizontal line
padding: $padding $spacing-24 $padding $padding;
@ -747,29 +748,34 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
box-shadow: none; // don't show the verification left stroke in the thread list
}
&::after {
&::after,
&::before {
content: "";
position: absolute;
left: calc(var(--leftOffset) + $padding);
right: $spacing-24; // 24px: 32px - 8px (right padding)
}
&::after {
$inset-block-start: auto;
$inset-inline-end: calc(32px - $padding);
$inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line
$inset-inline-start: calc(var(--leftOffset) + $padding);
inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;
height: $hrHeight;
bottom: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line
background-color: $quinary-content;
pointer-events: none; // disable the message action bar on hover
}
&::before {
content: "";
position: absolute;
inset: 0;
}
// Display notification dot
&[data-notification]::before {
width: 8px;
height: 8px;
width: $notification-dot-size;
height: $notification-dot-size;
border-radius: 50%;
inset: 14px 8px auto auto; // 14px: align the dot with the timestamp row
inset: 14px $spacing-8 auto auto; // 14px: align the dot with the timestamp row
}
&[data-notification=total]::before {
@ -793,15 +799,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
.mx_EventTile_avatar {
top: $padding;
left: $padding;
inset: $padding auto auto $padding;
}
.mx_DisambiguatedProfile {
margin-right: 12px;
margin-right: $spacing-12;
display: inline-flex;
flex: 1;
}
.mx_DisambiguatedProfile_displayName,
.mx_DisambiguatedProfile_mxid {
@ -818,11 +822,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_DisambiguatedProfile_mxid {
flex: 1;
}
}
.mx_EventTile_line {
width: 100%;
box-sizing: border-box;
border-radius: $borderRadius !important; // override 4px
.mx_ThreadPanel_replies {
margin-top: $spacing-8;
display: flex;
align-items: center;
position: relative;
.mx_ThreadPanel_replies_amount {
@mixin ThreadsAmount;
font-size: $font-12px; // Same font size as the counter on the main panel
}
}
}
.mx_DisambiguatedProfile,

2
src/components/views/rooms/EventTile.tsx
View file

@ -518,7 +518,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
}
return <div className="mx_ThreadPanel_replies">
<span className="mx_ThreadPanel_ThreadsAmount">
<span className="mx_ThreadPanel_replies_amount">
{ this.state.thread.length }
</span>
<ThreadMessagePreview thread={this.state.thread} />