martmull
00e418a039
Closes twentyhq/core-team-issues#2729 Call recordings attached to a calendar event are now displayed next to the human participants, in the timeline event card (`EventCardCalendarEvent`). They are rendered as the source app's `AppChip`, rounded so it sits in the participant avatar group, with the recording status in tooltip https://github.com/user-attachments/assets/e0c393c8-fd65-4468-8c4f-503dd22c13d5 ## Before No call recorder chip displayed TODO: add this in the calendar views (`CalendarEventRow`)
94 lines
1.4 KiB
SCSS
94 lines
1.4 KiB
SCSS
// Size values mirror AVATAR_PROPERTIES_BY_SIZE (constants/AvatarPropertiesBySize.ts)
|
|
.root {
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
border-radius: var(--t-border-radius-xs);
|
|
border: var(--avatar-border, none);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: var(--avatar-color);
|
|
background: var(--avatar-background);
|
|
|
|
&[data-type='icon'] {
|
|
border-radius: var(--t-border-radius-sm);
|
|
}
|
|
|
|
&[data-type='rounded'] {
|
|
border-radius: 50%;
|
|
corner-shape: round;
|
|
}
|
|
|
|
&[data-clickable] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@include hover-capable {
|
|
&[data-clickable]:hover {
|
|
box-shadow: 0 0 0 4px var(--t-background-transparent-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xl {
|
|
font-size: 16px;
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
.lg {
|
|
font-size: 13px;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
.md {
|
|
font-size: 12px;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.sm {
|
|
font-size: 10px;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
.xs {
|
|
font-size: 8px;
|
|
height: 12px;
|
|
width: 12px;
|
|
}
|
|
|
|
.pulsing {
|
|
animation: avatarPulsing 0.8s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes avatarPulsing {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pulsing {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
height: 100%;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
.placeholderChar {
|
|
font-weight: 500;
|
|
}
|