mediawiki-skins-MinervaNeue/includes/Skins/Header.mustache
Jon Robson ded6430b47 Echo uses Button template
Changes
* Update FIXME in userMenu.less to merge selectors
* We replace minerva-user-notifications class with minerva-notifications
to short-circuit Echo's code so that it no longer replaces the Minerva
notification badge with its own.
* We update resources/skins.minerva.scripts/initMobile.js to introduce
our own wire up code - this is responsible for opening Echo overlay
and reseting the counter. The code in Echo will be removed in a follow
up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>)
* We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022
so that Minerva desktop remains consistent with desktop Vector 2022 experience.
* We clearly mark technical debt relating to the special mobile version.

Testing:
* Pixel.js has a group echo that covers all the different variants.
Make sure to update to latest main branch before running these.
* Desktop should behave the same for Minerva as Echo.
* On mobile only when a user has unseen notifications a red circle
is shown. Otherwise a bell icon is shown, never with number.
* On mobile a single button is visible that combines alert and count
numbers.
* With Echo disabled a bell shows that links to the user talk page

Visual changes:
* Previously the red circle became a transparent/gray circle on click. Now
it will always be red.
* Minor aligment changes to red circle and bell icon are expected as
the change prevents MobileFrontend/Echo updating the icon to use
Codex.

Bug: T342907
Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-08 15:44:38 +00:00

35 lines
1.2 KiB
Plaintext

<header class="header-container header-chrome">
<div class="minerva-header">
<nav class="navigation-drawer toggle-list view-border-box">
<input type="checkbox" id="main-menu-input" class="toggle-list__checkbox" role="button" aria-haspopup="true" aria-expanded="false" aria-labelledby="mw-mf-main-menu-button">
{{#data-minerva-main-menu-btn}}{{>Button}}{{/data-minerva-main-menu-btn}}
{{#data-minerva-main-menu}}{{>menu}}{{/data-minerva-main-menu}}
<label class="main-menu-mask" for="main-menu-input"></label>
</nav>
<div class="branding-box">
<a href="{{link-mainpage}}">
{{#data-logos}}
<span>{{>Logo}}</span>
{{/data-logos}}
{{#is-minerva-beta}}<sup>&beta;</sup>{{/is-minerva-beta}}
</a>
</div>
{{#data-minerva-search-box}}
{{>SearchBox}}
{{/data-minerva-search-box}}
<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
{{#data-minerva-notifications}}
<div class="minerva-notifications">
<ul>
{{#array-buttons}}
<li>{{>Button}}</li>
{{/array-buttons}}
</ul>
</div>
{{/data-minerva-notifications}}
{{#html-minerva-user-menu}}{{{html-minerva-user-menu}}}{{/html-minerva-user-menu}}
</nav>
</div>
</header>