Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-19 16:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/9092

Browse source
This commit is contained in:
Vanessa 2023-09-21 10:54:17 +08:00
parent 00af741bbe
commit ff7d7216e0
10 changed files with 131 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -173,6 +173,7 @@
border-right: 1px solid var(--b3-theme-surface-lighter);
display: flex;
align-items: center;
transition: var(--b3-transition);
[data-type="block-ref"] {
display: none;

4
app/src/protyle/hint/extend.ts
View file

@ -46,11 +46,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
filter: ["ai chat"],
value: Constants.ZWSP + 5,
html: '<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSparkles"></use></svg><span class="b3-list-item__text">AI Chat</span></div>',
},/* {
}, {
filter: ["数据库", "属性视图", "shujuku", "shuxingshitu", "sjk", "sxst", "database", "attribute view"],
value: '<div data-type="NodeAttributeView" data-av-type="table"></div>',
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.database}</span></div>`,
}, */{
}, {
filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"],
value: Constants.ZWSP + 4,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.newFile}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.general.newFile.custom)}</span></div>`,

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

@ -297,6 +297,53 @@ export const updateAVName = (protyle: IProtyle, blockElement: Element) => {
nameElement.dataset.title = nameElement.textContent.trim();
};
export const addAttrViewColAnimation = (options: {
blockElement: Element,
protyle: IProtyle,
type: TAVCol,
name: string,
previousId?: string,
id: string
}) => {
if (!options.blockElement) {
return
}
options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
let previousElement
if (options.previousId) {
previousElement = item.querySelector(`[data-col-id="${options.previousId}"]`)
} else {
previousElement = item.lastElementChild.previousElementSibling;
}
let html = ""
if (index === 0) {
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">
<svg><use xlink:href="#${getColIconByType(options.type)}"></use></svg>
<span class="av__celltext">${options.name}</span>
</div>
<div class="av__widthdrag"></div>
</div>`
} else {
html = '<div class="av__cell" style="width: 200px"></div>'
}
previousElement.insertAdjacentHTML("afterend", html)
})
window.siyuan.menus.menu.remove();
showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`));
};
export const updateAttrViewCellAnimation = (cellElement: HTMLElement) => {
cellElement.style.opacity = "0.38"
cellElement.style.backgroundColor = "var(--b3-theme-surface-light)";
}
export const removeAttrViewColAnimation = (blockElement: Element, id: string) => {
blockElement.querySelectorAll(`.av__cell[data-col-id="${id}"]`).forEach(item => {
item.remove();
})
}
export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string) => {
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(`.av__row--header`);
let colHTML = ""

59
app/src/protyle/render/av/addCol.ts
View file

@ -1,7 +1,8 @@
import {Menu} from "../../../plugin/Menu";
import {transaction} from "../../wysiwyg/transaction";
import {addAttrViewColAnimation} from "./action";
export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
export const addCol = (protyle: IProtyle, blockElement: Element) => {
const menu = new Menu("av-header-add");
const avID = blockElement.getAttribute("data-av-id");
menu.addItem({
@ -20,6 +21,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "text",
name: "Text",
id
});
}
});
menu.addItem({
@ -38,6 +46,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "number",
name: "Number",
id
});
}
});
menu.addItem({
@ -56,6 +71,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "select",
name: "Select",
id
});
}
});
menu.addItem({
@ -74,6 +96,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "mSelect",
name: "Multi-select",
id
});
}
});
menu.addItem({
@ -92,6 +121,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "date",
name: "Date",
id
});
}
});
menu.addItem({
@ -110,6 +146,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "url",
name: "URL",
id
});
}
});
menu.addItem({
@ -128,6 +171,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "email",
name: "Email",
id
});
}
});
menu.addItem({
@ -146,6 +196,13 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
id,
avID,
}]);
addAttrViewColAnimation({
blockElement: blockElement,
protyle: protyle,
type: "phone",
name: "Phone",
id
});
}
});
return menu;

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

@ -2,6 +2,7 @@ import {transaction} from "../../wysiwyg/transaction";
import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
import {openMenuPanel} from "./openMenuPanel";
import {Menu} from "../../../plugin/Menu";
import {updateAttrViewCellAnimation} from "./action";
export const getCalcValue = (column: IAVColumn) => {
if (!column.calc || !column.calc.result) {
@ -439,6 +440,7 @@ const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElem
[type]: oldValue
}
});
updateAttrViewCellAnimation(item);
});
transaction(protyle, doOperations, undoOperations);
setTimeout(() => {

14
app/src/protyle/render/av/col.ts
View file

@ -6,6 +6,7 @@ import {getDefaultOperatorByType, setFilter} from "./filter";
import {genCellValue} from "./cell";
import {openMenuPanel} from "./openMenuPanel";
import {getLabelByNumberFormat} from "./number";
import {addAttrViewColAnimation, removeAttrViewColAnimation} from "./action";
export const duplicateCol = (options: {
protyle: IProtyle,
@ -72,6 +73,14 @@ export const duplicateCol = (options: {
avID: options.avID,
}]);
}
addAttrViewColAnimation({
blockElement: options.protyle.wysiwyg.element.querySelector(`[data-node-id="${options.nodeID}"]`),
protyle: options.protyle,
type: options.type,
name: options.newValue,
previousId: options.colId,
id
});
};
export const getEditHTML = (options: {
@ -274,7 +283,7 @@ export const updateHeader = (rowElement: HTMLElement) => {
avHeadElement.style.position = "sticky";
};
export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellElement: HTMLElement) => {
export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElement: HTMLElement) => {
const type = cellElement.getAttribute("data-dtype") as TAVCol;
const colId = cellElement.getAttribute("data-col-id");
const avID = blockElement.getAttribute("data-av-id");
@ -405,7 +414,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
filter,
protyle,
data: avData,
target: cellElement,
target: blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`),
});
});
}
@ -458,6 +467,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
type: type,
id: colId
}]);
removeAttrViewColAnimation(blockElement, colId)
}
});
menu.addSeparator();

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

