From 58f9c03a702cb5e878226b0299a545916ae1f14d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yingyi=20/=20=E9=A2=96=E9=80=B8?= <49649786+Zuoqiu-Yingyi@users.noreply.github.com> Date: Wed, 17 Jan 2024 11:16:37 +0800 Subject: [PATCH] Adjust the style of the first column of the attribute view (#10178) * :art: Adjust the style of the column pinned to the attribute view * :art: Adjust the style of first column icon * Update index.ts * :art: Adjust the style of add row in attribute view https://github.com/siyuan-note/siyuan/pull/9830?notification_referrer_id=NT_kwDOAvWYerM4NjY1MTYyMTg0OjQ5NjQ5Nzg2#issuecomment-1853268143 * Update protyle.ts * :art: Add `box-shadow` for `.av__colsticky` --- app/src/assets/scss/business/_av.scss | 42 ++++++++++++++++++++++----- app/src/menus/protyle.ts | 2 +- app/src/protyle/render/av/action.ts | 12 ++++---- app/src/protyle/render/av/keydown.ts | 17 +++++------ app/src/protyle/render/av/render.ts | 26 ++++++++++------- app/src/protyle/render/av/row.ts | 10 +++---- app/src/protyle/wysiwyg/index.ts | 2 +- 7 files changed, 70 insertions(+), 41 deletions(-) diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 99a3abd5d..925f5939c 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 svg { + .av__firstcol .av__firstcol--icon { opacity: 1; } } @@ -178,11 +178,16 @@ display: flex; .b3-button { - margin: 3px 0 3px 24px; + padding: 4px 8px; + margin: 4px; color: var(--b3-theme-on-surface); background-color: transparent; font-size: 75%; + > div { + background-color: transparent; + } + &:hover, &:focus { background-color: var(--b3-av-hover); @@ -205,6 +210,23 @@ } } } + + &, + &--util, + &--footer { + &:hover { + .av__firstcol--icon { + opacity: 1; + } + } + } + + &, + &--footer { + .av__colsticky { + box-shadow: 2px 0 4px var(--b3-theme-surface-lighter); + } + } } &__cell { @@ -241,6 +263,10 @@ 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; @@ -339,15 +365,16 @@ } &__firstcol { - svg { + border-right: 1px solid var(--b3-theme-surface-lighter); + + &--icon { @extend .av__checkbox; - opacity: 0; padding: 9.5px 5px; - cursor: pointer; + opacity: 0; } - &:hover svg { - opacity: 1; + &--checkbox { + cursor: pointer; } } @@ -357,7 +384,6 @@ 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 f17ab800b..6deb8f3f1 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 use").setAttribute("xlink:href", "#iconUncheck"); + item.querySelector(".av__firstcol--checkbox 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 3c844a327..f48274ff1 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"), "toggle"); + selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "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")) { + } else if (target.classList.contains("av__firstcol--checkbox")) { 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"), "toggle"); + selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "toggle"); } else { scrollElement.querySelectorAll(".av__row--select").forEach(item => { - item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); + item.querySelector(".av__firstcol--checkbox 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 use").forEach(item => { + blockElement.querySelectorAll(".av__firstcol--checkbox 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 use").setAttribute("xlink:href", "#iconCheck"); + rowElement.querySelector(".av__firstcol--checkbox 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 a9dee131f..cf4bdf755 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"), "select"); + selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "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")) { + if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol--checkbox")) { 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"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "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"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "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"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) { - selectRow(previousRowElement.querySelector(".av__firstcol"), "select"); + selectRow(previousRowElement.querySelector(".av__firstcol--checkbox"), "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"), "unselectAll"); + selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) { - selectRow(nextRowElement.querySelector(".av__firstcol"), "select"); + selectRow(nextRowElement.querySelector(".av__firstcol--checkbox"), "select"); cellScrollIntoView(nodeElement, nextRowElement); } else { nodeElement.classList.add("protyle-wysiwyg--select"); @@ -175,4 +175,3 @@ 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 2c79830ee..300e4a9bd 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 > -1) { - tableHTML = '
'; - calcHTML = '
'; + if (pinIndex < 0) { + tableHTML += '
'; + calcHTML += '
'; } data.columns.forEach((column: IAVColumn, index: number) => { if (column.hidden) { @@ -118,11 +118,15 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '`; // body data.rows.forEach((row: IAVRow) => { - tableHTML += `
`; - if (pinIndex > -1) { - tableHTML += '
'; - } else { - tableHTML += '
'; + tableHTML += `
+
+
+ +
+`; + + if (pinIndex < 0) { + tableHTML += '
'; } row.cells.forEach((cell, index) => { @@ -193,11 +197,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}
`; ${tableHTML}
+ -