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>
This commit is contained in:
chapoi
2022-12-19 12:31:45 +01:00
committed by GitHub
parent c5957490df
commit 8db1f1892d
12 changed files with 166 additions and 80 deletions

View File

@@ -62,6 +62,9 @@ class HashtagAutocompleteService
# The text to display in the UI autocomplete menu for the item.
attr_accessor :text
# Some items may want to display extra text in the UI styled differently, e.g. tag topic counts.
attr_accessor :secondary_text
# The description text to display in the UI autocomplete menu on hover.
# This will be things like e.g. category description.
attr_accessor :description

View File

@@ -12,17 +12,14 @@ class TagHashtagDataSource
"tag"
end
def self.tag_to_hashtag_item(tag, include_count: false)
def self.tag_to_hashtag_item(tag)
tag = Tag.new(tag.slice(:id, :name, :description).merge(topic_count: tag[:count])) if tag.is_a?(
Hash,
)
HashtagAutocompleteService::HashtagItem.new.tap do |item|
if include_count
item.text = "#{tag.name} x #{tag.topic_count}"
else
item.text = tag.name
end
item.text = tag.name
item.secondary_text = "x#{tag.topic_count}"
item.description = tag.description
item.slug = tag.name
item.relative_url = tag.url
@@ -66,7 +63,7 @@ class TagHashtagDataSource
TagsController
.tag_counts_json(tags_with_counts)
.take(limit)
.map { |tag| tag_to_hashtag_item(tag, include_count: true) }
.map { |tag| tag_to_hashtag_item(tag) }
end
def self.search_sort(search_results, _)
@@ -89,6 +86,6 @@ class TagHashtagDataSource
TagsController
.tag_counts_json(tags_with_counts)
.take(limit)
.map { |tag| tag_to_hashtag_item(tag, include_count: true) }
.map { |tag| tag_to_hashtag_item(tag) }
end
end