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

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

Browse source
This commit is contained in:
Vanessa 2024-11-19 00:29:41 +08:00
parent 9c0b53e83e
commit 3738657755
3 changed files with 38 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/src/protyle/render/av/col.ts
View file

@ -15,7 +15,7 @@ import * as dayjs from "dayjs";
import {setPosition} from "../../../util/setPosition";
import {duplicateNameAddOne} from "../../../util/functions";
import {Dialog} from "../../../dialog";
import {escapeAriaLabel, escapeAttr} from "../../../util/escape";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
export const duplicateCol = (options: {
protyle: IProtyle,
@ -88,19 +88,19 @@ export const getEditHTML = (options: {
</button>
<button class="b3-menu__separator"></button>
<button class="b3-menu__item" data-type="nobg">
<div>
<div class="fn__block">
<div class="fn__flex">
<span class="b3-menu__avemoji" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
<div class="b3-form__icona fn__size200">
<div class="b3-form__icona fn__block">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${colData.desc ? escapeAriaLabel(colData.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
<div class="fn__none">
<div class="fn__hr--small"></div>
<textarea style="margin-left: 22px" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(colData.desc)}">${colData.desc}</textarea>
<div class="fn__hr--small"></div>
<div class="fn__hr"></div>
<textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(colData.desc)}">${colData.desc}</textarea>
</div>
<div class="fn__hr--small"></div>
</div>
</button>
<button class="b3-menu__item" data-type="goUpdateColType" ${colData.type === "block" ? "disabled" : ""}>
@ -120,11 +120,11 @@ export const getEditHTML = (options: {
colData.options = [];
}
colData.options.forEach(item => {
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc)}" data-color="${item.color}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${item.name}</span>
<span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc)}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${escapeHtml(item.name)}</span>
</span>
</div>
<svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
@ -314,7 +314,9 @@ export const bindEditEvent = (options: {
options.menuElement.parentElement.remove();
}
});
descElement.addEventListener("input", () => {
nameElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
});
const tplElement = options.menuElement.querySelector('[data-type="updateTemplate"]') as HTMLTextAreaElement;
if (tplElement) {
tplElement.addEventListener("blur", () => {
@ -666,18 +668,19 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
menu.addItem({
iconHTML: '',
type: "readonly",
label: `<div>
label: `<div class="fn__block">
<div class="fn__flex">
<span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>
<div class="b3-form__icona fn__size200">
<div class="b3-form__icona fn__block">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
<div class="fn__none">
<div class="fn__hr--small"></div>
<textarea style="margin-left: 22px" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
<div class="fn__hr"></div>
<textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
</div>
<div class="fn__hr--small"></div>
</div>`,
bind(element) {
const iconElement = element.querySelector(".b3-menu__avemoji") as HTMLElement;
@ -734,6 +737,9 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
event.preventDefault();
}
});
descElement.addEventListener("input", () => {
inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
});
}
});
menu.addItem({

19
app/src/protyle/render/av/select.ts
View file

@ -31,7 +31,7 @@ const filterSelectHTML = (key: string, options: {
html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${item.color}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1">
<span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc)}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${escapeHtml(item.name)}</span>
</span>
</div>
@ -211,16 +211,15 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
iconHTML: "",
type: "readonly",
label: `<div>
<div class="fn__flex">
<div class="b3-form__icona fn__size200">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
<div class="b3-form__icona fn__block">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
<div class="fn__none">
<div class="fn__hr--small"></div>
<textarea rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
<div class="fn__hr"></div>
<textarea rows="1" class="b3-text-field fn__block" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
</div>
<div class="fn__hr--small"></div>
</div>`,
bind(element) {
const inputElement = element.querySelector("input")
@ -242,7 +241,6 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}
})
descElement.addEventListener("keydown", (event: KeyboardEvent) => {
inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeAriaLabel(descElement.value) : window.siyuan.languages.addDesc);
if (event.isComposing) {
return;
}
@ -250,6 +248,9 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
menu.close();
}
});
descElement.addEventListener("input", () => {
inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
});
}
});
menu.addItem({

13
app/src/protyle/render/av/view.ts
View file

@ -6,7 +6,7 @@ import {focusBlock} from "../../util/selection";
import {Constants} from "../../../constants";
import {upDownHint} from "../../../util/upDownHint";
import {avRender} from "./render";
import {escapeAriaLabel, escapeAttr} from "../../../util/escape";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLElement, element: HTMLElement }) => {
if (options.protyle.disabled) {
@ -156,6 +156,9 @@ export const bindViewEvent = (options: {
options.menuElement.parentElement.remove();
}
});
descElement.addEventListener("input", () => {
inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
});
const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
toggleTitleElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
@ -199,17 +202,17 @@ export const getViewHTML = (data: IAV) => {
</button>
<button class="b3-menu__separator"></button>
<button class="b3-menu__item" data-type="nobg">
<div>
<div class="fn__block">
<div class="fn__flex">
<span class="b3-menu__avemoji" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
<div class="b3-form__icona fn__size200">
<div class="b3-form__icona fn__block">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text" data-value="${escapeAttr(view.name)}">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${view.desc ? escapeAriaLabel(view.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
<div class="fn__none">
<div class="fn__hr--small"></div>
<textarea style="margin-left: 22px" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(view.desc)}">${view.desc}</textarea>
<div class="fn__hr"></div>
<textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(view.desc)}">${view.desc}</textarea>
</div>
</div>
</button>