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

✨ https://github.com/siyuan-note/siyuan/issues/8699

Browse source
This commit is contained in:
Vanessa 2023-07-15 22:24:54 +08:00
parent db1fac2530
commit 49b9afcd54
6 changed files with 211 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
box-sizing: border-box;
font-size: 14px;
&:hover .av__row--footer {
&:hover .av__row--footer > .av__calc--show {
opacity: 1;
}
@ -76,6 +76,7 @@
.av__cell {
padding: 0;
transition: background 20ms ease-in 0s;
&:hover {
background-color: var(--b3-list-icon-hover);
@ -92,15 +93,21 @@
display: flex;
border-top: 1px solid var(--b3-theme-surface-lighter);
color: var(--b3-theme-on-surface);
opacity: 0;
&:hover > .av__calc,
&.av__row--show > .av__calc {
opacity: 1;
}
& > .av__calc {
transition: opacity 150ms linear, background 20ms ease-in 0s;
display: flex;
align-items: center;
padding: 5px 5px 5px 7px;
border-right: 1px;
flex-direction: row-reverse;
box-sizing: border-box;
opacity: 0;
svg {
height: 10px;
@ -119,6 +126,7 @@
padding: 5px 5px 5px 7px;
display: flex;
align-items: center;
transition: background 20ms ease-in 0s;
svg {
height: 12px;
@ -191,7 +199,7 @@
width: 5px;
height: 100%;
right: -2.5px;
transition: background 200ms ease-out 0s;
transition: background 20ms ease-in 0s;
z-index: 1;
&:hover {

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

@ -3,7 +3,7 @@ import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../
import {transaction} from "../../wysiwyg/transaction";
import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem";
import {popTextCell} from "./cell";
import {openCalcMenu, popTextCell} from "./cell";
import {getColIconByType, showColMenu, updateHeader} from "./col";
import {emitOpenMenu} from "../../../plugin/EventBus";
import {addCol} from "./addCol";
@ -115,6 +115,14 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.stopPropagation();
return true;
}
const calcElement = hasClosestByClassName(event.target, "av__calc");
if (calcElement) {
openCalcMenu(protyle, calcElement);
event.preventDefault();
event.stopPropagation();
return true;
}
return false;
};

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

@ -1,6 +1,7 @@
import {transaction} from "../../wysiwyg/transaction";
import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
import {openMenuPanel} from "./openMenuPanel";
import {Menu} from "../../../plugin/Menu";
export const genCellValue = (colType: TAVCol, value: string | {
content: string,
@ -51,6 +52,185 @@ export const genCellValue = (colType: TAVCol, value: string | {
}
};
const calcItem = (options: {
menu: Menu,
protyle: IProtyle,
label: string,
operator: string,
oldOperator: string,
colId: string,
avId: string
}) => {
options.menu.addItem({
iconHTML: "",
label: options.label,
click() {
transaction(options.protyle, [{
action: "setAttrViewColCalc",
avID: options.avId,
id: options.colId,
data: {
operator: options.operator
}
}], [{
action: "setAttrViewColCalc",
avID: options.avId,
id: options.colId,
data: {
operator: options.oldOperator
}
}]);
}
});
}
export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement) => {
const blockElement = hasClosestBlock(calcElement);
if (!blockElement) {
return;
}
calcElement.parentElement.classList.add("av__row--show");
const menu = new Menu("av-calc", () => {
calcElement.parentElement.classList.remove("av__row--show");
});
if (menu.isOpen) {
return;
}
const type = calcElement.dataset.dtype as TAVCol;
const colId = calcElement.dataset.id;
const avId = blockElement.dataset.avId;
const oldOperator = calcElement.dataset.operator;
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "",
label: window.siyuan.languages.calcOperatorNone
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count all",
label: window.siyuan.languages.calcOperatorCountAll
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count values",
label: window.siyuan.languages.calcOperatorCountValues
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count unique values",
label: window.siyuan.languages.calcOperatorCountUniqueValues
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count empty",
label: window.siyuan.languages.calcOperatorCountEmpty
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count not empty",
label: window.siyuan.languages.calcOperatorCountNotEmpty
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Percent empty",
label: window.siyuan.languages.calcOperatorPercentEmpty
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Percent not empty",
label: window.siyuan.languages.calcOperatorPercentNotEmpty
});
if (type === "number") {
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Sum",
label: window.siyuan.languages.calcOperatorSum
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Average",
label: window.siyuan.languages.calcOperatorAverage
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Median",
label: window.siyuan.languages.calcOperatorMedian
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Min",
label: window.siyuan.languages.calcOperatorMin
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Max",
label: window.siyuan.languages.calcOperatorMax
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Range",
label: window.siyuan.languages.calcOperatorRange
});
}
const calcRect = calcElement.getBoundingClientRect();
menu.open({x: calcRect.left, y: calcRect.bottom, h: calcRect.height});
}
export const popTextCell = (protyle: IProtyle, cellElement: HTMLElement) => {
const type = cellElement.parentElement.parentElement.firstElementChild.querySelector(`[data-col-id="${cellElement.getAttribute("data-col-id")}"]`).getAttribute("data-dtype") as TAVCol;
const cellRect = cellElement.getBoundingClientRect();

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

@ -22,7 +22,7 @@ export const avRender = (element: Element, cb?: () => void) => {
const data = response.data.view as IAVTable;
// header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 32px"><use xlink:href="#iconUncheck"></use></svg></div>';
let calcHTML = '<div style="width: 24px"></div>'
let calcHTML = ''
data.columns.forEach((column: IAVColumn) => {
if (column.hidden) {
return;
@ -36,8 +36,8 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
</div>
<div class="av__widthdrag"></div>
</div>`;
calcHTML += `<div class="av__calc" data-col-id="${column.id}" data-dtype="${column.type}"
style="width: ${column.width || "200px"}"><svg><use xlink:href="#iconDown"></use></svg>${window.siyuan.languages.calc}</div>`
calcHTML += `<div class="av__calc${calcHTML ? "" : " av__calc--show"}" data-col-id="${column.id}" data-operator="${column.calc?.operator || ""}"
style="width: ${column.width || "200px"}"><svg><use xlink:href="#iconDown"></use></svg>${window.siyuan.languages.calc}</div>`;
});
tableHTML += `<div class="block__icons" style="min-height: auto">
<div class="block__icon block__icon--show" data-type="av-header-add"><svg><use xlink:href="#iconAdd"></use></svg></div>
@ -124,7 +124,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
<svg><use xlink:href="#iconAdd"></use></svg>
${window.siyuan.languages.addAttr}
</div>
<div class="av__row--footer">${calcHTML}</div>
<div class="av__row--footer"><div style="width: 24px"></div>${calcHTML}</div>
</div>
</div>
</div>`;

2
app/src/protyle/wysiwyg/transaction.ts
View file

@ -654,7 +654,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
} else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions",
"updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden",
"setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrViewName", "setAttrViewFilters",
"setAttrViewSorts"].includes(operation.action)) {
"setAttrViewSorts", "setAttrViewColCalc"].includes(operation.action)) {
refreshAV(protyle, operation);
}
};

7
app/src/types/index.d.ts vendored
View file

@ -35,6 +35,7 @@ type TOperation =
| "setAttrViewName"
| "setAttrViewFilters"
| "setAttrViewSorts"
| "setAttrViewColCalc"
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
type TCardType = "doc" | "notebook" | "all"
type TEventBus = "ws-main" |
@ -853,7 +854,7 @@ interface IAV {
view: IAVTable
viewID: string
viewType: string
views: IAVView[],
views: IAVView[]
}
interface IAVView {
@ -891,6 +892,10 @@ interface IAVColumn {
wrap: boolean,
hidden: boolean,
type: TAVCol,
calc: {
operator: string,
result: IAVCellValue
},
// 选项列表
options?: {
name: string,