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

Implement new Read Receipt design (#8389)

Browse source 
* feat: introduce new alignment types for tooltip
* feat: introduce new hook for tooltips
* feat: allow using onFocus callback for RovingAccessibleButton
* feat: allow using custom class for ContextMenu
* feat: allow setting tab index for avatar
* refactor: move read receipts out of event tile
* feat: implement new read receipt design
* feat: update SentReceipt to match new read receipts as well
This commit is contained in:
Janne Mareike Koschinski 2022-04-22 17:09:44 +02:00 • committed by GitHub
parent 03c46770f4
commit ee2ee3c08c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 553 additions and 270 deletions
Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/right_panel/_TimelineCard.scss
View file

@ -125,8 +125,8 @@ limitations under the License.
padding-left: 36px;
}
.mx_EventTile_readAvatars {
top: -10px;
.mx_ReadReceiptGroup {
top: -6px;
}
.mx_WhoIsTypingTile {

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

@ -447,7 +447,7 @@ limitations under the License.
}
}
.mx_EventTile_readAvatars {
.mx_ReadReceiptGroup {
position: absolute;
right: -78px; // as close to right gutter without clipping as possible
bottom: 0;
@ -585,8 +585,8 @@ limitations under the License.
right: 127px; // align with that of right-column bubbles
}
.mx_EventTile_readAvatars {
right: -18px; // match alignment to RRs of chat bubbles
.mx_ReadReceiptGroup {
right: -14px; // match alignment to RRs of chat bubbles
}
&::before {

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

@ -22,20 +22,18 @@ $left-gutter: 64px;
.mx_EventTile_receiptSent,
.mx_EventTile_receiptSending {
// Give it some dimensions so the tooltip can position properly
position: relative;
display: inline-block;
width: 14px;
height: 14px;
// We don't use `position: relative` on the element because then it won't line
// up with the other read receipts
width: 16px;
height: 16px;
&::before {
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: 14px;
height: 14px;
mask-size: 16px;
width: 16px;
height: 16px;
content: '';
position: absolute;
top: 0;
@ -349,36 +347,6 @@ $left-gutter: 64px;
}
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2.2rem
top: -2.2rem;
user-select: none;
z-index: 1;
}
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
height: $font-14px;
width: $font-14px;
will-change: left, top;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}
.mx_EventTile_readAvatarRemainder {
color: $event-timestamp-color;
font-size: $font-11px;
position: absolute;
}
.mx_EventTile_bigEmoji {
font-size: 48px;
line-height: 57px;

2
res/css/views/rooms/_GroupLayout.scss
View file

@ -97,7 +97,7 @@ $left-gutter: 64px;
top: 3px;
}
.mx_EventTile_readAvatars {
.mx_ReadReceiptGroup {
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2rem
top: -2rem;

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

@ -49,8 +49,8 @@ $irc-line-height: $font-18px;
order: 5;
flex-shrink: 0;
.mx_EventTile_readAvatars {
top: 0.2rem; // ($irc-line-height - avatar height) / 2
.mx_ReadReceiptGroup {
top: -0.3rem; // ($irc-line-height - avatar height) / 2
}
}

146
res/css/views/rooms/_ReadReceiptGroup.scss Normal file
View file

@ -0,0 +1,146 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ReadReceiptGroup {
position: relative;
display: inline-block;
// This aligns the avatar with the last line of the
// message. We want to move it one line up
// See .mx_GroupLayout .mx_EventTile .mx_EventTile_line in _GroupLayout.scss
top: calc(-$font-22px - 3px);
user-select: none;
z-index: 1;
.mx_ReadReceiptGroup_button {
display: inline-flex;
flex-direction: row;
height: 16px;
padding: 4px;
border-radius: 6px;
&.mx_AccessibleButton {
&:hover {
background: $event-selected-color;
}
}
}
.mx_ReadReceiptGroup_remainder {
color: $secondary-content;
font-size: $font-11px;
line-height: $font-16px;
margin-right: 4px;
}
.mx_ReadReceiptGroup_container {
position: relative;
display: block;
height: 100%;
.mx_BaseAvatar {
position: absolute;
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid $background;
border-radius: 100%;
will-change: left, top;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}
}
}
.mx_ReadReceiptGroup_popup {
max-height: 300px;
width: 220px;
border-radius: 8px;
display: flex;
flex-direction: column;
text-align: left;
font-size: 12px;
line-height: 15px;
right: 0;
&.mx_ContextualMenu_top {
top: 8px;
}
&.mx_ContextualMenu_bottom {
bottom: 8px;
}
.mx_ReadReceiptGroup_title {
font-size: 12px;
line-height: 15px;
margin: 16px 16px 8px;
font-weight: 600;
// shouldn’t be actually focusable
outline: none;
}
.mx_AutoHideScrollbar {
.mx_ReadReceiptGroup_person {
display: flex;
flex-direction: row;
padding: 4px;
margin: 0 12px;
border-radius: 8px;
&:hover {
background: $menu-selected-color;
}
&:last-child {
margin-bottom: 8px;
}
.mx_BaseAvatar {
margin: 6px 8px;
align-self: center;
justify-self: center;
}
.mx_ReadReceiptGroup_name {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
p {
margin: 2px 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_ReadReceiptGroup_secondary {
color: $secondary-content;
}
}
}
}
}
.mx_ReadReceiptGroup_person--tooltip {
overflow-y: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}