Commit Graph

55 Commits

Author SHA1 Message Date
Joffrey JAFFEUX
96b88f34a2
FIX: correctly destroy menu/tooltip when removed from dom
This fix will ensure we correctly play the close/destroy sequence in this situation.
2024-11-26 15:55:35 +01:00
Martin Brennan
9c17588f6a
FIX: Admin dashboard tooltips not working on mobile ()
This commit fixes the (?) tooltips for reports on
the admin dashboard on mobile.

The fix is that float-kit instances can now have different triggers
and un-triggers for mobile and desktop, and float-kit is now aware
of the site being in mobile view.

Example usage:

```
@triggers={{hash mobile=(array "click")}}
```

So now, if you press on the tooltip trigger on mobile it shows
correctly, and on desktop both hover and click can be used.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-11-01 12:25:12 +10:00
chapoi
f9d86686ae
UX: DMenu modal add grip and min-height ()
* UX: add min-height to DMenu modal

* UX: add grip handle
2024-10-22 11:22:20 +11:00
Kris
a914d3230b
DEV: remap all core icons for fontawesome 6 upgrade ()
Followup to 7d8974d02f

Co-authored-by: David Taylor <david@taylorhq.com>
2024-09-13 16:50:52 +01:00
chapoi
208007d9a0
UX: centralise DMenu mobile styling + fixes () 2024-08-23 17:56:35 +02:00
Jarek Radosz
f14cf4f8a9
DEV: Fix random typos ()
July 2024 edition
2024-07-26 23:13:12 +02:00
Jarek Radosz
038e5deb2a
DEV: Clean up imports ()
* `@ember/owner` instead of `@ember/application`
* `discourse-i18n` instead of `I18n`
* `{ service } from "@ember/service"` instead of `inject as service`
2024-07-25 15:09:06 +02:00
chapoi
2ca06ba236
DEV: form-kit
This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms.

1. **Form Component**:
   - The main component that encapsulates form logic and structure.
   - Yields various utilities like `Field`, `Submit`, `Alert`, etc.

   **Example Usage**:
   ```gjs
   import Form from "discourse/form";

   <template>
     <Form as |form|>
       <form.Field
         @name="username"
         @title="Username"
         @validation="required"
         as |field|
       >
         <field.Input />
       </form.Field>

       <form.Field @name="age" @title="Age" as |field|>
         <field.Input @type="number" />
       </form.Field>

       <form.Submit />
     </Form>
   </template>
   ```

2. **Validation**:
   - Built-in validation rules such as `required`, `number`, `length`, and `url`.
   - Custom validation callbacks for more complex validation logic.

   **Example Usage**:
   ```javascript
   validateUsername(name, value, data, { addError }) {
     if (data.bar / 2 === value) {
       addError(name, "That's not how maths work.");
     }
   }
   ```

   ```hbs
   <form.Field @name="username" @validate={{this.validateUsername}} />
   ```

3. **Customization**:
   - Plugin outlets for extending form functionality.
   - Styling capabilities through propagated attributes.
   - Custom controls with properties provided by `form` and `field`.

   **Example Usage**:
   ```hbs
   <Form class="my-form" as |form|>
     <form.Field class="my-field" as |field|>
       <MyCustomControl id={{field.id}} @onChange={{field.set}} />
     </form.Field>
   </Form>
   ```

4. **Helpers for Testing**:
   - Test assertions for form and field validation.

   **Example usage**:
   ```javascript
   assert.form().hasErrors("the form shows errors");
   assert.form().field("foo").hasValue("bar", "user has set the value");
   ```

   - Helper for interacting with he form

   **Example usage**:
   ```javascript
   await formKit().field("foo").fillIn("bar");
   ```

5. **Page Object for System Specs**:
   - Page objects for interacting with forms in system specs.
   - Methods for submitting forms, checking alerts, and interacting with fields.

   **Example Usage**:
   ```ruby
   form = PageObjects::Components::FormKit.new(".my-form")
   form.submit
   expect(form).to have_an_alert("message")
   ```

   **Field Interactions**:
   ```ruby
   field = form.field("foo")
   expect(field).to have_value("bar")
   field.fill_in("bar")
   ```


6. **Collections handling**:
   - A specific component to handle array of objects

   **Example Usage**:
   ```gjs
    <Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|>
      <form.Collection @name="foo" as |collection|>
        <collection.Field @name="bar" @title="Bar" as |field|>
          <field.Input />
        </collection.Field>
      </form.Collection>
    </Form>
   ```
