Make call tiles look less broken in the right panel

matrix-org · Dec 20, 2022 · a6bb615 · a6bb615
1 parent d6e447b
commit a6bb615
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 63 deletions.
diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss
@@ -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 {

diff --git a/res/css/views/messages/_CallEvent.pcss b/res/css/views/messages/_CallEvent.pcss
@@ -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_BaseAvatar,
+    > .mx_Icon {
+        align-self: flex-start;
     }
 
-    &.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_Icon {
+        padding: 0;
+        margin: $spacing-4 0;
+        color: $secondary-content;
     }
 
-    &.mx_CallEvent_active .mx_CallEvent_title {
-        font-weight: 600;
+    .mx_LiveContentSummary {
+        font-size: $font-12px;
     }
 
-    > .mx_BaseAvatar {
-        align-self: flex-start;
-    }
+    --facepile-background: $system;
+}
 
-    > .mx_CallEvent_infoRows {
-        flex-grow: 1;
+.mx_CallEvent_title {
+    font-size: $font-15px;
+    line-height: 24px; /* in px to match the avatar */
+}
 
-        display: flex;
-        flex-direction: column;
-        gap: $spacing-4;
-    }
+.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_CallDuration {
-        padding: $spacing-4;
-    }
+.mx_CallEvent_active .mx_CallEvent_title {
+    font-weight: $font-semi-bold;
+}
 
-    > .mx_CallEvent_button {
-        box-sizing: border-box;
-        min-width: 120px;
-    }
+.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;
 }
diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss
@@ -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 {

diff --git a/res/img/element-icons/call/video-call.svg b/res/img/element-icons/call/video-call.svg
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
@@ -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>
         );
@@ -171,8 +173,10 @@ export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
         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>
         );