discourse/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
Martin Brennan aef3f17b56
DEV: A different approach to breadcrumbs (#27365)
Really fully authored by Jarek, I only made the PR :)

The `DBreadcrumbItem` and `DBreadcrumbContainer` components
introduced in 1239178f49 have
some limitations, mainly that the container has no awareness of
its items, so nothing that requires positional knowledge can
be used. This is needed to use `aria-current` on the last breadcrumb
item, see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/.

We change `DBreadcrumbItem` to always be a link, removing
the need for `LinkTo`. Then, we introduce a service to keep
track of containers and items (since all items are rendered into
all containers) and make the item itself responsible for registering
to the service, and introduce the needed `aria-current` behaviour.

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2024-06-07 11:31:46 +10:00

57 lines
1.7 KiB
Plaintext

import Component from "@glimmer/component";
import { service } from "@ember/service";
import DBreadcrumbsContainer from "discourse/components/d-breadcrumbs-container";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import i18n from "discourse-common/helpers/i18n";
import AdminPluginConfigArea from "./admin-plugin-config-area";
import AdminPluginConfigMetadata from "./admin-plugin-config-metadata";
import AdminPluginConfigTopNav from "./admin-plugin-config-top-nav";
export default class AdminPluginConfigPage extends Component {
@service currentUser;
@service adminPluginNavManager;
get mainAreaClasses() {
let classes = ["admin-plugin-config-page__main-area"];
if (this.adminPluginNavManager.isSidebarMode) {
classes.push("-with-inner-sidebar");
} else {
classes.push("-without-inner-sidebar");
}
return classes.join(" ");
}
<template>
<div class="admin-plugin-config-page">
<DBreadcrumbsContainer />
<DBreadcrumbsItem @route="admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@route="adminPlugins"
@label={{i18n "admin.plugins.title"}}
/>
<DBreadcrumbsItem
@route="adminPlugins.show"
@model={{@plugin}}
@label={{@plugin.nameTitleized}}
/>
<AdminPluginConfigMetadata @plugin={{@plugin}} />
{{#if this.adminPluginNavManager.isTopMode}}
<AdminPluginConfigTopNav />
{{/if}}
<div class="admin-plugin-config-page__content">
<div class={{this.mainAreaClasses}}>
<AdminPluginConfigArea>
{{yield}}
</AdminPluginConfigArea>
</div>
</div>
</div>
</template>
}