github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-19 10:30:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Adjust the style of the first column of the attribute view" (#10204)

Browse Source
This commit is contained in:
V 2024-01-17 11:46:08 +08:00 committed by GitHub
parent 58f9c03a70
commit 0885a46764
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 41 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/assets/scss/business/_av.scss
View File

@ -109,7 +109,7 @@
background-color: var(--b3-av-background-hl) !important; background-color: var(--b3-av-background-hl) !important;
} }
.av__firstcol .av__firstcol--icon { .av__firstcol svg {
opacity: 1; opacity: 1;
} }
} }
@ -178,16 +178,11 @@
display: flex; display: flex;
.b3-button { .b3-button {
padding: 4px 8px; margin: 3px 0 3px 24px;
margin: 4px;
color: var(--b3-theme-on-surface); color: var(--b3-theme-on-surface);
background-color: transparent; background-color: transparent;
font-size: 75%; font-size: 75%;
> div {
background-color: transparent;
}
&:hover, &:hover,
&:focus { &:focus {
background-color: var(--b3-av-hover); 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 { &__cell {
@ -263,10 +241,6 @@
border-right-color: var(--b3-theme-primary-lighter); border-right-color: var(--b3-theme-primary-lighter);
} }
&--add {
padding-left: 0.5em;
}
&--select { &--select {
background-color: var(--b3-menu-background); 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; 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 { &__firstcol {
border-right: 1px solid var(--b3-theme-surface-lighter); svg {
&--icon {
@extend .av__checkbox; @extend .av__checkbox;
padding: 9.5px 5px;
opacity: 0; opacity: 0;
padding: 9.5px 5px;
cursor: pointer;
} }
&--checkbox { &:hover svg {
cursor: pointer; opacity: 1;
} }
} }
@ -384,6 +357,7 @@
z-index: 2; // 需大于 av__widthdrag，否则横行滚动后，拖拽会悬浮于 stick 列上 z-index: 2; // 需大于 av__widthdrag，否则横行滚动后，拖拽会悬浮于 stick 列上
display: flex; display: flex;
&.av__firstcol,
& > div:not(.av__cell--select):not(.av__cell--active) { & > div:not(.av__cell--select):not(.av__cell--active) {
background-color: var(--av-background); background-color: var(--av-background);
} }

2
app/src/menus/protyle.ts
View File

@ -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) => { nodeElement.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => {
if (item.classList.contains("av__row--select")) { if (item.classList.contains("av__row--select")) {
item.classList.remove("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); updateHeader(item);
} else { } else {
item.querySelector(".av__drag-fill")?.remove(); item.querySelector(".av__drag-fill")?.remove();

12
app/src/protyle/render/av/action.ts
View File

@ -35,7 +35,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
if (event.shiftKey) { if (event.shiftKey) {
const rowElement = hasClosestByClassName(event.target, "av__row"); const rowElement = hasClosestByClassName(event.target, "av__row");
if (rowElement && !rowElement.classList.contains("av__row--header")) { if (rowElement && !rowElement.classList.contains("av__row--header")) {
selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "toggle"); selectRow(rowElement.querySelector(".av__firstcol"), "toggle");
return true; return true;
} }
} }
@ -159,7 +159,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
} else if (target.classList.contains("av__firstcol--checkbox")) { } else if (target.classList.contains("av__firstcol")) {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
selectRow(target, "toggle"); selectRow(target, "toggle");
event.preventDefault(); event.preventDefault();
@ -214,10 +214,10 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
} }
const type = getTypeByCellElement(target); const type = getTypeByCellElement(target);
if (type === "updated" || type === "created" || (type === "block" && !target.getAttribute("data-detached"))) { 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 { } else {
scrollElement.querySelectorAll(".av__row--select").forEach(item => { 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"); item.classList.remove("av__row--select");
}); });
updateHeader(rowElement); updateHeader(rowElement);
@ -264,7 +264,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
blockElement.querySelectorAll(".av__row--select").forEach(item => { blockElement.querySelectorAll(".av__row--select").forEach(item => {
item.classList.remove("av__row--select"); 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"); item.setAttribute("xlink:href", "#iconUncheck");
}); });
} }
@ -274,7 +274,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
return true; return true;
} }
rowElement.classList.add("av__row--select"); 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)"); const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)");
updateHeader(rowElement); updateHeader(rowElement);
if (!protyle.disabled) { if (!protyle.disabled) {

17
app/src/protyle/render/av/keydown.ts
View File

@ -29,7 +29,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
}); });
if (event.key === "Escape") { if (event.key === "Escape") {
selectCellElement.classList.remove("av__cell--select"); selectCellElement.classList.remove("av__cell--select");
selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "select"); selectRow(rowElement.querySelector(".av__firstcol"), "select");
event.preventDefault(); event.preventDefault();
return true; return true;
} }
@ -46,7 +46,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
let newCellElement; let newCellElement;
if (event.key === "ArrowLeft" || matchHotKey("⇧⇥", event)) { if (event.key === "ArrowLeft" || matchHotKey("⇧⇥", event)) {
const previousRowElement = rowElement.previousElementSibling; 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")) { if (selectCellElement.previousElementSibling.classList.contains("av__cell")) {
newCellElement = selectCellElement.previousElementSibling; newCellElement = selectCellElement.previousElementSibling;
} else { } else {
@ -133,7 +133,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
} }
if (event.key === "Escape") { if (event.key === "Escape") {
event.preventDefault(); event.preventDefault();
selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll"); selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
return true; return true;
} }
if (event.key === "Backspace") { if (event.key === "Backspace") {
@ -142,7 +142,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
return true; return true;
} }
if (event.key === "Enter") { 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")]); popTextCell(protyle, [selectRowElements[0].querySelector(".av__cell")]);
event.preventDefault(); event.preventDefault();
return true; return true;
@ -150,9 +150,9 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
// TODO event.shiftKey // TODO event.shiftKey
if (event.key === "ArrowUp") { if (event.key === "ArrowUp") {
const previousRowElement = selectRowElements[0].previousElementSibling; 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")) { if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) {
selectRow(previousRowElement.querySelector(".av__firstcol--checkbox"), "select"); selectRow(previousRowElement.querySelector(".av__firstcol"), "select");
cellScrollIntoView(nodeElement, previousRowElement); cellScrollIntoView(nodeElement, previousRowElement);
} else { } else {
nodeElement.classList.add("protyle-wysiwyg--select"); nodeElement.classList.add("protyle-wysiwyg--select");
@ -162,9 +162,9 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
} }
if (event.key === "ArrowDown") { if (event.key === "ArrowDown") {
const nextRowElement = selectRowElements[selectRowElements.length - 1].nextElementSibling; 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")) { if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) {
selectRow(nextRowElement.querySelector(".av__firstcol--checkbox"), "select"); selectRow(nextRowElement.querySelector(".av__firstcol"), "select");
cellScrollIntoView(nodeElement, nextRowElement); cellScrollIntoView(nodeElement, nextRowElement);
} else { } else {
nodeElement.classList.add("protyle-wysiwyg--select"); nodeElement.classList.add("protyle-wysiwyg--select");
@ -175,3 +175,4 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
} }
return false; return false;
}; };

