Make call tiles look less broken in the right panel (#9808)
Robin
GitHub
parent
8778abc05c
commit
8660293424
|
|
@ -30,7 +30,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border: 1px solid $background;
|
||||
border: 1px solid var(--facepile-background, $background);
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
|
|
|
|||
|
|
@ -29,49 +29,70 @@ limitations under the License.
|
|||
border-radius: 8px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacing-8;
|
||||
|
||||
.mx_CallEvent_title {
|
||||
font-size: $font-15px;
|
||||
line-height: 24px; /* in px to match the avatar */
|
||||
}
|
||||
|
||||
&.mx_CallEvent_inactive .mx_CallEvent_title::before {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background-color: $secondary-content;
|
||||
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.mx_CallEvent_active .mx_CallEvent_title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> .mx_BaseAvatar {
|
||||
> .mx_BaseAvatar,
|
||||
> .mx_Icon {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
> .mx_CallEvent_infoRows {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-4;
|
||||
> .mx_Icon {
|
||||
padding: 0;
|
||||
margin: $spacing-4 0;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
> .mx_CallDuration {
|
||||
padding: $spacing-4;
|
||||
.mx_LiveContentSummary {
|
||||
font-size: $font-12px;
|
||||
}
|
||||
|
||||
> .mx_CallEvent_button {
|
||||
box-sizing: border-box;
|
||||
min-width: 120px;
|
||||
}
|
||||
--facepile-background: $system;
|
||||
}
|
||||
|
||||
.mx_CallEvent_title {
|
||||
font-size: $font-15px;
|
||||
line-height: 24px; /* in px to match the avatar */
|
||||
}
|
||||
|
||||
.mx_CallEvent_inactive .mx_CallEvent_title::before {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background-color: $secondary-content;
|
||||
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
|
||||
.mx_CallEvent_active .mx_CallEvent_title {
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
||||
.mx_CallEvent_columns {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
gap: $spacing-12;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_TimelineCard .mx_CallEvent_columns {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-8;
|
||||
}
|
||||
|
||||
.mx_CallEvent_details {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mx_CallEvent_button {
|
||||
box-sizing: border-box;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ limitations under the License.
|
|||
padding: $spacing-12;
|
||||
color: $call-lobby-primary-content;
|
||||
background-color: $call-lobby-background;
|
||||
|
||||
--facepile-background: $call-lobby-background;
|
||||
border-radius: 8px;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -57,10 +59,6 @@ limitations under the License.
|
|||
.mx_FacePile {
|
||||
width: fit-content;
|
||||
margin: $spacing-8 auto 0;
|
||||
|
||||
.mx_FacePile_faces .mx_BaseAvatar_image {
|
||||
border-color: $call-lobby-background;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_preview {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="white"/>
|
||||
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
|
||||
<path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="currentColor"/>
|
||||
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 393 B After Width: | Height: | Size: 407 B |
|
|
@ -66,28 +66,30 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
|
|||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<div className="mx_CallEvent_infoRows">
|
||||
<span className="mx_CallEvent_title">
|
||||
{_t("%(name)s started a video call", { name: senderName })}
|
||||
</span>
|
||||
<LiveContentSummary
|
||||
type={LiveContentType.Video}
|
||||
text={_t("Video call")}
|
||||
active={false}
|
||||
participantCount={participatingMembers.length}
|
||||
/>
|
||||
<FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
|
||||
<div className="mx_CallEvent_columns">
|
||||
<div className="mx_CallEvent_details">
|
||||
<span className="mx_CallEvent_title">
|
||||
{_t("%(name)s started a video call", { name: senderName })}
|
||||
</span>
|
||||
<LiveContentSummary
|
||||
type={LiveContentType.Video}
|
||||
text={_t("Video call")}
|
||||
active={false}
|
||||
participantCount={participatingMembers.length}
|
||||
/>
|
||||
<FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
|
||||
</div>
|
||||
{call && <GroupCallDuration groupCall={call.groupCall} />}
|
||||
<AccessibleTooltipButton
|
||||
className="mx_CallEvent_button"
|
||||
kind={buttonKind}
|
||||
disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
|
||||
onClick={onButtonClick}
|
||||
tooltip={buttonDisabledTooltip}
|
||||
>
|
||||
{buttonText}
|
||||
</AccessibleTooltipButton>
|
||||
</div>
|
||||
{call && <GroupCallDuration groupCall={call.groupCall} />}
|
||||
<AccessibleTooltipButton
|
||||
className="mx_CallEvent_button"
|
||||
kind={buttonKind}
|
||||
disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
|
||||
onClick={onButtonClick}
|
||||
tooltip={buttonDisabledTooltip}
|
||||
>
|
||||
{buttonText}
|
||||
</AccessibleTooltipButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -164,15 +166,17 @@ export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
|
|||
const call = useCall(mxEvent.getRoomId()!);
|
||||
const latestEvent = client
|
||||
.getRoom(mxEvent.getRoomId())!
|
||||
.currentState.getStateEvents(mxEvent.getType(), mxEvent.getStateKey()!);
|
||||
.currentState.getStateEvents(mxEvent.getType(), mxEvent.getStateKey()!)!;
|
||||
|
||||
if ("m.terminated" in latestEvent.getContent()) {
|
||||
// The call is terminated
|
||||
return (
|
||||
<div className="mx_CallEvent_wrapper" ref={ref}>
|
||||
<div className="mx_CallEvent mx_CallEvent_inactive">
|
||||
<span className="mx_CallEvent_title">{_t("Video call ended")}</span>
|
||||
<CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
|
||||
<div className="mx_CallEvent_columns">
|
||||
<span className="mx_CallEvent_title">{_t("Video call ended")}</span>
|
||||
<CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue