Commit Graph

47 Commits

Author SHA1 Message Date
Joffrey JAFFEUX a939609d32
FIX: fixes few regressions in select-kit (#17453)
- following c3fd91670e `paste` has been typoed into `pase`
- adds two tests for pasting in `multi-select` and `email-group-user-chooser`
- selectKitOptions would not be following the right overriding order
- `category-selector` was using `selectKitOptions` directly which shouldn't be the case as it's not using computed values
- apparently since a recent ember upgrade, paste event is not providing `originalEvent` anymore and `clipboardData` should be retrieved directly on the event
2022-07-12 21:38:17 +02:00
Joe 5109ea0cf1
UX: don't tether popper to the viewport if reference is out of the viewport (#17012)
followup to 

https://github.com/discourse/discourse/pull/16504

Internal

`/t/64811`

public

`/t/228953`
2022-06-06 22:20:29 +08:00
Joe e0c663c20d
UX: Improves select-kit body placement when vertical space is short (#16504)
1. When the select-kit body is rendered, it defaults to being displayed under the triggering select-kit header, unless...

    there isn't enough space between the bottom of the select-kit header and the bottom of the viewport 
    & 
    there's enough space on top of the select-kit header, and in that case, we render it on top.

2. We give it a bit of padding on top, so it never renders below the header on the Z-axis. 

14778ba52e/app/assets/javascripts/select-kit/addon/components/select-kit.js (L877-L884)

3. If there isn't enough space between the bottom of the viewport and the bottom of the select-kit header, and there isn't enough space between its top and the bottom of `d-header`, it renders at the bottom of the select-kit header.

In theory, number 3 above rarely ever happens. However, it can occur in the case of the user preferences page in combination with a large select-kit body (many categories).

The select-kit body then renders below the trigging select-kit header, but it's cut off. Users won't be able to see the entire select-kit body. 

Here's an example 

a719734d92.mp4

This PR adds a "prevent overflow" modifier to Popper. What it does is that it handles the case above.

If there's not enough space below the select-kit header or above it, render the select-kit body below the select-kit header BUT... anchor it to the bottom of the viewport. 

Here's what that looks like

32cd1639bb.mp4

After this fix, even very large select-kit bodies will always be on the screen. 

Please note that this PR has no impact on either number 1 or number 2 above, and those will continue to function as they currently do. 

The only downside here is that the select-kit body might cover the select-kit header if it needs to be anchored at the bottom of the viewport, and it's very large. However, between that and not being able to see all the options, I think it's a fair compromise. There's only so much space in the viewport. 

This PR ignores mobile because we have a different placement strategy. We use `position: absolute`... so, users can scroll the viewport if needed.
2022-04-19 21:13:54 +08:00
Jarek Radosz 14778ba52e
DEV: Fix select-kit deprecations (#15080) 2022-04-05 19:01:09 +02:00
Joffrey JAFFEUX 57b20393ac
FIX: flips popper when top position is chosen incorrectly (#16333)
More precisely, if popper can't position something at the bottom, it will automatically attempt to position it at the top. However we should ensure it doesn’t consider the space under the d-header as valid space, when header's height is taken into consideration if top space is not enough, we should force bottom, and flip it back.

This logic is not necessary on modals as the d-header is not present.
2022-03-30 20:58:22 -04:00
Joffrey JAFFEUX a144f49ec2
UX: scroll row to top of container in select-kit (#15230) 2021-12-08 12:22:18 +01:00
Joffrey JAFFEUX f9e2ab570b
FIX: allows more precise placement strategy on mobile (#15171)
* FIX: allows more precise placement strategy on mobile

- default to absolute on mobile, fixed on desktop
- allows to set a global `placementStrategy` or a specific to each view `mobilePlacementStrategy` `desktopPlacementStrategy`

This is mainly used to allow a proper composer-actions positioning in mobile.

Note this commit also fixes a mouseDown event which could propagate quote-button event and cause the composer to close full screen on mobile

* mobile only
2021-12-03 11:47:33 +11:00
Jarek Radosz 7ce6971539
DEV: Add drop-date to drop-dateless deprecations (#15133) 2021-11-30 17:41:04 +01:00
Joffrey JAFFEUX 3dc0b9e077
UX: closes multi-select on selection when maximum=1 (#15092) 2021-11-29 14:29:11 +01:00
Joffrey JAFFEUX 6e603799eb
FIX: treats ipad as mobileView for popper positioning (#15091)
* FIX: treats ipad as mobileView for popper positioning

* ensures it doesn’t break wizard
2021-11-29 17:40:01 +11:00
David Taylor 2153011cdb
PERF: Use more efficient text-direction check in select-kit init (#15015)
Calling `window.getComputedStyle` during initialization causes the browser to pause and 'Recalculate Style'. On my machine, this adds about 7ms to boot time. Instead, we can check for the `rtl` class on the html element, which is added by the server, and doesn't require computing styles.
2021-11-19 10:17:23 +00:00
Joffrey JAFFEUX 904d509cce
FIX: ensures minimum tags logic is correct and shared (#14723)
Also fixes a bug where select-kit was not updating noneItem in multi-selects.
2021-11-12 14:04:48 +01:00
Joffrey JAFFEUX d18e3a45b9
FIX: none row doesn’t have a value, use class to target it (#14659) 2021-10-20 13:07:58 +02:00
Joffrey JAFFEUX 00e8baffa2
FIX: attempts to enforce caret position in filter (#14589) 2021-10-13 08:19:34 +02:00
Joffrey JAFFEUX d3be77a0d1
DEV: toggle sk on click (#14243) 2021-09-03 18:29:16 +02:00
Joffrey JAFFEUX 36a81435cf
DEV: simplify logic when selecting an undefined value (#14225) 2021-09-03 16:40:20 +02:00
Joffrey JAFFEUX f66217c0b3
DEV: updates popperjs 2.0.6 -> 2.9.3 (#14163) 2021-08-26 16:37:04 +02:00
Joffrey JAFFEUX a230362f65
FIX: sk3 wizard regressions (#14120) 2021-08-23 19:57:42 +02:00
Joffrey JAFFEUX 691d1bde54
FIX: do not focus after search if dropdown is collapsed (#14118) 2021-08-23 19:33:50 +02:00
Joffrey JAFFEUX cb59681d86
DEV: select-kit third major update with focus on accessibility (#13303)
Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row
2021-08-23 10:44:19 +02:00
Penar Musaraj 35f977f8a5
UX: Prevent some composer buttons from receiving focus (#12719) 2021-04-16 11:10:02 -04:00
Osama Sayegh 0f807ba85b
UX: Allow select-kit to have an autofocus option (#12183)
On some modals the main/primary input field is a select-kit component (like `{{email-group-user-chooser}}` on the assign modal), so it makes sense to allow select-kit to steal focus on modals like these. This PR adds an `autofocus` option (default false) that allows select-kit to steal focus when it's rendered.
2021-02-23 13:20:32 +03:00
Joffrey JAFFEUX d0d54bbead
A11Y: deselect focused choice when using enter in multi-select (#12165) 2021-02-22 14:34:31 +01:00
Joffrey JAFFEUX 467b075ef7
A11Y: makes aria-owns an ID and not a data attribute (#12075) 2021-02-15 12:32:09 +01:00
Penar Musaraj 2dc48fd6c1
UX: Uniformize styles for focus states (#11933) 2021-02-03 11:45:54 -05:00
Joffrey JAFFEUX 12a4fefef6
FIX: ensures rects is present before using it (#11930)
I don't have a clear reproduction ATM, but I imagine that in fast tests element can get destroyed before we get to use it.
2021-02-02 14:43:13 +01:00
Osama Sayegh 98201ecc24
DEV: {{user-selector}} replacement (#11726)
This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are:

1. It's called `{{user-selector}}`, but in reality in can also select groups and emails.
2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](6c155dba77/app/assets/javascripts/discourse/app/components/user-selector.js (L179-L185)).
3. We now have select kit which does very similar things but a lot better.

This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. 

Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
Joffrey JAFFEUX ce01f9db46
DEV: adds support for lang attribute in select-kit (#11741) 2021-01-18 15:34:18 +01:00
Joffrey JAFFEUX 53f9a0883e
UX: allows to copy/paste a list of | separated values in sk (#11642)
* UX: allows to copy/paste a list of | separated values in sk

* fixes tests
2021-01-06 12:57:13 +01:00
Roman Rizzi 142e0ae062
Revert "Revert "DEV: Wrap `Ember.run.debounce`. (#11352)"" (#11509)
* Revert "Revert "DEV: Wrap `Ember.run.debounce`. (#11352)" (#11465)"

This reverts commit aa0d4ea764.

* Correctly debounce onScroll function
2020-12-18 10:18:52 -03:00
Roman Rizzi aa0d4ea764
Revert "DEV: Wrap `Ember.run.debounce`. (#11352)" (#11465)
This reverts commit 8b426431a4.
2020-12-10 16:48:25 -03:00
Roman Rizzi 8b426431a4
DEV: Wrap `Ember.run.debounce`. (#11352)
We want to wrap the `Ember.run.debounce` function and internally call `Ember.run` instead when running tests.

This commit changes discourseDebounce to work the same way as `Ember.run.debounce`.

Now that `discourseDebounce` works exactly like `Ember.run.debounce`, let's replace it and only use `DiscourseDebounce` from now on.

Move debounce to discourse-common to be able to reuse it in different bundles

Keep old debounce file for backwards-compatibility
2020-12-10 11:01:42 -03:00
Roman Rizzi bbe5d8d5cf
DEV: Sort imports alphabetically (#11382) 2020-12-01 15:31:26 -03:00
Roman Rizzi 1c2358ba16
DEV: Tidy up imports. (#11364)
Only allow one import definition per file and add a new eslint rule to enforce it.
2020-11-27 11:30:16 -03:00
Joffrey JAFFEUX 281bf0b345
FIX: optimizes sk body position in RTL mode (#10997) 2020-10-22 16:08:11 +02:00
Joffrey JAFFEUX a73fd4227f
FIX: disabled option for sk was not working correctly (#10900)
Name was incorrect and it was only removing cursor events and not changing style.
2020-10-13 11:31:07 +02:00
Joffrey JAFFEUX 530d9ab071
DEV: enforces eslint’s curly rule to the codebase (#10720)
eslint --fix is capable of fix it automatically for you, ensure prettier is run after eslint as eslint --fix could leave the code in an invalid prettier state.
2020-09-22 16:28:28 +02:00
Joffrey JAFFEUX 9238a9e427
FIX: adds shims for popper in wizard (#10658) 2020-09-14 12:33:14 -04:00
Robin Ward 24f19e8372 Revert "FIX: Was using a global `Popper` variable"
This reverts commit 05831c2b42.
2020-09-11 17:30:53 -04:00
Robin Ward 05831c2b42 FIX: Was using a global `Popper` variable 2020-09-11 15:02:12 -04:00
Joffrey JAFFEUX 52672b9eab
DEV: apply new coding standards (#10592) 2020-09-04 13:42:47 +02:00
Robin Ward aae97457d2
REFACTOR: Don't use `layoutName` in select-kit (#10556)
Instead import the templates as modules, the way Ember CLI wants us to.
2020-08-28 15:30:20 -04:00
Bianca Nenciu aff9bfd5bc
FIX: Fix select kit size (#10094) 2020-06-22 16:48:00 +03:00
Joffrey JAFFEUX 0854785175
FIX: allows to define label/title properties for display instead of name
Usage:

```
const content = [{foo: "FOO", bar: "BAR", value: 1, name: "foo-bar"}];

{{combo-box
  content=content
  value=value
  labelProperty="foo"
  titleProperty="bar"
}}
```
2020-05-28 08:30:31 +02:00
Michael Brown d9a02d1336
Revert "Revert "Merge branch 'master' of https://github.com/discourse/discourse""
This reverts commit 20780a1eee.

* SECURITY: re-adds accidentally reverted commit:
  03d26cd6: ensure embed_url contains valid http(s) uri
* when the merge commit e62a85cf was reverted, git chose the 2660c2e2 parent to land on
  instead of the 03d26cd6 parent (which contains security fixes)
2020-05-23 00:56:13 -04:00
Jeff Atwood 20780a1eee Revert "Merge branch 'master' of https://github.com/discourse/discourse"
This reverts commit e62a85cf6f, reversing
changes made to 2660c2e21d.
2020-05-22 20:25:56 -07:00
Robin Ward 09ca75d17e FIX: select-kit was in the wrong place
`app/` means we want to merge it into our application there. `addon`
means give it its own module namespace, which is what we wanted.
2020-05-20 11:51:49 -04:00