mediawiki-skins-MinervaNeue/includes/skins/minerva.mustache
Stephen Niedzielski edb4385345 Hygiene: extract ToggleList to a reusable component
A list that toggles visibility via the checkbox hack is needed in at
least two spots: the page actions overflow menu and the user menu. This
patch makes several refactors to turn what was previously hardcoded into
page actions a reusable component:

- Start a new components directory. Components are reusable and
  composable. The subdirectories are organized by function, not
  ResourceLoader module bundling which greatly improves the ability to
  see a component's full functionality in one directory instead of
  examining the entire codebase. See updates to README.

- Extract pageactions.less into:
  - ToggleList.less: LESS for any checkbox hack list.
  - DropDownList.less: LESS for lists that open downwards.
  - MenuListItem.less: LESS for list items of menus.
  The division makes it easier to see concerns, dependencies, and change
  code.

- Move pageActionMenu.mustache to a component and extract ToggleList
  template.

- Extract ToggleList.js from Toolbar.js.

Bug: T214540
Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8
2019-07-04 13:48:13 -06:00

60 lines
1.7 KiB
Plaintext

{{{headelement}}}
<div id="mw-mf-viewport">
<nav id="mw-mf-page-left" class="navigation-drawer view-border-box">
{{{mainmenuhtml}}}
</nav>
<div id="mw-mf-page-center">
<header class="header-container header-chrome">
<form class="header" action="{{wgScript}}" method="get">
<div>{{{menuButton}}}</div>
<div class="branding-box">
<a href="{{mainPageURL}}">
<span>{{{siteheading}}}</span>
{{#isBeta}}<sup>&beta;</sup>{{/isBeta}}
</a>
</div>
<div class="search-box">
<input class="search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
autocomplete="off" placeholder="{{placeholder}}" aria-label="{{placeholder}}"
value="{{search}}">
</div>
<div>{{{searchButton}}}</div>
{{^isAnon}}<div>{{#userNotificationsData}}{{>userNotifications}}{{/userNotificationsData}}</div>{{/isAnon}}
</form>
</header>
<main id="content" class="mw-body">
<div class="banner-container">
{{>banners}}
</div>
{{#hasheadingholder}}
{{{prebodyhtml}}}
<div class="pre-content heading-holder">
<div class="page-heading">
{{{headinghtml}}}
{{{taglinehtml}}}
</div>
{{#tabs}}
<div class="minerva__tab-container">
{{#items}}
<a href="{{href}}" rel="{{rel}}" class="minerva__tab {{class}}">{{text}}</a>
{{/items}}
</div>
{{/tabs}}
{{{subtitle}}}
{{{pageactionshtml}}}
{{{postheadinghtml}}}
{{{internalBanner}}}
</div>
{{/hasheadingholder}}
{{{precontenthtml}}}
{{{contenthtml}}}
<div class="post-content" id="page-secondary-actions">
{{{secondaryactionshtml}}}
</div>
</main>
{{>footer}}
</div>
</div>
<div class="mw-notification-area" data-mw="interface"></div>
<!-- v:8.1.7 -->