github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-19 02:21:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 col width https://github.com/siyuan-note/siyuan/issues/7536

Browse Source
This commit is contained in:
Vanessa 2023-07-02 23:58:00 +08:00
parent b2f739e70c
commit 2894cd2578
5 changed files with 124 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/src/assets/scss/business/_av.scss
View File

@ -58,18 +58,6 @@
opacity: 1;
}
&--header .av__cell {
display: flex;
align-items: center;
svg {
height: 14px;
width: 14px;
color: var(--b3-theme-on-surface);
margin-right: 5px;
}
}
&--select {
background-color: var(--b3-theme-primary-lightest);
@ -80,6 +68,10 @@
&--header {
z-index: 1;
.av__cell {
padding: 0;
}
}
&--header,
@ -89,10 +81,34 @@
}
&__cell {
box-sizing: border-box;
position: relative;
padding: 5px;
flex-shrink: 0;
border-right: 1px solid var(--b3-theme-surface-lighter);
display: flex;
align-items: center;
svg {
height: 14px;
width: 14px;
color: var(--b3-theme-on-surface);
margin-right: 5px;
flex-shrink: 0;
}
}
&__cellheader {
padding: 5px;
display: flex;
align-items: center;
flex: 1;
overflow: hidden;
}
&__celltext {
flex: 1;
overflow: hidden;
border-right: 1px solid var(--b3-theme-surface-lighter)
}
&__firstcol {
@ -111,6 +127,20 @@
}
}
&__widthdrag {
position: absolute;
cursor: col-resize;
width: 5px;
height: 100%;
right: -2.5px;
transition: background 200ms ease-out 0s;
z-index: 1;
&:hover {
background-color: var(--b3-theme-primary);
}
}
&__panel {
z-index: 504;
position: relative;

23
app/src/protyle/render/av/action.ts
View File

@ -68,7 +68,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
return true;
}
const headerMoreElement = hasClosestByAttribute(event.target, "data-type","av-header-more");
const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more");
if (headerMoreElement) {
openMenuPanel(protyle, blockElement, "properties");
event.preventDefault();
@ -76,22 +76,25 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
return true;
}
const moreElement = hasClosestByAttribute(event.target, "data-type","av-more");
const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more");
if (moreElement) {
openMenuPanel(protyle, blockElement, "config");
event.preventDefault();
event.stopPropagation();
return true;
}
const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader");
if (cellHeaderElement) {
showHeaderCellMenu(protyle, blockElement, cellHeaderElement.parentElement);
event.preventDefault();
event.stopPropagation();
return true;
}
const cellElement = hasClosestByClassName(event.target, "av__cell");
if (cellElement) {
if (cellElement.parentElement.classList.contains("av__row--header")) {
showHeaderCellMenu(protyle, blockElement, cellElement);
event.preventDefault();
event.stopPropagation();
} else {
popTextCell(protyle, cellElement);
}
if (cellElement && !cellElement.parentElement.classList.contains("av__row--header")) {
popTextCell(protyle, cellElement);
event.preventDefault();
event.stopPropagation();
return true;
}
return false;

28
app/src/protyle/render/av/render.ts
View File

@ -28,11 +28,14 @@ export const avRender = (element: Element, cb?: () => void) => {
if (column.hidden) {
return;
}
tableHTML += `<div draggable="true" class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}"
style="width: ${column.width || 200}px;
tableHTML += `<div class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}"
style="width: ${column.width || "200px"};
${column.wrap ? "" : "white-space: nowrap;"}">
<svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg>
<span>${column.name}</span>
<div draggable="true" class="av__cellheader">
<svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg>
<span class="av__celltext">${column.name}</span>
</div>
<div class="av__widthdrag"></div>
</div>`;
index++;
});
@ -70,10 +73,10 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
}
tableHTML += `<div class="av__cell" data-id="${cell.id}" data-index="${index}"
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
style="width: ${data.columns[index].width || 200}px;
${data.columns[index].wrap ? "" : "white-space: nowrap;"}
style="width: ${data.columns[index].width || "200px"};
${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
${data.columns[index].wrap ? "" : "white-space: nowrap;"}
${cell.color ? `color:${cell.color};` : ""}"><span class="av__celltext">${text}</span></div>`;
});
tableHTML += "<div></div></div>";
});
@ -141,6 +144,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
showHeaderCellMenu(protyle, item, item.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement);
});
});
} else if (operation.action === "setAttrViewColWidth") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.parentID}"]`)).forEach((item: HTMLElement) => {
const cellElement = item.querySelector(`.av__cell[data-id="${operation.id}"]`) as HTMLElement;
if (!cellElement || cellElement.style.width === operation.data) {
return
}
const index = cellElement.dataset.index;
item.querySelectorAll(".av__row").forEach(rowItem => {
(rowItem.querySelector(`[data-index="${index}"]`) as HTMLElement).style.width = operation.data;
})
});
} else {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.parentID}"]`)).forEach((item: HTMLElement) => {
item.removeAttribute("data-render");

