Vanessa 2025-06-13 10:39:27 +08:00
parent d264ca0ac9
commit e3f08bfafd
6 changed files with 56 additions and 9 deletions

View file

@ -270,6 +270,7 @@
border-radius: var(--b3-border-radius);
display: flex;
flex-direction: column;
position: relative;
&:hover {
.av__gallery-cover {
@ -279,6 +280,10 @@
.av__gallery-fields {
background-color: var(--b3-theme-surface);
}
.av__gallery-actions {
opacity: 1;
}
}
&--select {
@ -329,6 +334,12 @@
border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
flex: 1;
transition: background 100ms ease-out;
white-space: nowrap;
&--wrap {
word-break: break-all;
white-space: pre-wrap;
}
}
&-add {
@ -351,6 +362,15 @@
border-top: 1px solid var(--b3-border-color);
margin-top: 5px;
}
&-actions {
position: absolute;
right: 8px;
top: 8px;
display: flex;
opacity: 0;
transition: var(--b3-transition);
}
}
&__layout {

View file

@ -258,6 +258,14 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "av-gallery-edit") {
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "av-gallery-more") {
event.preventDefault();
event.stopPropagation();
return true;
}
target = target.parentElement;
}

View file

@ -893,7 +893,7 @@ export const renderCellAttr = (cellElement: Element, value: IAVCellValue) => {
}
};
export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => {
export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = true) => {
let text = "";
if ("template" === cellValue.type) {
text = `<span class="av__celltext">${cellValue ? (cellValue.template.content || "") : ""}</span>`;
@ -908,7 +908,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => {
if (cellValue?.isDetached) {
text = `<span class="av__celltext">${Lute.EscapeHTMLStr(cellValue.block.content || "")}</span><span class="b3-chip b3-chip--info b3-chip--small" data-type="block-more">${window.siyuan.languages.more}</span>`;
} else {
text = `<span class="b3-menu__avemoji" data-unicode="${cellValue.block.icon || ""}">${unicode2Emoji(cellValue.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${cellValue.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(cellValue.block.content)}</span><span class="b3-chip b3-chip--info b3-chip--small" data-type="block-more">${window.siyuan.languages.update}</span>`;
text = `<span class="b3-menu__avemoji${showIcon?"":" fn__none"}" data-unicode="${cellValue.block.icon || ""}">${unicode2Emoji(cellValue.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${cellValue.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(cellValue.block.content)}</span><span class="b3-chip b3-chip--info b3-chip--small" data-type="block-more">${window.siyuan.languages.update}</span>`;
}
} else if (cellValue.type === "number") {
text = `<span class="av__celltext" data-content="${cellValue?.number.isNotEmpty ? cellValue?.number.content : ""}">${cellValue?.number.formattedContent || cellValue?.number.content || ""}</span>`;
@ -966,7 +966,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => {
text += `<span class="av__cell--relation"><span> </span><span class="av__celltext" data-id="${item.block?.id}">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
} else {
// data-block-id 用于更新 emoji
text += `<span class="av__cell--relation" data-block-id="${item.block.id}"><span class="b3-menu__avemoji" data-unicode="${item.block.icon || ""}">${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
text += `<span class="av__cell--relation" data-block-id="${item.block.id}"><span class="b3-menu__avemoji${showIcon ? "" : " fn__none"}" data-unicode="${item.block.icon || ""}">${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
}
}
});

View file

@ -86,7 +86,7 @@ export const renderGallery = (options: {
}
}
galleryHTML += '<div class="av__gallery-fields">';
galleryHTML += `<div class="av__gallery-fields${view.wrapField ? " av__gallery-fields--wrap" : ""}">`;
item.values.forEach((cell, fieldsIndex) => {
if (view.fields[fieldsIndex].hidden) {
return;
@ -100,9 +100,14 @@ ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") +
data-dtype="${cell.valueType}"
${cell.value?.isDetached ? ' data-detached="true"' : ""}
style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}</div>`;
${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, view.showIcon)}</div>`;
});
galleryHTML += "</div></div>";
galleryHTML += `</div>
<div class="av__gallery-actions">
<span class="protyle-icon protyle-icon--first" data-type="av-gallery-edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span class="protyle-icon protyle-icon--last" data-type="av-gallery-more"><svg><use xlink:href="#iconMore"></use></svg></span>
</div>
</div>`;
});
galleryHTML += `<div class="av__gallery-add" data-type="av-add-bottom"><svg class="svg"><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>${window.siyuan.languages.addCard}</div>`;
let tabHTML = "";

View file

@ -165,6 +165,13 @@ export const bindLayoutEvent = (options: {
blockID,
data: !checked
}]);
options.blockElement.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji').forEach(item => {
if (checked) {
item.classList.remove("fn__none");
} else {
item.classList.add("fn__none");
}
});
});
const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-wrap"]') as HTMLInputElement;
toggleWrapElement.addEventListener("change", () => {
@ -182,6 +189,13 @@ export const bindLayoutEvent = (options: {
blockID,
data: !checked
}]);
options.blockElement.querySelectorAll('.av__gallery-fields').forEach(item => {
if (checked) {
item.classList.add("av__gallery-fields--wrap");
} else {
item.classList.remove("av__gallery-fields--wrap");
}
});
});
};

View file

@ -849,9 +849,9 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
"setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat", "removeAttrViewBlock",
"replaceAttrViewBlock", "updateAttrViewColTemplate", "setAttrViewColPin", "addAttrViewView", "setAttrViewColIcon",
"removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
"updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey",
"duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewColDesc", "setAttrViewCoverFrom", "setAttrViewShowIcon",
"setAttrViewCoverFromAssetKeyID", "changeAttrViewLayout"].includes(operation.action)) {
"updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
"duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
"changeAttrViewLayout"].includes(operation.action)) {
if (!isUndo) {
// 撤销 transaction 会进行推送,需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
refreshAV(protyle, operation);