Commit Graph

4439 Commits

Author SHA1 Message Date
Jordan Vidrine ef754cdd9a
UX: Invites styles refactor (#30329) 2024-12-17 15:11:21 -06:00
Jordan Vidrine 85b45a8379
ux: move to minimal layout (#30327) 2024-12-17 14:41:00 -06:00
Jordan Vidrine 8f26ae7b7d
UX: refactor password reset page (#30323) 2024-12-17 12:11:02 -06:00
Jordan Vidrine 086b1e82e4
UX: move to icon for password masking (#30321) 2024-12-17 11:12:41 -06:00
Ella E. 37f032752e
UX: Apply admin table to webhooks (#30317)
* 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
2024-12-17 08:52:29 -07:00
Krzysztof Kotlarek 0410c07342
UX: the ability to collapse AdminConfigAreaCard (#30310)
Additional `collapsable` argument which makes area cards collapsible.
2024-12-17 11:47:23 +11:00
Sam 55a8184231
FEATURE: Reason and deleted content support in the review queue (#30295)
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.
2024-12-17 11:44:46 +11:00
Jordan Vidrine 565a48e8e1
UX: fix active and muted channels (#30308) 2024-12-16 16:02:44 -06:00
Joffrey JAFFEUX 41df705188
DEV: replaces topic-notifications-options by DMenu (#30298)
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 />`
2024-12-16 19:59:18 +01:00
Joffrey JAFFEUX f6a4de4805
DEV: adds support for nested collections and objects (#30265)
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.
2024-12-13 15:43:32 +01:00
Joffrey JAFFEUX cbc0ece6e8
DEV: <DSelect /> (#30224)
`<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"});
```
2024-12-13 10:40:06 +01:00
Martin Brennan fae6ffcf06
UX: Introduce <DStatTiles /> component (#30238)
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.
2024-12-13 11:32:46 +10:00
chapoi ee567165f1
UX: increase button sizes and timeline size (#30240)
* 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
2024-12-12 16:09:44 +01:00
Martin Brennan 203f93bcaf
FIX: Background color for settings overriden filter (#30221)
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.
2024-12-12 10:27:37 +11:00
Keegan George 9df7d6f9a0
UX: Make radio buttons respect forum's accent color (#30235)
Similar to 601780aadf, this change ensures radio buttons respect the forum's accent color. Visual color change only, as such no tests.
2024-12-11 15:22:00 -08:00
Kris 9f68b037d4
UX: fix PM title editing layout (#30233) 2024-12-12 09:18:52 +11:00
Keegan George 601780aadf
UX: Make checkboxes respect forum's accent color (#30231)
This change ensures checkboxes respect the forum's accent color. Visual color change only, as such no tests.
2024-12-11 12:55:22 -08:00
Kris aabf174ac8
UX: fix admin sidebar header width (#30226) 2024-12-11 11:09:27 -05:00
Régis Hanol 6ef0b5d508
Cleanup mobile topic footer area (#30132) 2024-12-11 14:59:37 +01:00
Ella E. d69edab611
FIX: Prevent experimental badge from splitting onto new lines with long titles (#30181)
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.
2024-12-10 10:25:45 +10:00
Martin Brennan 5e86bc2f43
FIX: Allow anyone who can manage groups to see Automatic tooltip (#30174)
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
2024-12-09 13:21:24 +10:00
Kelv e55d4f0c5c
DEV: update deprecated icon names in themes-grid-card (#30162) 2024-12-08 22:18:55 +01:00
Kris d35d8193aa
UX: fix PM topic map layout (#30135) 2024-12-06 08:34:54 -05:00
Ella E. c817a94c89
UX: Move revoked API key status to dedicated column (#30125)
* 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
2024-12-05 04:24:01 -07:00
Gary Pendergast bb2e9645f2
FIX: Move granted badges to the end of the post header. (#30095) 2024-12-05 09:22:03 +11:00
Kris 19f530a827
UX: refactor title editing CSS to improve layout (#30109) 2024-12-04 16:30:48 -05:00
Kris 5c2e05cf5d
UX: fix topic map padding in low-content situations (#30101) 2024-12-04 09:39:14 -05:00
Ella E. ef9d7579df
UX: Add admin filter row styling (#30057)
* DEV: add scss file for admin filter

* UX: apply styling for the filter row
2024-12-03 18:22:13 +11:00
Gary Pendergast 2513339955
FEATURE: Show when a badge has been granted for a post (#29696)
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
2024-12-03 13:43:27 +11:00
Jordan Vidrine 3b334f54fc
FIX: adjust codeblock link styling (#30036) 2024-12-02 09:49:54 -06:00
Krzysztof Kotlarek 6d4c6ee154
UX: admins users page follows admin ux guideline (#29873)
Conversion of `/admin/users` page to follow admin UX guidelines.

In addition, add the username to the title on the user admin page.
2024-12-02 10:11:23 +11:00
David Taylor c98335e4e5
UX: Drop post-background highlighting on navigation (#29986)
Animating the background-color property like this is not compositable for the browser, which means the animation is not smooth, and can contribute to the Cumulative Layout Shift web vital.

For now, we're removing this, and may consider re-introducing an alternative version in future based on user feedback.
2024-11-28 16:55:13 +00:00
Jan Cernik b4ef3456d9
FEATURE: Allow to customize the signup form descriptions (#29959) 2024-11-27 14:23:14 -03:00
Ella E. ea2a0f2c8e
DEV: refactor SCSS structure for admin table styling (#29953) 2024-11-26 22:08:52 -07:00
Ted Johansson 15a61a0c1f
DEV: Change admin emoji delete button from icon to text (#29931)
The Admin UI guidelines states that buttons should have text, not icons. This was an oversight on the admin emoji listing.

Part of this change is also opportunistically removing the CSS file for admin emojis, none of which is used any more since the conversion.
2024-11-26 14:10:14 +08:00
Osama Sayegh 118f7869bb
FEATURE: Add bulk destroy to admin users list (#29744)
This commit introduces a new feature that allows staff to bulk select and delete users directly from the users list at `/admin/users/list`. The main use-case for this feature is make deleting spammers easier when a site is under a large spam attack.

Internal topic: t/140321.
2024-11-25 11:13:35 +03:00
Ted Johansson 88af23e1ca
DEV: Modernize admin user fields (#29843)
This PR modernizes the user fields area of the admin UI. It is largely based on the work on the emoji section.
2024-11-25 11:54:43 +08:00
Jordan Vidrine 44fbf1048c
UX: Multiple codeblocks fixes (#29898) 2024-11-22 13:52:23 -06:00
Penar Musaraj a97ac905d1
Revert "UX: Codeblocks edits (#29893)" (#29896)
This reverts commit 667a09b159.
2024-11-22 12:09:40 -05:00
Jordan Vidrine 667a09b159
UX: Codeblocks edits (#29893) 2024-11-22 09:05:48 -06:00
Akshay Birajdar b138eaf9e5
FEATURE: Add Bulk actions to /filter page (#29420)
- Add bulk actions component on /filter page for both desktop & mobile view.
- Add system specs to assert bulk actions to be available on /filter page.
2024-11-22 11:51:06 +11:00
Renato Atilio 6e5d4ee492
DEV: refactor `composer` references on composer-container/-editor (#29629)
Most of it is removing the ComposerContainer > ComposerEditor indirect references to the composer service, so ComposerEditor now deals with the service directly.

Form template was moved from DEditor to ComposerEditor.
2024-11-21 13:29:12 -03:00
Jordan Vidrine 34e6c8f3dd
UX: Codeblocks experiment merge (#29870) 2024-11-20 17:24:41 -06:00
Kris 84fecd370c
A11Y: convert sortable topic list headers to proper buttons (#29808) 2024-11-19 15:38:03 -05:00
Ted Johansson c3367c329c
DEV: Make breadcrumb separators unclickable icons (#29817)
The current breadcrumb separators are ">" characters that are added as pseudo-elements. These become part of the clickable area for the links, which causes mis-clicks.

This PR does two things:

- Replace the pseudo-element with a DIcon.
- Make sure the separator is not clickable.
2024-11-19 16:42:43 +08:00
Ted Johansson d96b8d1001
DEV: Modernize admin emoji JavaScript (#29714)
app/assets/javascripts/admin/addon/templates/emojis.hbs
2024-11-19 15:44:34 +08:00
Martin Brennan 01a160d8af
UX: Add AdminConfigAreaEmptyList component (#29816)
This component can be used as a placeholder on
admin pages where the table has no data as per
the admin UI guidelines.
2024-11-19 16:49:57 +10:00
Joffrey JAFFEUX 582de0ffe3
DEV: adds blocks support to chat messages (#29782)
Blocks allow BOTS to augment the capacities of a chat message. At the moment only one block is available: `actions`, accepting only one type of element: `button`.

<img width="708" alt="Screenshot 2024-11-15 at 19 14 02" src="https://github.com/user-attachments/assets/63f32a29-05b1-4f32-9edd-8d8e1007d705">

# Usage

```ruby
Chat::CreateMessage.call(
  params: {
    message: "Welcome!",
    chat_channel_id: 2,
    blocks: [
      {
         type: "actions",
         elements: [
           { value: "foo", type: "button", text: { text: "How can I install themes?", type: "plain_text" } }
         ]
      }
    ]
  },
  guardian: Discourse.system_user.guardian
)
```

# Documentation

## Blocks

### Actions

Holds interactive elements: button.

#### Fields

| Field | Type | Description | Required? |
|--------|--------|--------|--------|
| type | string | For an actions block, type is always `actions` | Yes |
| elements | array | An array of interactive elements, maximum 10 elements | Yes |
| block_id | string | An unique identifier for the block, will be generated if not specified. It has to be unique per message | No |

#### Example

```json
{
  "type": "actions",
  "block_id": "actions_1",
  "elements": [...]
}
```

## Elements

### Button

#### Fields

| Field | Type | Description | Required? |
|--------|--------|--------|--------|
| type | string | For a button, type is always `button` | Yes |
| text | object | A text object holding the type and text. Max 75 characters | Yes |
| value | string | The value returned after the interaction has been validated. Maximum length is 2000 characters | No |
| style | string | Can be `primary` ,  `success` or `danger` | No |
| action_id | string | An unique identifier for the action, will be generated if not specified. It has to be unique per message | No |

#### Example

```json
{
  "type": "actions",
  "block_id": "actions_1",
  "elements": [
    {
      "type": "button",
      "text": {
          "type": "plain_text",
          "text": "Ok"
      },
      "value": "ok",
      "action_id": "button_1"
    }
  ]
}
```

## Interactions

When a user interactions with a button the following flow will happen:

- We send an interaction request to the server
- Server checks if the user can make this interaction
- If the user can make this interaction, the server will:

  * `DiscourseEvent.trigger(:chat_message_interaction, interaction)`
  * return a JSON document
  
  ```json
  {
    "interaction": {
        "user": {
            "id": 1,
            "username": "j.jaffeux"
        },
        "channel": {
            "id": 1,
            "title": "Staff"
        },
        "message": {
            "id": 1,
            "text": "test",
            "user_id": -1
        },
        "action": {
            "text": {
                "text": "How to install themes?",
                "type": "plain_text"
            },
            "type": "button",
            "value": "click_me_123",
            "action_id": "bf4f30b9-de99-4959-b3f5-632a6a1add04"
        }
    }
  }
  ```
  * Fire a `appEvents.trigger("chat:message_interaction", interaction)`
2024-11-19 07:07:58 +01:00
Ella E. 79ffbe7cd5
UX: Make cells middle aligned; apply overview class directly to td elements (#29813) 2024-11-18 18:42:29 -07:00
Jordan Vidrine 2a59df79d3
UX: Add title & adjust dnd image (#29812) 2024-11-18 19:25:41 -06:00