From e11ff160635f63ae6fad7ea713611d0da5bdf02e Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Sun, 24 Nov 2024 19:10:15 +0000 Subject: [PATCH] Bug 1928452 - Add blog type for in app notifications. r=freaktechnik,micahilbery Differential Revision: https://phabricator.services.mozilla.com/D229705 --HG-- extra : amend_source : 35762f8a20a1dd21f063158a9fae56919bfaaa8c --- .../content/in-app-notification-container.mjs | 10 +- .../content/in-app-notification.mjs | 1 + .../inAppNotificationTemplates.inc.xhtml | 2 +- .../test/browser/browser_inAppNotification.js | 7 +- .../browser_inAppNotificationContainer.js | 18 +++ mail/themes/shared/jar.inc.mn | 1 + .../shared/mail/icons/sm/circle-question.svg | 7 ++ .../mail/inAppNotificationContainer.css | 104 ++++++++++++------ 8 files changed, 114 insertions(+), 36 deletions(-) create mode 100644 mail/themes/shared/mail/icons/sm/circle-question.svg diff --git a/mail/components/inappnotifications/content/in-app-notification-container.mjs b/mail/components/inappnotifications/content/in-app-notification-container.mjs index fe18e0a866..2d208f7de9 100644 --- a/mail/components/inappnotifications/content/in-app-notification-container.mjs +++ b/mail/components/inappnotifications/content/in-app-notification-container.mjs @@ -5,7 +5,7 @@ import "./in-app-notification-button.mjs"; //eslint-disable-line import/no-unassigned-import import "./in-app-notification-close-button.mjs"; //eslint-disable-line import/no-unassigned-import -const attrs = ["cta", "description", "heading", "url", "data-id"]; +const attrs = ["cta", "description", "heading", "url", "data-id", "type"]; /** * Container for in app notifications. @@ -82,6 +82,14 @@ class InAppNotificationContainer extends HTMLElement { '[is="in-app-notification-close-button"]' ).dataset.id = newValue; break; + case "type": { + const container = this.shadowRoot.querySelector( + ".in-app-notification-container" + ); + container.classList.remove(`in-app-notification-${oldValue}`); + container.classList.add(`in-app-notification-${newValue}`); + break; + } } } diff --git a/mail/components/inappnotifications/content/in-app-notification.mjs b/mail/components/inappnotifications/content/in-app-notification.mjs index 493a820f5c..861ecea11e 100644 --- a/mail/components/inappnotifications/content/in-app-notification.mjs +++ b/mail/components/inappnotifications/content/in-app-notification.mjs @@ -62,6 +62,7 @@ class InAppNotification extends HTMLElement { description: "description", id: "data-id", title: "heading", + type: "type", URL: "url", }; diff --git a/mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml b/mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml index 4ab19e2879..d3084ae21f 100644 --- a/mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml +++ b/mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml @@ -8,7 +8,7 @@
diff --git a/mail/components/inappnotifications/test/browser/browser_inAppNotification.js b/mail/components/inappnotifications/test/browser/browser_inAppNotification.js index a564ed4d7d..2e08b5dd48 100644 --- a/mail/components/inappnotifications/test/browser/browser_inAppNotification.js +++ b/mail/components/inappnotifications/test/browser/browser_inAppNotification.js @@ -11,6 +11,7 @@ const observedProperties = { id: "data-id", description: "description", title: "heading", + type: "type", URL: "url", }; @@ -43,14 +44,14 @@ function subtestCheckAttributes(container, data) { } } -function getData(value) { +function getData(value, type = "donation") { return { id: "test-notification", title: value, description: value, CTA: value, URL: value, - type: "donation", + type, severity: 4, }; } @@ -68,7 +69,7 @@ add_task(function test_notificationAttributeTranslation() { notification.setNotificationData(notificationData); subtestCheckAttributes(container, notificationData); - notificationData = getData("new test"); + notificationData = getData("new test", "message"); notification.setNotificationData(notificationData); subtestCheckAttributes(container, notificationData); diff --git a/mail/components/inappnotifications/test/browser/browser_inAppNotificationContainer.js b/mail/components/inappnotifications/test/browser/browser_inAppNotificationContainer.js index d6cb473df2..08a65e3505 100644 --- a/mail/components/inappnotifications/test/browser/browser_inAppNotificationContainer.js +++ b/mail/components/inappnotifications/test/browser/browser_inAppNotificationContainer.js @@ -105,3 +105,21 @@ add_task(async function test_urlValue() { Assert.equal(element.href, "", "url is cleared"); }); + +add_task(async function test_type() { + const element = container.shadowRoot.querySelector( + ".in-app-notification-container" + ); + + container.setAttribute("type", "blog"); + Assert.ok( + element.classList.contains("in-app-notification-blog"), + "has correct class for type" + ); + + container.setAttribute("type", "donation"); + Assert.ok( + element.classList.contains("in-app-notification-donation"), + "has correct class for type" + ); +}); diff --git a/mail/themes/shared/jar.inc.mn b/mail/themes/shared/jar.inc.mn index 91721b328e..47dcb3f9ee 100644 --- a/mail/themes/shared/jar.inc.mn +++ b/mail/themes/shared/jar.inc.mn @@ -761,6 +761,7 @@ skin/classic/messenger/icons/sm/mobile-import.svg (../shared/mail/icons/sm/mobile-import.svg) skin/classic/messenger/icons/sm/sparkle-star.svg (../shared/mail/icons/sm/sparkle-star.svg) skin/classic/messenger/icons/sm/upload.svg (../shared/mail/icons/sm/upload.svg) + skin/classic/messenger/icons/sm/circle-question.svg (../shared/mail/icons/sm/circle-question.svg) # LG - 24x24px icons skin/classic/messenger/icons/lg/upload.svg (../shared/mail/icons/lg/upload.svg) diff --git a/mail/themes/shared/mail/icons/sm/circle-question.svg b/mail/themes/shared/mail/icons/sm/circle-question.svg new file mode 100644 index 0000000000..7a1d2467ac --- /dev/null +++ b/mail/themes/shared/mail/icons/sm/circle-question.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/mail/themes/shared/mail/inAppNotificationContainer.css b/mail/themes/shared/mail/inAppNotificationContainer.css index 8b3dfb7d57..aeea11e9e5 100644 --- a/mail/themes/shared/mail/inAppNotificationContainer.css +++ b/mail/themes/shared/mail/inAppNotificationContainer.css @@ -4,22 +4,16 @@ :host { color-scheme: light dark; - --container-background: linear-gradient(135deg, #0db7bd, #6b21a8); - --container-border: none; --content-background: light-dark(#ffffff, #18181b); - --content-border: light-dark(#ffffff, #4f5683); - --title-text: light-dark(#6b21a8, #f5e8ff); + --container-border: none; --text: light-dark(#18181b, #fafafa); - --button-background: linear-gradient(#6b21a8, #571c87); - --button-stroke: light-dark(#3a0764, #ddb4fe); + --content-border: light-dark(#ffffff, #4f5683); + + /* Button colots */ --button-text: light-dark(#fafafa, #18181b); --button-text-active: var(--button-text); - --button-background-hover: linear-gradient(#6b21a8, #571c87); - --button-background-active: light-dark(#3a0764, #ddb4fe); - --button-focus-ring: light-dark(#3a0764, #ddb4fe); - --illustration-light: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default.svg"); - --illustration-dark: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default-dark.svg"); - --illustration: var(--illustration-light); + + /* Close button colors */ --close-button-background: light-dark(#fafafa, #18181b); --close-button-background-active: light-dark(#18181b, #fafafa); --close-button-text: var(--text); @@ -28,6 +22,10 @@ --close-button-border-hover: currentColor; --close-button-border-active: light-dark(#18181b, #fafafa); --close-button-outline: currentColor; + + --illustration-light: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default.svg"); + --illustration-dark: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default-dark.svg"); + --illustration: var(--illustration-light); } @media (prefers-color-scheme: dark) { @@ -63,7 +61,7 @@ } } -.in-app-notification-container.in-app-notification-donation { +.in-app-notification-container { position: relative; width: 288px; background: var(--container-background); @@ -76,19 +74,21 @@ box-shadow: 0 2px 6px -2px rgba(0,0,0,0.25); overflow: clip; - & .in-app-notification-content { - position: relative; - display: flex; - flex-direction: column; - gap: 6px; - border: 1px solid var(--content-border); - border-radius: 5px; - color: var(--text); - padding: 6px; - padding-inline: 48px 36px; - isolation: isolate; - &::before { + /* Styles for the donation notification type */ + &.in-app-notification-donation { + --title-text: light-dark(#6b21a8, #f5e8ff); + --button-background: linear-gradient(#6b21a8, #571c87); + --button-stroke: light-dark(#3a0764, #ddb4fe); + --button-background-hover: linear-gradient(#6b21a8, #571c87); + --button-background-active: light-dark(#3a0764, #ddb4fe); + --button-focus-ring: light-dark(#3a0764, #ddb4fe); + --container-background: linear-gradient(135deg, #0db7bd, #6b21a8); + --icon-url: url("chrome://messenger/skin/illustrations/in-app-notification-heart.svg"); + --icon-fill: #fca5a5; + --icon-stroke: #dc2626; + + & .in-app-notification-content::before { content: ''; position: absolute; inset: 0; @@ -101,6 +101,50 @@ z-index: -1; } + & .icon { + inset-block-start: 3px; + inset-inline-start: 0px; + } + } + + /* Styles for the blog notification type */ + &.in-app-notification-blog { + --title-text: light-dark(#1373d9, #eeeef0); + --button-background: linear-gradient(#1373d9, #175fb6); + --button-stroke: light-dark(#19518F, #32aeff); + --button-background-hover: linear-gradient(#1373d9, #175Fb6); + --button-background-active: light-dark(#19518f, #32aeff); + --button-focus-ring: light-dark(#19518f, #32aeff); + --content-border: light-dark(#1373d9, #58c9ff); + --icon-url: url("chrome://messenger/skin/icons/sm/circle-question.svg"); + --icon-fill: light-dark(#c4ddf6, #263a47); + --icon-stroke: light-dark(#1373d9, #58C9ff); + + & .in-app-notification-content { + background: linear-gradient(#f0f8ff, #f7f7f7); + padding-inline-start: 26px; + } + + & .icon { + width: 16px; + height: 16px; + inset-block-start: 8px; + inset-inline-start: 8px; + } + } + + & .in-app-notification-content { + position: relative; + display: flex; + flex-direction: column; + gap: 6px; + border: 1px solid var(--content-border); + border-radius: 5px; + color: var(--text); + padding: 6px; + padding-inline: 48px 36px; + isolation: isolate; + &:dir(rtl)::before { transform: scaleX(-1); } @@ -200,14 +244,12 @@ & .icon { position: absolute; - content: url("chrome://messenger/skin/illustrations/in-app-notification-heart.svg"); - -moz-context-properties: fill, stroke; - fill: #fca5a5; - stroke: #dc2626; - inset-block-start: 3px; - inset-inline-start: 0; z-index: 9; pointer-events: none; + content: var(--icon-url); + -moz-context-properties: fill, stroke; + fill: var(--icon-fill); + stroke: var(--icon-stroke); &:dir(rtl) { transform: scaleX(-1);