diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx index 90bea4ce23..02b52bf9e3 100644 --- a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx +++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx @@ -7,6 +7,7 @@ import FNote from "../../entities/fnote"; import { removeOwnedAttributesByNameOrType } from "../../services/attributes"; import { t } from "../../services/i18n"; import server from "../../services/server"; +import Admonition from "../react/Admonition"; import FormSelect from "../react/FormSelect"; import FormTextArea from "../react/FormTextArea"; import FormTextBox from "../react/FormTextBox"; @@ -154,64 +155,56 @@ function SearchStringOption({ note, refreshResults, error, ...restProps }: Searc } }, 1000); - // React to errors - const { showTooltip, hideTooltip } = useTooltip(inputRef, { - trigger: "manual", - title: `${t("search_string.error", { error: error?.message })}`, - html: true, - placement: "bottom" - }); - // Auto-focus. useEffect(() => inputRef.current?.focus(), []); - useEffect(() => { - if (error) { - showTooltip(); - setTimeout(() => hideTooltip(), 4000); - } else { - hideTooltip(); - } - }, [ error ]); + return <> + + {t("search_string.search_syntax")} - {t("search_string.also_see")} {t("search_string.complete_help")} + + } + note={note} {...restProps} + > + { + currentValue.current = text; + spacedUpdate.scheduleUpdate(); + }} + onKeyDown={async (e) => { + if (e.key === "Enter") { + e.preventDefault(); - return - {t("search_string.search_syntax")} - {t("search_string.also_see")} {t("search_string.complete_help")} -
    -
  • {t("search_string.full_text_search")}
  • -
  • #abc - {t("search_string.label_abc")}
  • -
  • #year = 2019 - {t("search_string.label_year")}
  • -
  • #rock #pop - {t("search_string.label_rock_pop")}
  • -
  • #rock or #pop - {t("search_string.label_rock_or_pop")}
  • -
  • #year <= 2000 - {t("search_string.label_year_comparison")}
  • -
  • note.dateCreated >= MONTH-1 - {t("search_string.label_date_created")}
  • -
- } - note={note} {...restProps} - > - { - currentValue.current = text; - spacedUpdate.scheduleUpdate(); - }} - onKeyDown={async (e) => { - if (e.key === "Enter") { - e.preventDefault(); - - // this also in effect disallows new lines in query string. - // on one hand, this makes sense since search string is a label - // on the other hand, it could be nice for structuring long search string. It's probably a niche case though. - await spacedUpdate.updateNowIfNecessary(); - refreshResults(); - } - }} - /> -
; + // this also in effect disallows new lines in query string. + // on one hand, this makes sense since search string is a label + // on the other hand, it could be nice for structuring long search string. It's probably a niche case though. + await spacedUpdate.updateNowIfNecessary(); + refreshResults(); + } + }} + /> +
+ {error?.message && ( + + + {error.message} + + + )} + ; } function SearchScriptOption({ note, ...restProps }: SearchOptionProps) { diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.css b/apps/client/src/widgets/ribbon/SearchDefinitionTab.css index 967a9a2f70..118f61de27 100644 --- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.css +++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.css @@ -4,6 +4,12 @@ width: 100%; border-collapse: separate; border-spacing: 10px; + + .admonition { + margin-top: 0.25em; + margin-bottom: 1em; + text-wrap: wrap; + } } .search-setting-table div { @@ -154,7 +160,7 @@ body.mobile .search-definition-widget { .search-setting-table tr.ancestor > td > div { flex-direction: column; align-items: flex-start !important; - } + } .search-actions tr { border-bottom: 0; @@ -171,4 +177,4 @@ body.mobile .search-definition-widget { overflow: unset; height: unset !important; } -} \ No newline at end of file +}