github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-04 23:04:36 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FEATURE: Apply hashtag styles to autocomplete (#21731)

Browse Source 
This commit uses improvements done in 0b3cf83 to apply these styles to the autocomplete in composer.
This commit is contained in:
Joffrey JAFFEUX 2023-05-25 09:38:12 +02:00 committed by GitHub
parent 398eaf0429
commit eae47d82e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
View File

@ -239,6 +239,12 @@ function _searchRequest(term, contextualHashtagConfiguration, resultFunc) {
response.results?.forEach((result) => { response.results?.forEach((result) => {
// Convert :emoji: in the result text to HTML safely. // Convert :emoji: in the result text to HTML safely.
result.text = htmlSafe(emojiUnescape(escapeExpression(result.text))); result.text = htmlSafe(emojiUnescape(escapeExpression(result.text)));
const hashtagType = getHashtagTypeClasses()[result.type];
result.icon = hashtagType.generateIconHTML({
icon: result.icon,
id: result.id,
});
}); });
resultFunc(response.results || CANCELLED_STATUS); resultFunc(response.results || CANCELLED_STATUS);
}) })

2
app/assets/javascripts/discourse/app/templates/hashtag-autocomplete.hbr
View File

@ -3,7 +3,7 @@
<ul> <ul>
{{#each options as |option|}} {{#each options as |option|}}
<li class="hashtag-autocomplete__option"> <li class="hashtag-autocomplete__option">
<a class="hashtag-autocomplete__link" title="{{option.description}}" href>{{d-icon option.icon}}<span class="hashtag-autocomplete__text">{{option.text}}{{#if option.secondary_text}}<span class="hashtag-autocomplete__meta-text">({{option.secondary_text}}){{/if}}</span></span> <a class="hashtag-autocomplete__link" title="{{option.description}}" href>{{{option.icon}}}<span class="hashtag-autocomplete__text">{{option.text}}{{#if option.secondary_text}}<span class="hashtag-autocomplete__meta-text">({{option.secondary_text}}){{/if}}</span></span>
</a> </a>
</li> </li>
{{/each}} {{/each}}

9
app/assets/stylesheets/common/components/hashtag.scss
View File

@ -90,9 +90,16 @@ a.hashtag-cooked {
} }
.d-icon { .d-icon {
color: var(--primary-medium);
margin-right: 0.25em; margin-right: 0.25em;
} }
.hashtag-category-badge {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin-right: 5px;
display: inline-block;
}
} }
&__text { &__text {

2
plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
View File

@ -20,7 +20,7 @@ export default class ChannelHashtagType extends HashtagTypeBase {
generateColorCssClasses(channel) { generateColorCssClasses(channel) {
return [ return [
`.hashtag-cooked .d-icon.hashtag-color--${this.type}-${channel.id} { color: var(--category-${channel.chatable.id}-color); }`, `.d-icon.hashtag-color--${this.type}-${channel.id} { color: var(--category-${channel.chatable.id}-color); }`,
]; ];
} }

2
plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
View File

@ -59,7 +59,7 @@ acceptance("Chat | Hashtag CSS Generator", function (needs) {
assert.equal( assert.equal(
cssTag.innerHTML, cssTag.innerHTML,
".hashtag-color--category-1 {\n background: linear-gradient(90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n background: linear-gradient(90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n background: linear-gradient(90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-cooked .d-icon.hashtag-color--channel-44 { color: var(--category-1-color); }\n.hashtag-cooked .d-icon.hashtag-color--channel-74 { color: var(--category-2-color); }\n.hashtag-cooked .d-icon.hashtag-color--channel-88 { color: var(--category-4-color); }" ".hashtag-color--category-1 {\n background: linear-gradient(90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n background: linear-gradient(90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n background: linear-gradient(90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}\n.d-icon.hashtag-color--channel-44 { color: var(--category-1-color); }\n.d-icon.hashtag-color--channel-74 { color: var(--category-2-color); }\n.d-icon.hashtag-color--channel-88 { color: var(--category-4-color); }"
); );
}); });
}); });