Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust the style of the first column of the attribute view #9830

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 21 additions & 6 deletions app/src/assets/scss/business/_av.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -216,6 +219,16 @@
}
}
}

&,
&--util,
&--footer {
&:hover {
.av__firstcol svg {
opacity: 1;
}
}
}
}

&__cell {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion app/src/menus/protyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
12 changes: 6 additions & 6 deletions app/src/protyle/render/av/action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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");
});
}
Expand All @@ -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) {
Expand Down
17 changes: 8 additions & 9 deletions app/src/protyle/render/av/keydown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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") {
Expand All @@ -138,17 +138,17 @@ 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;
}
// 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");
Expand All @@ -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");
Expand All @@ -171,4 +171,3 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
}
return false;
};

27 changes: 17 additions & 10 deletions app/src/protyle/render/av/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
let calcHTML = '<div style="width: 24px"></div>';
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 pinIndex = -1;
let pinMaxIndex = -1;
let indexWidth = 0;
Expand All @@ -85,9 +85,9 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
}
});
pinIndex = Math.min(pinIndex, pinMaxIndex);
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>';
if (pinIndex < 0) {
tableHTML += '</div>';
calcHTML += '</div>';
}
data.columns.forEach((column: IAVColumn, index: number) => {
if (column.hidden) {
Expand Down Expand Up @@ -120,11 +120,15 @@ 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}">`;
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>';
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>';
}

row.cells.forEach((cell, index) => {
Expand Down Expand Up @@ -194,6 +198,9 @@ ${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}
Expand Down
4 changes: 2 additions & 2 deletions app/src/protyle/render/av/row.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ 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__firstcol").forEach(item => {
rowElement.parentElement.querySelectorAll(".av__check").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
const rowItemElement = hasClosestByClassName(item, "av__row");
if (rowItemElement) {
rowItemElement.classList.remove("av__row--select");
}
});
} else {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
rowElement.parentElement.querySelectorAll(".av__check").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
const rowItemElement = hasClosestByClassName(item, "av__row");
if (rowItemElement) {
Expand Down
2 changes: 1 addition & 1 deletion app/src/protyle/wysiwyg/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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__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");
Expand Down