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

🎨 https://github.com/siyuan-note/siyuan/issues/9424

Browse source
This commit is contained in:
Vanessa 2023-12-08 13:26:13 +08:00
parent 44091d0717
commit 214b6278f7
6 changed files with 67 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -205,27 +205,35 @@
}
}
&--add {
color: var(--b3-theme-on-surface);
transition: background 20ms ease-in 0s;
font-size: 87.5%;
align-items: center;
&--util {
display: flex;
.av__colsticky {
align-items: center;
.b3-button {
margin: 3px 0 3px 24px;
color: var(--b3-theme-on-surface);
background-color: transparent;
font-size: 75%;
&:hover,
&:focus {
background-color: var(--b3-av-hover);
box-shadow: none;
}
}
svg {
height: 14px;
width: 14px;
color: var(--b3-theme-on-surface);
padding: 10px 10px 10px 5px;
flex-shrink: 0;
}
}
width: 12px;
height: 20px;
&[data-type="set-page-size"] {
margin: 0 0 0 4px;
border-radius: var(--b3-border-radius);
padding: 0 4px;
&:hover {
background-color: var(--b3-av-hover);
background-color: var(--b3-theme-background);
}
}
}
}
}

45
app/src/protyle/render/av/action.ts
View file

@ -5,7 +5,7 @@ import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem";
import {getTypeByCellElement, popTextCell} from "./cell";
import {getColIconByType, showColMenu} from "./col";
import {insertAttrViewBlockAnimation, stickyRow, updateHeader} from "./row";
import {insertAttrViewBlockAnimation, setPageSize, stickyRow, updateHeader} from "./row";
import {emitOpenMenu} from "../../../plugin/EventBus";
import {addCol} from "./col";
import {openMenuPanel} from "./openMenuPanel";
@ -127,6 +127,30 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "set-page-size") {
setPageSize(target);
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "av-add-bottom") {
const avID = blockElement.getAttribute("data-av-id");
const srcIDs = [Lute.NewNodeID()];
const previousID = blockElement.querySelector(".av__row--util").previousElementSibling.getAttribute("data-id") || "";
transaction(protyle, [{
action: "insertAttrViewBlock",
avID,
previousID,
srcIDs,
isDetached: true,
}], [{
action: "removeAttrViewBlock",
srcIDs,
avID,
}]);
insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
event.preventDefault();
event.stopPropagation();
return true;
} else if (target.classList.contains("av__gutter")) {
const rowElement = hasClosestByClassName(target, "av__row");
if (!rowElement) {
@ -233,25 +257,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
return true;
} else if (target.classList.contains("av__row--add")) {
const avID = blockElement.getAttribute("data-av-id");
const srcIDs = [Lute.NewNodeID()];
const previousID = target.previousElementSibling.getAttribute("data-id") || "";
transaction(protyle, [{
action: "insertAttrViewBlock",
avID,
previousID,
srcIDs,
isDetached: true,
}], [{
action: "removeAttrViewBlock",
srcIDs,
avID,
}]);
insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
event.preventDefault();
event.stopPropagation();
return true;
} else if (target.classList.contains("item") && target.parentElement.classList.contains("layout-tab-bar")) {
if (target.classList.contains("item--focus")) {
openViewMenu({protyle, blockElement, element: target});

2
app/src/protyle/render/av/keydown.ts
View file

@ -149,7 +149,7 @@ 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");
if (nextRowElement && !nextRowElement.classList.contains("av__row--add")) {
if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) {
selectRow(nextRowElement.querySelector(".av__firstcol"), "select");
cellScrollIntoView(nodeElement, nextRowElement);
} else {

18
app/src/protyle/render/av/render.ts
View file

@ -127,7 +127,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
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__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
}
row.cells.forEach((cell, index) => {
@ -252,14 +252,20 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
<div class="av__scroll">
<div class="av__body">
${tableHTML}
<div class="av__row--add">
<div class="av__row--util">
<div class="av__colsticky">
<button class="b3-button" data-type="av-add-bottom">
<svg><use xlink:href="#iconAdd"></use></svg>
${window.siyuan.languages.addAttr}
<svg><use xlink:href="#loadMore"></use></svg>
${window.siyuan.languages.nextLabel}
<svg data-type="set-page-size"><use xlink:href="#iconMore"></use></svg>
</button>
<span class="fn__space"></span>
<button class="b3-button">
<svg data-type="av-load-more"><use xlink:href="#iconArrowDown"></use></svg>
<span data-type="av-load-more">
${window.siyuan.languages.loadMore}
</span>
<svg data-type="set-page-size" data-size="50"><use xlink:href="#iconMore"></use></svg>
</button>
</div>
</div>
<div class="av__row--footer">${calcHTML}</div>

4
app/src/protyle/render/av/row.ts
View file

@ -73,7 +73,7 @@ export const insertAttrViewBlockAnimation = (blockElement: Element, size: number
let colHTML = '<div style="width: 24px"></div>';
const pinIndex = previousElement.querySelectorAll(".av__colsticky .av__cell").length - 1;
if (pinIndex > -1) {
colHTML = "<div class=\"av__colsticky\"><div style=\"width: 24px\"></div>";
colHTML = '<div class="av__colsticky"><div style="width: 24px"></div>';
}
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => {
colHTML += `<div class="av__cell" style="width: ${item.style.width}" ${(item.getAttribute("data-block-id") || item.dataset.dtype === "block") ? ' data-detached="true"' : ""}><span class="av__pulse"></span></div>`;
@ -132,7 +132,7 @@ export const setPageSize = (target: HTMLElement) => {
if (menu.isOpen) {
return;
}
const currentPageSIze = target.querySelector(".b3-menu__accelerator").textContent
const currentPageSIze = target.dataset.size;
menu.addItem({
iconHTML: "",
label: "10",

2
app/src/protyle/render/av/view.ts
View file

@ -132,7 +132,7 @@ export const getViewHTML = (data: IAVTable) => {
<span class="b3-menu__accelerator">${data.sorts.length}</span>
<svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
</button>
<button class="b3-menu__item" data-type="set-page-size">
<button class="b3-menu__item" data-type="set-page-size" data-size="50">
<svg class="b3-menu__icon"></svg>
<span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
<span class="b3-menu__accelerator">50</span>