Simplifie toast handling

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/toasts/_IncomingCallToast.scss

@@ -16,17 +16,8 @@ limitations under the License.
 */
 
 .mx_IncomingCallToast {
-    // mx_Toast overrides
+    display: flex;
-    padding: 8px !important;
-    display: flex !important;
-    top: 8px !important;
-
-    border-radius: 8px;
     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 {

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 {

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 { title, icon, key, component, className, bodyClassName, props } = topToast;
-            const toastClasses = classNames("mx_Toast_toast", {
+            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
+            let countIndicator;
-                ? content
+            if (title && isStacked || this.state.countSeen > 0) {
-                : <div className={toastClasses}>
+                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

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;
 }
 
 /**