diff --git a/resources/skins.vector.clientPreferences/clientPreferences.js b/resources/skins.vector.clientPreferences/clientPreferences.js index 4f60d2e2c..5089d00b4 100644 --- a/resources/skins.vector.clientPreferences/clientPreferences.js +++ b/resources/skins.vector.clientPreferences/clientPreferences.js @@ -361,7 +361,16 @@ function makeClientPreference( parent, featureName, config, userPreferences ) { anchor.setAttribute( 'target', '_blank' ); } anchor.textContent = linkLabel; - const showSuccessFeedback = function () { + + /** + * Shows the success message after clicking the beta feedback link. + * Note: event.stopPropagation(); is required to show the success message + * without closing the Appearance menu when it's in a dropdown. + * + * @param {Event} event + */ + const showSuccessFeedback = function ( event ) { + event.stopPropagation(); const icon = document.createElement( 'span' ); icon.classList.add( 'vector-icon', 'vector-icon--heart' ); anchor.textContent = mw.msg( 'vector-night-mode-issue-reporting-link-notification' ); @@ -369,7 +378,7 @@ function makeClientPreference( parent, featureName, config, userPreferences ) { anchor.prepend( icon ); anchor.removeEventListener( 'click', showSuccessFeedback ); }; - anchor.addEventListener( 'click', showSuccessFeedback ); + anchor.addEventListener( 'click', ( event ) => showSuccessFeedback( event ) ); betaMessageElement.appendChild( anchor ); row.appendChild( betaMessageElement ); } diff --git a/resources/skins.vector.clientPreferences/clientPreferences.less b/resources/skins.vector.clientPreferences/clientPreferences.less index 14c9101a6..0c626f354 100644 --- a/resources/skins.vector.clientPreferences/clientPreferences.less +++ b/resources/skins.vector.clientPreferences/clientPreferences.less @@ -15,3 +15,19 @@ .cdx-mixin-css-icon( @cdx-icon-heart, @color-success, @size-icon-small ); } } + +// Only display feedback notice in dark mode. +// https://phabricator.wikimedia.org/T367871#10003064 +#skin-theme-beta-notice { + display: none; +} + +@media screen and ( prefers-color-scheme: dark ) { + html.skin-theme-clientpref-os #skin-theme-beta-notice { + display: block; + } +} + +html.skin-theme-clientpref-night #skin-theme-beta-notice { + display: block; +}