FEATURE: Show browser search tip when discourse search shows up in a topic (#15055)

This commit is contained in:
Natalie Tay 2021-11-23 13:11:17 +08:00 committed by GitHub
parent 8226ab1099
commit adf6498fe2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 14 deletions

View File

@ -5,13 +5,14 @@ import discourseDebounce from "discourse-common/lib/debounce";
import getURL from "discourse-common/lib/get-url"; import getURL from "discourse-common/lib/get-url";
import { h } from "virtual-dom"; import { h } from "virtual-dom";
import { iconNode } from "discourse-common/lib/icon-library"; import { iconNode } from "discourse-common/lib/icon-library";
import { isiPad } from "discourse/lib/utilities"; import { isiPad, translateModKey } from "discourse/lib/utilities";
import { popupAjaxError } from "discourse/lib/ajax-error"; import { popupAjaxError } from "discourse/lib/ajax-error";
import { Promise } from "rsvp"; import { Promise } from "rsvp";
import { search as searchCategoryTag } from "discourse/lib/category-tag-search"; import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
import userSearch from "discourse/lib/user-search"; import userSearch from "discourse/lib/user-search";
import { CANCELLED_STATUS } from "discourse/lib/autocomplete"; import { CANCELLED_STATUS } from "discourse/lib/autocomplete";
import { cancel } from "@ember/runloop"; import { cancel } from "@ember/runloop";
import I18n from "I18n";
const CATEGORY_SLUG_REGEXP = /(\#[a-zA-Z0-9\-:]*)$/gi; const CATEGORY_SLUG_REGEXP = /(\#[a-zA-Z0-9\-:]*)$/gi;
const USERNAME_REGEXP = /(\@[a-zA-Z0-9\-\_]*)$/gi; const USERNAME_REGEXP = /(\@[a-zA-Z0-9\-\_]*)$/gi;
@ -279,6 +280,11 @@ export default createWidget("search-menu", {
this.state.inTopicContext && this.state.inTopicContext &&
(!SearchHelper.includesTopics() || !searchData.term) (!SearchHelper.includesTopics() || !searchData.term)
) { ) {
const isMobileDevice = this.site.isMobileDevice;
if (!isMobileDevice) {
results.push(this.attach("browser-search-tip"));
}
return results; return results;
} }
@ -500,3 +506,20 @@ export default createWidget("search-menu", {
return false; return false;
}, },
}); });
createWidget("browser-search-tip", {
buildKey: () => "browser-search-tip",
tagName: "div.browser-search-tip",
html() {
return [
h(
"span.tip-label",
I18n.t("search.browser_tip", {
modifier: translateModKey("Meta"),
})
),
h("span.tip-description", I18n.t("search.browser_tip_description")),
];
},
});

View File

@ -242,24 +242,29 @@ $search-pad-horizontal: 0.5em;
} }
} }
} }
}
.search-random-quick-tip { .browser-search-tip,
padding: $search-pad-vertical $search-pad-horizontal; .search-random-quick-tip {
padding-bottom: 0; padding: $search-pad-vertical $search-pad-horizontal;
font-size: var(--font-down-2); padding-bottom: 0;
color: var(--primary-medium); font-size: var(--font-down-2);
.tip-label { color: var(--primary-medium);
background-color: rgba(var(--tertiary-rgb), 0.1); .tip-label {
margin-right: 4px; background-color: rgba(var(--tertiary-rgb), 0.1);
padding: 2px 4px; margin-right: 4px;
display: inline-block; padding: 2px 4px;
&.tip-clickable { display: inline-block;
cursor: pointer; &.tip-clickable {
} cursor: pointer;
} }
} }
} }
.browser-search-tip {
padding-top: 0.5em;
}
.searching { .searching {
position: absolute; position: absolute;
top: $search-pad-vertical + 0.2em; top: $search-pad-vertical + 0.2em;

View File

@ -2379,6 +2379,8 @@ en:
in_topics_posts: "in all topics and posts" in_topics_posts: "in all topics and posts"
enter_hint: "or press Enter" enter_hint: "or press Enter"
in_posts_by: "in posts by %{username}" in_posts_by: "in posts by %{username}"
browser_tip: "%{modifier} + f"
browser_tip_description: "again to use native browser search"
type: type:
default: "Topics/posts" default: "Topics/posts"