From e2db963c126260c3e40a862679ecc36710d8c979 Mon Sep 17 00:00:00 2001 From: "Carrie Warner (Mattermost)" <74422101+cwarnermm@users.noreply.github.com> Date: Mon, 30 Jun 2025 11:15:30 -0400 Subject: [PATCH] Decommissioned Rudderstack & updated banner --- site/config.toml | 4 +- site/layouts/partials/feedback.html | 29 ---- site/static/css/feedback.css | 236 +++++----------------------- site/static/js/feedback.js | 148 ++++------------- site/static/js/main.js | 4 +- 5 files changed, 77 insertions(+), 344 deletions(-) diff --git a/site/config.toml b/site/config.toml index 6cef5b10b8..1f60b25a53 100644 --- a/site/config.toml +++ b/site/config.toml @@ -32,8 +32,8 @@ enableEmoji = true [params.notification] enable = true - url = "https://mattermost.com/blog/microsoft-teams-m365-mission-critical-workflows/" - text = "Mattermost v10.0 is now available! Learn what’s new »" + url = "https://docs.mattermost.com/about/maximize-microsoft-investments.html" + text = "Maximize your Microsoft investments" [params.search] enable = true diff --git a/site/layouts/partials/feedback.html b/site/layouts/partials/feedback.html index 1f5934e8c9..2e0c18b5f1 100644 --- a/site/layouts/partials/feedback.html +++ b/site/layouts/partials/feedback.html @@ -29,32 +29,3 @@ -
-
-
-
-
- × -
-
-

Tell us more

-

Your feedback helps us improve the Mattermost developer documentation.
- -

-
-
- 0/186 -
-
-

- Have a feature request? Share it here. -

-

- Having issues? Join our Community server. -

