Commit Graph

230 Commits

Author SHA1 Message Date
Jarek Radosz 4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Jarek Radosz ea326906e3
DEV: Use css var font sizes (#18518)
For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
Penar Musaraj 4e1b9a225e
DEV: Reduce width calculations for SK dropdowns (#18263)
Previously we were calculating both the minimum and maximum widths for
SK dropdowns using this Popper modifier. The max. width calculation was
causing issues with dropdowns in Firefox and was also sluggish when
rendering.

This switches to using CSS calculations for max. widths. It adds a 600px
global maximum and targeted maximums for the category composer dropdown
and the bookmark list dropdowns.
2022-09-20 22:59:47 -04:00
Jarek Radosz 87f8bafa7e
DEV: Remove obsolete CSS prefixes (#18262) 2022-09-15 16:54:08 +02:00
Keegan George a046f0306a
UX: Improve `max-height` value on toolbar popup menu (#18030)
* UX: Improve `max-height` value on toolbar popup menu

* UX: Popup menu based on new editor height property

* DEV: Update heights on resize

* DEV: Remove `--d-editor-height` property

* UX: Calculate max height based on composer type

* DEV: Remove event listener `willDestroyElement()` hook

* FIX: Remove unnecessary check and calculation

* DEV: Remove explicitly calling `updateHeightOnViewportResize()`

* UX: Update max-height

* UX: Different max-height values for reply/create

* DEV: Add comments for clarity

* DEV: Remove `updateHeightOnViewportResize()` event listener
2022-08-29 12:59:35 -07:00
Joffrey JAFFEUX a780b42b03
FIX: prevents iOS software keyboard to hide sk body (#18102) 2022-08-26 14:52:04 +02:00
Keegan George 602efedd81
UX: Make popup menu options scroll on limited screen height (#17973) 2022-08-17 13:42:25 -07:00
Meghna 5ac4e82540
UX: add ellipsis for long category names in category chooser dropdown (#17758) 2022-08-02 21:57:47 +05:30
Chapoi 63562e8b14
UX: switch highlight/select colours in select-kit (#17356) 2022-07-06 16:49:36 +02:00
Chapoi 408ce1312b
UX: remove hardcoded colour value (#17323) 2022-07-05 10:47:29 +08:00
Alan Guo Xiang Tan ef7a518159
UX: Retain category badge style on categories select kit. (#17332)
Category badge changes based on the `category style` site setting so we
do not want to forcing all category names to the same color.

Follow-up to 3266350e80
2022-07-05 10:05:44 +08:00
Alan Guo Xiang Tan 3266350e80
FEATURE: Decouple category/tag presence in sidebar from notifi level (#17273) 2022-06-30 14:54:20 +08:00
Jarek Radosz 36c2284dea
DEV: Fix typos "formated" -> "formatted" (#17156)
(nothing in all-the* relies on these)
2022-06-20 20:02:05 +02:00
Joe 98671445a7
UX: hide select-kits when the parent element is outside the viewport
If the select-kit header is not in the viewport (scrolled out of view), popper adds a data-popper-reference-hidden attribute.

This PR adds the recommended styles to "hide" the select-kit body when that happens. See

https://popper.js.org/docs/v2/modifiers/hide/
2022-06-07 16:57:10 +08:00
Kris 6b4f4e5387
UX: minor email group chooser alignment fix (#16487) 2022-04-18 09:39:27 -04:00
Dan Ungureanu efb584e32f
FEATURE: Use new topic-chooser for invite modal (#15884)
The old choose-topic component did not have the same style as the rest
of the create invite modal and was not very suitable to use in the modal
because it introduced the search results in modal's body.

The new topic-chooser is built using select-kit and provides a more
polished user experience.
2022-02-14 13:43:52 +02:00
Penar Musaraj 232f840b60
UX: Fix layout issues with long category names (#15604) 2022-01-17 16:05:27 -05:00
Jarek Radosz 0b34d5ac6c
UX: Maximize the preview space in composer (#15188)
A follow-up to #15117 and #15141. Applies the previous changes to PM-specific fields, makes the preview area take the all the available height of the composer, and unifies more spacing between composer elements.
2021-12-24 12:38:33 +01:00
Penar Musaraj bf18145e70
UX: Fix flair dropdown styling in user account (#15201) 2021-12-06 11:28:10 -05:00
Jarek Radosz ac79c5efc6
UX: Tweak composer styling (#15117)
* Even margins
* Slightly more muted and unified borders, separators, and icons
* Editor and preview area have same height
2021-11-30 17:41:22 +01:00
Penar Musaraj 116b93595a
UX: Fix bar-style category dropdown (#14785) 2021-11-01 11:17:41 -04:00
Penar Musaraj 724c836ffa
UX: Use consistent category badge font size in dropdowns (#14502) 2021-10-04 17:05:31 -04:00
Penar Musaraj b0b87efb83
UX: Show scrollbar only when needed in dropdowns (#14461)
Avoids showing a disabled scrollbar when not necessary.
2021-09-28 10:36:16 -04:00
Penar Musaraj e316467169
UX: Improve composer button bar on mobile (#14373) 2021-09-17 17:26:48 -04:00
Joffrey JAFFEUX e263b84196
FIX: prevents extreme cases to overflow in selected content (#14339)
It would for example cause an issue for a lot of selected items with long names.
2021-09-14 10:49:43 -04:00
Penar Musaraj 299d0ca445
UX: Minor layout tweaks to dropdowns (#14299)
- fixes mini-tag-chooser validation message
- fixes ellipsis overflow in mini-tag-chooser
- removes redundant `border-radius: 0` styles
- simplifies `user-notifications-dropdown` styling and adds example to styleguide
2021-09-10 09:00:41 -04:00
Penar Musaraj 24e71acf3f
UX: Normalize sizing for inputs, buttons, dropdowns (#14226)
See PR for details
2021-09-09 11:01:56 -04:00
Kris cba8b39607
UX: limit select-kit tag chooser width (#14246) 2021-09-03 17:27:55 -04:00
Kris 94085d0996
UX: Select-kit update alignment fixes (#14199) 2021-08-31 17:44:11 +02:00
Joffrey JAFFEUX 480e512e37
DEV: reapply height hack for iOS (#14176) 2021-08-27 12:02:05 +02:00
Penar Musaraj 8fa4849abc
FIX: minor SK3 styling issues in Safari (#14121) 2021-08-23 15:42:11 -04:00
Joffrey JAFFEUX a230362f65
FIX: sk3 wizard regressions (#14120) 2021-08-23 19:57:42 +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
Jordan Vidrine 2c3b4ff135
UX: UX Fixes (#13918)
* UX: Adjust name alignment on email group chooser

* UX: Remove dotted line when using j/k navigation on topic
2021-08-02 17:36:48 -05:00
awesomerobot 343ea81ac3 UX: Remove theme-specific css, fix space 2021-07-28 09:34:33 +08:00
Bianca Nenciu c39ab6c0ae
FIX: Do not wrap flair title in chooser (#13667) 2021-07-08 15:51:47 +03:00
Bianca Nenciu 87c1e98571
FEATURE: Let users select flair (#13587)
User flair was given by user's primary group. This PR separates the
two, adds a new field to the user model for flair group ID and users
can select their flair from user preferences now.
2021-07-08 10:46:21 +03:00
Penar Musaraj 36162cf396
FIX: Adding multiple auto tags in watched words admin UI (#13421) 2021-06-17 13:42:16 -04:00
Kris cd9941e0ca
UX: more consistent setting/edit buttons (#13276) 2021-06-03 18:33:36 -04:00
Penar Musaraj e832088edf
UX: Fix styling for long label in multi-select choices (#12877) 2021-04-28 15:12:01 -04:00
Joffrey JAFFEUX aa9a8d1041
UI: ensures toolbar gear button has identic color and height (#12872) 2021-04-28 16:22:30 +02:00
Joffrey JAFFEUX 081ada090c
UX: shows a hint when there are more tags than displayed (#12649) 2021-04-08 15:51:31 +02: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 323a5f22e7
A11Y: makes select-kit header a listbox (#12078)
Note that for now pressing enter doesn’t make anything, this is awaiting another change.
2021-02-15 18:22:10 +01:00
Osama Sayegh 293fd1f743
DEV: Deprecate {{user-selector}} and replace it with {{email-group-user-chooser}} (#12042)
`{{user-selector}}` is now deprecated and it will be removed from core in Discourse 2.8. All instances of `{{user-selector}}` has been replaced with `{{email-group-user-chooser}}`.
2021-02-12 13:51:36 +03:00
Kris fcdf7ef019
UX: Remove 2px border from some select-kit buttons (#12016) 2021-02-09 16:35:10 +11:00
Kris 3ed6747bf2
UX: Show caret icon on user notification dropdown (#11991) 2021-02-05 10:30:36 -05:00
Penar Musaraj 2dc48fd6c1
UX: Uniformize styles for focus states (#11933) 2021-02-03 11:45:54 -05: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
Penar Musaraj 670b438ca5
UX: Use uniform style for tag counts (#11743) 2021-01-18 15:11:23 -05:00