2024-07-17 11:59:35 +02:00
Jarek Radosz
a0aa8b0666
FIX: Properly close user-card after page transition ()
This reverts commit b0e4b906ad. (and re-lands 1ecfc397d3)
2024-06-23 22:34:29 +02:00
Jarek Radosz
b289351a3f
DEV: Minor refactor of tooltip and menu services ()
* use `TrackedSet` instead of `@tracked []`
* correct return type annotations
* move code to outside Promise blocks where possible
* fix an outdated comment
2024-06-13 16:43:28 +02:00
Jarek Radosz
5361c3704d
FIX: Don't modify FloatKitInstances arrays unless needed () 2024-06-13 12:44:38 +02:00
Joffrey JAFFEUX
b0e4b906ad
Revert "FIX: Properly close user-card after page transition ()" ()
This reverts commit 1ecfc397d3.
2024-06-12 21:11:44 +02:00
Jarek Radosz
1ecfc397d3
FIX: Properly close user-card after page transition () 2024-06-11 20:00:20 +02:00
Jarek Radosz
c972a31819
DEV: Fix typos and formatting () 2024-06-04 15:16:24 +02:00
Joffrey JAFFEUX
f840f37a54
FIX: do not auto close on empty identifiers ()
Prior to this fix all menus with empty identifier or groupIdentifier would be considered to be part of the same identifiers/groupIdentifiers and would auto close any existing d-menu with no identifier/groupIdentifier when opened.
2024-05-13 14:43:26 +02:00
Joffrey JAFFEUX
47cabdc6d2
DEV: various improvements to d-menu ()
- adds a `@groupIdentifier` property which will ensure that two menus of the same group are not expanded at the same time
- adds a `@class` property which will be applied to the trigger and the content
- adds a `@triggerClass` property which will be applied to the trigger
- adds a `@contentClass` property which will be applied to the trigger
- removes `extraClassName`
2024-05-10 13:43:37 +02:00
Joffrey JAFFEUX
46371fe9e4
DEV: allows to get a menu by its identifier ()
Usage:

```javascript
this.menu.getByIdentifier("foo");
```
2024-05-10 12:00:58 +02:00
Jarek Radosz
20e049bcbc
DEV: Minor refactor of d-menu/d-tooltip ()
* `menuInstance` cached getter -> prop
* `next()` and a `trigger` check -> gone
* `allowedProperties` action -> getter
* `keys` -> `entries`
* update the `service` import
* flatten the object spread structures
2024-05-09 10:54:37 +02:00
Joffrey JAFFEUX
cf8b81771f
DEV: implements <DropdownMenu /> ()
DropdownMenu component is meant as a way to describe the content of menus.

Syntax:

```
<DropdownMenu as |dm|>
  <dm.item class="test">
    First
  </dm.item>
  <dm.divider class="foo" />
  <dm.item class="bar">
    Second
  </dm.item>
</DropdownMenu>
```
2024-05-08 09:08:42 +02:00
Joffrey JAFFEUX
fe16633a0c
DEV: allows for multiple menus/tooltips ()
menus and tooltips are now appended to their own portals. The service are the only responsible for managing the instances, prior to this commit, services could manage one instance, but the DMenu and DTooltip components could also take over which could cause unexpected states.

This change also allows nested menus/tooltips.

Other notable changes:

- few months ago core copied the CloseOnClickOutside modifier of float-kit without removing the float-kit one, this commit now only use the core one.
- the close function is now trully async
- the close function accepts an instance or an identifier as parameter
2024-05-07 23:48:44 +02:00
Joffrey JAFFEUX
92a59e2480
DEV: uses swipe-events lib for swipe modifier ()
This commit also:

uses the swipe modifier in the glimmer-site-header component
changes closing condition for d-modal and toast from distance to velocity
cancels toast auto close on touch
2024-05-07 17:43:37 +02:00
Jarek Radosz
c97d58f377
DEV: Add placement: center option to float-kit ()
Implements this custom placement strategy: https://floating-ui.com/docs/offset#creating-custom-placements
2024-05-01 12:12:00 +02:00
Jarek Radosz
b39736a167
DEV: Add autofocus option to d-menu ()
(to be used by the glimmer replacement of topic-entrance component)
2024-05-01 12:11:11 +02:00
Jan Cernik
8dd883d4e5
DEV: Refactor topic admin menu to use <DMenu> ()
* DEV: Refactor topic admin menu to use `<DMenu>`

This PR also introduces a new plugin API to add buttons to the topic admin menu

```javascript
api.addTopicAdminMenuButton((topic) => {
  return {
    action: () => {
      alert('Sunrise!');
    },
    icon: 'sun',
    className: 'sunrise-button',
    label: 'actions.rise',
  };
});
```