6
app/src/protyle/util/editorCommonEvent.ts
View File

@ -712,9 +712,9 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeListItem${Constants.ZWSP}${target.parentElement.getAttribute("data-subtype")}${Constants.ZWSP}${[target.parentElement.getAttribute("data-node-id")]}`,
protyle.wysiwyg.element.innerHTML);
return;
} else if (target.classList.contains("av__cell")) {
window.siyuan.dragElement = target;
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-id")]}`,
} else if (target.classList.contains("av__cellheader")) {
window.siyuan.dragElement = target.parentElement;
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-id")]}`,
target.innerHTML);
return;
} else if (target.classList.contains("av__gutters")) {

45
app/src/protyle/wysiwyg/index.ts
View File

@ -333,7 +333,9 @@ export class WYSIWYG {
hideElements(["select"], protyle);
}
const target = event.target as HTMLElement;
if (hasClosestByClassName(target, "protyle-action") || hasClosestByClassName(target, "av__gutters")) {
if (hasClosestByClassName(target, "protyle-action") ||
hasClosestByClassName(target, "av__gutters") ||
hasClosestByClassName(target, "av__cellheader")) {
return;
}
const documentSelf = document;
@ -343,6 +345,47 @@ export class WYSIWYG {
const mostRight = mostLeft + (protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight)) - 1;
const mostBottom = rect.bottom;
const y = event.clientY;
// av col resize
if (!protyle.disabled && target.classList.contains("av__widthdrag")) {
const nodeElement = hasClosestBlock(target);
if (!nodeElement) {
return;
}
const avId = nodeElement.getAttribute("data-av-id");
const dragElement = target.parentElement;
const oldWidth = dragElement.clientWidth;
const dragIndex = dragElement.getAttribute("data-index");
let newWidth: string
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
newWidth = oldWidth + (moveEvent.clientX - event.clientX) + "px";
dragElement.parentElement.parentElement.querySelectorAll(".av__row").forEach(item => {
(item.querySelector(`[data-index="${dragIndex}"]`) as HTMLElement).style.width = newWidth;
})
};
documentSelf.onmouseup = () => {
documentSelf.onmousemove = null;
documentSelf.onmouseup = null;
documentSelf.ondragstart = null;
documentSelf.onselectstart = null;
documentSelf.onselect = null;
transaction(protyle, [{
action: "setAttrViewColWidth",
id: dragElement.getAttribute("data-id"),
parentID: avId,
data: newWidth
}], [{
action: "setAttrViewColWidth",
id: dragElement.getAttribute("data-id"),
parentID: avId,
data: oldWidth + "px"
}]);
};
event.stopPropagation();
event.preventDefault();
return;
}
// 图片、iframe、video 缩放
if (!protyle.disabled && target.classList.contains("protyle-action__drag")) {
const nodeElement = hasClosestBlock(target);