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

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

Browse source
This commit is contained in:
Vanessa 2024-03-09 11:08:11 +08:00
parent cbcc8141a8
commit 3f21eda746
5 changed files with 82 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/src/assets/scss/business/_av.scss
View file

@ -47,6 +47,14 @@
&__views {
align-items: center;
box-shadow: 0px -1px inset var(--b3-theme-background-light);
&--show .block__icon {
opacity: 1;
}
.b3-text-field {
transition: var(--b3-width-transition);
}
}
&__title {

9
app/src/protyle/render/av/action.ts
View file

@ -115,6 +115,15 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "av-search-icon") {
const searchElement = blockElement.querySelector('input[data-type="av-search"]') as HTMLInputElement;
searchElement.style.width = "128px";
searchElement.style.paddingLeft = "";
searchElement.style.paddingRight = "";
searchElement.focus();
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "av-filter") {
openMenuPanel({protyle, blockElement, type: "filters"});
event.preventDefault();

61
app/src/protyle/render/av/render.ts
View file

@ -9,6 +9,7 @@ import {stickyRow} from "./row";
import {getCalcValue} from "./calc";
import {renderAVAttribute} from "./blockAttr";
import {showMessage} from "../../../dialog/message";
import {addClearButton} from "../../../util/addClearButton";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => {
let avElements: Element[] = [];
@ -62,7 +63,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
created,
snapshot,
pageSize: parseInt(e.dataset.pageSize) || undefined,
viewID: newViewID
viewID: newViewID,
query: (e.querySelector('.b3-text-field[data-type="av-search"]') as HTMLInputElement)?.value || ""
}, (response) => {
const data = response.data.view as IAVTable;
if (!e.dataset.pageSize) {
@ -197,6 +199,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
<svg><use xlink:href="#iconSort"></use></svg>
</span>
<div class="fn__space"></div>
<span data-type="av-search-icon" class="block__icon">
<svg><use xlink:href="#iconSearch"></use></svg>
</span>
<div style="position: relative">
<input style="width:0;padding-left: 0;padding-right: 0;" data-type="av-search" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.search}">
</div>
<div class="fn__space"></div>
<span data-type="av-more" class="block__icon">
<svg><use xlink:href="#iconMore"></use></svg>
</span>
@ -280,6 +289,56 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
if (cb) {
cb();
}
const viewsElement = e.querySelector(".av__views") as HTMLElement;
const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
if (searchInputElement.value) {
viewsElement.classList.add("av__views--show");
} else {
viewsElement.classList.remove("av__views--show");
}
});
searchInputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
if (event.key === "Enter") {
e.removeAttribute("data-render");
avRender(e, protyle)
event.preventDefault();
}
});
searchInputElement.addEventListener("compositionend", (event: KeyboardEvent) => {
if (event.key === "Enter") {
// todo
event.preventDefault();
}
});
searchInputElement.addEventListener("blur", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
if (!searchInputElement.value) {
viewsElement.classList.remove("av__views--show");
searchInputElement.style.width = "0";
searchInputElement.style.paddingLeft = "0";
searchInputElement.style.paddingRight = "0";
}
});
addClearButton({
inputElement: searchInputElement,
right: 0,
height: searchInputElement.clientHeight,
clearCB() {
viewsElement.classList.remove("av__views--show");
searchInputElement.style.width = "0";
searchInputElement.style.paddingLeft = "0";
searchInputElement.style.paddingRight = "0";
}
});
});
});
}

2
app/src/protyle/wysiwyg/keydown.ts
View file

@ -85,7 +85,7 @@ export const getContentByInlineHTML = (range: Range, cb: (content: string) => vo
export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
editorElement.addEventListener("keydown", (event: KeyboardEvent & { target: HTMLElement }) => {
if (event.target.localName === "protyle-html") {
if (event.target.localName === "protyle-html" || event.target.localName === "input") {
event.stopPropagation();
return;
}

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

@ -1,12 +1,12 @@
const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
if (inputElement.value === "") {
clearElement.classList.add("fn__none");
if (right) {
inputElement.style.paddingRight = "";
if (typeof right === "number") {
inputElement.style.paddingRight = inputElement.dataset.oldPaddingRight;
}
} else {
clearElement.classList.remove("fn__none");
if (right) {
if (typeof right === "number") {
inputElement.style.setProperty("padding-right", `${right * 2 + clearElement.clientWidth}px`, "important");
}
}
@ -18,6 +18,7 @@ export const addClearButton = (options: {
height?: number
className?: string
}) => {
options.inputElement.dataset.oldPaddingRight = options.inputElement.style.paddingRight;
options.inputElement.insertAdjacentHTML("afterend",
`<svg class="${options.className || "b3-form__icon-clear"} ariaLabel" aria-label="${window.siyuan.languages.clear}" style="${options.right ? "right: " + options.right + "px;" : ""}${options.height ? "height:" + options.height + "px" : ""}">
<use xlink:href="#iconCloseRound"></use></svg>`);