Simplifie toast handling

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-07-26 12:21:58 +02:00
parent 1d629f2557
commit 40947a2a68
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
4 changed files with 24 additions and 29 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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

View File

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