:lipsticks: 改进数据库 UI

This commit is contained in:
Vanessa 2024-01-17 12:18:26 +08:00
parent 0885a46764
commit 39e89fc791
2 changed files with 6 additions and 5 deletions

View File

@ -257,6 +257,7 @@
align-items: center;
transition: background 20ms ease-in 0s;
overflow: inherit; // 保证列宽和顺序调整的拖拽点样式
border-right-color: transparent;
&:hover {
background-color: var(--b3-av-hover);
@ -358,7 +359,7 @@
display: flex;
&.av__firstcol,
& > div:not(.av__cell--select):not(.av__cell--active) {
& > div:not(.av__cell--select):not(.av__cell--active):not(.av__calc--ashow) {
background-color: var(--av-background);
}
}

View File

@ -68,7 +68,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
}
// header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
let calcHTML = '<div style="width: 24px"></div>';
let calcHTML = '';
let pinIndex = -1;
let pinMaxIndex = -1;
let indexWidth = 0;
@ -87,7 +87,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
pinIndex = Math.min(pinIndex, pinMaxIndex);
if (pinIndex > -1) {
tableHTML = '<div class="av__row av__row--header"><div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
calcHTML = '<div class="av__colsticky"><div style="width: 24px"></div>';
calcHTML = '<div class="av__colsticky">';
}
data.columns.forEach((column: IAVColumn, index: number) => {
if (column.hidden) {
@ -104,8 +104,8 @@ style="width: ${column.width || "200px"};">
if (pinIndex === index) {
tableHTML += "</div>";
}
calcHTML += `<div class="av__calc${calcHTML ? "" : " av__calc--show"}${column.calc && column.calc.operator !== "" ? " av__calc--ashow" : ""}" data-col-id="${column.id}" data-dtype="${column.type}" data-operator="${column.calc?.operator || ""}"
style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use xlink:href="#iconDown"></use></svg>' + window.siyuan.languages.calc}</div>`;
calcHTML += `<div class="av__calc${column.calc && column.calc.operator !== "" ? " av__calc--ashow" : ""}" data-col-id="${column.id}" data-dtype="${column.type}" data-operator="${column.calc?.operator || ""}"
style="width: ${index === 0 ? ((parseInt(column.width || "200") + 24) + "px") : (column.width || "200px")}">${getCalcValue(column) || '<svg><use xlink:href="#iconDown"></use></svg>' + window.siyuan.languages.calc}</div>`;
if (pinIndex === index) {
calcHTML += "</div>";
}