This commit is contained in:
Vanessa 2023-09-21 10:54:41 +08:00
parent ff7d7216e0
commit 2629e10b8e
3 changed files with 23 additions and 23 deletions

View file

@ -306,16 +306,16 @@ export const addAttrViewColAnimation = (options: {
id: string id: string
}) => { }) => {
if (!options.blockElement) { if (!options.blockElement) {
return return;
} }
options.blockElement.querySelectorAll(".av__row").forEach((item, index) => { options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
let previousElement let previousElement;
if (options.previousId) { if (options.previousId) {
previousElement = item.querySelector(`[data-col-id="${options.previousId}"]`) previousElement = item.querySelector(`[data-col-id="${options.previousId}"]`);
} else { } else {
previousElement = item.lastElementChild.previousElementSibling; previousElement = item.lastElementChild.previousElementSibling;
} }
let html = "" let html = "";
if (index === 0) { if (index === 0) {
html = `<div class="av__cell" data-col-id="${options.id}" data-dtype="${options.type}" style="width: 200px;white-space: nowrap;"> html = `<div class="av__cell" data-col-id="${options.id}" data-dtype="${options.type}" style="width: 200px;white-space: nowrap;">
<div draggable="true" class="av__cellheader"> <div draggable="true" class="av__cellheader">
@ -323,40 +323,40 @@ export const addAttrViewColAnimation = (options: {
<span class="av__celltext">${options.name}</span> <span class="av__celltext">${options.name}</span>
</div> </div>
<div class="av__widthdrag"></div> <div class="av__widthdrag"></div>
</div>` </div>`;
} else { } else {
html = '<div class="av__cell" style="width: 200px"></div>' html = '<div class="av__cell" style="width: 200px"></div>';
} }
previousElement.insertAdjacentHTML("afterend", html) previousElement.insertAdjacentHTML("afterend", html);
}) });
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`)); showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`));
}; };
export const updateAttrViewCellAnimation = (cellElement: HTMLElement) => { export const updateAttrViewCellAnimation = (cellElement: HTMLElement) => {
cellElement.style.opacity = "0.38" cellElement.style.opacity = "0.38";
cellElement.style.backgroundColor = "var(--b3-theme-surface-light)"; cellElement.style.backgroundColor = "var(--b3-theme-surface-light)";
} };
export const removeAttrViewColAnimation = (blockElement: Element, id: string) => { export const removeAttrViewColAnimation = (blockElement: Element, id: string) => {
blockElement.querySelectorAll(`.av__cell[data-col-id="${id}"]`).forEach(item => { blockElement.querySelectorAll(`.av__cell[data-col-id="${id}"]`).forEach(item => {
item.remove(); item.remove();
}) });
} };
export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string) => { export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string) => {
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(`.av__row--header`); const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
let colHTML = "" let colHTML = "";
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => { previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
colHTML += `<div class="av__cell" style="width: ${item.style.width}"></div>` colHTML += `<div class="av__cell" style="width: ${item.style.width}"></div>`;
}) });
let html = "" let html = "";
new Array(size).fill(1).forEach(() => { new Array(size).fill(1).forEach(() => {
html += `<div class="av__row"> html += `<div class="av__row">
<div class="av__firstcol"><img src="/stage/loading-pure.svg"></div> <div class="av__firstcol"><img src="/stage/loading-pure.svg"></div>
${colHTML} ${colHTML}
</div>` </div>`;
}) });
previousElement.insertAdjacentHTML("afterend", html) previousElement.insertAdjacentHTML("afterend", html);
} };

View file

@ -467,7 +467,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
type: type, type: type,
id: colId id: colId
}]); }]);
removeAttrViewColAnimation(blockElement, colId) removeAttrViewColAnimation(blockElement, colId);
} }
}); });
menu.addSeparator(); menu.addSeparator();

View file

@ -1,5 +1,5 @@
import {fetchPost} from "../../../util/fetch"; import {fetchPost} from "../../../util/fetch";
import {getColIconByType, showColMenu} from "./col"; import {getColIconByType} from "./col";
import {Constants} from "../../../constants"; import {Constants} from "../../../constants";
import {getCalcValue} from "./cell"; import {getCalcValue} from "./cell";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";