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