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

🐛 Fixed the issue that the gutters of attribute view overlapped with layout resize bar (#9772)

Browse source
This commit is contained in:
Yingyi / 颖逸 2023-11-29 16:09:43 +08:00 • committed by GitHub
parent d3277285e8
commit 27ffdc45d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,11 +63,8 @@
&__gutters {
@extend .protyle-gutters;
position: fixed;
top: 0;
left: -44px;
opacity: 0;
display: flex;
display: none;
z-index: 2;
svg {
height: 25px;
@ -108,7 +105,7 @@
}
.av__gutters {
opacity: 1;
display: flex;
}
}

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

@ -69,7 +69,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
return true;
}
const gutterElement = hasClosestByClassName(event.target, "ariaLabel");
const gutterElement = hasClosestByClassName(event.target, "av__gutter");
if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
const rowElement = hasClosestByClassName(gutterElement, "av__row");
if (!rowElement) {

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

@ -115,8 +115,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}">
<div class="av__gutters">
<button class="ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
<button class="ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
<button class="av__gutter ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
<button class="av__gutter ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
</div>`;
if (pinIndex > -1) {
tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';

8
app/src/protyle/wysiwyg/index.ts
View file

@ -1459,7 +1459,13 @@ export class WYSIWYG {
// database 行块标
const rowElement = hasClosestByClassName(event.target, "av__row");
if (rowElement && rowElement.dataset.id) {
rowElement.firstElementChild.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - 44}px;top:${rowElement.getBoundingClientRect().top}px`);
const scrollElement = hasClosestByClassName(rowElement, "av__scroll");
const guttersElement = rowElement.querySelector<HTMLElement>(".av__gutters");
if (scrollElement && guttersElement) {
const width = guttersElement.offsetWidth;
guttersElement.style.top = `${rowElement.getBoundingClientRect().top}px`;
guttersElement.style.left = `${scrollElement.getBoundingClientRect().left - width}px`;
}
}
protyle.gutter.render(protyle, nodeElement, this.element);
}