mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-27 17:10:19 +00:00
Merge "Dark-mode feedback link UX improvements"
This commit is contained in:
commit
379aa37d1f
|
@ -361,7 +361,16 @@ function makeClientPreference( parent, featureName, config, userPreferences ) {
|
||||||
anchor.setAttribute( 'target', '_blank' );
|
anchor.setAttribute( 'target', '_blank' );
|
||||||
}
|
}
|
||||||
anchor.textContent = linkLabel;
|
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' );
|
const icon = document.createElement( 'span' );
|
||||||
icon.classList.add( 'vector-icon', 'vector-icon--heart' );
|
icon.classList.add( 'vector-icon', 'vector-icon--heart' );
|
||||||
anchor.textContent = mw.msg( 'vector-night-mode-issue-reporting-link-notification' );
|
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.prepend( icon );
|
||||||
anchor.removeEventListener( 'click', showSuccessFeedback );
|
anchor.removeEventListener( 'click', showSuccessFeedback );
|
||||||
};
|
};
|
||||||
anchor.addEventListener( 'click', showSuccessFeedback );
|
anchor.addEventListener( 'click', ( event ) => showSuccessFeedback( event ) );
|
||||||
betaMessageElement.appendChild( anchor );
|
betaMessageElement.appendChild( anchor );
|
||||||
row.appendChild( betaMessageElement );
|
row.appendChild( betaMessageElement );
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,3 +15,19 @@
|
||||||
.cdx-mixin-css-icon( @cdx-icon-heart, @color-success, @size-icon-small );
|
.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