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

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

Browse source
This commit is contained in:
Vanessa 2023-06-10 16:27:52 +08:00
parent bf96331cf6
commit f56d6de5ce
9 changed files with 138 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/src/assets/scss/base.scss
View file

@ -32,6 +32,7 @@
@import "business/card";
@import "business/custom";
@import "business/resize";
@import "business/av";
/*
.status: 2
@ -69,6 +70,8 @@ ctrl+p 搜索: 202
// 移动端排序和菜单需临时大于 .side-panel https://github.com/siyuan-note/siyuan/issues/5254
.b3-menu: 310
.av__mask: 320
// 需大于 .b3-dialog
progressLoading: 400

59
app/src/assets/scss/business/_av.scss Normal file
View file

@ -0,0 +1,59 @@
.av {
&__mask {
position: fixed;
z-index: 320;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
&__scroll {
overflow: auto hidden;
cursor: pointer;
}
&__row {
display: flex;
border-bottom: 1px solid var(--b3-theme-surface-lighter);
&--header .av__cell {
display: flex;
align-items: center;
svg {
height: 14px;
width: 14px;
color: var(--b3-theme-on-surface);
margin-right: 5px;
}
}
&--header,
&--footer {
background-color: var(--b3-theme-background);
}
}
&__cell {
padding: 5px;
flex-shrink: 0;
border-right: 1px solid var(--b3-theme-surface-lighter)
}
&__firstcol {
svg {
color: var(--b3-theme-on-surface);
height: 36px;
width: 24px;
opacity: 0;
padding: 5px;
box-sizing: border-box;
float: left;
}
&:hover svg {
opacity: 1;
}
}
}

1
app/src/assets/scss/mobile.scss
View file

@ -24,6 +24,7 @@
@import "business/export";
@import "business/card";
@import "business/custom";
@import "business/av";
.block__popover {
width: 80vw;

53
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -30,59 +30,6 @@
}
}
&.av {
.av {
&__scroll {
overflow: auto hidden;
cursor: pointer;
}
&__row {
display: flex;
border-bottom: 1px solid var(--b3-theme-surface-lighter);
&--header .av__cell {
display: flex;
align-items: center;
svg {
height: 14px;
width: 14px;
color: var(--b3-theme-on-surface);
margin-right: 5px;
}
}
&--header,
&--footer {
background-color: var(--b3-theme-background);
}
}
&__cell {
padding: 5px;
flex-shrink: 0;
border-right: 1px solid var(--b3-theme-surface-lighter)
}
&__firstcol {
svg {
color: var(--b3-theme-on-surface);
height: 36px;
width: 24px;
opacity: 0;
padding: 5px;
box-sizing: border-box;
float: left;
}
&:hover svg {
opacity: 1;
}
}
}
}
&.hr {
cursor: pointer;

2
app/src/boot/globalShortcut.ts
View file

@ -391,7 +391,7 @@ export const globalShortcut = (app: App) => {
});
window.addEventListener("keydown", (event) => {
if (document.getElementById("errorLog") || event.isComposing) {
if (document.querySelector(".av__mask") || document.getElementById("errorLog") || event.isComposing) {
return;
}
const target = event.target as HTMLElement;

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

@ -42,8 +42,8 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const cellElement = hasClosestByClassName(event.target, "av__cell");
if (cellElement && blockElement) {
const type = cellElement.getAttribute("data-dtype") as TAVCol;
if (cellElement.parentElement.classList.contains("av__row--header")) {
const type = cellElement.getAttribute("data-dtype") as TAVCol;
const menu = new Menu("av-header-cell");
menu.addItem({
icon: getIconByType(type),
@ -136,7 +136,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
} else {
popTextCell()
popTextCell(protyle, cellElement)
}
return true;
}
@ -217,3 +217,8 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
event.stopPropagation();
return true;
}
const addRow = () => {
}

65
app/src/protyle/render/av/cell.ts
View file

@ -1,3 +1,66 @@
export const popTextCell = () => {
import {transaction} from "../../wysiwyg/transaction";
import {hasClosestBlock} from "../../util/hasClosest";
export const popTextCell = (protyle: IProtyle, cellElement: HTMLElement) => {
const index = parseInt(cellElement.getAttribute("data-index"))
const tableElement = cellElement.parentElement.parentElement
const colCellElement = tableElement.firstElementChild.children[index + 1];
const type = colCellElement.getAttribute("data-dtype") as TAVCol;
const cellRect = cellElement.getBoundingClientRect()
let html = ""
if (type === "block") {
html = `<textarea style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px" class="b3-text-field fn__size200">${cellElement.textContent}</textarea>`;
}
document.body.insertAdjacentHTML("beforeend", `<div class="av__mask">
${html}
</div>`);
const avMaskElement = document.querySelector(".av__mask");
const inputElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement;
if (inputElement) {
inputElement.select();
inputElement.addEventListener("blur", () => {
updateCellValue(protyle, cellElement, type)
})
inputElement.addEventListener("keydown", (event) => {
if (event.isComposing) {
return
}
if (event.key === "Escape" || event.key === "Enter") {
updateCellValue(protyle, cellElement, type)
event.preventDefault();
event.stopPropagation();
}
})
}
avMaskElement.addEventListener("click", (event) => {
if ((event.target as HTMLElement).classList.contains("av__mask")) {
avMaskElement?.remove();
}
})
};
const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVCol) => {
const avMaskElement = document.querySelector(".av__mask");
const inputElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement;
const blockElement = hasClosestBlock(cellElement)
if (!blockElement) {
return
}
transaction(protyle, [{
action: "updateAttrViewCell",
id: blockElement.getAttribute("data-node-id"),
rowID: blockElement.getAttribute("data-av-id"),
type,
data: inputElement.value,
}], [{
action: "updateAttrViewCell",
id: blockElement.getAttribute("data-node-id"),
rowID: blockElement.getAttribute("data-av-id"),
type,
data: cellElement.textContent.trim(),
}]);
setTimeout(() => {
avMaskElement.remove();
})
}

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

@ -49,7 +49,7 @@ export const avRender = (element: Element) => {
data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
row.cells.forEach((cell, index) => {
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`;
tableHTML += `<div class="av__cell" data-index="${index}" style="width: ${data.columns[index].width || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`;
});
tableHTML += "<div></div></div>";
});

2
app/src/types/index.d.ts vendored
View file

@ -22,6 +22,7 @@ type TOperation =
| "removeAttrViewCol"
| "addFlashcards"
| "removeFlashcards"
| "updateAttrViewCell"
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
type TCardType = "doc" | "notebook" | "all"
type TEventBus = "ws-main" | "click-blockicon" | "click-editorcontent" | "click-pdf" |
@ -283,6 +284,7 @@ interface IOperation {
srcIDs?: string[] // insertAttrViewBlock 专享
name?: string // addAttrViewCol 专享
type?: TAVCol // addAttrViewCol 专享
rowID?: string // updateAttrViewCell 专享
deckID?: string // add/removeFlashcards 专享
blockIDs?: string[] // add/removeFlashcards 专享
}