@ -1,5 +1,6 @@
import {transaction} from "../../wysiwyg/transaction";
import * as dayjs from "dayjs";
import {updateAttrViewCellAnimation} from "./action";
export const getDateHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
let hasEndDate = true;
@ -152,6 +153,7 @@ export const setDateValue = (options: {
date: oldValue
}
});
updateAttrViewCellAnimation(item);
});
transaction(options.protyle, cellDoOperations, cellUndoOperations);
};

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

@ -9,10 +9,11 @@ import {addFilter, getFiltersHTML, setFilter} from "./filter";
import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
import {bindDateEvent, getDateHTML, setDateValue} from "./date";
import {formatNumber} from "./number";
import {removeAttrViewColAnimation} from "./action";
export const openMenuPanel = (options: {
protyle: IProtyle,
blockElement: HTMLElement,
blockElement: Element,
type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" | "date",
colId?: string, // for edit
cellElements?: HTMLElement[] // for select & date
@ -608,6 +609,7 @@ export const openMenuPanel = (options: {
type: colData.type,
id: colId
}]);
removeAttrViewColAnimation(options.blockElement, colId);
avPanelElement.remove();
event.preventDefault();
event.stopPropagation();

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

@ -171,14 +171,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
lastElement = protyle.contentElement;
lastParentID = operation.parentID;
const avId = operation.avID;
if (operation.action === "addAttrViewCol") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {
item.removeAttribute("data-render");
avRender(item, protyle, () => {
showColMenu(protyle, item, item.querySelector(`.av__row--header .av__cell[data-col-id="${operation.id}"]`));
});
});
} else if (operation.action === "setAttrViewColWidth") {
if (operation.action === "setAttrViewColWidth") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {
const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement;
if (!cellElement || cellElement.style.width === operation.data) {

3
app/src/protyle/render/av/select.ts
View file

@ -4,6 +4,7 @@ import {hasClosestByClassName} from "../../util/hasClosest";
import {confirmDialog} from "../../../dialog/confirmDialog";
import {upDownHint} from "../../../util/upDownHint";
import {bindEditEvent, getEditHTML} from "./col";
import {updateAttrViewCellAnimation} from "./action";
const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
let html = "";
@ -91,6 +92,7 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
mSelect: oldValue
}
});
updateAttrViewCellAnimation(item);
});
transaction(protyle, doOperations, undoOperations);
target.remove();
@ -460,6 +462,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
[colData.type]: oldValue
}
});
updateAttrViewCellAnimation(item);
});
if (currentElement.querySelector(".b3-menu__accelerator")) {