discourse/discourse-ai
1
0
Fork 0
mirror of https://github.com/discourse/discourse-ai.git synced 2025-03-09 11:48:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Add wrapping classes and remove has() usage (#281)

Browse Source
This commit is contained in:
Keegan George 2023-11-03 11:41:57 -07:00 committed by GitHub
parent 0902f74af5
commit f6996a6ef0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
assets/javascripts/discourse/components/ai-suggestion-dropdown.gjs
View File

@ -32,13 +32,33 @@ export default class AISuggestionDropdown extends Component {
get showAIButton() { get showAIButton() {
const minCharacterCount = 40; const minCharacterCount = 40;
return this.composer.model.replyLength > minCharacterCount; const isShowAIButton = this.composer.model.replyLength > minCharacterCount;
const composerFields = document.querySelector(".composer-fields");
if (composerFields) {
if (isShowAIButton) {
composerFields.classList.add("showing-ai-suggestions");
} else {
composerFields.classList.remove("showing-ai-suggestions");
}
}
return isShowAIButton;
} }
get disableSuggestionButton() { get disableSuggestionButton() {
return this.loading; return this.loading;
} }
@action
applyClasses() {
if (this.showAIButton) {
document.querySelector(".composer-fields")?.classList.add("showing-ai-suggestions");
} else {
document.querySelector(".composer-fields")?.classList.remove("showing-ai-suggestions");
}
}
@bind @bind
onClickOutside(event) { onClickOutside(event) {
const menu = document.querySelector(".ai-title-suggestions-menu"); const menu = document.querySelector(".ai-title-suggestions-menu");
@ -111,10 +131,18 @@ export default class AISuggestionDropdown extends Component {
this.loading = false; this.loading = false;
this.suggestIcon = "sync-alt"; this.suggestIcon = "sync-alt";
this.showMenu = true; this.showMenu = true;
if (this.args.mode === "suggest_category") {
document.querySelector(".category-input")?.classList.add("showing-ai-suggestion-menu");
}
}); });
} }
#closeMenu() { #closeMenu() {
if (this.showMenu && this.args.mode === "suggest_category") {
document.querySelector(".category-input")?.classList.remove("showing-ai-suggestion-menu");
}
this.suggestIcon = "discourse-sparkles"; this.suggestIcon = "discourse-sparkles";
this.showMenu = false; this.showMenu = false;
this.showErrors = false; this.showErrors = false;

8
assets/stylesheets/modules/ai-helper/common/ai-helper.scss
View File

@ -249,7 +249,7 @@
border-left: none; border-left: none;
} }
.title-input:has(.suggestion-button) { .showing-ai-suggestions .title-input {
// border on focus should be on top of suggestion button // border on focus should be on top of suggestion button
input:focus { input:focus {
z-index: 1; z-index: 1;
@ -288,14 +288,14 @@
} }
} }
.category-input:has(.ai-suggestions-menu) { .category-input.showing-ai-suggestion-menu {
position: relative; position: relative;
} }
// Prevent suggestion button from wrapping on smaller screens // Prevent suggestion button from wrapping on smaller screens
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#reply-control { #reply-control .composer-fields.showing-ai-suggestions {
.category-input:has(.suggestion-button) { .category-input {
.category-chooser { .category-chooser {
width: 10px; width: 10px;
} }