diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 925f5939c..99a3abd5d 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -109,7 +109,7 @@ background-color: var(--b3-av-background-hl) !important; } - .av__firstcol .av__firstcol--icon { + .av__firstcol svg { opacity: 1; } } @@ -178,16 +178,11 @@ display: flex; .b3-button { - padding: 4px 8px; - margin: 4px; + margin: 3px 0 3px 24px; color: var(--b3-theme-on-surface); background-color: transparent; font-size: 75%; - > div { - background-color: transparent; - } - &:hover, &:focus { background-color: var(--b3-av-hover); @@ -210,23 +205,6 @@ } } } - - &, - &--util, - &--footer { - &:hover { - .av__firstcol--icon { - opacity: 1; - } - } - } - - &, - &--footer { - .av__colsticky { - box-shadow: 2px 0 4px var(--b3-theme-surface-lighter); - } - } } &__cell { @@ -263,10 +241,6 @@ border-right-color: var(--b3-theme-primary-lighter); } - &--add { - padding-left: 0.5em; - } - &--select { background-color: var(--b3-menu-background); box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0px var(--b3-theme-primary-lighter) inset; @@ -365,16 +339,15 @@ } &__firstcol { - border-right: 1px solid var(--b3-theme-surface-lighter); - - &--icon { + svg { @extend .av__checkbox; - padding: 9.5px 5px; opacity: 0; + padding: 9.5px 5px; + cursor: pointer; } - &--checkbox { - cursor: pointer; + &:hover svg { + opacity: 1; } } @@ -384,6 +357,7 @@ z-index: 2; // 需大于 av__widthdrag，否则横行滚动后，拖拽会悬浮于 stick 列上 display: flex; + &.av__firstcol, & > div:not(.av__cell--select):not(.av__cell--active) { background-color: var(--av-background); } diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 6deb8f3f1..f17ab800b 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -1883,7 +1883,7 @@ export const setFold = (protyle: IProtyle, nodeElement: Element, isOpen?: boolea nodeElement.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => { if (item.classList.contains("av__row--select")) { item.classList.remove("av__row--select"); - item.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconUncheck"); + item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); updateHeader(item); } else { item.querySelector(".av__drag-fill")?.remove(); diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index f48274ff1..3c844a327 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -35,7 +35,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle if (event.shiftKey) { const rowElement = hasClosestByClassName(event.target, "av__row"); if (rowElement && !rowElement.classList.contains("av__row--header")) { - selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "toggle"); + selectRow(rowElement.querySelector(".av__firstcol"), "toggle"); return true; } } @@ -159,7 +159,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.preventDefault(); event.stopPropagation(); return true; - } else if (target.classList.contains("av__firstcol--checkbox")) { + } else if (target.classList.contains("av__firstcol")) { window.siyuan.menus.menu.remove(); selectRow(target, "toggle"); event.preventDefault(); @@ -214,10 +214,10 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle } const type = getTypeByCellElement(target); if (type === "updated" || type === "created" || (type === "block" && !target.getAttribute("data-detached"))) { - selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "toggle"); + selectRow(rowElement.querySelector(".av__firstcol"), "toggle"); } else { scrollElement.querySelectorAll(".av__row--select").forEach(item => { - item.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconUncheck"); + item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); item.classList.remove("av__row--select"); }); updateHeader(rowElement); @@ -264,7 +264,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi blockElement.querySelectorAll(".av__row--select").forEach(item => { item.classList.remove("av__row--select"); }); - blockElement.querySelectorAll(".av__firstcol--checkbox use").forEach(item => { + blockElement.querySelectorAll(".av__firstcol use").forEach(item => { item.setAttribute("xlink:href", "#iconUncheck"); }); } @@ -274,7 +274,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi return true; } rowElement.classList.add("av__row--select"); - rowElement.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconCheck"); + rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck"); const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)"); updateHeader(rowElement); if (!protyle.disabled) { diff --git a/app/src/protyle/render/av/keydown.ts b/app/src/protyle/render/av/keydown.ts index cf4bdf755..a9dee131f 100644 --- a/app/src/protyle/render/av/keydown.ts +++ b/app/src/protyle/render/av/keydown.ts @@ -29,7 +29,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl }); if (event.key === "Escape") { selectCellElement.classList.remove("av__cell--select"); - selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "select"); + selectRow(rowElement.querySelector(".av__firstcol"), "select"); event.preventDefault(); return true; } @@ -46,7 +46,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl let newCellElement; if (event.key === "ArrowLeft" || matchHotKey("⇧⇥", event)) { const previousRowElement = rowElement.previousElementSibling; - if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol--checkbox")) { + if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol")) { if (selectCellElement.previousElementSibling.classList.contains("av__cell")) { newCellElement = selectCellElement.previousElementSibling; } else { @@ -133,7 +133,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl } if (event.key === "Escape") { event.preventDefault(); - selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll"); return true; } if (event.key === "Backspace") { @@ -142,7 +142,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl return true; } if (event.key === "Enter") { - selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll"); popTextCell(protyle, [selectRowElements[0].querySelector(".av__cell")]); event.preventDefault(); return true; @@ -150,9 +150,9 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl // TODO event.shiftKey if (event.key === "ArrowUp") { const previousRowElement = selectRowElements[0].previousElementSibling; - selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll"); if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) { - selectRow(previousRowElement.querySelector(".av__firstcol--checkbox"), "select"); + selectRow(previousRowElement.querySelector(".av__firstcol"), "select"); cellScrollIntoView(nodeElement, previousRowElement); } else { nodeElement.classList.add("protyle-wysiwyg--select"); @@ -162,9 +162,9 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl } if (event.key === "ArrowDown") { const nextRowElement = selectRowElements[selectRowElements.length - 1].nextElementSibling; - selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll"); if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) { - selectRow(nextRowElement.querySelector(".av__firstcol--checkbox"), "select"); + selectRow(nextRowElement.querySelector(".av__firstcol"), "select"); cellScrollIntoView(nodeElement, nextRowElement); } else { nodeElement.classList.add("protyle-wysiwyg--select"); @@ -175,3 +175,4 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl } return false; }; + diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 300e4a9bd..2c79830ee 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -67,8 +67,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v e.dataset.pageSize = data.pageSize.toString(); } // header - let tableHTML = '
'; - let calcHTML = '
'; + let tableHTML = '
'; + let calcHTML = '
'; let pinIndex = -1; let pinMaxIndex = -1; let indexWidth = 0; @@ -85,9 +85,9 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v } }); pinIndex = Math.min(pinIndex, pinMaxIndex); - if (pinIndex < 0) { - tableHTML += '
'; - calcHTML += '
'; + if (pinIndex > -1) { + tableHTML = '
'; + calcHTML = '
'; } data.columns.forEach((column: IAVColumn, index: number) => { if (column.hidden) { @@ -118,15 +118,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '`; // body data.rows.forEach((row: IAVRow) => { - tableHTML += `
-
-
- -
-`; - - if (pinIndex < 0) { - tableHTML += '
'; + tableHTML += `
`; + if (pinIndex > -1) { + tableHTML += '
'; + } else { + tableHTML += '
'; } row.cells.forEach((cell, index) => { @@ -197,11 +193,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}
`; ${tableHTML}
- +