discourse/app/assets/javascripts/admin/addon/components/admin-page-header.gjs
Martin Brennan 1446596089
UX: Apply admin interface guidelines to Backups page (#28051)
This commit converts the Backups page in the admin interface
to follow our new admin interface guidelines.

As part of this work, I've also made `AdminPageHeader` and `AdminPageSubheader`
components that can be reused on any admin page for consistency, that handle
the title and action buttons and also breadcrumbs.

Also renamed `AdminPluginFilteredSiteSettings` to `AdminFilteredSiteSettings` since
it can be used generally to show a subset of filtered site settings, not only
settings for a plugin. Not sure if it's ideal to have to define a new route for this
for every config area, but not sure how else to do it right now.
2024-08-20 09:59:43 +10:00

53 lines
1.6 KiB
Plaintext

import { hash } from "@ember/helper";
import { htmlSafe } from "@ember/template";
import DBreadcrumbsContainer from "discourse/components/d-breadcrumbs-container";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
import i18n from "discourse-common/helpers/i18n";
import {
DangerButton,
DefaultButton,
PrimaryButton,
} from "admin/components/admin-page-action-button";
const AdminPageHeader = <template>
<div class="admin-page-header">
<div class="admin-page-header__breadcrumbs">
<DBreadcrumbsContainer />
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
{{yield to="breadcrumbs"}}
</div>
<div class="admin-page-header__title-row">
{{#if @titleLabel}}
<h1 class="admin-page-header__title">{{i18n @titleLabel}}</h1>
{{/if}}
<div class="admin-page-header__actions">
{{yield
(hash Primary=PrimaryButton Default=DefaultButton Danger=DangerButton)
to="actions"
}}
</div>
</div>
{{#if @descriptionLabel}}
<p class="admin-page-header__description">
{{i18n @descriptionLabel}}
{{#if @learnMoreUrl}}
{{htmlSafe (i18n "learn_more_with_link" url=@learnMoreUrl)}}
{{/if}}
</p>
{{/if}}
{{#unless @hideTabs}}
<div class="admin-nav-submenu">
<HorizontalOverflowNav class="admin-nav-submenu__tabs">
{{yield to="tabs"}}
</HorizontalOverflowNav>
</div>
{{/unless}}
</div>
</template>;
export default AdminPageHeader;