Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 17:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2024-04-07 10:16:11 +08:00
parent d59e5e2a73
commit d458eeb1bc
4 changed files with 56 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -456,6 +456,11 @@
&__item { &__item {
transition: margin .2s cubic-bezier(0, 0, .2, 1) 0ms; transition: margin .2s cubic-bezier(0, 0, .2, 1) 0ms;
&[disabled] {
opacity: .38;
cursor: not-allowed;
}
} }
&__item:hover .b3-menu__action { &__item:hover .b3-menu__action {

16
app/src/protyle/render/av/blockAttr.ts
View file

@ -175,7 +175,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
table.keyValues?.forEach(item => { table.keyValues?.forEach(item => {
html += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}"> html += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div> <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
<div class="block__logo ariaLabel${item.values[0].type === "block" ? "" : " fn__pointer"}" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}"> <div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`} ${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
<span>${item.key.name}</span> <span>${item.key.name}</span>
</div> </div>
@ -326,14 +326,12 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
event.preventDefault(); event.preventDefault();
break; break;
} else if (type === "editCol") { } else if (type === "editCol") {
if (target.classList.contains("fn__pointer")) { openMenuPanel({
openMenuPanel({ protyle,
protyle, blockElement,
blockElement, type: "edit",
type: "edit", colId: target.parentElement.dataset.colId
colId: target.parentElement.dataset.colId });
});
}
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
break; break;

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

@ -131,7 +131,7 @@ export const getEditHTML = (options: {
<span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span> <span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
<span class="b3-menu__label" style="padding: 4px;display: flex;"><input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}"></span> <span class="b3-menu__label" style="padding: 4px;display: flex;"><input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}"></span>
</button> </button>
<button class="b3-menu__item" data-type="goUpdateColType"> <button class="b3-menu__item" data-type="goUpdateColType" ${colData.type === "block" ? "disabled" : ""}>
<span class="b3-menu__label">${window.siyuan.languages.type}</span> <span class="b3-menu__label">${window.siyuan.languages.type}</span>
<span class="fn__space"></span> <span class="fn__space"></span>
<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>
@ -200,22 +200,22 @@ export const getEditHTML = (options: {
<input data-type="fillCreated" type="checkbox" class="b3-switch b3-switch--menu" ${colData.date?.autoFillNow ? "checked" : ""}> <input data-type="fillCreated" type="checkbox" class="b3-switch b3-switch--menu" ${colData.date?.autoFillNow ? "checked" : ""}>
</label>`; </label>`;
} }
return `<div class="b3-menu__items"> if (colData.type !== "block") {
${html} html += ` <button class="b3-menu__separator"></button>
<button class="b3-menu__separator"></button> <button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
<button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}"> <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
<svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg> <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
<span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span> </button>
</button> <button class="b3-menu__item${colData.type === "relation" ? " fn__none" : ""}" data-type="duplicateCol">
<button class="b3-menu__item${colData.type === "relation" ? " fn__none" : ""}" data-type="duplicateCol"> <svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
<svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg> <span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
<span class="b3-menu__label">${window.siyuan.languages.duplicate}</span> </button>
</button> <button class="b3-menu__item" data-type="removeCol">
<button class="b3-menu__item" data-type="removeCol"> <svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
<svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg> <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span> </button>`
</button> }
</div> return `<div class="b3-menu__items">${html}</div>
<div class="b3-menu__items fn__none"> <div class="b3-menu__items fn__none">
<button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}"> <button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goEditCol"> <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goEditCol">
@ -444,6 +444,8 @@ export const getColNameByType = (type: TAVCol) => {
return window.siyuan.languages.assets; return window.siyuan.languages.assets;
case "checkbox": case "checkbox":
return window.siyuan.languages.checkbox; return window.siyuan.languages.checkbox;
case "block":
return window.siyuan.languages["_attrView"].key;
} }
}; };
@ -520,7 +522,7 @@ const addAttrViewColAnimation = (options: {
const nodeId = options.blockElement.getAttribute("data-node-id"); const nodeId = options.blockElement.getAttribute("data-node-id");
options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}"> options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}">
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div> <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
<div class="block__logo ariaLabel" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}"> <div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">
<svg class="block__logoicon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg> <svg class="block__logoicon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>
<span>${getColNameByType(options.type)}</span> <span>${getColNameByType(options.type)}</span>
</div> </div>
@ -614,27 +616,25 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
}); });
} }
}); });
if (type !== "block") { menu.addItem({
menu.addItem({ icon: "iconEdit",
icon: "iconEdit", label: window.siyuan.languages.edit,
label: window.siyuan.languages.edit, click() {
click() { const colName = (menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
const colName = (menu.element.querySelector(".b3-text-field") as HTMLInputElement).value; openMenuPanel({
openMenuPanel({ protyle,
protyle, blockElement,
blockElement, type: "edit",
type: "edit", colId,
colId, cb(avElement) {
cb(avElement) { // 修改名字后点击编辑，需要更新名字
// 修改名字后点击编辑，需要更新名字 const editNameElement = avElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement;
const editNameElement = avElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement; editNameElement.value = colName;
editNameElement.value = colName; editNameElement.select();
editNameElement.select(); }
} });
}); }
} });
});
}
menu.addSeparator(); menu.addSeparator();
menu.addItem({ menu.addItem({
icon: "iconUp", icon: "iconUp",

10
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -820,7 +820,7 @@ export const openMenuPanel = (options: {
menuElement.innerHTML = getEditHTML({ menuElement.innerHTML = getEditHTML({
protyle: options.protyle, protyle: options.protyle,
data, data,
colId: target.parentElement.dataset.id, colId: target.dataset.id,
isCustomAttr isCustomAttr
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
@ -1188,24 +1188,24 @@ const getPropertiesHTML = (data: IAVTable) => {
let hideHTML = ""; let hideHTML = "";
data.columns.forEach((item: IAVColumn) => { data.columns.forEach((item: IAVColumn) => {
if (item.hidden) { if (item.hidden) {
hideHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}"> hideHTML += `<button class="b3-menu__item" data-type="editCol" draggable="true" data-id="${item.id}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="b3-menu__label fn__flex"> <div class="b3-menu__label fn__flex">
${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`} ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
${item.name} ${item.name}
</div> </div>
<svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEye"></use></svg> <svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEye"></use></svg>
<svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
</button>`; </button>`;
} else { } else {
showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}"> showHTML += `<button class="b3-menu__item" data-type="editCol" draggable="true" data-id="${item.id}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="b3-menu__label fn__flex"> <div class="b3-menu__label fn__flex">
${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`} ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
${item.name} ${item.name}
</div> </div>
<svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEyeoff"></use></svg> <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEyeoff"></use></svg>
<svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="editCol"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
</button>`; </button>`;
} }
}); });