Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-19 16:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
V 2024-01-11 00:09:16 +08:00 • committed by GitHub
parent 9691c4218c
commit a48c2fbcf8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app/src/assets/scss/business/_av.scss
View file

@ -189,14 +189,11 @@
display: flex; display: flex;
.b3-button { .b3-button {
margin: 3px 0 3px 24px;
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);
@ -219,16 +216,6 @@
} }
} }
} }
&,
&--util,
&--footer {
&:hover {
.av__firstcol svg {
opacity: 1;
}
}
}
} }
&__cell { &__cell {
@ -265,10 +252,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-theme-primary-lightest); 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; box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0px var(--b3-theme-primary-lighter) inset;
@ -338,14 +321,16 @@
} }
&__firstcol { &__firstcol {
border-right: 1px solid var(--b3-theme-surface-lighter);
svg { svg {
@extend .av__checkbox; @extend .av__checkbox;
padding: 9.5px 5px;
opacity: 0; opacity: 0;
padding: 9.5px 5px;
cursor: pointer; cursor: pointer;
} }
&:hover svg {
opacity: 1;
}
} }
&__colsticky { &__colsticky {

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__row--select").forEach((item: HTMLElement) => { nodeElement.querySelectorAll(".img--select, .av__cell--select, .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__check 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"); item.classList.remove("img--select", "av__cell--select");

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__check"), "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__check")) { } 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__check"), "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__check 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);
@ -263,7 +263,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__check use").forEach(item => { blockElement.querySelectorAll(".av__firstcol use").forEach(item => {
item.setAttribute("xlink:href", "#iconUncheck"); item.setAttribute("xlink:href", "#iconUncheck");
}); });
} }
@ -273,7 +273,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__check 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

@ -25,7 +25,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__check"), "select"); selectRow(rowElement.querySelector(".av__firstcol"), "select");
event.preventDefault(); event.preventDefault();
return true; return true;
} }
@ -42,7 +42,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__check")) { 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 {
@ -129,7 +129,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__check"), "unselectAll"); selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
return true; return true;
} }
if (event.key === "Backspace") { if (event.key === "Backspace") {
@ -138,7 +138,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__check"), "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;
@ -146,9 +146,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__check"), "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__check"), "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");
@ -158,9 +158,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__check"), "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__check"), "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");
@ -171,3 +171,4 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
} }
return false; return false;
}; };

27
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__check"><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><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) {
@ -120,15 +120,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__check"><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) => {
@ -198,9 +194,6 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, data.colum
${tableHTML} ${tableHTML}
<div class="av__row--util"> <div class="av__row--util">
<div class="av__colsticky"> <div class="av__colsticky">
<div class="av__firstcol">
<svg><use xlink:href="#iconAdd"></use></svg>
</div>
<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}

4
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")) { if ("#iconCheck" === useElement.getAttribute("xlink:href")) {
rowElement.parentElement.querySelectorAll(".av__check").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__check").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) {

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

@ -194,7 +194,7 @@ export class WYSIWYG {
protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__row--select").forEach((item: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .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__check 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"); item.classList.remove("img--select", "av__cell--select");