Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 10:56:00 +02:00
Code Issues Packages Projects Releases Activity

feat(options/other): improve predefined search engines

Browse Source
This commit is contained in:
Elian Doran
2026-04-13 18:02:25 +03:00
parent 3ce508c5ee
commit 02336f4e53
3 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/translations/en/translation.json
View File

@@ -1361,7 +1361,7 @@
"search_engine": {
"title": "Search Engine",
"custom_search_engine_info": "Used when searching the web for selected text. If not configured, DuckDuckGo will be used.",
"predefined_templates_label": "Predefined templates",
"predefined_templates_label": "Presets",
"bing": "Bing",
"baidu": "Baidu",
"duckduckgo": "DuckDuckGo",

20
apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
View File

@@ -81,3 +81,23 @@ button.option-row-link {
button.option-row-link:last-child {
border-bottom: none;
}
.search-engine-templates {
--badge-radius: 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.search-engine-templates .ext-badge {
--color: var(--input-background-color);
color: var(--main-text-color);
font-size: 0.85em;
}
.search-engine-templates .ext-badge.selected {
--color: var(--accented-background-color);
outline: 2px solid var(--accent-color);
outline-offset: -2px;
}

38
apps/client/src/widgets/type_widgets/options/other.tsx
View File

@@ -6,8 +6,8 @@ import search from "../../../services/search";
import server from "../../../services/server";
import toast from "../../../services/toast";
import { isElectron } from "../../../services/utils";
import { Badge } from "../../react/Badge";
import Button from "../../react/Button";
import FormSelect from "../../react/FormSelect";
import FormText from "../../react/FormText";
import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
@@ -64,30 +64,30 @@ function SearchEngineSettings() {
const searchEngines = useMemo(() => {
return [
{ url: "https://www.bing.com/search?q={keyword}", name: t("search_engine.bing") },
{ url: "https://www.baidu.com/s?wd={keyword}", name: t("search_engine.baidu") },
{ url: "https://duckduckgo.com/?q={keyword}", name: t("search_engine.duckduckgo") },
{ url: "https://www.google.com/search?q={keyword}", name: t("search_engine.google") }
{ url: "https://www.bing.com/search?q={keyword}", name: t("search_engine.bing"), icon: "bx bxl-bing" },
{ url: "https://www.baidu.com/s?wd={keyword}", name: t("search_engine.baidu"), icon: "bx bxl-baidu" },
{ url: "https://www.google.com/search?q={keyword}", name: t("search_engine.google"), icon: "bx bxl-google" }
];
}, []);
return (
<OptionsSection title={t("search_engine.title")} description={t("search_engine.custom_search_engine_info")}>
<OptionsRow name="predefined-search-engine" label={t("search_engine.predefined_templates_label")}>
<FormSelect
values={searchEngines}
currentValue={customSearchEngineUrl}
keyProperty="url" titleProperty="name"
onChange={newValue => {
const searchEngine = searchEngines.find(e => e.url === newValue);
if (!searchEngine) {
return;
}
setCustomSearchEngineName(searchEngine.name);
setCustomSearchEngineUrl(searchEngine.url);
}}
/>
<OptionsRow name="predefined-templates" label={t("search_engine.predefined_templates_label")}>
<div className="search-engine-templates">
{searchEngines.map(engine => (
<Badge
key={engine.url}
icon={engine.icon}
text={engine.name}
className={customSearchEngineUrl === engine.url ? "selected" : ""}
onClick={() => {
setCustomSearchEngineName(engine.name);
setCustomSearchEngineUrl(engine.url);
}}
/>
))}
</div>
</OptionsRow>
<OptionsRow name="custom-name" label={t("search_engine.custom_name_label")}>