Skip to content

Commit

Permalink
Adjust the style of the first column of the attribute view (#9830)
Browse files Browse the repository at this point in the history 
* 🎨 Adjust the style of the column pinned to the attribute view

* 🎨 Adjust the style of first column icon

* Update index.ts

* 🎨 Adjust the style of add row in attribute view

#9830

* Update protyle.ts
  • Loading branch information
@Zuoqiu-Yingyi
Zuoqiu-Yingyi authored Jan 10, 2024
1 parent 98f2b4d commit 926f1a1
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 35 deletions.
27 changes: 21 additions & 6 deletions app/src/assets/scss/business/_av.scss
View file
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
View file
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
View file
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
View file
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
View file
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
View file
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
View file
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

0 comments on commit 926f1a1

Please sign in to comment.