mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-11 15:37:50 +00:00
Dark-mode feedback link UX improvements
- 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:
parent
b50deeabd6
commit
13f0e379b8
|
@ -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 );
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue