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

Add unread indicator to the timelineCard header icon (#7156)

Browse source 
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
Co-authored-by: Travis Ralston <travisr@matrix.org>
This commit is contained in:
Timo 2021-11-30 11:06:20 +01:00 • committed by GitHub
parent 766d1ee3e8
commit 8905c5d2bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

71
res/css/structures/_RightPanel.scss
View file

@ -103,7 +103,7 @@ limitations under the License.
mask-position: center;
}
$dot-size: 8px;
$dot-size: 7px;
$pulse-color: $alert;
.mx_RightPanel_pinnedMessagesButton {
@ -111,36 +111,53 @@ $pulse-color: $alert;
mask-image: url('$(res)/img/element-icons/room/pin.svg');
mask-position: center;
}
}
.mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute;
right: 0;
top: 0;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1.6);
transform-origin: center center;
background: rgba($background, 1);
}
.mx_RightPanel_pinnedMessagesButton_unreadIndicator {
.mx_RightPanel_headerButton_unreadIndicator {
position: absolute;
right: 0;
top: 0;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
&.mx_Indicator_gray {
background: rgba($input-darker-fg-color, 1);
box-shadow: rgba($input-darker-fg-color, 1);
}
&::after {
content: "";
position: absolute;
right: 0;
width: inherit;
height: inherit;
top: 0;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
left: 0;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_RightPanel_indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: rgba($pulse-color, 1);
}
transform-origin: center center;
animation-name: mx_RightPanel_indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}