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

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

View File

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

View File

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