From 40947a2a681f03b62013c9c002b1e4ddea7916db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 26 Jul 2021 12:21:58 +0200
Subject: [PATCH] Simplifie toast handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/toasts/_IncomingCallToast.scss | 11 +-----
 src/CallHandler.tsx                          |  3 +-
 src/components/structures/ToastContainer.tsx | 37 +++++++++++---------
 src/stores/ToastStore.ts                     |  2 +-
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index d49014efdb..975628f948 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -16,17 +16,8 @@ limitations under the License.
 */
 
 .mx_IncomingCallToast {
-    // mx_Toast overrides
-    padding: 8px !important;
-    display: flex !important;
-    top: 8px !important;
-
-    border-radius: 8px;
+    display: flex;
     flex-direction: row;
-    min-width: 250px;
-    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
-    background-color: $voipcall-plinth-color;
-
     pointer-events: initial; // restore pointer events so the user can accept/decline
 
     .mx_IncomingCallToast_content {
diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index e9831b5315..5018c44488 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -648,10 +648,9 @@ export default class CallHandler extends EventEmitter {
         if (status === CallState.Ringing) {
             ToastStore.sharedInstance().addOrReplaceToast({
                 key: toastKey,
-                supplyWholeBody: true,
                 priority: 100,
                 component: IncomingCallToast,
-                className: "mx_IncomingCallToast",
+                bodyClassName: "mx_IncomingCallToast",
                 props: { call },
             });
         } else {
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 75cf4a51fc..0b0e871975 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -58,37 +58,42 @@ export default class ToastContainer extends React.Component<{}, IState> {
         let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
-            const { title, icon, key, component, className, props, supplyWholeBody } = topToast;
-            const toastClasses = classNames("mx_Toast_toast", {
+            const { title, icon, key, component, className, bodyClassName, props } = topToast;
+            const bodyClasses = classNames("mx_Toast_body", bodyClassName);
+            const toastClasses = classNames("mx_Toast_toast", className, {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
-            }, className);
-
-            let countIndicator;
-            if (isStacked || this.state.countSeen > 0) {
-                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
-            }
-
+            });
             const toastProps = Object.assign({}, props, {
                 key,
                 toastKey: key,
             });
-
             const content = React.createElement(component, toastProps);
 
-            toast = supplyWholeBody
-                ? content
-                : <div className={toastClasses}>
+            let countIndicator;
+            if (title && isStacked || this.state.countSeen > 0) {
+                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
+            }
+
+            let titleElement;
+            if (title) {
+                titleElement = (
                     <div className="mx_Toast_title">
                         <h2>{ title }</h2>
                         <span>{ countIndicator }</span>
                     </div>
-                    <div className="mx_Toast_body">{ content }</div>
-                </div>;
+                );
+            }
+
+            toast = (
+                <div className={toastClasses}>
+                    { titleElement }
+                    <div className={bodyClasses}>{ content }</div>
+                </div>
+            );
 
             containerClasses = classNames("mx_ToastContainer", {
                 "mx_ToastContainer_stacked": isStacked,
-                [className]: supplyWholeBody,
             });
         }
         return toast
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts
index 093ea9fb6b..5e51de3e26 100644
--- a/src/stores/ToastStore.ts
+++ b/src/stores/ToastStore.ts
@@ -26,8 +26,8 @@ export interface IToast<C extends ComponentClass> {
     icon?: string;
     component: C;
     className?: string;
+    bodyClassName?: string;
     props?: Omit<React.ComponentProps<C>, "toastKey">; // toastKey is injected by ToastContainer
-    supplyWholeBody?: boolean;
 }
 
 /**