Commit Graph

4429 Commits

Author SHA1 Message Date
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
Kris
809ce5f5da
DEV: remove !important from btn-transparent background (#29809) 2024-11-19 09:38:10 +11:00
Ella E.
9dab8ed29b
DEV: Moved styles for to be nested under to prevent layout issues affecting other admin tables (#29791) 2024-11-17 22:48:47 -07:00
Gary Pendergast
69d9868c7f
FEATURE: Add keyboard shortcuts for jumping to unread channels (#29734) 2024-11-18 11:18:58 +11:00
Ella E.
93983286b5
UX: Increase admin section header contrast (#29790) 2024-11-15 19:43:29 -07:00
Jan Cernik
876591fdab
FIX: Signup fields tab order and descriptions (#29772) 2024-11-15 18:17:55 -03:00
Kris
5f130b2971
A11Y: update clickable search dropdown tips to be buttons (#29762) 2024-11-14 16:23:43 -05:00
Penar Musaraj
f62ed063fb
UX: Fix Android Firefox Mobile reply position (#29751) 2024-11-14 10:01:55 -05:00
Krzysztof Kotlarek
42b1ca8f78
UX: redesign admin permalinks page (#29634)
Redesign the permalinks page to follow the UX guide. In addition, the ability to edit permalinks was added.

This change includes:
- move to RestModel
- added Validations
- update endpoint and clear old values after the update
- system specs and improvements for unit tests
2024-11-14 10:03:58 +11:00
Jan Cernik
3df3ad6ed6
FIX: Hide presence toggle icon is backwards (#29737) 2024-11-13 09:54:40 -03:00
Joffrey JAFFEUX
f1edc20a50
FIX: correctly supports dropping image (#29733)
This commit:
- Adds back the target drop options to enable the feature
- Applies the css to every elements and not just the one for admin emojis, also fixes the style as it was flashing and preventing it to work. For now we just change the color of the image icon.
- Adds a test to ensure we don't regress.
2024-11-13 17:30:14 +09:00