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

@@ -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();

View File

@@ -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;

View File

@@ -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