From 35376996b0358f4087b23af20eea2059483d9d3d Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Fri, 28 Apr 2023 16:56:26 +0200 Subject: [PATCH] Revert "Implement new toast UI (#10467)" (#10740) This reverts commit 7632f366248187f094acb44623a8ec76e562ed87. --- res/css/compound/_Icon.pcss | 4 - res/css/structures/_ToastContainer.pcss | 77 ++++++++++--------- .../toasts/_IncomingLegacyCallToast.pcss | 32 ++++---- res/img/compound/encryption-24px.svg | 5 -- src/components/structures/MatrixChat.tsx | 6 +- src/components/structures/ToastContainer.tsx | 5 +- src/components/views/toasts/GenericToast.tsx | 3 +- src/components/views/typography/Caption.tsx | 5 +- src/stores/ToastStore.ts | 9 +-- src/toasts/IncomingLegacyCallToast.tsx | 2 +- .../__snapshots__/GenericToast-test.tsx.snap | 6 +- .../UnverifiedSessionToast-test.tsx.snap | 6 +- 12 files changed, 70 insertions(+), 90 deletions(-) delete mode 100644 res/img/compound/encryption-24px.svg diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss index 5edac93a7b..07f9eb5a0e 100644 --- a/res/css/compound/_Icon.pcss +++ b/res/css/compound/_Icon.pcss @@ -24,10 +24,6 @@ limitations under the License. box-sizing: border-box; } -.mx_Icon_secondary-content { - color: $secondary-content; -} - .mx_Icon_accent { color: $accent; } diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index 5508fec63e..c33caf2758 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/res/css/structures/_ToastContainer.pcss @@ -16,9 +16,10 @@ limitations under the License. .mx_ToastContainer { position: absolute; - top: $spacing-4; + top: 0; left: 70px; z-index: 101; + padding: 4px; display: grid; grid-template-rows: 1fr 14px 6px; @@ -33,29 +34,25 @@ limitations under the License. } .mx_Toast_toast { - background-color: $system; - border-radius: 8px; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); - color: $primary-content; - column-gap: $spacing-8; - display: grid; - grid-column: 1; grid-row: 1 / 3; - grid-template-columns: 24px 1fr; + grid-column: 1; + background-color: $system; + color: $primary-content; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); + border-radius: 8px; overflow: hidden; - padding: $spacing-16; + display: grid; + grid-template-columns: 22px 1fr; + column-gap: 8px; + row-gap: 4px; + padding: 8px; &.mx_Toast_hasIcon { - .mx_Toast_icon { - grid-column: 1; - grid-row: 1; - } - &::before, &::after { content: ""; - width: 24px; - height: 24px; + width: 22px; + height: 22px; grid-column: 1; grid-row: 1; mask-size: 100%; @@ -65,6 +62,11 @@ limitations under the License. background-repeat: no-repeat; } + &.mx_Toast_icon_verification::after { + mask-image: url("$(res)/img/e2e/normal.svg"); + background-color: $primary-content; + } + &.mx_Toast_icon_verification_warning { /* white infill for the hollow svg mask */ &::before { @@ -94,7 +96,6 @@ limitations under the License. grid-column: 2; } } - &:not(.mx_Toast_hasIcon) { padding-left: 12px; @@ -103,19 +104,24 @@ limitations under the License. } } + .mx_Toast_title, + .mx_Toast_description { + padding-right: 8px; + } + .mx_Toast_title { - align-items: center; - box-sizing: border-box; - column-gap: 8px; display: flex; - margin-bottom: $spacing-16; + align-items: center; + column-gap: 8px; width: 100%; + box-sizing: border-box; h2 { - color: $primary-content; margin: 0; - font-size: $font-18px; + font-size: $font-15px; font-weight: var(--font-semi-bold); + display: inline; + width: auto; } .mx_Toast_title_countIndicator { @@ -129,21 +135,25 @@ limitations under the License. .mx_Toast_body { grid-column: 1 / 3; grid-row: 2; - position: relative; } .mx_Toast_buttons { - column-gap: $spacing-8; display: flex; justify-content: flex-end; - margin-top: $spacing-32; + column-gap: 5px; + + .mx_AccessibleButton { + min-width: 96px; + box-sizing: border-box; + } } .mx_Toast_description { - color: $primary-content; - font-size: $font-15px; - font-weight: var(--font-semi-bold); - max-width: 300px; + max-width: 272px; + overflow: hidden; + text-overflow: ellipsis; + margin: 4px 0 11px 0; + font-size: $font-12px; a { text-decoration: none; @@ -151,10 +161,7 @@ limitations under the License. } .mx_Toast_detail { - display: block; - font-weight: var(--font-normal); - margin-top: $spacing-4; - max-width: 300px; + color: $secondary-content; } .mx_Toast_deviceID { diff --git a/res/css/views/toasts/_IncomingLegacyCallToast.pcss b/res/css/views/toasts/_IncomingLegacyCallToast.pcss index 0306aba8ac..e2092ef006 100644 --- a/res/css/views/toasts/_IncomingLegacyCallToast.pcss +++ b/res/css/views/toasts/_IncomingLegacyCallToast.pcss @@ -84,19 +84,20 @@ limitations under the License. } .mx_IncomingLegacyCallToast_buttons { - .mx_IncomingLegacyCallToast_button { - span { - align-items: center; - display: flex; + margin-top: 8px; + display: flex; + flex-direction: row; + gap: 12px; - &::before { - background-color: $button-fg-color; - content: ""; - display: inline-block; - margin-right: 8px; - mask-position: center; - mask-repeat: no-repeat; - } + .mx_IncomingLegacyCallToast_button { + @mixin LegacyCallButton; + padding: 0px 8px; + flex-shrink: 0; + flex-grow: 1; + font-size: $font-15px; + + span { + padding: 8px 0; } &.mx_IncomingLegacyCallToast_button_accept span::before { @@ -132,13 +133,6 @@ limitations under the License. } } - .mx_IncomingLegacyCallToast_silence, - .mx_IncomingLegacyCallToast_unSilence { - position: absolute; - right: 0; - top: 0; - } - .mx_IncomingLegacyCallToast_silence::before { mask-image: url("$(res)/img/voip/silence.svg"); } diff --git a/res/img/compound/encryption-24px.svg b/res/img/compound/encryption-24px.svg deleted file mode 100644 index c5f8b67fca..0000000000 --- a/res/img/compound/encryption-24px.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 7cfe1c213c..8a7dbe4bde 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -143,7 +143,7 @@ import { findDMForUser } from "../../utils/dm/findDMForUser"; import { Linkify } from "../../HtmlUtils"; import { NotificationColor } from "../../stores/notifications/NotificationColor"; import { UserTab } from "../views/dialogs/UserTab"; -import { Icon as EncryptionIcon } from "../../../res/img/compound/encryption-24px.svg"; + // legacy export export { default as Views } from "../../Views"; @@ -1668,9 +1668,7 @@ export default class MatrixChat extends React.PureComponent { ToastStore.sharedInstance().addOrReplaceToast({ key: "verifreq_" + request.channel.transactionId, title: _t("Verification requested"), - iconElement: ( - - ), + icon: "verification", props: { request }, component: VerificationRequestToast, priority: 90, diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx index d829adfa80..c95f5a1099 100644 --- a/src/components/structures/ToastContainer.tsx +++ b/src/components/structures/ToastContainer.tsx @@ -57,10 +57,10 @@ export default class ToastContainer extends React.Component<{}, IState> { let containerClasses; if (totalCount !== 0) { const topToast = this.state.toasts[0]; - const { title, icon, iconElement, key, component, className, bodyClassName, props } = topToast; + 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 || iconElement, + mx_Toast_hasIcon: icon, [`mx_Toast_icon_${icon}`]: icon, }); const toastProps = Object.assign({}, props, { @@ -86,7 +86,6 @@ export default class ToastContainer extends React.Component<{}, IState> { toast = (
- {iconElement} {titleElement}
{content}
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx index 8808ee6801..c40eaab8e8 100644 --- a/src/components/views/toasts/GenericToast.tsx +++ b/src/components/views/toasts/GenericToast.tsx @@ -18,7 +18,6 @@ import React, { ReactNode } from "react"; import AccessibleButton from "../elements/AccessibleButton"; import { XOR } from "../../../@types/common"; -import { Caption } from "../typography/Caption"; export interface IProps { description: ReactNode; @@ -41,7 +40,7 @@ const GenericToast: React.FC> = ({ onAccept, onReject, }) => { - const detailContent = detail ? {detail} : null; + const detailContent = detail ?
{detail}
: null; return (
diff --git a/src/components/views/typography/Caption.tsx b/src/components/views/typography/Caption.tsx index 89fd551ed5..69e7714b22 100644 --- a/src/components/views/typography/Caption.tsx +++ b/src/components/views/typography/Caption.tsx @@ -19,14 +19,13 @@ import React, { HTMLAttributes } from "react"; interface Props extends Omit, "className"> { children: React.ReactNode; - className?: string; isError?: boolean; } -export const Caption: React.FC = ({ children, className, isError, ...rest }) => { +export const Caption: React.FC = ({ children, isError, ...rest }) => { return ( { // higher priority number will be shown on top of lower priority priority: number; title?: string; - /** - * Icon class. - * - * @deprecated Use iconElement instead. - */ icon?: string; - /** Icon element. Displayed left of the title. */ - iconElement?: ReactElement; component: C; className?: string; bodyClassName?: string; diff --git a/src/toasts/IncomingLegacyCallToast.tsx b/src/toasts/IncomingLegacyCallToast.tsx index 147a35a1d0..26ea393332 100644 --- a/src/toasts/IncomingLegacyCallToast.tsx +++ b/src/toasts/IncomingLegacyCallToast.tsx @@ -119,7 +119,7 @@ export default class IncomingLegacyCallToast extends React.Component {isVoice ? _t("Voice call") : _t("Video call")}
-
+
Description
- Detail - +
- ABC123 - +