Previously we were we were setting `overlaysContent = true` for Chrome
only, which made it very hard for the same CSS to work well across all
three major browsers. With `interactive-widget=resizes-content`, there
sems to be better consistency, we can use bottom fixed-positioning in
Firefox and Chrome for Android and a CSS workaround for Safari.
See also https://developer.chrome.com/blog/viewport-resize-behavior
This converts the `<AdminPageHeader />` component and the
`<AdminPageSubheader />` components into new components
that can be used outside of admin, and updates the CSS classes.
Also introduces a `<DPageActionButton />` component and child
components for the header action buttons.
I have to keep the old admin-only components around for
now until plugins are updated, then we can remove it,
and remove the re-exports that are done within
admin-page-action-button.gjs
* UX: Apply admin table classes for consistent mobile styling on the web hooks page
* DEV: Remove icon on the status component; update status classes
* DEV: Update tests for webhook status component
* DEV: add space var with a smaller value
* DEV: Add styling for different status labels
Add flag reason filter and improve handling of deleted content in review queue
This commit enhances the review queue with several key improvements:
1. Adds a new "Reason" filter to allow filtering flags by their score type
2. Improves UI for deleted content by:
- Adding visual indication for deleted posts (red background)
- Properly handling deleted content visibility for staff (category mods can not see deleted content)
3. Refactors reviewable score type handling for better code organization
4. Adds tests for trashed topics/posts visibility
This change will help moderators more efficiently manage the review queue by
being able to focus on specific types of flags and better identify deleted
content.
This commit introduces <NotificationsTracking /> which is a wrapper component around <DMenu /> which replaces the select-kit component <TopicNotificationsButton />.
Each tracking case has its dedicated component:
- topic -> `<TopicNotificationsTracking />`
- group -> `<GroupNotificationsTracking />`
- tag -> `<TagNotificationsTracking />`
- category -> `<CategoryNotificationsTracking />`
- chat thread -> `<ThreadNotificationsTracking />`
Collections were an existing concept in FormKit but didn't allow nesting. You can now do infinite nesting:
```gjs
<Form
@data={{hash
foo=(array
(hash bar=(array (hash baz=1))) (hash bar=(array (hash baz=2)))
)
}}
as |form|
>
<form.Collection @name="foo" as |parent parentIndex|>
<parent.Collection @name="bar" as |child childIndex|>
<child.Field @name="baz" @title="Baz" as |field|>
<field.Input />
</child.Field>
</parent.Collection>
</form.Collection>
</Form>
```
On top of this a new component has been added: `Object`. It allows you to represent objects in your form data. Collections are basically handling arrays, and Objects are objects.
This is useful if you form data has this shape for example:
```javascript
{ foo: { bar: 1, baz: 2 } }
```
This can now be mapped in your form using this syntax:
```gjs
<Form @data={{hash foo=(hash bar=1 baz=2)}} as |form|>
<form.Object @name="foo" as |object name|>
<object.Field @name={{name}} @title={{name}} as |field|>
<field.Input />
</object.Field>
</form.Object>
</Form>
```
Objects accept nested collections and nested objects. Just like Collections.
A small addition has also been made to `Collection`, they now support a custom `@tagName`, it's useful if each item of your collection is the row of a table for example.
`<DSelect />` is a wrapper similar to our existing `<DButton />` over the html element `<select>`. The code is ported from form kit which is now directly using `<DSelect />`. Note this component has also been used in edit topic timer modal.
This component is recommended for a small list of text items (no icons, no rich formatting...).
Usage:
```gjs
<DSelect class="my-select" @onChange={{this.handleChange}} as |select|>
<select.Option @value="foo" class="my-favorite-option">Foo</select.Option>
<select.Option @value="bar">Bar</select.Option>
</DSelect>
```
This commit comes with a set of assertions:
```gjs
import dselect from "discourse/tests/helpers/d-select-helper";
import { select } from "@ember/test-helpers";
assert
.dselect(".my-select")
.hasOption({ value: "bar", label: "Bar" })
.hasOption({ value: "foo", label: "Foo" })
.hasNoOption("baz");
await select(".my-select", "foo");
assert.dselect(".my-select").hasSelectedOption({value: "foo", label: "Foo"});
```
Introduces a new component used to show a grid of stats
on any page, mostly used for dashboards and config pages.
This component yields a hash with a `Tile` component property,
and the caller can loop through their stats and display them
using this component.
Each stat needs a @label and a @value at minimum, but can
also pass in a @tooltip and a @url.
* UX: increase button sizes and timeline size
* UX: bring back tracking btn on topic timeline desktop
* Scope flexing topic-navigation area to mobile + make all buttons same font-size
This was fixed previously but must have regressed, we
are showing a darker grey background around the
"Only show overridden" checkbox for our Settings tab
in config pages.
This PR resolves an issue where the "Experimental" badge would break onto a new line when the title was too long, causing the badge text to separate from the icon. The fix ensures the badge text and icon remain aligned, even with longer titles.
Followup 35ecd0335c
Since we have the moderators_manage_categories_and_groups setting,
more than admins can manage groups, so we need to allow others to
see this Automatic tooltip as well.
Also fixes an inconsistency with canManageGroup between the User
model and Group controller, the latter is correct, allowing management
of automatic groups if can_admin_group permission is true
* DEV: add table heading for status
* UX: Move revoked status to its own column with a badge; remove revoked icon
* UX: Increase text contrast for revoked rows