wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Define sticky header ULS behaviour"

Browse source
This commit is contained in:
jenkins-bot 2021-12-09 23:15:05 +00:00 committed by Gerrit Code Review
parent 454a2845b4 51cce2d0d4
commit cc44e46229
3 changed files with 45 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
resources/skins.vector.es6/stickyHeader.js
View file

@ -10,6 +10,8 @@ const
STICKY_HEADER_USER_MENU_CONTAINER_CLASS = 'vector-sticky-header-icon-end',
FIRST_HEADING_ID = 'firstHeading',
USER_MENU_ID = 'p-personal',
ULS_STICKY_CLASS = 'uls-dialog-sticky',
ULS_HIDE_CLASS = 'uls-dialog-sticky-hide',
VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle',
STICKY_HEADER_EXPERIMENT_NAME = 'vector.sticky_header';
@ -36,6 +38,8 @@ function show() {
// eslint-disable-next-line mediawiki/class-doc
header.classList.add( STICKY_HEADER_VISIBLE_CLASS );
}
// eslint-disable-next-line mediawiki/class-doc
document.body.classList.remove( ULS_HIDE_CLASS );
}
/**
@ -45,6 +49,8 @@ function hide() {
if ( header ) {
// eslint-disable-next-line mediawiki/class-doc
header.classList.remove( STICKY_HEADER_VISIBLE_CLASS );
// eslint-disable-next-line mediawiki/class-doc
document.body.classList.add( ULS_HIDE_CLASS );
}
}
@ -438,6 +444,27 @@ function initStickyHeader( observer ) {
setupSearchIfNeeded( header );
// @ts-ignore
addVisualEditorHooks( header, stickyIntersection, observer );
// Make sure ULS outside sticky header disables the sticky header behaviour.
// @ts-ignore
mw.hook( 'mw.uls.compact_language_links.open' ).add( function ( $trigger ) {
if ( $trigger.attr( 'id' ) !== 'p-lang-btn-sticky-header' ) {
const bodyClassList = document.body.classList;
bodyClassList.remove( ULS_HIDE_CLASS );
bodyClassList.remove( ULS_STICKY_CLASS );
}
} );
// Make sure ULS dialog is sticky.
// @ts-ignore
const langBtn = header.querySelector( '#p-lang-btn-sticky-header' );
if ( langBtn ) {
langBtn.addEventListener( 'click', function () {
const bodyClassList = document.body.classList;
bodyClassList.remove( ULS_HIDE_CLASS );
bodyClassList.add( ULS_STICKY_CLASS );
} );
}
}
module.exports = {

3
skin.json
View file

@ -287,7 +287,8 @@
"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
"+oojs-ui-core.styles": "skinStyles/ooui.less",
"mediawiki.special": "skinStyles/mediawiki.special.less",
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less"
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less"
}
},
"config": {

16
skinStyles/ext.uls.compactlinks.less Normal file
View file

@ -0,0 +1,16 @@
// Sticky header ULS behavior.
.uls-dialog-sticky {
.uls-menu {
position: fixed;
/* stylelint-disable-next-line declaration-no-important */
top: 60px !important;
}
&.uls-dialog-sticky-hide {
.uls-menu {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
}