DEV: Finalize glimmer search menu (#23174)

There was a few outstanding items that needed cleaning up.
### Make sure we don't clear the topic context prematurely
##### Before
https://github.com/discourse/discourse/assets/50783505/e92e4d6f-f42c-4357-8f13-8fa9f1024ade

_getting to zero search characters would automatically clear the search context_

##### After
https://github.com/discourse/discourse/assets/50783505/fd805dfd-576d-4e32-b6b5-5b93c25a5782

### Style fixes
##### Before
<img width="498" alt="Screenshot 2023-08-21 at 4 37 31 PM" src="https://github.com/discourse/discourse/assets/50783505/70847db1-43ec-477e-a21a-54ef2de0af42">

##### After
<img width="500" alt="Screenshot 2023-08-21 at 4 38 36 PM" src="https://github.com/discourse/discourse/assets/50783505/98cfb2e9-7c4d-44a6-bde2-53b85318fed3">

##### Before
<img width="450" alt="Screenshot 2023-08-21 at 4 33 45 PM" src="https://github.com/discourse/discourse/assets/50783505/3e057a52-5d1c-4776-93d0-a48133a722bc">

##### After
<img width="451" alt="Screenshot 2023-08-21 at 4 34 30 PM" src="https://github.com/discourse/discourse/assets/50783505/77548f6c-a9cf-4cf8-88d8-ee249736d684">

##### Before
<img width="460" alt="Screenshot 2023-08-21 at 4 31 01 PM" src="https://github.com/discourse/discourse/assets/50783505/9da57868-bc66-4d84-9108-4ae705a0562b">

##### After
<img width="456" alt="Screenshot 2023-08-21 at 4 30 52 PM" src="https://github.com/discourse/discourse/assets/50783505/f9444546-97f2-4d1a-9f78-7407f0f32ae7">
This commit is contained in:
Isaac Janzen 2023-08-21 17:51:11 -05:00 committed by GitHub
parent 3eb8046dde
commit 742d71e99c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 4 deletions

View File

@ -59,6 +59,11 @@ export default class AssistantItem extends Component {
@action
onKeydown(e) {
// don't capture tab key
if (e.key === "Tab") {
return;
}
if (e.key === "Escape") {
focusSearchButton();
this.args.closeSearchMenu();

View File

@ -16,6 +16,7 @@ export default class SearchTerm extends Component {
@service appEvents;
@tracked lastEnterTimestamp = null;
@tracked searchCleared = !this.search.activeGlobalSearchTerm;
// make constant available in template
get inputId() {
@ -28,6 +29,8 @@ export default class SearchTerm extends Component {
this.search.activeGlobalSearchTerm,
input.target.value
);
this.searchCleared = this.search.activeGlobalSearchTerm ? false : true;
}
@action
@ -70,9 +73,13 @@ export default class SearchTerm extends Component {
if (e.key === "Backspace") {
if (!e.target.value) {
this.args.clearTopicContext();
this.args.clearPMInboxContext();
this.focus(e.target);
// only clear context if we're not in the middle of a search
if (this.searchCleared) {
this.args.clearTopicContext();
this.args.clearPMInboxContext();
this.focus(e.target);
}
this.searchCleared = true;
}
}

View File

@ -426,7 +426,7 @@ createWidget("glimmer-search-menu-wrapper", {
},
buildClasses() {
return ["search-menu"];
return ["search-menu glimmer-search-menu"];
},
html() {

View File

@ -363,3 +363,22 @@ $search-pad-horizontal: 0.5em;
}
}
}
// these styles will become the default once the glimmer search menu
// is enabled for all users, and the old search menu is removed
// we can then drop any '!important' rules
.search-menu.glimmer-search-menu {
.search-item-tag .d-icon {
margin-right: 0 !important;
}
.search-item-user {
.username {
margin-right: 0.33rem;
}
img.avatar {
margin-right: 0 !important;
}
}
}