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

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

Browse source
This commit is contained in:
Vanessa 2024-12-05 11:09:09 +08:00
parent 2a9290d0b6
commit af6ba1b7fa
6 changed files with 40 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -470,7 +470,7 @@
max-width: 50vw;
&__item .b3-chip {
max-width: 90vw;
max-width: 100%;
margin: 3px 0;
padding-top: 4px;
padding-bottom: 4px;

18
app/src/dialog/tooltip.ts
View file

@ -1,8 +1,6 @@
import {isMobile} from "../util/functions";
import {Constants} from "../constants";
let hideTooltipTimeout: number
export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
if (isMobile()) {
return;
@ -13,10 +11,7 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
return;
}
// 清除 hideTooltip 的定时器
clearTimeout(hideTooltipTimeout);
const className = tooltipClass?`tooltip tooltip--${tooltipClass}`:"tooltip";
const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
let messageElement = document.getElementById("tooltip");
if (!messageElement) {
document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);
@ -87,11 +82,8 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
};
export const hideTooltip = () => {
clearTimeout(hideTooltipTimeout);
hideTooltipTimeout = window.setTimeout(() => {
const messageElement = document.getElementById("tooltip");
if (messageElement) {
messageElement.remove();
}
}, Constants.TIMEOUT_TRANSITION);
const messageElement = document.getElementById("tooltip");
if (messageElement) {
messageElement.remove();
}
};

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

@ -98,7 +98,7 @@ export const getEditHTML = (options: {
</div>
<div class="fn__none">
<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>
<textarea style="margin-left: 22px;width: calc(100% - 22px);" placeholder="${window.siyuan.languages.addDesc}" 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>
@ -120,10 +120,11 @@ export const getEditHTML = (options: {
colData.options = [];
}
colData.options.forEach(item => {
const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : ""
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 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})">
<div class="fn__flex-1 ariaLabel" data-position="2parentW" aria-label="${airaLabel}">
<span class="b3-chip" 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>
@ -667,21 +668,19 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
});
menu.addItem({
iconHTML: "",
type: "readonly",
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__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>
type: "empty",
label: `<div class="fn__hr"></div><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__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 class="fn__none">
<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>`,
</div>
<div class="fn__none">
<div class="fn__hr"></div>
<textarea style="margin-left: 22px;width: calc(100% - 22px);" placeholder="${window.siyuan.languages.addDesc}" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
</div>
<div class="fn__hr--small"></div>`,
bind(element) {
const iconElement = element.querySelector(".b3-menu__avemoji") as HTMLElement;
iconElement.addEventListener("click", (event) => {

4
app/src/protyle/render/av/filter.ts
View file

@ -330,7 +330,7 @@ export const setFilter = async (options: {
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<input class="b3-text-field fn__block" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">`,
label: `<input class="b3-text-field fn__size200" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">`,
bind(element) {
const selectSearchElement = element.querySelector("input");
selectSearchElement.addEventListener("keydown", (event: KeyboardEvent) => {
@ -366,7 +366,7 @@ export const setFilter = async (options: {
});
menu.addItem({
icon,
label: `<span class="b3-chip b3-chip--middle" data-name="${option.name}" data-color="${option.color}" style="margin:3px 0;background-color:var(--b3-font-background${option.color});color:var(--b3-font-color${option.color})">
label: `<span class="b3-chip b3-chip--middle" data-name="${option.name}" data-color="${option.color}" style="max-width: 178px;margin:3px 0;background-color:var(--b3-font-background${option.color});color:var(--b3-font-color${option.color})">
<span class="fn__ellipsis">${option.name}</span>
</span>`,
bind(element) {

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

@ -28,10 +28,11 @@ const filterSelectHTML = (key: string, options: {
if (!key ||
(key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : ""
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})">
<div class="fn__flex-1 ariaLabel" data-position="2parentW" aria-label="${airaLabel}">
<span class="b3-chip" 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>
@ -209,18 +210,17 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<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"></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>`,
type: "empty",
label: `<div class="fn__hr"></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"></div>
<textarea rows="1" placeholder="${window.siyuan.languages.addDesc}" class="b3-text-field fn__block" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
</div>
<div class="fn__hr--small"></div>`,
bind(element) {
const inputElement = element.querySelector("input");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
@ -601,7 +601,7 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[], init
const selected: string[] = [];
cellValues[0].mSelect?.forEach((item) => {
selected.push(item.content);
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="white-space: nowrap;max-width:100%;background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})"><span class="fn__ellipsis">${escapeHtml(item.content)}</span><svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
});
return `<div class="b3-menu__items">

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

@ -212,7 +212,7 @@ export const getViewHTML = (data: IAV) => {
</div>
<div class="fn__none">
<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>
<textarea style="margin-left: 22px;width: calc(100% - 22px);" placeholder="${window.siyuan.languages.addDesc}" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(view.desc)}">${view.desc}</textarea>
</div>
</div>
</button>