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

View File

@ -68,7 +68,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
} }
// header // 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 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 pinIndex = -1;
let pinMaxIndex = -1; let pinMaxIndex = -1;
let indexWidth = 0; let indexWidth = 0;
@ -87,7 +87,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
pinIndex = Math.min(pinIndex, pinMaxIndex); pinIndex = Math.min(pinIndex, pinMaxIndex);
if (pinIndex > -1) { 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>'; 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) => { data.columns.forEach((column: IAVColumn, index: number) => {
if (column.hidden) { if (column.hidden) {
@ -104,8 +104,8 @@ style="width: ${column.width || "200px"};">
if (pinIndex === index) { if (pinIndex === index) {
tableHTML += "</div>"; 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 || ""}" 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: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use xlink:href="#iconDown"></use></svg>' + window.siyuan.languages.calc}</div>`; 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) { if (pinIndex === index) {
calcHTML += "</div>"; calcHTML += "</div>";
} }