26
app/src/protyle/render/av/render.ts
View File

@ -67,8 +67,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
e.dataset.pageSize = data.pageSize.toString(); e.dataset.pageSize = data.pageSize.toString();
} }
// header // header
let tableHTML = '<div class="av__row av__row--header"><div class="av__colsticky"><div class="av__firstcol"><svg class="av__firstcol--icon av__firstcol--checkbox"><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 class="av__colsticky"><div class="av__firstcol"><svg class="av__firstcol--icon"><use xlink:href="#iconMath"></use></svg></div>'; let calcHTML = '<div style="width: 24px"></div>';
let pinIndex = -1; let pinIndex = -1;
let pinMaxIndex = -1; let pinMaxIndex = -1;
let indexWidth = 0; let indexWidth = 0;
@ -85,9 +85,9 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
} }
}); });
pinIndex = Math.min(pinIndex, pinMaxIndex); pinIndex = Math.min(pinIndex, pinMaxIndex);
if (pinIndex < 0) { if (pinIndex > -1) {
tableHTML += '</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>'; calcHTML = '<div class="av__colsticky"><div style="width: 24px"></div>';
} }
data.columns.forEach((column: IAVColumn, index: number) => { data.columns.forEach((column: IAVColumn, index: number) => {
if (column.hidden) { if (column.hidden) {
@ -118,15 +118,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
</div>`; </div>`;
// body // body
data.rows.forEach((row: IAVRow) => { data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}"> tableHTML += `<div class="av__row" data-id="${row.id}">`;
<div class="av__colsticky"> if (pinIndex > -1) {
<div class="av__firstcol"> tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
<svg class="av__firstcol--icon av__firstcol--checkbox"><use xlink:href="#iconUncheck"></use></svg> } else {
</div> tableHTML += '<div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
`;
if (pinIndex < 0) {
tableHTML += '</div>';
} }
row.cells.forEach((cell, index) => { row.cells.forEach((cell, index) => {
@ -197,11 +193,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
${tableHTML} ${tableHTML}
<div class="av__row--util"> <div class="av__row--util">
<div class="av__colsticky"> <div class="av__colsticky">
<span class="fn__space"></span>
<button class="b3-button" data-type="av-add-bottom"> <button class="b3-button" data-type="av-add-bottom">
<svg><use xlink:href="#iconAdd"></use></svg> <svg><use xlink:href="#iconAdd"></use></svg>
${window.siyuan.languages.addAttr} ${window.siyuan.languages.addAttr}
</button> </button>
<span class="fn__space"></span>
<button class="b3-button${data.rowCount > data.rows.length ? "" : " fn__none"}"> <button class="b3-button${data.rowCount > data.rows.length ? "" : " fn__none"}">
<svg data-type="av-load-more"><use xlink:href="#iconArrowDown"></use></svg> <svg data-type="av-load-more"><use xlink:href="#iconArrowDown"></use></svg>
<span data-type="av-load-more"> <span data-type="av-load-more">

10
app/src/protyle/render/av/row.ts
View File

@ -13,7 +13,7 @@ export const selectRow = (checkElement: Element, type: "toggle" | "select" | "un
const useElement = checkElement.querySelector("use"); const useElement = checkElement.querySelector("use");
if (rowElement.classList.contains("av__row--header") || type === "unselectAll") { if (rowElement.classList.contains("av__row--header") || type === "unselectAll") {
if ("#iconCheck" === useElement.getAttribute("xlink:href") || type === "unselectAll") { if ("#iconCheck" === useElement.getAttribute("xlink:href") || type === "unselectAll") {
rowElement.parentElement.querySelectorAll(".av__firstcol--checkbox").forEach(item => { rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconUncheck"); item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
const rowItemElement = hasClosestByClassName(item, "av__row"); const rowItemElement = hasClosestByClassName(item, "av__row");
if (rowItemElement) { if (rowItemElement) {
@ -21,7 +21,7 @@ export const selectRow = (checkElement: Element, type: "toggle" | "select" | "un
} }
}); });
} else { } else {
rowElement.parentElement.querySelectorAll(".av__firstcol--checkbox").forEach(item => { rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconCheck"); item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
const rowItemElement = hasClosestByClassName(item, "av__row"); const rowItemElement = hasClosestByClassName(item, "av__row");
if (rowItemElement) { if (rowItemElement) {
@ -81,10 +81,10 @@ export const updateHeader = (rowElement: HTMLElement) => {
*/ */
export const insertAttrViewBlockAnimation = (protyle: IProtyle, blockElement: Element, srcIDs: string[], previousId: string, avId?: string,) => { export const insertAttrViewBlockAnimation = (protyle: IProtyle, blockElement: Element, srcIDs: string[], previousId: string, avId?: string,) => {
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header"); const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
let colHTML = '<div class="av__colsticky"><div class="av__firstcol><svg class="av__firstcol--icon"><use xlink:href="#iconUncheck"></use></svg></div>'; let colHTML = '<div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
const pinIndex = previousElement.querySelectorAll(".av__colsticky .av__cell").length - 1; const pinIndex = previousElement.querySelectorAll(".av__colsticky .av__cell").length - 1;
if (pinIndex <= 0) { if (pinIndex > -1) {
colHTML += "</div>"; colHTML = '<div class="av__colsticky"><div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
} }
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => { previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => {
colHTML += `<div class="av__cell" data-col-id="${item.dataset.colId}" colHTML += `<div class="av__cell" data-col-id="${item.dataset.colId}"

2
app/src/protyle/wysiwyg/index.ts
View File

@ -202,7 +202,7 @@ export class WYSIWYG {
protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => {
if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) { if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) {
item.classList.remove("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); updateHeader(item);
} else { } else {
item.classList.remove("img--select", "av__cell--select", "av__cell--active"); item.classList.remove("img--select", "av__cell--select", "av__cell--active");