Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 09:30:14 +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 {
transition: margin .2s cubic-bezier(0, 0, .2, 1) 0ms;
&[disabled] {
opacity: .38;
cursor: not-allowed;
}
}
&__item:hover .b3-menu__action {

4
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 => {
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__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>`}
<span>${item.key.name}</span>
</div>
@ -326,14 +326,12 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
event.preventDefault();
break;
} else if (type === "editCol") {
if (target.classList.contains("fn__pointer")) {
openMenuPanel({
protyle,
blockElement,
type: "edit",
colId: target.parentElement.dataset.colId
});
}
event.stopPropagation();
event.preventDefault();
break;

28
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 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 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="fn__space"></span>
<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" : ""}>
</label>`;
}
return `<div class="b3-menu__items">
${html}
<button class="b3-menu__separator"></button>
<button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
if (colData.type !== "block") {
html += ` <button class="b3-menu__separator"></button>
<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>
<span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
</button>
<button class="b3-menu__item${colData.type === "relation" ? " fn__none" : ""}" data-type="duplicateCol">
</button>
<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>
<span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
</button>
<button class="b3-menu__item" data-type="removeCol">
</button>
<button class="b3-menu__item" data-type="removeCol">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button>
</div>
</button>`
}
return `<div class="b3-menu__items">${html}</div>
<div class="b3-menu__items fn__none">
<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">
@ -444,6 +444,8 @@ export const getColNameByType = (type: TAVCol) => {
return window.siyuan.languages.assets;
case "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");
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__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>
<span>${getColNameByType(options.type)}</span>
</div>
@ -614,7 +616,6 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
});
}
});
if (type !== "block") {
menu.addItem({
icon: "iconEdit",
label: window.siyuan.languages.edit,
@ -634,7 +635,6 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
});
}
});
}
menu.addSeparator();
menu.addItem({
icon: "iconUp",

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

@ -820,7 +820,7 @@ export const openMenuPanel = (options: {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
data,
colId: target.parentElement.dataset.id,
colId: target.dataset.id,
isCustomAttr
});
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
@ -1188,24 +1188,24 @@ const getPropertiesHTML = (data: IAVTable) => {
let hideHTML = "";
data.columns.forEach((item: IAVColumn) => {
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>
<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.name}
</div>
<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>`;
} 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>
<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.name}
</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="editCol"><use xlink:href="#iconEdit"></use></svg>
<svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
</button>`;
}
});