mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-23 02:18:23 +08:00
31d9d5b078
Follow up to 0ccf792b91
In the linked commit, I moved the `AdminConfigAreaCard` component out of the
admin bundle and into the main discourse bundle to make the new
`addCardToAdminThemesGrid` API method, introduced in the same commit, work
without breaking the site for non-staff users who don't get the admin
bundle.
However, there's a better way to go about this without forcing us to
move the component file to the main bundle which is to introduce a new
`PluginOutlet` since it effectively does the same thing as the
`addCardToAdminThemesGrid` API method and it's already a well
established pattern for letting plugins customize and add content to
Discourse pages.
94 lines
2.6 KiB
Text
Vendored
94 lines
2.6 KiB
Text
Vendored
import Component from "@glimmer/component";
|
|
import { tracked } from "@glimmer/tracking";
|
|
import { action } from "@ember/object";
|
|
import { or } from "truth-helpers";
|
|
import DButton from "discourse/components/d-button";
|
|
import icon from "discourse/helpers/d-icon";
|
|
import { i18n } from "discourse-i18n";
|
|
|
|
export default class AdminConfigAreaCard extends Component {
|
|
@tracked collapsed = this.args.collapsed;
|
|
|
|
get computedHeading() {
|
|
if (this.args.heading) {
|
|
return i18n(this.args.heading);
|
|
}
|
|
return this.args.translatedHeading;
|
|
}
|
|
|
|
get hasHeading() {
|
|
return this.args.heading || this.args.translatedHeading;
|
|
}
|
|
|
|
get computedDescription() {
|
|
if (this.args.description) {
|
|
return i18n(this.args.description);
|
|
}
|
|
return this.args.translatedDescription;
|
|
}
|
|
|
|
get hasDescription() {
|
|
return this.args.description || this.args.translatedDescription;
|
|
}
|
|
|
|
get headerCaretIcon() {
|
|
return this.collapsed ? "angle-right" : "angle-down";
|
|
}
|
|
|
|
@action
|
|
toggleCardDisplay() {
|
|
this.collapsed = !this.collapsed;
|
|
}
|
|
|
|
<template>
|
|
<section class="admin-config-area-card" ...attributes>
|
|
{{#if
|
|
(or
|
|
this.hasHeading
|
|
(has-block "header")
|
|
(has-block "headerAction")
|
|
@collapsable
|
|
)
|
|
}}
|
|
<div class="admin-config-area-card__header-wrapper">
|
|
{{#if this.hasHeading}}
|
|
<h3
|
|
class="admin-config-area-card__title"
|
|
>{{this.computedHeading}}</h3>
|
|
{{else}}
|
|
{{#if (has-block "header")}}
|
|
<h3 class="admin-config-area-card__title">{{yield
|
|
to="header"
|
|
}}</h3>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{#if (has-block "headerAction")}}
|
|
<div class="admin-config-area-card__header-action">
|
|
{{yield to="headerAction"}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if @collapsable}}
|
|
<DButton
|
|
@title="sidebar.toggle_section"
|
|
@action={{this.toggleCardDisplay}}
|
|
class="admin-config-area-card__toggle-button btn-transparent"
|
|
>
|
|
{{icon this.headerCaretIcon}}
|
|
</DButton>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{#unless this.collapsed}}
|
|
<div class="admin-config-area-card__content">
|
|
{{#if this.hasDescription}}
|
|
<p class="admin-config-area-card__description">
|
|
{{this.computedDescription}}
|
|
</p>
|
|
{{/if}}
|
|
{{yield to="content"}}
|
|
</div>
|
|
{{/unless}}
|
|
</section>
|
|
</template>
|
|
}
|
