Commit Graph

711 Commits

Author SHA1 Message Date
Ty Correll
bffd61746b
UX: update styling for related/suggested (#23242)
This PR changes the icon color to always be the same color for Related/Suggested buttons, even when not selected or active.
2023-08-24 16:22:44 -05:00
Ty Correll
0944666232
UX: update styling for related/suggested (#23231)
* UX: update styling for related/suggested

This PR addresses state issues for icons of the Related & Suggested buttons, as well as well as fixes alignment issues for folding phones / tablets, wider mobile devices by moving styling to the desktop scss file; also replaces border with box-shadow.
2023-08-24 15:23:35 -05:00
Renato Atilio
353306219b
UX: fix form template error label position (#23208) 2023-08-24 11:09:47 -03:00
Ty Correll
af34e910f2
UX: update styling for related/suggested (#23217)
* UX: update styling for related/suggested

This PR fixes styling for previous related/suggested changes' positioning being off for topics and updates the active icon color by removing a line that changed its active color.
2023-08-24 01:53:53 -05:00
Ty Correll
7c12f7d50a
UX: update styling for related/suggested (#23213)
This PR updates the styling for the related & suggested topics to distract less from the Reply buttons and clearly indicate its usage as tabs, also referred to as pills.
2023-08-23 19:28:14 -05:00
Roman Rizzi
7d0e2b9e7b
FIX: Keep track of suggestion updates during scrolling and navigation. (#23190)
This PR changes how we track which lists are available for a topic and how we decide which is the active one. The new approach centralizes everything in the service, and exposes functions for adding/removing a list, which each calls via `did-insert/will-destroy` modifiers.

It makes it much easier to track and update state when navigated to another topic or PM, ensuring things get updated correctly.
2023-08-22 14:10:15 -03:00
Roman Rizzi
af30f9945a
UX: Use pill design on both mobile and desktop (#23124) 2023-08-17 14:37:11 -03:00
Jordan Vidrine
d546f34f2f
FIX: Adjust badge overflow ellipsis (#23086) 2023-08-14 11:10:02 -05:00
Martin Brennan
fb36af7799
DEV: Move calendar date + time picker from local dates into core component (#23023)
This commit moves the calendar date and time picker shown in
the local dates modal into a core component that can be reused
in other places. Also add system specs to make sure there isn't
any breakages with this feature, and a section to the styleguide.
2023-08-11 13:05:44 +10:00
chapoi
ca1671023a
UX: align tags to top in modal (#23055)
* UX: align tags to top in modal

* UX: fix alignment in grid with multiple rows
2023-08-10 10:26:25 +02:00
Penar Musaraj
9e9aa8f653
UX: Differentiate focus state from hover state (#22985)
When a button gets a focused state via keyboard, it is highlighted a bit more than the hover or selected state.
2023-08-07 16:46:10 -04:00
Keegan George
1ded0a1429
UX: Add disabled styling to <DToggleSwitch/> (#22988) 2023-08-04 15:20:56 -07:00
Kris
6bf0c0a52e
UX: fix long image titles in experimental lightbox (#22883) 2023-07-31 18:36:33 -04:00
Kris
8c75fa5dfd
UX: increase experimental lightbox z-index (#22865) 2023-07-28 18:06:48 -04:00
David Battersby
d11f02c03a
FIX: make document overflow hidden on both axis when lightbox is open (#22775)
Fixes issue with scrolling background when lightbox is opened on mobile.

Since we rely on swiping for navigating lightbox galleries on mobile, we want to disable document scrolling.
2023-07-25 15:27:32 +08:00
Alan Guo Xiang Tan
fe1034e89c
FIX: Loading more tags in edit nav menu tags modal not working (#22770)
Why this change?

When setting up the `IntersectionObserver`, we did not account for the
top margin and padding causing no intersection event to fire when the
last tag is load into view. This commits fixes the problem by setting a
bottom margin using the `rootMargin` option when setting up the
`IntersectionObserver`.

This commit also improves the test coverage surrounding the loading of
more tags.
2023-07-25 13:44:25 +08:00
Kris
ba91309cb8
UX: fix bookmark modal footer layout (#22766) 2023-07-25 06:42:29 +08:00
chapoi
346ccfd7f5
UX: firefox fix for shorthand modal width (#22638) 2023-07-17 13:16:45 +02:00
Martin Brennan
6459922993
DEV: Move Bookmark modal/component to use d-modal (#22532)
c.f. https://meta.discourse.org/t/converting-modals-from-legacy-controllers-to-new-dmodal-component-api/268057

This also converts the Bookmark component to a Glimmer
component.
2023-07-17 10:14:17 +10:00
Joe
82c03127df
FEATURE: New Discourse Lightbox using Glimmer (#19798)
Introduces new lightbox as a step to migrate away from Magnific Popup.

Please see https://meta.discourse.org/t/migrating-away-from-magnific-popup/251505 for more details

Co-authored-by: Nat <natalie.tay@discourse.org>
Co-authored-by: David Battersby <info@davidbattersby.com>
2023-07-13 15:06:17 +08:00
chapoi
83352e93ff
UX: double scroll fix for keyboard shortcuts modal (#22535) 2023-07-11 16:30:53 +02:00
Kris
98afea4748
UX: adjust sidebar modal styles, consolidate css (#22444)
This gets all the related CSS into the common file, and removes desktop and mobile variants.

This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
Kris
4cec091f1a
REFACTOR: improve poll info layout (#22353) 2023-07-05 12:20:18 -04:00
Alan Guo Xiang Tan
82d6420e31
PERF: Paginate loading of tags in edit nav menu tags modal (#22380)
What is the problem?

Before this change, we were relying on the  `/tags` endpoint which 
returned all the tags that are visible to a give user on the site leading to potential performance problems. 
The attribute keys of the response also changes based on the `tags_listed_by_group` site setting. 

What is the fix?

This commit fixes the problems listed above by creating a dedicate `#list` action in the
`TagsController` to handle the listing of the tags in the edit
navigation menu tags modal. This is because the `TagsController#index`
action was created specifically for the `/tags` route and the response
body does not really map well to what we need. The `TagsController#list`
action added here is also much safer since the response is paginated and
we avoid loading a whole bunch of tags upfront.
2023-07-04 11:36:39 +08:00
Alan Guo Xiang Tan
fe294ab1a7
DEV: Switch edit nav menu tags/categories modal to component (#22401)
Why this change?

A new component based API for modals was introduced in
b3a23bd9d6. This commit moves the edit
navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
Keegan George
c3fa85c450
UX: Make template fields fill the container width (#22334) 2023-06-28 13:29:36 -07:00
Keegan George
b6f03fcecd
DEV: Add support for uploads to form templates (#22232) 2023-06-28 12:49:05 -07:00
Alan Guo Xiang Tan
75b402f07c
UX: Fix position of filters in edit categories/tags nav menu modals (#22292)
Why this change?

We want the position of the filters to remain fixed when scrolling
through the list of categories or tags. Otherwise, the user has to
scroll all the way back to othe top in order to access the filters when
the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
Alan Guo Xiang Tan
303fcf303c
FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251)
What does this change do?

This change adds a dropdown filter that allows a user to filter by
selected or unselected categories/tags in the edit navigation menu
modal.

For the categories modal, parent categories that do not match the
dropdown filter will be displayed as disabled since those parent
categories need to be displayed to maintain the hieracy of the child
child categories.
2023-06-23 10:29:00 +08:00
Alan Guo Xiang Tan
6e3f3dff86
DEV: Refactor edit tags/categories modal to reduce duplication (#22240)
Why this change?

There was alot of duplication between the edit navigation menu tags/categories modal which
was making it hard to introduce new changes as the work had to be
duplicated into multiple places.

This commit mainly extracts the duplicated code into common components
such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
Jarek Radosz
876ff17cc2
DEV: Update eslint/prettier (#22226) 2023-06-21 20:59:03 +02:00
Alan Guo Xiang Tan
547b520261
FEATURE: Add deslect all and reset to defaults btn edit nav menu modal (#22218)
What does this change do?

This change adds the deselect all and reset to defaults buttons to the
edit navigation menu tags modal. The deselect all button when
clicked deselects all the selected tags in the modal. If the user
saves with no tags selected, the user's tags section in the
navigation menu will be set to the site's top tags.

The reset to defaults button is only shown when the
`default_navigation_menu_tags` site setting has been configured.
When clicked, the user's tags section in the navigation menu is
automatically set to the tags defined by the
`default_navigation_menu_tags` site setting.
2023-06-21 12:45:48 +08:00
Alan Guo Xiang Tan
609562be3e
FEATURE: Add input filter for editing tags in navigation menu modal (#22216)
What does this change do?

This commit adds an input filter to filter through the tag checkboxes in the
modal to edit tags that are shown in the user's navigation menu. The
filtering is a simple matching of the given filter term against the
names of the tags.
2023-06-21 10:59:56 +08:00
Alan Guo Xiang Tan
08d8bd9f43
FEATURE: Add modal for editing tags in navigation menu (#22214)
What does this change do?

This change is a first pass for adding a modal used to edit tags that appears in
the navigation menu. As the feature is being worked on in phases, it is
currently hidden behind the `new_edit_sidebar_categories_tags_interface_groups` site setting.

The following features will be worked on in future commits:

1. Input filter to filter through the tgas
2. Button to reset tag selection to default navigation menu tags site
   settings
3. Button to deselect all current selection
2023-06-21 09:09:56 +08:00
Alan Guo Xiang Tan
6781e31195
UX: Remove horizontal scroll on mobile for edit categories nav modal (#22197)
What does this commit do?

Prior to this change, a long category name on mobile would cause a
horizontal scroll to appear because the category name was overflowing
its element. This commit changes it such that the category name will
wrap around instead.
2023-06-20 10:55:53 +08:00
Alan Guo Xiang Tan
289d2a5540
DEV: Deselect all and reset to defaults btns to edit categories modal (#22143)
What does this change do?

This change adds the deselect all and reset to defaults buttons to the
edit navigation menu categories modal. The deselect all button when
click deselects all the selected categories in the modal. If the user
saves with no categories selected, the user's categories section in the
navigation menu will be set to the site's top categories.

The reset to defaults button is only shown when the
`default_navigation_menu_categories` site setting has been configured.
When clicked, the user's categories section in the navigation menu is
automatically set to the categories defined by the
`default_navigation_menu_categories` site setting.
2023-06-20 08:17:53 +08:00
Kris
ffcac7bf5a
UX: consistent button hover transitions (#22157) 2023-06-16 10:25:58 -04:00
Keegan George
9dc63c0755
UX: Add required indicator to fields with required validation (#22096) 2023-06-14 11:25:05 -07:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Kris
ae8347d948
UX: minor #mention style adjustments (#22048) 2023-06-09 15:08:54 -04:00
Keegan George
39efa4c32a
DEV: Create posts from form templates (#21980) 2023-06-08 12:49:18 -07:00
Alan Guo Xiang Tan
853bce2abc
UX: Allow users to filter categories in edit sidebar categories modal (#21996)
What does this change do?

This change is a continuation of
2191b879c6 and adds an input filter to the
edit sidebar categories modal which the user can use to filter through
the list of categories by the category's name.

Note that if a child category is being shown, all of its ancestors will
be shown even if the names of the ancestors do not match the given
filter. This is to ensure that we continue to display the hierarchy of a
child category even if the parent category does not match the filter.
2023-06-08 12:54:51 +08:00
Alan Guo Xiang Tan
2191b879c6
FEATURE: Support sub-subcategories in new edit sidebar categories modal (#21994)
Why does this commit do?

This commit adds support for sub-subcategories in the new edit sidebar
categories modal added in fc296b9a81. Note
that sub-subcategories are enabled when `max_category_nesting` is set to
`3`.
2023-06-08 10:15:01 +08:00
Alan Guo Xiang Tan
fc296b9a81
UX: First pass at edit categories navigation modal for sidebar (#21963)
What this change?

We are currently not fully satisfied with the current way to edit the
categories and tags that appears in the sidebar where the user is
redirected to the tracking preferences tab in the user's profile causing
the user to lose context of the current page. In addition, the dropdown
to select categories or tags limits the amount of information we can
display.

Since editing or adding a custom categories section is already using a
modal, we have decided to switch editing the categories and tags that
appear in the sidebar to use a modal as well.

This commit ships a first pass of the edit categories modal such that we
can keep the commit small and reviewable. The incomplete nature of the
feature is also reflected in the fact that the feature is hidden behind
a new `new_edit_sidebar_categories_tags_interface_groups` site setting.
2023-06-07 12:09:30 +08:00
Martin Brennan
69eecf92d0
FIX: Use a default hashtag icon color for user with no permission (#21825)
One user can create a post or chat message with a hashtag they
have permission to use, but then when other users look at that
post they will see an empty space next to the hashtag because they
do not have the permission to load the colors in CSS classes for
the related category.

This fixes the issue by adding a default color with a special
CSS class if the user doesn't have permission to see the linked
channel/category on the hashtag.
2023-06-07 10:15:39 +10:00
Jarek Radosz
4313cd5298
DEV: Fix a sass warning (#21931) 2023-06-05 18:57:33 +02:00
Mark VanLandingham
3bfc6805ce
FEATURE: Offline indicator (#21369) 2023-06-05 11:08:04 -05:00
Kris
8e618a5484
FIX: use fixed dimensions for user card avatar (#21892) 2023-06-01 14:30:49 -04:00
Kris
1d9f195207
UX: adjust various avatars due to size changes (#21890) 2023-06-01 11:17:44 -04:00
Jarek Radosz
475ac297a4
UX: Tweak user deleted posts items (#21856) 2023-05-31 16:49:56 +02:00
Martin Brennan
b7229953f7
FIX: Hashtag CSS class color specificity (#21766)
Followup to eae47d82e2,
we removed some specificity from the hashtag color
CSS classes, but now the color is being overridden
by the base hashtag-cooked.d-icon color. This color
is no longer needed, so we just remove that and
the specificity.
2023-05-26 12:16:34 +02:00
Kris
9268bb92bd
UX: long unsetyled category names need truncation (#21756) 2023-05-25 17:08:39 -04:00
Joffrey JAFFEUX
eae47d82e2
FEATURE: Apply hashtag styles to autocomplete (#21731)
This commit uses improvements done in 0b3cf83 to apply these styles to the autocomplete in composer.
2023-05-25 09:38:12 +02:00
Martin Brennan
0b3cf83e3c
FIX: Do not cook icon with hashtags (#21676)
This commit makes some fundamental changes to how hashtag cooking and
icon generation works in the new experimental hashtag autocomplete mode.
Previously we cooked the appropriate SVG icon with the cooked hashtag,
though this has proved inflexible especially for theming purposes.

Instead, we now cook a data-ID attribute with the hashtag and add a new
span as an icon placeholder. This is replaced on the client side with an
icon (or a square span in the case of categories) on the client side via
the decorateCooked API for posts and chat messages.

This client side logic uses the generated hashtag, category, and channel
CSS classes added in a previous commit.

This is missing changes to the sidebar to use the new generated CSS
classes and also colors and the split square for categories in the
hashtag autocomplete menu -- I will tackle this in a separate PR so it
is clearer.
2023-05-23 09:33:55 +02:00
Jordan Vidrine
984a616204
Button research (#21621) 2023-05-22 16:03:34 -05:00
Bianca Nenciu
78022e7a5f
FEATURE: Show user cards for inactive users (#21387)
It used to return 404 which made the user card render and then quickly disappear.
2023-05-15 21:45:26 +03:00
Kris
3ea86985b9
UX: fix color preference layout (#21346) 2023-05-03 10:11:52 +08:00
Mark VanLandingham
86385bc9cf
REVERT: "FEATURE: Offline indicator controlled by message-bus connectivity (#21324)" (#21327)
This reverts commit b1da670898.
2023-05-01 15:27:02 -05:00
Mark VanLandingham
b1da670898
FEATURE: Offline indicator controlled by message-bus connectivity (#21324) 2023-05-01 12:41:30 -05:00
Mark VanLandingham
36d388b57f
Revert "FEATURE: Reimplement offline indicator (#21285)" (#21296)
This reverts commit de1066abcd.
2023-04-28 06:59:10 -05:00
Mark VanLandingham
de1066abcd
FEATURE: Reimplement offline indicator (#21285) 2023-04-28 06:32:35 -05:00
Mark VanLandingham
3527fbcd8e
Revert "FEATURE: Service to track message bus connectivity + offline indicator(#21259)" (#21282)
This reverts commit 6bba514b64.
2023-04-27 12:55:41 -05:00
Mark VanLandingham
6bba514b64
FEATURE: Service to track message bus connectivity + offline indicator(#21259) 2023-04-27 11:04:56 -05:00
Canapin
4b9a52cd7c
UX: fix time pickers input width on mobile (#21170) 2023-04-19 10:08:24 -05:00
Alan Guo Xiang Tan
e792f779d0
UX: Make input on /filter route full width (#20952) 2023-04-04 14:10:39 +10:00
Alan Guo Xiang Tan
4cb79ce8be
UX: Styling adjustments for filters page (#20768)
Change styling of filter input & remove button.

This follows the same pattern of design we use for search. In the search dropdown we do not have a button to search. We rely on pressing enter. I've also provided an example of Github's PR filter UI at the bottom of this comment.

We also do not have buttons like this on any other topic-list header. On tag and category dropdowns, we also rely on pressing enter to filter the topic list by chosen categories & tags.

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
2023-03-23 06:28:47 +08:00
Penar Musaraj
5b0d300b8a
DEV: Set containing block for Popper dropdowns (#20745)
Popper dropdowns used `position: fixed` or `position: absolute`. But in
tables, we want the content to use auto overflow horizontally, and that
causes the dropdowns to be hidden vertically in some scenarios.

Setting a containing block on the parent container fixes both placement
and overflow issues.
2023-03-20 15:26:20 -04:00
Kris
3cab9d5f80
UX: position of group user table dropdown, border (#20593) 2023-03-09 09:39:02 -05:00
Alan Guo Xiang Tan
66c50547b4
DEV: Experimental /filter route to filter through topics (#20494)
This commit introduces an experimental `/filter` route which allows a
user to input a query string to filter through topics.

Internal Ref: /t/92833
2023-03-03 09:46:21 +08:00
Martin Brennan
a3712781e1
FIX: Text selection breaking with hashtag SVG in Firefox (#20406)
The new hashtags render with an `<svg>` element inside a `<a>`
tag, which is an icon to indicate the "type" of the hashtag.
In Firefox, this was disrupting both triple-click text selection
and simple dragging cursor text selection. The selection would
stop at the SVG rather than continuing past it. This works fine
in Chrome -- either Chrome is not doing the right thing or Firefox
is.

Either way the issue is fixed by simply making the `svg` an inline
element inside the link, which it should be anyway.
2023-02-22 13:56:08 +10:00
chapoi
87de3c2319
UX: highlight vars updates (#20346)
* UX: replace highlight vars in popup menu

* UX: replace highlight vars in autcomplete

* UX: replace highlight vars in menu-panel

* UX: update style guide

* UX: bulk replace highlight vars in various small appearances
2023-02-21 10:15:49 +01:00
Keegan George
9c29d688e7
FEATURE: Add word count and indicator when exceeded max (#19367)
**This PR creates a new core reusable component wraps a character counter around any input.**

The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored).

It can be used for example, like so:
```hbs
  <CharCounter @max="50" @value={{this.charCounterContent}}>
    <textarea
      placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
      {{on "input" (action (mut this.charCounterContent) value="target.value")}}
      class="styleguide--char-counter"></textarea>
  </CharCounter>
```

**This PR also:**
1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters.
2. Adds an example to the `/styleguide` route
2023-02-20 12:06:43 +01:00
Kris
d67ed8468f
UX: move vertical admin plugin nav to horizontal overflow nav (#20319) 2023-02-17 10:21:30 -05:00
chapoi
99eceab6bc
UX: catch edge cases in tooltip (#20327) 2023-02-16 10:34:17 +01:00
Keegan George
6338287e89
UX: Easily toggle badges in admin badge list (#20225) 2023-02-09 11:36:27 -08:00
Kris
beee9623ec
UX: improve layout of keyboard shortcut modal (#20220) 2023-02-08 16:39:32 -05:00
Rafael dos Santos Silva
6e522e4aad
DEV: Move to Sass compilation to dart-sass (#19910)
This PR is a major change to Sass compilation in Discourse.

The new version of sass-ruby moves to dart-sass putting we back on the supported version of Sass. It does so while keeping compatibility with the existing method signatures, so minimal change is needed in Discourse for this change.

This moves us

From:
  - sassc 2.0.1 (Feb 2019)
  - libsass 3.5.2 (May 2018)

To:
  - dart-sass 1.58

This update applies the following breaking changes:

> 
> These breaking changes are coming soon or have recently been released:
> 
>  [Functions are stricter about which units they allow](https://sass-lang.com/documentation/breaking-changes/function-units) beginning in Dart Sass 1.32.0.
> 
>  [Selectors with invalid combinators are invalid](https://sass-lang.com/documentation/breaking-changes/bogus-combinators) beginning in Dart Sass 1.54.0.
> 
>  [/ is changing from a division operation to a list separator](https://sass-lang.com/documentation/breaking-changes/slash-div) beginning in Dart Sass 1.33.0.
> 
>  [Parsing the special syntax of @-moz-document will be invalid](https://sass-lang.com/documentation/breaking-changes/moz-document) beginning in Dart Sass 1.7.2.
> 
>  [Compound selectors could not be extended](https://sass-lang.com/documentation/breaking-changes/extend-compound) in Dart Sass 1.0.0 and Ruby Sass 4.0.0.


SCSS files have been migrated automatically using `sass-migrator division app/assets/stylesheets/**/*.scss`
2023-02-07 12:24:57 -03:00
Osama Sayegh
f94951147e
FIX: Replace R2 gem with rtlcss for generating RTL CSS (#19636)
We've had a couple of problems with the R2 gem where it generated a broken RTL CSS bundle that caused a badly broken layout when Discourse is used in an RTL language, see a3ce93b and 5926386. For this reason, we're replacing R2 with `rtlcss` that can handle modern CSS features better than R2 does.

`rltcss` is written in JS and available as an npm package. Calling the `rltcss` from rubyland is done via the `rtlcss_wrapper` gem which contains a distributable copy of the `rtlcss` package and loads/calls it with Mini Racer. See https://github.com/discourse/rtlcss_wrapper for more details.

Internal topic: t/76263.
2023-02-01 14:21:15 +03:00
Joffrey JAFFEUX
73488f2f33
FIX: uses popper for cards 2023-01-30 21:12:30 +01:00
Natalie Tay
fda834d01c
Revert "DEV: uses popperjs for positioning user and group card (#20063)" (#20072)
This reverts commit 335c3f4621.
2023-01-31 02:51:05 +08:00
Joffrey JAFFEUX
335c3f4621
DEV: uses popperjs for positioning user and group card (#20063)
Behavior should be very similar but the code is simplified and it should fix various bugs where the card was showing out of screen even if we had available space.
2023-01-30 14:15:10 +01:00
Kris
e71bf672cb
UX: prevent user card status overflow (#19979) 2023-01-24 13:58:24 -05:00
Gerhard Schlager
5926386d4f
FIX: Workaround a bug in the R2 gem (#19602) 2022-12-23 12:07:07 +08:00
chapoi
b756866334
UX: switch webkit to pseudoelement for fadeout (#19587) 2022-12-22 21:23:58 +01:00
Kris
bd5f57e90c
FEATURE: add user toggle to mask/unmask passwords (#19306) 2022-12-19 18:56:51 -05:00
chapoi
8db1f1892d
UX: Hashtag autocomplete styling (#19426)
* UX: added fadeout + hashtag styling

UX: add full name to autocomplete

UX: autocomplete mentions styling

UX: emoji styling user status

UX: autocomplete emoji

* DEV: Move hashtag tag counts into new secondary_text prop

* FIX: Add is-online style to mention users via chat

UX: make is-online avatar styling globally available

* DEV: Fix specs

* DEV: Test fix

Co-authored-by: Martin Brennan <martin@discourse.org>
2022-12-19 12:31:45 +01:00
Penar Musaraj
fc22790405
UX: Adjust emoji size in mentions (#19355)
Using pixel sizes to match what we do with a similar element in sidebar.
2022-12-07 10:17:29 -05:00
Martin Brennan
a34838d671
FIX: Minor hashtag autocomplete fixes (#19173)
* Do not search category name when searching channels to avoid
  confusing results
* Overflow text in autocomplete menu with ... if it is too long
* Make autocomplete menu less height
2022-11-24 15:45:13 +11:00
Martin Brennan
274b21663e
FIX: Experimental hashtag search result matching and limit fixes (#19144)
This changes the hashtag search to first do a lookup to find
results where the slug exactly matches the
search term. Now when we search for hashtags, the
exact matches will be found first and put at the top of
the results.

`ChatChannelFetcher` has also been modified here to allow
for more options for performance -- we do not need to
query DM channels for secured IDs when looking up or searching
channels for hashtags, since they should never show in
results there (they have no slugs). Nor do we need to include
the channel archive records.

Also changes the limit of hashtag results to 20 by default
with a hidden site setting, and makes it so the scroll for the
results is overflowed.
2022-11-24 10:07:59 +10:00
Kris
6b7bdc991d
UX: improve mention styling, simplify (#19169)
* UX: improve mention styling, simplify

* revert default
2022-11-24 09:35:57 +11:00
Martin Brennan
27b7f28739
FIX: Unescape :emoji: in hashtag search results (#19147)
This commit unescapes the :emoji: and expands into
an image within hashtag autocomplete results, and
also makes some style tweaks to make sure the emoji
is not too big.
2022-11-23 13:52:00 +10:00
Kris
b0f380c4c7
UX: improve mention styling (#19156)
This updates mention styling. This reduces bold, increases contrast, and makes inactive mentions look more inactive.
2022-11-23 09:17:03 +10:00
Martin Brennan
564292bfc1
FIX: Revert to old hashtag style for hashtag-raw (#19145)
This fix changes the hashtag-raw hashtags, which are
the ones that do not actually match anything, back
to the old style which does not look like mentions.
2022-11-22 17:45:47 +10:00
Martin Brennan
d3f02a1270
FEATURE: Generic hashtag autocomplete lookup and markdown cooking (#18937)
This commit fleshes out and adds functionality for the new `#hashtag` search and
lookup system, still hidden behind the `enable_experimental_hashtag_autocomplete`
feature flag.

**Serverside**

We have two plugin API registration methods that are used to define data sources
(`register_hashtag_data_source`) and hashtag result type priorities depending on
the context (`register_hashtag_type_in_context`). Reading the comments in plugin.rb
should make it clear what these are doing. Reading the `HashtagAutocompleteService`
in full will likely help a lot as well.

Each data source is responsible for providing its own **lookup** and **search**
method that returns hashtag results based on the arguments provided. For example,
the category hashtag data source has to take into account parent categories and
how they relate, and each data source has to define their own icon to use for the
hashtag, and so on.

The `Site` serializer has two new attributes that source data from `HashtagAutocompleteService`.
There is `hashtag_icons` that is just a simple array of all the different icons that
can be used for allowlisting in our markdown pipeline, and there is `hashtag_context_configurations`
that is used to store the type priority orders for each registered context.

When sending emails, we cannot render the SVG icons for hashtags, so
we need to change the HTML hashtags to the normal `#hashtag` text.

**Markdown**

The `hashtag-autocomplete.js` file is where I have added the new `hashtag-autocomplete`
markdown rule, and like all of our rules this is used to cook the raw text on both the clientside
and on the serverside using MiniRacer. Only on the server side do we actually reach out to
the database with the `hashtagLookup` function, on the clientside we just render a plainer
version of the hashtag HTML. Only in the composer preview do we do further lookups based
on this.

This rule is the first one (that I can find) that uses the `currentUser` based on a passed
in `user_id` for guardian checks in markdown rendering code. This is the `last_editor_id`
for both the post and chat message. In some cases we need to cook without a user present,
so the `Discourse.system_user` is used in this case.

**Chat Channels**

This also contains the changes required for chat so that chat channels can be used
as a data source for hashtag searches and lookups. This data source will only be
used when `enable_experimental_hashtag_autocomplete` is `true`, so we don't have
to worry about channel results suddenly turning up.

------

**Known Rough Edges**

- Onebox excerpts will not render the icon svg/use tags, I plan to address that in a follow up PR
- Selecting a hashtag + pressing the Quote button will result in weird behaviour, I plan to address that in a follow up PR
- Mixed hashtag contexts for hashtags without a type suffix will not work correctly, e.g. #ux which is both a category and a channel slug will resolve to a category when used inside a post or within a [chat] transcript in that post. Users can get around this manually by adding the correct suffix, for example ::channel. We may get to this at some point in future
- Icons will not show for the hashtags in emails since SVG support is so terrible in email (this is not likely to be resolved, but still noting for posterity)
- Additional refinements and review fixes wil
2022-11-21 08:37:06 +10:00
Kris
19ec341bce
DEV: allow themes to more easily set border-radii (#19037) 2022-11-16 11:35:09 -05:00
Kris
b6f5b236b3
UX: drag new user menus, scroll primary user nav (#18690) 2022-10-25 07:22:02 +08:00
Keegan George
5c7d951330
FIX: User card focus state appearing on click (#18650) 2022-10-18 11:15:42 -07:00
Keegan George
83c43bae2a
A11Y: Improve user card appearance in WHCM (#18648) 2022-10-18 11:05:14 -07:00
Keegan George
4b4dbbf580
A11Y: Improve accessibility in WHCM themes (#18606) 2022-10-17 07:07:46 -07:00
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
Kris
6d8405bbd0
UX: updated styles for user nav with sidebar (#18550) 2022-10-11 17:15:58 -04:00
Keegan George
ca1038187f
A11Y: Improve user card accessibility (#18348) 2022-09-27 10:06:20 -07:00
Penar Musaraj
217274f2c1
A11Y: multiple fixes to user stream items (#18368)
- in group activity, allows avatars to be selectable by tabbing or screen readers
- in user activity > drafts, fixes a bug where for draft replies, the wrong avatar was being shown in the user card
- in both group and user activity, fixes the order of focusable items
2022-09-27 10:59:26 -04:00
Alan Guo Xiang Tan
da3e72c2b4
DEV: Ship first pass of new user page navigation behind feature flag (#18285)
This commits introduces a new SiteSetting.enable_new_user_profile_nav_groups
feature flag. When configured, users of the configured groups will see
the new user page navigation links.

As of this commit, only the user activity navigation link has been
converted to the newly proposed dropdown of navigation links.

Mobile support has not been considered.
2022-09-21 12:32:47 +08: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
Penar Musaraj
b930f4886a
UX: Add flat text button styles and use in date/time cancel modal (#17892)
Also fixes an A11Y issue with the date/time cancel button.
2022-08-15 15:06:03 -04:00
Andrei Prigorshnev
fdfac8c720
UX: improve styles of the user status message component (#17904) 2022-08-14 18:55:54 +04:00
Kris
8df2756bba
DEV: set CSS custom property for footer-nav-height (#17744) 2022-08-01 18:01:06 -04:00
Andrei Prigorshnev
2cb97d8de4
FEATURE: show user status on the user profile page (#17712) 2022-07-28 21:12:48 +04:00
Andrei Prigorshnev
023835cdad
DEV: a new d-tooltip component (#17513) 2022-07-28 18:33:20 +04:00
Andrei Prigorshnev
c59f1729a6
FEATURE: auto remove user status after predefined period (#17236) 2022-07-05 19:12:22 +04:00
Andrei Prigorshnev
033f72c65f
FEATURE: user status emoji (#17025) 2022-06-22 18:15:33 +04:00
Andrei Prigorshnev
5c596273a0
FEATURE: user status (#16875) 2022-05-27 13:15:14 +04:00
Andrei Prigorshnev
28573b504f
UX: align the trash button on the bookmark modal (#16884) 2022-05-23 18:51:01 +04:00
Martin Brennan
8e9164fb60
DEV: Minor bookmark tweaks for polymorphism (#16728)
* Make the modal for bookmarks display more consistently
* Make sure bookmark query can handle empty results for certain
  bookmarkable queries
2022-05-12 10:29:01 +10:00
Joffrey JAFFEUX
fad94160c7
FIX: uses tippy for popover (#15409)
Note this commit also introduce a new {{d-popover}} component, example usage:

```hbs
{{#d-popover |state|}}
  {{d-button label="foo.things" class="d-popover-trigger"}}

  <div class="d-popover-content">
    Some content
  <div>
{{/d-popover}}
```
2022-05-02 17:10:26 +02:00
Andrei Prigorshnev
53e484817e
DEV: drop the unused invite-link-panel component and related unused code (#16435) 2022-04-21 14:32:17 +04:00
Jordan Vidrine
09ee9a6be6
UX: Less specific styling for Auth logins (#16393) 2022-04-11 12:33:09 -05:00
Bianca Nenciu
44c8f4940e
FIX: Show bookmark options by default when editing (#16189)
These changes also update user bookmark preferences on the client side
immediately in case user creates more than a bookmark during the same
session.
2022-03-16 16:41:24 +02:00
Penar Musaraj
593f3e5dd8
UX: Styling changes to global banner (#16191) 2022-03-15 16:19:55 +01:00
Jarek Radosz
44f7a61c2c
UX: Tweak the "new" badge size, position, color (#16168) 2022-03-13 12:50:06 +01:00
Bianca Nenciu
6d422a8033
FEATURE: Highlight expired bookmark reminders (#15317)
The user can select what happens with a bookamrk after it expires. New
option allow bookmark's reminder to be kept even after it has expired.
After a bookmark's reminder notification is created, the reminder date
will be highlighted in red until the user resets the reminder date.
User can do that using the new Clear Reminder button from the dropdown.
2022-03-08 19:44:18 +02:00
Mark VanLandingham
c33cf3c5e6
DEV: API to add keyboard shortcuts to help modal (#16075) 2022-03-01 14:37:26 -06:00
Penar Musaraj
9249e98697
UX: Change styling of admin bulk invite button (#15981) 2022-02-17 17:10:08 +01:00
Rafael dos Santos Silva
3f694e4ab5
FEATURE: Use native color-picker (#15748) 2022-02-01 11:18:13 -03:00
Jordan Vidrine
bbca25e875
fix flair misalignment (#15425) 2021-12-29 14:58:10 -06:00
Penar Musaraj
732678f642
UX: Fix alignment in group navigation bar (#15169)
Same as #15145.
2021-12-02 09:45:33 -05:00
Martin Brennan
4bdb956a0d
Revert "UX: Fix alignment in group navigation bar (#15145)" (#15150)
This reverts commit 01830f9d28.

This broke sidebar and could have affected customer themes
on a full enterprise deploy.
2021-12-01 16:13:03 +11:00
Penar Musaraj
01830f9d28
UX: Fix alignment in group navigation bar (#15145) 2021-12-01 11:49:34 +11:00
Natalie Tay
4c46c7e334
DEV: Remove xlink hrefs (#15059) 2021-11-25 15:22:43 +11:00
Jarek Radosz
ceed48f321
UX: Make banner full-width (#15038) 2021-11-22 19:43:45 +01:00
Jordan Vidrine
aa31fbe29a
REFACTOR: Continued topic-list tweaks (#14977)
* REFACTOR: Prep for topic-list refactor
2021-11-16 14:44:04 -06:00
Penar Musaraj
116b93595a
UX: Fix bar-style category dropdown (#14785) 2021-11-01 11:17:41 -04:00
Penar Musaraj
095421a1e1
REFACTOR: Use IntersectionObserver to calculate topic progress position (#14698) 2021-10-29 09:23:15 -04:00
Penar Musaraj
073e5ccd83
UX: Better topic search experience (#14625) 2021-10-18 13:17:27 -04:00
Krzysztof Kotlarek
cb5b0cb9d8
FEATURE: save local date to calendar (#14486)
It allows saving local date to calendar.
Modal is giving option to pick between ics and google. User choice can be remembered as a default for the next actions.
2021-10-06 14:11:52 +11:00
Penar Musaraj
cbf6895981
UX: Fix date input icon display issues (#14369) 2021-09-17 12:07:10 -04:00
Joffrey JAFFEUX
5a5b166b6d
UX: minor fast edit tweaks (#14368)
- do not reduce opacity of disabled buttons if they are loading
- replace ‘|’ by single quotes not double quotes
- always start from index 0
- reduces amount of work by checking row's length
- apply quotefix to fallback
- do not add 1 to caretposition if index is 0
2021-09-17 15:36:57 +02:00
Penar Musaraj
b90eb0da14
Revert "DEV: Define --footer-nav-height css var (#14008)" (#14327)
This reverts commit 3119b881aa.
2021-09-13 15:09:06 -04:00
Penar Musaraj
33fb3b7ec8
UX: Fix date input display in iOS (#14307) 2021-09-10 15:13:45 -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
75041dbbeb
UX: Remove :empty on topic-statuses, clean up (#14227) 2021-09-02 15:35:35 -04:00
Kris
2bf81592ec
UX: Comma separate public custom field lists (#14200) 2021-08-31 14:08:04 -04:00
Martin Brennan
2bf2d799c3
FIX: Bookmark delete button alignment in modal-footer (#14087)
The commit cd38ec2a4d broke
the bookmark delete button alignment in the modal.
2021-08-19 10:15:50 +10:00
Martin Brennan
cd38ec2a4d
FIX: Move bookmark modal buttons into modal-footer (#14072) 2021-08-18 08:51:57 +10:00
Mark VanLandingham
3119b881aa
DEV: Define --footer-nav-height css var (#14008) 2021-08-11 10:29:16 -05:00
Joffrey JAFFEUX
2efe91f49f
UI: fixes sidebar settings border and active styles (#13990)
- active setting should now correctly show an arrow which was previously floating in the middle of nowhere
- uses a correct color for border separation, previously the border was present but invisible as similar to the background
- slighty tweak padding
- makes arrow computation based on a variable
2021-08-10 08:53:22 +02:00
David Taylor
ab1460e2ca
UX: Ensure external login icons are visible on hover (#13914)
Some authentication buttons (e.g. apple, oidc, oauth2, saml) do not have a specific color specified. Therefore they were taking the default button-with-icon color, and the icons would almost disappear on hover. This commit adds a default of #000 for these buttons, so that the button hover looks similar to core auth buttons.
2021-08-03 12:48:21 +01:00