0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests 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
Show stats 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;
.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);
@ -219,16 +216,6 @@
}
}
}
&,
&--util,
&--footer {
&:hover {
.av__firstcol svg {
opacity: 1;
}
}
}
}
&__cell {
@ -265,10 +252,6 @@
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;
@ -338,14 +321,16 @@
}
&__firstcol {
border-right: 1px solid var(--b3-theme-surface-lighter);
svg {
@extend .av__checkbox;
padding: 9.5px 5px;
opacity: 0;
padding: 9.5px 5px;
cursor: pointer;
}
&:hover svg {
opacity: 1;
}
}
&__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) => {
if (item.classList.contains("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);
} else {
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) {
const rowElement = hasClosestByClassName(event.target, "av__row");
if (rowElement && !rowElement.classList.contains("av__row--header")) {
selectRow(rowElement.querySelector(".av__check"), "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__check")) {
} 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__check"), "toggle");
selectRow(rowElement.querySelector(".av__firstcol"), "toggle");
} else {
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");
});
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__check use").forEach(item => {
blockElement.querySelectorAll(".av__firstcol 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__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)");
updateHeader(rowElement);
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") {
selectCellElement.classList.remove("av__cell--select");
selectRow(rowElement.querySelector(".av__check"), "select");
selectRow(rowElement.querySelector(".av__firstcol"), "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__check")) {
if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol")) {
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__check"), "unselectAll");
selectRow(selectRowElements[0].querySelector(".av__firstcol"), "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__check"), "unselectAll");
selectRow(selectRowElements[0].querySelector(".av__firstcol"), "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__check"), "unselectAll");
selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) {
selectRow(previousRowElement.querySelector(".av__check"), "select");
selectRow(previousRowElement.querySelector(".av__firstcol"), "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__check"), "unselectAll");
selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) {
selectRow(nextRowElement.querySelector(".av__check"), "select");
selectRow(nextRowElement.querySelector(".av__firstcol"), "select");
cellScrollIntoView(nodeElement, nextRowElement);
} else {
nodeElement.classList.add("protyle-wysiwyg--select");
@ -171,3 +171,4 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
}
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();
}
// 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 calcHTML = '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconMath"></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 style="width: 24px"></div>';
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 += '</div>';
calcHTML += '</div>';
if (pinIndex > -1) {
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 class="av__colsticky"><div style="width: 24px"></div>';
}
data.columns.forEach((column: IAVColumn, index: number) => {
if (column.hidden) {
@ -120,15 +120,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
</div>`;
// body
data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}">
<div class="av__colsticky">
<div class="av__firstcol">
<svg class="av__check"><use xlink:href="#iconUncheck"></use></svg>
</div>
`;
if (pinIndex < 0) {
tableHTML += '</div>';
tableHTML += `<div class="av__row" data-id="${row.id}">`;
if (pinIndex > -1) {
tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
} else {
tableHTML += '<div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
}
row.cells.forEach((cell, index) => {
@ -198,9 +194,6 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, data.colum
${tableHTML}
<div class="av__row--util">
<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">
<svg><use xlink:href="#iconAdd"></use></svg>
${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");
if (rowElement.classList.contains("av__row--header") || type === "unselectAll") {
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");
const rowItemElement = hasClosestByClassName(item, "av__row");
if (rowItemElement) {
@ -21,7 +21,7 @@ export const selectRow = (checkElement: Element, type: "toggle" | "select" | "un
}
});
} else {
rowElement.parentElement.querySelectorAll(".av__check").forEach(item => {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
const rowItemElement = hasClosestByClassName(item, "av__row");
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) => {
if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) {
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);
} else {
item.classList.remove("img--select", "av__cell--select");