From 926f1a106266abec6bc35abed3b621593f79fbce 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, 10 Jan 2024 23:23:28 +0800 Subject: [PATCH] Adjust the style of the first column of the attribute view (#9830) * :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 --- app/src/assets/scss/business/_av.scss | 27 +++++++++++++++++++++------ 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 | 27 +++++++++++++++++---------- app/src/protyle/render/av/row.ts | 4 ++-- app/src/protyle/wysiwyg/index.ts | 2 +- 7 files changed, 56 insertions(+), 35 deletions(-) diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 53b9772dd08..4c69138e5fd 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -189,11 +189,14 @@ display: flex; .b3-button { - 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); @@ -216,6 +219,16 @@ } } } + + &, + &--util, + &--footer { + &:hover { + .av__firstcol svg { + opacity: 1; + } + } + } } &__cell { @@ -252,6 +265,10 @@ border-right-color: var(--b3-theme-primary-lighter); } + &--add { + padding-left: 0.5em; + } + &--select { background-color: var(--b3-theme-primary-lightest); box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0px var(--b3-theme-primary-lighter) inset; @@ -321,16 +338,14 @@ } &__firstcol { + border-right: 1px solid var(--b3-theme-surface-lighter); + svg { @extend .av__checkbox; - opacity: 0; padding: 9.5px 5px; + opacity: 0; cursor: pointer; } - - &:hover svg { - opacity: 1; - } } &__colsticky { diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 3cc474be797..c73a02ca466 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__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__check use").setAttribute("xlink:href", "#iconUncheck"); updateHeader(item); } else { item.classList.remove("img--select", "av__cell--select"); diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 40791e4d74d..711fe95a6e5 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__check"), "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__check")) { 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__check"), "toggle"); } else { scrollElement.querySelectorAll(".av__row--select").forEach(item => { - item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); + item.querySelector(".av__check use").setAttribute("xlink:href", "#iconUncheck"); item.classList.remove("av__row--select"); }); updateHeader(rowElement); @@ -263,7 +263,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__check use").forEach(item => { item.setAttribute("xlink:href", "#iconUncheck"); }); } @@ -273,7 +273,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__check 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 36210041567..a64f98e4d8e 100644 --- a/app/src/protyle/render/av/keydown.ts +++ b/app/src/protyle/render/av/keydown.ts @@ -25,7 +25,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__check"), "select"); event.preventDefault(); return true; } @@ -42,7 +42,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__check")) { if (selectCellElement.previousElementSibling.classList.contains("av__cell")) { newCellElement = selectCellElement.previousElementSibling; } else { @@ -129,7 +129,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__check"), "unselectAll"); return true; } if (event.key === "Backspace") { @@ -138,7 +138,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__check"), "unselectAll"); popTextCell(protyle, [selectRowElements[0].querySelector(".av__cell")]); event.preventDefault(); return true; @@ -146,9 +146,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__check"), "unselectAll"); if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) { - selectRow(previousRowElement.querySelector(".av__firstcol"), "select"); + selectRow(previousRowElement.querySelector(".av__check"), "select"); cellScrollIntoView(nodeElement, previousRowElement); } else { nodeElement.classList.add("protyle-wysiwyg--select"); @@ -158,9 +158,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__check"), "unselectAll"); if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) { - selectRow(nextRowElement.querySelector(".av__firstcol"), "select"); + selectRow(nextRowElement.querySelector(".av__check"), "select"); cellScrollIntoView(nodeElement, nextRowElement); } else { nodeElement.classList.add("protyle-wysiwyg--select"); @@ -171,4 +171,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 4a8cbfc9807..f028de56088 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) { @@ -120,11 +120,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) => { @@ -194,6 +198,9 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, data.colum ${tableHTML}
+
+ +