Commit Graph

6706 Commits

Author SHA1 Message Date
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
chapoi 58edabc2b5
DEV: Dmenu add modifier (#29846) 2024-11-21 03:14:46 +01: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
Jan Cernik 234133bd3b
UX: Split `hide_profile_and_presence` user option (#29632)
It splits the hide_profile_and_presence user option and the default_hide_profile_and_presence site setting for more granular control. It keeps the option to hide the profile under /u/username/preferences/interface and adds the presence toggle in the quick user menu.

Co-authored-by: Régis Hanol <regis@hanol.fr>
2024-11-12 22:22:58 -03:00
Sérgio Saquetim 3019bb577b
DEV: Modernize the post menu from widgets to Glimmer components (#28670)
This commit modernizes the post menu by migrating it from the existing widget-based implementation to Glimmer components. This transition aims to improve the maintainability, performance, and overall developer experience.

It also introduces a new DAG-based transformer API for customizations that aims to be more flexible than the widget base one.

---------

Co-authored-by: David Taylor <david@taylorhq.com>
2024-11-11 15:36:08 -03:00
Bianca Nenciu f1700ca589
FEATURE: Paginate categories when there are many (#29569)
This commit removes the new optimized category style introduced in
previous commits (d37a0d40, 9a80d718 and 430c42ac), in favour of the
existent `categories_only`.
2024-11-11 17:32:45 +02:00
Ted Johansson f573fd8f5e
FEATURE: Add more bulk dismiss buttons with confirmation (#29331)
When performing bulk dismissal in Unread and New views, the dismiss button stays at the top of the UI. Because of this we want to provide the dismiss action also in the "sticky" menu that's always in view, even when scrolling a long list of topics.
2024-11-08 15:59:12 +08:00
Ella E. b4f7a1b761
UX: Apply admin table classes for consistent mobile styling on the API keys page (#29630)
* UX: Apply admin table classes for consistent mobile styling on the API keys page

* apply prettier
2024-11-06 18:38:25 -07:00
Keegan George fad0d2ec62
UX: New experimental features should be marked clearly (#29622)
This PR adds a small visual change to the new feature item on the `/admin/whats-new` page. When features are marked with an experimental site setting, they should show an indication on the feature item that it is "Experimental"
2024-11-06 15:26:30 -08:00
Jean 708533b1e0
FEATURE: Add links to searchable user fields in users directory and user profile (#29338)
* FEATURE: Add links to searchable user fields in users directory and user profile
2024-11-06 13:35:30 -04:00
Ella E. 13c7773036
UX: Make the emojis in the admin page table list work better on mobile (#29619)
* UX: Apply admin table classes for consistent mobile styling on the emojis page

* UX: remove icon from the button

* UX: styling tweaks on the emoji uploader form

* UX: right align table button controls

* apply prettier
2024-11-06 10:25:03 -07:00
Ted Johansson 3be925e161
DEV: Untangle award badge admin CSS (#29614)
I was skimming through existing pages to get a feel for the admin UI guidelines. I noticed that this part was missing its margin. On some further investigation, it seems that a single CSS selector, .award-badge was being used both for the section and for the button in the header, so I decided to 1) separate the two and 2) add in the missing margin.
2024-11-06 16:10:39 +08:00
chapoi a097d86eea
UX: fix visibility of grant badge modal dropdowns (#29613) 2024-11-06 07:30:13 +01:00
David Taylor 1b5a7be3d4
PERF: Replace slow `:has` selectors with body classes (#29581) 2024-11-05 10:06:13 +11:00
Kris 1d637c5243
UX: remove extra margin from PM small actions (#29571) 2024-11-04 10:53:35 -05:00
Kris d853b5384b
UX: align PM icon when editing title, allow shrink-to-fit (#29570) 2024-11-04 10:31:11 -05:00
Keegan George 71f808dea9
DEV: Improve method of presenting link clicks (#29453)
Currently the tracking for clicked links are injected into the HTML in a span tag. This leads to the link counter value being highlighted when copying and pasting. Additionally, any means for using CSS to hide link counters result in a gap due to it occupying a specific width.

With this change, we make link counters appear in a data attribute on the link element and visually shown with CSS `::after` element.
2024-10-31 12:44:08 -07:00
Penar Musaraj c8e03f251f
DEV: Remove body docked class and its scroll event listener (#29515)
Docking is a leftover from older header code, it looks like it is no
longer used in the app. This helper was registering a scroll event
listener to check if the header should be docked or not. Initially, a
"docked" class was added to the body element. This class persisted
through the lifecycle of the app and the scroll event was doing no
useful work.

Some older themes may still use it in CSS, that will cause a regression,
from a quick look at existing code, the surface area should be small
(2-3 themes). It's worth removing the event listener for performance
reasons. We could possibly add the class "docked" statically to the body
element, but it's redundant. It's best to clean up the relevant CSS in
themes, where applicable.
2024-10-31 10:21:50 -04:00
Penar Musaraj 041ac3d8b7
DEV: Refactor header offset calculations (#29398) 2024-10-31 09:50:01 -04:00
Jan Cernik 81396467d0
UX: More improvements to login/signup forms (#29417) 2024-10-30 13:33:06 -03:00
Martin Brennan 8fb2e2a3ec
UX: Fix No button on review queue on mobile (#29485)
The "No" button for flagged posts was a different
size on mobile
2024-10-30 15:37:11 +10:00
Bianca Nenciu 9a80d71882
FEATURE: Add links to subcategories page on category page (#29474)
This applies only to the optimized category page style.
2024-10-29 20:47:46 +02:00
Osama Sayegh 2ffe413b0b
FEATURE: Enable the new /about page for everyone (#29390)
This commit removes the feature flag for the new /about page, enabling it for all sites, and removes the code for old the /about page.

Internal topic: t/140413.
2024-10-29 18:40:11 +03:00
chapoi 04aed79028
UX: lower copy link z-index (#29458) 2024-10-29 10:35:14 +01:00
Jordan Vidrine f902e0fdd7
UX: Look and feel changes (#29245)
This PR:

- Removes components from being displayed in the card
- Adds a DMenu to house previous footer actions
- Allows themes to be updated from this grid, with an animation and different border to show the update is happening
- Stops position of cards changing when default changes
- Fixes outline colour not changing when default changes
- Show a global notice on the page when previewing a theme
- Allows updating a theme from the grid, and showing an indicator of what theme needs to be updated
- Moves "Set as default" to the dropdown for the theme
- Show screenshot for theme if it is available
- Prevent page reloading when updating the theme
- Fixes theme install modal on grid page
- Temporarily remove sorting of default theme to the top
2024-10-29 12:25:17 +10:00
Kris ca693b53eb
UX: limit user-card focus ring to desktop (#29435) 2024-10-28 10:10:03 -04:00
David Taylor aa89acbda6
DEV: Upgrade Uppy to v4 (#29397)
Key changes include:

- `@uppy/aws-s3-multipart` is now part of `@uppy/aws-s3`, and controlled with a boolean

- Some minor changes/renames to Uppy APIs

- Uppy has removed batch signing from their S3 multipart implementation. This commit implements a batching system outside of Uppy to avoid needing one-signing-request-per-part

- Reduces concurrent part uploads to 6, because S3 uses HTTP/1.1 and browsers limit concurrent connections to 6-per-host.

- Upstream drop-target implementation has changed slightly, so we now need `pointer-events: none` on the hover element
2024-10-28 14:01:44 +00:00
chapoi 8ac1f6ad9a
UX: Visual adjustments to login/signup forms (#28680)
This adds several improvements to the signup/login forms. Some of them include:

- Added a minimal signup progress bar design for mobile.
- Made the signup/login modals full height on mobile.
- Improved the activation, account creation, and login-required pages on mobile.
- Removed the subheader and emoji from the welcome component.
- Removed most input instructions.
- Used consistent font size for text below the inputs.
- Displayed input instructions only when the field is focused.
- Improved the vertical alignment of input labels.
- Increased the spacing between inputs.
- Fixed label positioning for custom fields.
- Moved the "(optional)" text for the name input outside the instructions.
- Disabled buttons during login to prevent layout shifts.
- Reused the CTA component for modals as well.
- Matched the invite CTA styles with the signup form.

---------

Co-authored-by: Jan Cernik <jancernik12@gmail.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-10-25 09:34:59 -03:00