wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-03 11:46:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark-mode feedback link UX improvements

Browse source 
- Makes the dark-mode feedback link (the "report a dark mode issue" )
link in the Appearance menu, only appear when dark-mode is activated.
- Keeps the Appearance dropdown menu open after the dark-mode feedback
link has been clicked.

Bug: T367871
Change-Id: I75d040650f613a7af5db553689d734e56f910431
This commit is contained in:
Jdrewniak 2024-07-22 22:17:30 -04:00
parent b50deeabd6
commit 13f0e379b8
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;
}