mediawiki-skins-MinervaNeue/includes/Skins/PageActionsMenu/PageActionsMenu.mustache

<nav class="page-actions-menu">
	<ul id="page-actions" class="page-actions-menu__list">
		{{#toolbar}}
		<li id="{{name}}" class="page-actions-menu__list-item">
			{{#components}}
				{{>Button}}
			{{/components}}
		</li>
		{{/toolbar}}
		{{#overflowMenu}}
			<li id="{{item-id}}" class="page-actions-menu__list-item">
				{{> ToggleList/ToggleList}}
			</li>
		{{/overflowMenu}}
	</ul>
</nav>
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-06-20 19:17:50 +00:00			`<nav class="page-actions-menu">`
			`<ul id="page-actions" class="page-actions-menu__list">`
			`{{#toolbar}}`
			`<li id="{{name}}" class="page-actions-menu__list-item">`
			`{{#components}}`
[Icons] Use Button template in PageActionsMenu. Use the Button.mustache partial in the PageActionsMenu.mustache template. This converts the page actions menu to use the Button template in a way that doesn't change the existing HTML. The mw-ui-icon-element and mw-ui-icon-with-label-desktop classes are placed onto the Button.mustache markup. Bug: T342908 Change-Id: Ib5dadd929eea2e72a24e061c4174348615890617 2023-08-08 23:33:28 +00:00			`{{>Button}}`
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-06-20 19:17:50 +00:00			`{{/components}}`
			`</li>`
			`{{/toolbar}}`
			`{{#overflowMenu}}`
			`<li id="{{item-id}}" class="page-actions-menu__list-item">`
			`{{> ToggleList/ToggleList}}`
			`</li>`
			`{{/overflowMenu}}`
			`</ul>`
			`</nav>`