diff --git a/app/src/assets/scss/business/_search.scss b/app/src/assets/scss/business/_search.scss index 738bd5327..6e71ee7a3 100644 --- a/app/src/assets/scss/business/_search.scss +++ b/app/src/assets/scss/business/_search.scss @@ -133,17 +133,7 @@ } &__rmpath { - position: absolute; - height: 18px; - width: 16px; - opacity: 0.68; - transition: var(--b3-transition); - right: 0; - cursor: pointer; - - &:hover { - opacity: 1; - } + @extend .b3-form__icon-clear; } &__tip { diff --git a/app/src/assets/scss/component/_form.scss b/app/src/assets/scss/component/_form.scss index d77968694..4488e3d61 100644 --- a/app/src/assets/scss/component/_form.scss +++ b/app/src/assets/scss/component/_form.scss @@ -37,6 +37,21 @@ } } + &__icon-clear { + position: absolute; + height: 18px; + width: 16px; + opacity: 0.68; + transition: var(--b3-transition); + right: 0; + cursor: pointer; + + &:hover { + opacity: 1; + } + } + + // repo password &__icona { position: relative; color: var(--b3-theme-on-surface); diff --git a/app/src/search/assets.ts b/app/src/search/assets.ts index 98d0b478b..1ff9fbfe7 100644 --- a/app/src/search/assets.ts +++ b/app/src/search/assets.ts @@ -9,6 +9,7 @@ import {MenuItem} from "../menus/Menu"; import {Dialog} from "../dialog"; import {Menu} from "../plugin/Menu"; import {hasClosestByClassName} from "../protyle/util/hasClosest"; +import {addClearButton} from "../util/addClearButton"; export const openSearchAsset = (element: Element, isStick: boolean) => { /// #if !MOBILE @@ -43,11 +44,13 @@ export const openSearchAsset = (element: Element, isStick: boolean) => {
- - - - - +
+ + + + + +
@@ -118,6 +121,9 @@ export const openSearchAsset = (element: Element, isStick: boolean) => { setStorageVal(Constants.LOCAL_SEARCHASSET, window.siyuan.storage[Constants.LOCAL_SEARCHASSET]); }); assetInputEvent(element, localSearch); + addClearButton(searchInputElement, () => { + assetInputEvent(element, localSearch); + }); const dragElement = element.querySelector(".search__drag"); dragElement.addEventListener("mousedown", (event: MouseEvent) => { diff --git a/app/src/search/util.ts b/app/src/search/util.ts index da1eadd69..3d5122f76 100644 --- a/app/src/search/util.ts +++ b/app/src/search/util.ts @@ -39,6 +39,7 @@ import { } from "./assets"; import {resize} from "../protyle/util/resize"; import {Menu} from "../plugin/Menu"; +import {addClearButton} from "../util/addClearButton"; export const toggleReplaceHistory = (searchElement: Element) => { const list = window.siyuan.storage[Constants.LOCAL_SEARCHKEYS]; @@ -274,11 +275,13 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
- - - - - +
+ + + + + +
@@ -308,11 +311,13 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
- - - - - +
+ + + + + +
@@ -602,7 +607,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo } else if (target.id === "searchReplace") { // ctrl+P 不需要保存 config.hasReplace = !config.hasReplace; - element.querySelector("#replaceHistoryBtn").parentElement.classList.toggle("fn__none"); + element.querySelectorAll(".search__header")[1].classList.toggle("fn__none"); event.stopPropagation(); event.preventDefault(); break; @@ -947,6 +952,10 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo } saveKeyList("keys", searchInputElement.value); }); + addClearButton(searchInputElement, () => { + inputEvent(element, config, edit); + }); + addClearButton(replaceInputElement, undefined, undefined, searchInputElement.clientHeight); inputEvent(element, config, edit); return edit; }; @@ -978,10 +987,11 @@ const updateConfig = (element: Element, item: ISearchOption, config: ISearchOpti item.idPath = config.idPath.join(",").split(","); } if (config.hasReplace !== item.hasReplace) { + const replaceHeaderElement = element.querySelectorAll(".search__header")[1]; if (item.hasReplace) { - element.querySelector("#replaceHistoryBtn").parentElement.classList.remove("fn__none"); + replaceHeaderElement.classList.remove("fn__none"); } else { - element.querySelector("#replaceHistoryBtn").parentElement.classList.add("fn__none"); + replaceHeaderElement.classList.add("fn__none"); } } const searchPathInputElement = element.querySelector("#searchPathInput"); @@ -1096,7 +1106,7 @@ export const replace = (element: Element, config: ISearchOption, edit: Protyle, const replaceInputElement = element.querySelector("#replaceInput") as HTMLInputElement; const searchInputElement = element.querySelector("#searchInput") as HTMLInputElement; - const loadElement = replaceInputElement.nextElementSibling; + const loadElement = element.querySelector("#searchRefresh"); if (!loadElement.classList.contains("fn__none")) { return; } diff --git a/app/src/util/addClearButton.ts b/app/src/util/addClearButton.ts new file mode 100644 index 000000000..21e365db8 --- /dev/null +++ b/app/src/util/addClearButton.ts @@ -0,0 +1,27 @@ +const update = (inputElement: HTMLInputElement, clearElement: Element, right = 8) => { + if (inputElement.value === "") { + clearElement.classList.add("fn__none"); + inputElement.style.paddingRight = ""; + } else { + clearElement.classList.remove("fn__none"); + inputElement.style.setProperty('padding-right', `${right * 2 + clearElement.clientWidth}px`, 'important'); + } +} +export const addClearButton = (inputElement: HTMLInputElement, clearCB?: () => void, right = 8, height?: number) => { + inputElement.insertAdjacentHTML("afterend", + ` +`); + const clearElement = inputElement.nextElementSibling; + clearElement.addEventListener("click", () => { + inputElement.value = ""; + inputElement.focus(); + update(inputElement, clearElement, right); + if (clearCB) { + clearCB(); + } + }) + inputElement.addEventListener("input", () => { + update(inputElement, clearElement, right); + }); + update(inputElement, clearElement, right); +};