DEV: Add wrapping classes and remove `has()` usage (#281)
This commit is contained in:
parent
0902f74af5
commit
f6996a6ef0
|
@ -32,13 +32,33 @@ export default class AISuggestionDropdown extends Component {
|
|||
|
||||
get showAIButton() {
|
||||
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() {
|
||||
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
|
||||
onClickOutside(event) {
|
||||
const menu = document.querySelector(".ai-title-suggestions-menu");
|
||||
|
@ -111,10 +131,18 @@ export default class AISuggestionDropdown extends Component {
|
|||
this.loading = false;
|
||||
this.suggestIcon = "sync-alt";
|
||||
this.showMenu = true;
|
||||
|
||||
if (this.args.mode === "suggest_category") {
|
||||
document.querySelector(".category-input")?.classList.add("showing-ai-suggestion-menu");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#closeMenu() {
|
||||
if (this.showMenu && this.args.mode === "suggest_category") {
|
||||
document.querySelector(".category-input")?.classList.remove("showing-ai-suggestion-menu");
|
||||
}
|
||||
|
||||
this.suggestIcon = "discourse-sparkles";
|
||||
this.showMenu = false;
|
||||
this.showErrors = false;
|
||||
|
|
|
@ -249,7 +249,7 @@
|
|||
border-left: none;
|
||||
}
|
||||
|
||||
.title-input:has(.suggestion-button) {
|
||||
.showing-ai-suggestions .title-input {
|
||||
// border on focus should be on top of suggestion button
|
||||
input:focus {
|
||||
z-index: 1;
|
||||
|
@ -288,14 +288,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.category-input:has(.ai-suggestions-menu) {
|
||||
.category-input.showing-ai-suggestion-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Prevent suggestion button from wrapping on smaller screens
|
||||
@media screen and (max-width: 768px) {
|
||||
#reply-control {
|
||||
.category-input:has(.suggestion-button) {
|
||||
#reply-control .composer-fields.showing-ai-suggestions {
|
||||
.category-input {
|
||||
.category-chooser {
|
||||
width: 10px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue