UX: Automatically collapse admin page header buttons on mobile (#29040)

This commit attempts to improve the mobile experience for
admin page header and subheader by automatically collapsing
all action buttons in these components into a DMenu when viewing
mobile.

This is done by using different "list" wrapper components and a
DMenu trigger and a DropdownMenu on mobile only, and uses has-block
to determine whether to render the DMenu trigger at all.

This also removes the `PluginOutlet` in `AdminPluginConfigPage`, it
was too inflexible for this `DropdownMenu` case, and since the `:actions`
were always rendering we couldn't rely on `has-block`. A new plugin API,
`registerPluginHeaderActionComponent`, has been introduced instead to
replace it.
This commit is contained in:
Martin Brennan
2024-10-08 08:28:32 +10:00
committed by GitHub
parent 4ea3d69979
commit 85774cc214
18 changed files with 406 additions and 56 deletions

View File

@@ -29,10 +29,11 @@ export default class ChatAdminPluginActions extends Component {
}
<template>
<@outletArgs.actions.Primary
<@actions.Primary
@label="chat.admin.export_messages.create_export"
@title="chat.admin.export_messages.create_export"
@action={{this.confirmExportMessages}}
@icon="right-from-bracket"
class="admin-chat-export"
/>
</template>

View File

@@ -14,6 +14,7 @@
@title="chat.incoming_webhooks.new"
@route="adminPlugins.show.discourse-chat-incoming-webhooks.new"
@routeModels="chat"
@icon="plus"
class="admin-incoming-webhooks-new"
/>
</:actions>