wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-27 17:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Dark-mode feedback link UX improvements"

Browse source
This commit is contained in:
jenkins-bot 2024-07-26 00:06:39 +00:00 committed by Gerrit Code Review
parent a6c6a50661 13f0e379b8
commit 379aa37d1f
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/skins.vector.clientPreferences/clientPreferences.js
View file

@ -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 );
}

16
resources/skins.vector.clientPreferences/clientPreferences.less
View file

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