The plugins that needed to be updated are:

- [discourse-zoom](https://github.com/discourse/discourse-zoom/pull/73)
- [discourse-salesforce](https://github.com/discourse/discourse-salesforce/pull/74)
- [discourse-topic-noindex](https://github.com/discourse/discourse-topic-noindex/pull/11)
2024-04-29 12:44:38 -03:00
Joffrey JAFFEUX
be96295c25
DEV: supports inline for d-menu ()
`<DMenu @inline={{true}} ...>...</DMenu>` will render the body relative to the trigger instead of rendering it in a portal.
2024-04-24 18:29:26 +02:00
David Taylor
e9e3456f18 DEV: Rename modifier import to avoid overwriting template keyword 2024-04-19 10:06:08 +01:00
David Battersby
06500fa626
FEATURE: add swipe up to close toast notification ()
Toasts can now be dismissed by doing a swipe up on mobile.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-04-19 09:49:50 +02:00
David Battersby
2706f7ed74
DEV: set toast progress bar to false by default ()
This change disables the toast notification progress bar by default. It can be enabled for a specific toast by setting showProgressBar: true.
2024-04-12 14:27:10 +08:00
Jarek Radosz
f5c9e75438
UX: Fix alignment issues around user status ()
Minor changes but they 1. correct the html structure (no divs in spans) 2. unify the margins
2024-04-09 11:10:12 +02:00
Joffrey JAFFEUX
bd7823cc70
FIX: prevents mobile DMenu modal to lock scroll ()
The bug was due to the fact that the `<DModal />` is displayed inside a if block, when the condition was false to close the menu, the modal was just hidden without calling callbacks. The fix ensures we are correctly calling `modal.close()` before in this case.
2024-04-08 09:47:50 +02:00
Joffrey JAFFEUX
17c92b4b2a
UX: shows the bookmark menu improvements
This commit adds a new option `@modalForMobile` for `<DMenu />` which allows to display a `<DModal />` when expanding a menu on mobile.

This commit also adds a `@views` options to toasts which is an array accepting `['mobile',  'desktop']` and will control if the toast is show on desktop and/or mobile.

Finally this commit allows to hide the progressBar even if the toast is set to `@autoClose=true`. This is controlled through the `@showProgressBar` option.
2024-04-08 08:18:50 +02:00
David Battersby
f75d119cd3
FEATURE: add progress bar to toast notifications ()
This change adds a progress bar to toast notifications when autoClose is enabled (true by default).

The progress bar allows users to visually see how long is left before the notification disappears.

When hovered on desktop, the progress and autoclose timer will be paused, it will resume again once the mouse is moved away from the toast notification.
2024-04-05 18:29:11 +08:00
Martin Brennan
67a8080e33
FEATURE: Redesigned bookmark modal and menu ()
Adds the new quick menu for bookmarking. When you bookmark
a post (chat message behaviour will come later) we show this new quick
menu and bookmark the item straight away.

You can then choose a reminder quick option, or choose Custom... to open
the old modal. If you click on an existing bookmark, we show the same quick menu
but with Edit and Delete options.

A later PR will introduce a new bookmark modal, but for now we
are using the old modal for Edit and Custom... options.
2024-04-05 09:25:30 +10:00
Jarek Radosz
5d90332cfc
DEV: Use the "new" service import () 2024-03-06 18:05:11 +01:00
David Taylor
ccf0b61fe3
DEV: Convert truth-helpers to a v2 addon and simplify imports ()
No need for a build step here, since the helpers are all simple js.
2024-03-05 15:24:47 +00:00
chapoi
180e6c6188
UX: chat message creator scss cleanup + design tweak to username display ()
* UX: chat message creator scss cleanup + design tweak to username display

* add user status with live updates to modal

* show user status description in modal

* add tests for user status

* UX: add user-status styling to chat message creator


---------

Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-03-05 12:49:29 +01:00
Kris
8c22831672
UX: update appropriate btn-flat instances to btn-transparent ()
With the adjustments of `btn-transparent` in https://github.com/discourse/discourse/pull/24666, there are more buttons that could use this class instead of `btn-flat`. This mostly relates to `x` close buttons, but also includes composer and chat toggles.

The primary difference between these styles is that `btn-transparent` never has a background, where `btn-flat` may have a hover or focus background.
2024-02-29 11:47:07 +01:00
Kris
c4381e0265
FIX: don't apply extraClassName to all popup menus () 2023-12-04 11:40:57 -06:00
Kris
56795f5c07
UX: improve btn-transparent styling () 2023-12-02 14:21:22 +11:00
David Taylor
0a58564ddd
DEV: Make DTooltipInstance destroy synchronous ()
Having async cleanup on a modifier is problematic because it means it might persist beyond the end of a test, leading to flaky 'Test is not isolated' errors.
2023-11-20 13:27:44 +00:00
Joffrey JAFFEUX
0e37ceeeb9
FIX: improves reliability of post-text-selection bar ()
The main change made is to use `pointerdown` and `touchstart` for detecting click outside in `FloatKit`, the problem of using `click` is that it will trigger on `mouseup` which is not working well with `FloatKit` shown using `mousedown` (when we change selection with the `mousedown` for example) as the release will be interpreted as a click outside and close the menu. To solve this issue the previous code in `post-text-selection` was going through various hacks for detecting state of mouse which are not always very reliable.

The second fix is to exit earlier when selection didn't change.

This has been tested on chrome/firefox and safari (mobile) and seems to work reliably.

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-10-25 14:34:53 +02:00
Joffrey JAFFEUX
043b4a4187
FIX: replaces data-tooltip usage by <DTooltip /> ()
As much as possible I would like us to avoid having to go the with a global event listener on click/mouseover. For now I have removed all cases of `data-tooltip`, if we clearly identify a use case of a global event listener we might reconsider this.

The following changes are also included:
- by default tooltips won't attempt to focus first focusable element anymore
- tooltip will now use `cursor: pointer` by default
- a new service has been introduced: `InternalTooltip` which is responsible to track the current instance displayed by a `<DTooltip />`. Portal elements when replaced are not properly cleaned and I couldn't figure out a way to have a proper hook to ensure the previous `DTooltipInstance` is properly set as not expanded; this problem was very visible when using a tooltip as interactive and hovering another tooltip, which would replace the interactive tooltip as not closed.
2023-10-23 21:09:02 +02:00
Joffrey JAFFEUX
552cf56afe
DEV: toasts improvements ()
- more subtle animation when showing a toast
- resumes auto close when removing the mouse from the toast
- correctly follows reduced motion
- uses output with role status as element: https://web.dev/articles/building/a-toast-component
- shows toasts inside a section element
- prevents toast to all have the same width
- fixes a bug on mobile where we would limit the width and the close button wouldn't show correctly aligned

I would prefer to have tests for this, but the conjunction of css/animations and our helper changing `discourseLater` to 0 in tests is making it quite challenging for a rather low value. We have system specs using  toasts ensuring they show when they should.
2023-10-23 15:23:10 +02:00
Jarek Radosz
c84fe69e10
DEV: Use @discourse/lint-configs () 2023-10-23 12:08:35 +02:00
Mark VanLandingham
cfbe16f9cc
DEV: Add option to float-kit toast to force auto-close () 2023-10-19 10:14:49 -05:00
David Taylor
48193767bf DEV: Sort imports
Automatically generated by `eslint --fix` to satisfy the updated configuration
2023-10-10 21:46:54 +01:00
David Taylor
ee0fef489f DEV: Move gjs <template> to bottom of class definitions
To satisfy updated eslint configuration
2023-10-10 21:46:54 +01:00
Joffrey JAFFEUX
42801c950f
UI: redesigned settings/members ()
This PR is a first step towards private groups. It redesigns settings/members area of a channel and also drops the "about" page which is now mixed into settings.

This commit is also:
- introducing chat-form, a small DSL to create forms, ideally I would want something in core for this
- introducing a DToggleSwitch page object component to simplify testing toggles
- migrating various components to gjs
2023-10-09 14:11:16 +02:00
Joffrey JAFFEUX
35d2426b42
FIX: ensures close arg from d-menu/:content works () 2023-10-04 19:58:17 +02:00
David Taylor
8958b4f76a
DEV: Rename custom getOwner to getOwnerWithFallback ()
Our custom implementation of `getOwner` includes a fallback which returns an owner, even if the passed object does not have one set. This is confusing and creates a false sense of security. Generally if the fallback is used, it means there is a problem with the patterns being used.

This commit renames our custom implementation to `getOwnerWithFallback`, while maintaining the old `getOwner` export with a deprecation notice. Core code is updated to use the official `@ember/application` implementation, or the new `getOwnerWithFallback` function.

This commit updates all core uses of `{ getOwner } from discourse-common/lib/get-owner` to use `getOwnerWithFallback`. Future commits will work through and convert many of these to use the official `@ember/application` implementation
2023-09-26 14:30:52 +01:00