-
- Submit -
-
-
-
diff --git a/site/static/css/feedback.css b/site/static/css/feedback.css index 7feec82ae8..48b89be8f5 100644 --- a/site/static/css/feedback.css +++ b/site/static/css/feedback.css @@ -36,23 +36,7 @@ color: var(--center-channel-text-64); } -.c-thermometer__close { - cursor: pointer; - position: absolute; - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; - color: #999; - font-size: 1.4rem; - right: 0.4rem; - top: 0.4rem; -} -.c-thermometer__close:hover { - color: #444; -} .c-thermometer__emojis { position: relative; @@ -99,223 +83,83 @@ } /* Thermometer ends */ -/* Thermometer Modal */ -.c-thermometer-modal__container { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 9999; - background: rgb(0 0 0 / 50%); -} - -.c-thermometer-modal__container.show { - visibility: visible; - opacity: 1; - transition: opacity 500ms; -} - -.c-thermometer-modal__container.hide { - visibility: hidden; - opacity: 0; - transition: opacity 500ms; -} - -.c-thermometer-modal__container > div { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding: 0 24px; -} - -.c-thermometer-modal__content { - background: white; - border-radius: 10px; - padding: 22px 45px 45px; - max-width: 400px; - width: 100%; -} - -.c-thermometer-modal__content > h2 { - color: var(--center-channel-text); - margin-bottom: 12px; -} -.c-thermometer-modal__header { - display: flex; - justify-content: flex-end; -} - -.c-thermometer-modal__close { - cursor: pointer; -} - -#c-thermometer-modal__close-x { - color: #818698; /* Black/03 */ - font-size: 3em; - font-weight: bold; - text-align: center; - line-height: 45px; -} - -.c-thermometer-modal__textarea-footer { - display: flex; - justify-content: space-between; - font-size: 12px; - line-height: 24px; -} - -.c-thermometer-modal__textarea__error { - color: #FD5960; - display: none; -} - -.c-thermometer-modal__counter { - text-align: right; - color: #818698; /* Black/03 */ -} - -.c-thermometer-modal__content p { - font-size: 15px; - line-height: 22px; - margin-bottom: 5px; - color: #363A45; /* Black/05 */ -} - -.c-thermometer-modal__content textarea { - border-radius: 4px; - height: 142px; - width: 100%; - padding: 15px; - font-size: 15px; - resize: none; - border: 1px solid rgba(61, 60, 64, 0.16); - box-shadow: none; - margin-top: 24px; - color: #363A45; /* Black/05 */ -} - -.c-thermometer-modal__content textarea:focus { - border-color: #166DE0; -} - -.c-thermometer-modal__footer { - display: flex; - justify-content: left; - padding-top: 20px; -} - -.c-thermometer-modal__footer .btn { - background: #FFBC1F; /* Marigold/03 Core */ - border-radius: 30px; - color: black; - font-size: 14px; - line-height: 1; - font-weight: bold; - padding: 15px 25px; - display: inline-block; - transition: all 0.3s ease; -} - -@media (max-width: 420px) { - .c-thermometer-modal__container > div { - padding: unset; - } - .c-thermometer-modal__content { - border-radius: unset; - max-width: unset; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - } -} -/* Thermometer Modal Ends */ /* Thermometer Confirmation Popup */ .c-thermometer-popup { + position: fixed; + bottom: 2rem; + right: 2rem; + background: white; + border-radius: 12px; + padding: 1.5rem; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); display: flex; - flex-direction: column; - justify-content: center; align-items: center; - border-radius: 5px; - box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15); - padding: 25px; - text-align: center; - width: 280px; - background: white; - z-index: 9; - margin-right: 14px; - position: absolute; - bottom: 150px; + max-width: 350px; + z-index: 1000; } .c-thermometer-popup.show { + visibility: visible; opacity: 1; - transition: opacity 500ms; - height: unset; - position: absolute; - bottom: 150px; + transform: translateY(0); + transition: all 0.3s ease; } .c-thermometer-popup.hide { + visibility: hidden; opacity: 0; - transition: opacity 500ms; - height: 0; - position: absolute; - bottom: 0; + transform: translateY(20px); + transition: all 0.3s ease; } .c-thermometer-popup > svg { - width: 33px; - height: 29px; - margin-bottom: 11px; + flex-shrink: 0; + width: 24px; + height: 24px; + margin-right: 1rem; } .c-thermometer-popup__text { - display: flex; - flex-direction: column; + flex: 1; } .c-thermometer-popup__title { - font-weight: 700; - font-size: 18px; - line-height: 150%; + display: block; + font-weight: 600; + color: var(--center-channel-text); + margin-bottom: 0.25rem; } .c-thermometer-popup__message { - font-weight: 400; - font-size: 15px; - line-height: 150%; + display: block; + color: var(--center-channel-text-64); + font-size: 14px; } + + @media (max-width: 420px) { .c-thermometer-popup { - flex-direction: row; - justify-content: unset; - align-items: center; - text-align: initial; - width: 90%; - padding: 24px; - position: absolute; + position: fixed; bottom: 1rem; + left: 1rem; + right: 1rem; + max-width: none; } + .c-thermometer-popup.show { - position: absolute; - bottom: 1rem; + transform: translateY(0); } + .c-thermometer-popup.hide { - position: absolute; - bottom: 0; + transform: translateY(100%); } + .c-thermometer-popup > svg { - width: 42px; - height: 37px; - margin-right: 24px; + width: 20px; + height: 20px; } } /* Thermometer Confirmation Popup Ends */ diff --git a/site/static/js/feedback.js b/site/static/js/feedback.js index 5fbdbfd7f7..0ac9211113 100644 --- a/site/static/js/feedback.js +++ b/site/static/js/feedback.js @@ -10,7 +10,7 @@ const addEmojiClick = () => { for (const emojiEl of emojis) { emojiEl.addEventListener('click', (e) => { emojiEl.classList.add("selected"); - showThermometerModal(); + // Prepare DataLayer Vars rating = emojiEl.getAttribute("data-rating"); if (rating !== null) { @@ -26,10 +26,34 @@ const addEmojiClick = () => { break; } } + + // Submit rating to Google Analytics + submitRating(); }); } }; +/** Submit rating data to Google Analytics and show confirmation */ +const submitRating = () => { + if (eventValue > 0) { + // Submit DataLayer Event to Google Analytics + const dataLayer = window.dataLayer || []; + dataLayer.push({ + event: 'rateThisPage', + eventLabel: rating, + eventValue: eventValue + }); + + // Reset emoji states and show confirmation + resetEmojiStates(); + eventValue = 0; + showConfirmationPopup(); + setTimeout(() => { + hideConfirmationPopup(); + }, 3000); + } +}; + /** Reset the state of the emoji buttons to default */ const resetEmojiStates = () => { const emojis = document.getElementsByClassName("rate-this-page-action"); @@ -54,126 +78,26 @@ const showConfirmationPopup = () => { } }; -/** Hide the feedback modal */ -const hideThermometerModal = () => { - const modalEls = document.getElementsByClassName("c-thermometer-modal__container"); - if (modalEls.length > 0) { - modalEls[0].classList.replace("show", "hide"); - } -}; - -/** Show the feedback modal */ -const showThermometerModal = () => { - const modalEls = document.getElementsByClassName("c-thermometer-modal__container"); - if (modalEls.length > 0) { - modalEls[0].classList.replace("hide", "show"); - } -}; - -/** Reset the feedback textarea and the character count */ -const resetThermometerTextarea = () => { - const textareaEl = document.getElementById("c-thermometer-modal__textarea"); - if (textareaEl) { - textareaEl.value = ""; - } - const counterSpanEl = document.getElementById("c-thermometer-modal__counter-span"); - if (counterSpanEl) { - counterSpanEl.innerText = "0"; - } -}; - -/** Cancel button from feedback modal; hide the modal and reset the emoji states. */ -const cancelThermometerModal = (event) => { - hideThermometerModal(); - resetEmojiStates(); -}; - -/** Submit button from feedback modal; submit the feedback, reset the feedback fields, and show a confirmation */ -const submitThermometerModal = (event) => { - let currentString = ""; - const textareaEl = document.getElementById("c-thermometer-modal__textarea"); - if (textareaEl) { - currentString = textareaEl.value; - } - if (currentString !== "" && eventValue > 0) { - // Submit DataLayer Event - const dataLayer = window.dataLayer || []; - dataLayer.push({ - event: 'rateThisPage', - eventLabel: rating, - eventValue, - eventFeedback: currentString - }); - // Submit Rudderstack event if possible - // NOTE: Rudderstack support is included by Google Tag Manager - if (typeof (rudderanalytics) !== 'undefined') { - rudderanalytics.track("feedback_submitted", { - label: rating, - rating: eventValue, - feedback: currentString - }); - } - hideThermometerModal(); - resetEmojiStates(); - resetThermometerTextarea(); - // reset the eventValue - eventValue = 0; - showConfirmationPopup(); - setTimeout(() => { - hideConfirmationPopup(); - }, 3000); - } -}; - -/** Add click handlers to the buttons in the feedback modal */ -const addModalButtons = () => { - const closeButtonEl = document.getElementById("c-thermometer-modal__close-x"); - if (closeButtonEl) { - closeButtonEl.addEventListener("click", cancelThermometerModal); - } - const submitButtonEl = document.getElementById("c-thermometer-modal__footer-submit"); - if (submitButtonEl) { - submitButtonEl.addEventListener("click", submitThermometerModal); - } -}; - -/** - * Update the textarea length display with the current length of the textarea. - * @param event The DOM event; unused - */ -const updateThermometerTextareaLength = (event) => { - const textareaEl = document.getElementById("c-thermometer-modal__textarea"); - if (textareaEl) { - const counterSpanEl = document.getElementById("c-thermometer-modal__counter-span"); - if (counterSpanEl) { - counterSpanEl.innerText = String(textareaEl.textLength); - } - } -}; - -/** Add a document click handler to hide any visible modals or confirmation popups */ +/** Add a document click handler to hide any visible confirmation popups */ const addDocumentClick = () => { document.addEventListener('click', (e) => { - hideConfirmationPopup(); - hideThermometerModal(); - resetEmojiStates(); + // Don't hide popup if clicking on emoji buttons + if (!e.target.closest('.rate-this-page-action') && !e.target.closest('.c-thermometer-popup')) { + hideConfirmationPopup(); + resetEmojiStates(); + } }); - // Also hide visible modals or confirmation popups if the user presses the Escape key + // Also hide visible popups if the user presses the Escape key document.addEventListener('keyup', (e) => { if (e.key === "Escape") { hideConfirmationPopup(); - hideThermometerModal(); resetEmojiStates(); } }); }; -/** Stop the propagation of click events for particular divs. This allows the modal to remain visible when clicking inside it. */ +/** Stop the propagation of click events for particular divs */ const addEventPropagationHandlers = () => { - const modalContentEls = document.getElementsByClassName("c-thermometer-modal__content"); - if (modalContentEls.length > 0) { - modalContentEls[0].addEventListener('click', e => e.stopImmediatePropagation()); - } const modalTriggerEls = document.getElementsByClassName("c-thermometer__trigger"); if (modalTriggerEls.length > 0) { modalTriggerEls[0].addEventListener('click', e => e.stopImmediatePropagation()); @@ -186,13 +110,7 @@ const addEventPropagationHandlers = () => { // Initialize the feedback widget when the document has finished loading document.addEventListener("DOMContentLoaded", (event) => { - // Add a handler to the textarea which updates the character count display - const textareaEl = document.getElementById("c-thermometer-modal__textarea"); - if (textareaEl) { - textareaEl.addEventListener("input", updateThermometerTextareaLength); - } addEventPropagationHandlers(); addEmojiClick(); addDocumentClick(); - addModalButtons(); }); diff --git a/site/static/js/main.js b/site/static/js/main.js index a9e3b58588..351d9c8ce3 100755 --- a/site/static/js/main.js +++ b/site/static/js/main.js @@ -14,8 +14,8 @@ $(document).ready(function () { // So it will show up for new announcements // Keep "mm_notification_banner__" at the beginning of the key // Add system to clean out storage items that are no longer needed - - const notification_banner_key = 'mm_notification_banner__9-0-release'; + + const notification_banner_key = 'mm_notification_banner__microsoft-investments'; const showBanner = localStorage.getItem(notification_banner_key); if (showBanner === null) {