mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
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:
@@ -395,7 +395,20 @@ export default Component.extend(TextareaTextManipulation, {
|
||||
treatAsTextarea: true,
|
||||
autoSelectFirstSuggestion: true,
|
||||
transformComplete: (v) => v.username || v.name,
|
||||
dataSource: (term) => userSearch({ term, includeGroups: true }),
|
||||
dataSource: (term) => {
|
||||
return userSearch({ term, includeGroups: true }).then((result) => {
|
||||
if (result?.users?.length > 0) {
|
||||
const presentUserNames =
|
||||
this.chat.presenceChannel.users?.mapBy("username");
|
||||
result.users.forEach((user) => {
|
||||
if (presentUserNames.includes(user.username)) {
|
||||
user.cssClasses = "mention-user-is-online";
|
||||
}
|
||||
});
|
||||
}
|
||||
return result;
|
||||
});
|
||||
},
|
||||
afterComplete: (text) => {
|
||||
this.set("value", text);
|
||||
this._focusTextArea();
|
||||
|
||||
@@ -172,6 +172,16 @@ $float-height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border: 1px solid transparent;
|
||||
padding: 0;
|
||||
|
||||
.is-online & {
|
||||
border: 1px solid var(--secondary);
|
||||
box-shadow: 0px 0px 0px 1px var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-user-avatar {
|
||||
@include unselectable;
|
||||
display: flex;
|
||||
|
||||
@@ -32,7 +32,7 @@ describe "Using #hashtag autocompletion to search for and lookup channels",
|
||||
count: 3,
|
||||
)
|
||||
hashtag_results = page.all(".hashtag-autocomplete__link", count: 3)
|
||||
expect(hashtag_results.map(&:text)).to eq(["Random", "Raspberry", "razed x 0"])
|
||||
expect(hashtag_results.map(&:text).map { |r| r.gsub("\n", " ") }).to eq(["Random", "Raspberry", "razed (x0)"])
|
||||
end
|
||||
|
||||
it "searches for channels as well with # in a topic composer and deprioritises them" do
|
||||
@@ -44,7 +44,7 @@ describe "Using #hashtag autocompletion to search for and lookup channels",
|
||||
count: 3,
|
||||
)
|
||||
hashtag_results = page.all(".hashtag-autocomplete__link", count: 3)
|
||||
expect(hashtag_results.map(&:text)).to eq(["Raspberry", "razed x 0", "Random"])
|
||||
expect(hashtag_results.map(&:text).map { |r| r.gsub("\n", " ") }).to eq(["Raspberry", "razed (x0)", "Random"])
|
||||
end
|
||||
|
||||
it "cooks the hashtags for channels, categories, and tags serverside when the chat message is saved to the database" do
|
||||
|
||||
Reference in New Issue
Block a user