DEV: Support new header button/icon ordering APIs on widget header (#26264)

This commit is contained in:
David Taylor 2024-03-20 17:00:55 +00:00 committed by GitHub
parent d0d4a363d4
commit dd1a14ac6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -240,7 +240,7 @@ createWidget("header-icons", {
init() {
registerWidgetShim(
"extra-icon",
"div.wrapper",
"span.wrapper",
hbs`<LegacyHeaderIconShim @component={{@data.component}} />`
);
},
@ -253,49 +253,48 @@ createWidget("header-icons", {
const icons = [];
const resolvedIcons = _extraHeaderIcons.resolve();
resolvedIcons.forEach((icon) => {
if (["search", "user-menu", "hamburger"].includes(icon.key)) {
return;
if (icon.key === "search") {
icons.push(
this.attach("header-dropdown", {
title: "search.title",
icon: "search",
iconId: SEARCH_BUTTON_ID,
action: "toggleSearchMenu",
active: this.search.visible,
href: getURL("/search"),
classNames: ["search-dropdown"],
})
);
} else if (icon.key === "user-menu" && attrs.user) {
icons.push(
this.attach("user-dropdown", {
active: attrs.userVisible,
action: "toggleUserMenu",
user: attrs.user,
})
);
} else if (
icon.key === "hamburger" &&
(!attrs.sidebarEnabled || this.site.mobileView)
) {
icons.push(
this.attach("header-dropdown", {
title: "hamburger_menu",
icon: "bars",
iconId: "toggle-hamburger-menu",
active: attrs.hamburgerVisible,
action: "toggleHamburger",
href: "",
classNames: ["hamburger-dropdown"],
})
);
} else {
icons.push(this.attach("extra-icon", { component: icon.value }));
}
icons.push(this.attach("extra-icon", { component: icon.value }));
});
const search = this.attach("header-dropdown", {
title: "search.title",
icon: "search",
iconId: SEARCH_BUTTON_ID,
action: "toggleSearchMenu",
active: this.search.visible,
href: getURL("/search"),
classNames: ["search-dropdown"],
});
icons.push(search);
const hamburger = this.attach("header-dropdown", {
title: "hamburger_menu",
icon: "bars",
iconId: "toggle-hamburger-menu",
active: attrs.hamburgerVisible,
action: "toggleHamburger",
href: "",
classNames: ["hamburger-dropdown"],
});
if (!attrs.sidebarEnabled || this.site.mobileView) {
icons.push(hamburger);
}
if (attrs.user) {
icons.push(
this.attach("user-dropdown", {
active: attrs.userVisible,
action: "toggleUserMenu",
user: attrs.user,
})
);
}
return icons;
},
});
@ -496,7 +495,11 @@ export default createWidget("header", {
services: ["router", "search"],
init() {
registerWidgetShim("extra-button", "div.wrapper", hbs`<@data.component />`);
registerWidgetShim(
"extra-button",
"span.wrapper",
hbs`<@data.component />`
);
},
defaultState() {
@ -538,13 +541,11 @@ export default createWidget("header", {
const resolvedButtons = _extraHeaderButtons.resolve();
resolvedButtons.forEach((button) => {
if (button.key === "auth") {
return;
buttons.push(this.attach("header-buttons", attrs));
}
buttons.push(this.attach("extra-button", { component: button.value }));
});
buttons.push(this.attach("header-buttons", attrs));
const panels = [];
panels.push(h("span.header-buttons", buttons), headerIcons);