0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/9801

Browse source
This commit is contained in:
Vanessa 2023-12-04 00:29:57 +08:00
parent 3ea2741e5f
commit d1c5c9ac7d
4 changed files with 63 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/src/mobile/menu/search.ts
View file

@ -23,6 +23,7 @@ import {
renderNextAssetMark,
renderPreview,
} from "../../search/assets";
import {addClearButton} from "../../util/addClearButton";
const replace = (element: Element, config: ISearchOption, isAll: boolean) => {
if (config.method === 1 || config.method === 2) {
@ -32,7 +33,7 @@ const replace = (element: Element, config: ISearchOption, isAll: boolean) => {
const searchListElement = element.querySelector("#searchList");
const replaceInputElement = element.querySelector("#toolbarReplace") as HTMLInputElement;
const loadElement = replaceInputElement.nextElementSibling;
const loadElement = replaceInputElement.parentElement.querySelector(".fn__rotate");
if (!loadElement.classList.contains("fn__none")) {
return;
}
@ -281,9 +282,20 @@ const initSearchEvent = (app: App, element: Element, config: ISearchOption) => {
setStorageVal(Constants.LOCAL_SEARCHDATA, window.siyuan.storage[Constants.LOCAL_SEARCHDATA]);
}
});
addClearButton({
inputElement: searchInputElement,
className: "toolbar__icon",
clearCB() {
config.page = 1;
updateSearchResult(config, element);
}
});
const replaceInputElement = element.querySelector(".toolbar .toolbar__title") as HTMLInputElement;
replaceInputElement.value = config.r || "";
addClearButton({
inputElement: replaceInputElement,
className: "toolbar__icon",
});
const criteriaData: ISearchOption[] = [];
initCriteriaMenu(element.querySelector("#criteria"), criteriaData, config);
@ -648,10 +660,7 @@ export const popSearch = (app: App, config = window.siyuan.storage[Constants.LOC
<div class="fn__none fn__flex-column" style="position: fixed;top: 0;width: 100%;background: var(--b3-theme-surface);height: 100%;" id="searchAssetsPanel">
<div class="toolbar toolbar--border">
<svg class="toolbar__icon"><use xlink:href="#iconSearch"></use></svg>
<span class="toolbar__text"><input id="searchAssetInput" placeholder="${window.siyuan.languages.keyword}" class="toolbar__title fn__block"></span>
<svg class="toolbar__icon" data-type="goSearch">
<use xlink:href="#iconCloseRound"></use>
</svg>
<input id="searchAssetInput" placeholder="${window.siyuan.languages.keyword}" class="toolbar__title fn__block">
</div>
<div class="toolbar">
<span class="fn__space"></span>
@ -706,4 +715,11 @@ const goAsset = () => {
assetInputEvent(assetsElement, localSearch);
});
assetInputEvent(assetsElement, localSearch);
addClearButton({
inputElement,
className:"toolbar__icon",
clearCB() {
assetInputEvent(assetsElement, localSearch);
}
})
};

7
app/src/search/assets.ts
View file

@ -121,8 +121,11 @@ 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);
addClearButton({
inputElement: searchInputElement,
clearCB() {
assetInputEvent(element, localSearch);
}
});
const dragElement = element.querySelector(".search__drag");

14
app/src/search/util.ts
View file

@ -952,10 +952,18 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
}
saveKeyList("keys", searchInputElement.value);
});
addClearButton(searchInputElement, () => {
inputEvent(element, config, edit);
addClearButton({
inputElement: searchInputElement,
height: searchInputElement.clientHeight,
clearCB () {
config.page = 1;
inputEvent(element, config, edit);
}
});
addClearButton({
inputElement: replaceInputElement,
height: searchInputElement.clientHeight,
});
addClearButton(replaceInputElement, undefined, undefined, searchInputElement.clientHeight);
inputEvent(element, config, edit);
return edit;
};

40
app/src/util/addClearButton.ts
View file

@ -1,27 +1,37 @@
const update = (inputElement: HTMLInputElement, clearElement: Element, right = 8) => {
const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
if (inputElement.value === "") {
clearElement.classList.add("fn__none");
inputElement.style.paddingRight = "";
if (right) {
inputElement.style.paddingRight = "";
}
} else {
clearElement.classList.remove("fn__none");
inputElement.style.setProperty('padding-right', `${right * 2 + clearElement.clientWidth}px`, 'important');
if (right) {
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",
`<svg class="b3-form__icon-clear" style="right:${right}px;height: ${height || inputElement.clientHeight}px;">
export const addClearButton = (options: {
inputElement: HTMLInputElement,
clearCB?: () => void,
right?: number,
height?: number
className?: string
}) => {
options.inputElement.insertAdjacentHTML("afterend",
`<svg class="${options.className || "b3-form__icon-clear"}" style="${options.right ? "right: " + options.right + "px" : ""}${options.height ? "height:" + options.height + "px" : ""}">
<use xlink:href="#iconCloseRound"></use></svg>`);
const clearElement = inputElement.nextElementSibling;
const clearElement = options.inputElement.nextElementSibling;
clearElement.addEventListener("click", () => {
inputElement.value = "";
inputElement.focus();
update(inputElement, clearElement, right);
if (clearCB) {
clearCB();
options.inputElement.value = "";
options.inputElement.focus();
update(options.inputElement, clearElement, options.right);
if (options.clearCB) {
options.clearCB();
}
})
inputElement.addEventListener("input", () => {
update(inputElement, clearElement, right);
options.inputElement.addEventListener("input", () => {
update(options.inputElement, clearElement, options.right);
});
update(inputElement, clearElement, right);
update(options.inputElement, clearElement, options.right);
};