Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-17 23:20:13 +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 12:22:10 +08:00
parent 9b9bc68c49
commit bf96331cf6
4 changed files with 86 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -66,12 +66,17 @@
}
&__firstcol {
input {
margin: 11px 5px;
svg {
color: var(--b3-theme-on-surface);
height: 36px;
width: 24px;
opacity: 0;
padding: 5px;
box-sizing: border-box;
float: left;
}
&:hover input {
&:hover svg {
opacity: 1;
}
}

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

@ -4,6 +4,7 @@ import {Menu} from "../../../plugin/API";
import {getIconByType} from "./render";
import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem";
import {popTextCell} from "./cell";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
const blockElement = hasClosestBlock(event.target);
@ -42,97 +43,101 @@ 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;
const menu = new Menu("av-header-cell");
menu.addItem({
icon: getIconByType(type),
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
bind() {
}
});
if (type !== "block") {
if (cellElement.parentElement.classList.contains("av__row--header")) {
const menu = new Menu("av-header-cell");
menu.addItem({
icon: "iconEdit",
label: window.siyuan.languages.edit,
click() {
icon: getIconByType(type),
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
bind() {
}
});
}
menu.addSeparator();
menu.addItem({
icon: "iconUp",
label: window.siyuan.languages.fileNameNatASC,
click() {
if (type !== "block") {
menu.addItem({
icon: "iconEdit",
label: window.siyuan.languages.edit,
click() {
}
});
}
});
menu.addItem({
icon: "iconDown",
label: window.siyuan.languages.fileNameNatDESC,
click() {
}
});
menu.addItem({
icon: "iconFilter",
label: window.siyuan.languages.filter,
click() {
}
});
menu.addSeparator();
if (type !== "block") {
menu.addSeparator();
menu.addItem({
icon: "iconEyeoff",
label: window.siyuan.languages.hide,
icon: "iconUp",
label: window.siyuan.languages.fileNameNatASC,
click() {
}
});
menu.addItem({
icon: "iconCopy",
label: window.siyuan.languages.duplicate,
icon: "iconDown",
label: window.siyuan.languages.fileNameNatDESC,
click() {
}
});
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
icon: "iconFilter",
label: window.siyuan.languages.filter,
click() {
const id = cellElement.getAttribute("data-id")
transaction(protyle, [{
action: "removeAttrViewCol",
id,
parentID: blockElement.getAttribute("data-av-id"),
}], [{
action: "addAttrViewCol",
name: cellElement.textContent.trim(),
parentID: blockElement.getAttribute("data-av-id"),
type: type,
id
}]);
}
});
menu.addSeparator();
}
menu.addItem({
label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`,
click() {
if (type !== "block") {
menu.addItem({
icon: "iconEyeoff",
label: window.siyuan.languages.hide,
click() {
}
});
menu.addItem({
icon: "iconCopy",
label: window.siyuan.languages.duplicate,
click() {
}
});
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
click() {
const id = cellElement.getAttribute("data-id")
transaction(protyle, [{
action: "removeAttrViewCol",
id,
parentID: blockElement.getAttribute("data-av-id"),
}], [{
action: "addAttrViewCol",
name: cellElement.textContent.trim(),
parentID: blockElement.getAttribute("data-av-id"),
type: type,
id
}]);
}
});
menu.addSeparator();
}
});
const cellRect = cellElement.getBoundingClientRect();
menu.open({
x: cellRect.left,
y: cellRect.bottom,
h: cellRect.height
});
(window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement)?.select();
event.preventDefault();
event.stopPropagation();
menu.addItem({
label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`,
click() {
}
});
const cellRect = cellElement.getBoundingClientRect();
menu.open({
x: cellRect.left,
y: cellRect.bottom,
h: cellRect.height
});
(window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement)?.select();
event.preventDefault();
event.stopPropagation();
} else {
popTextCell()
}
return true;
}
return false;

3
app/src/protyle/render/av/cell.ts Normal file
View file

@ -0,0 +1,3 @@
export const popTextCell = () => {
}

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

@ -28,7 +28,7 @@ export const avRender = (element: Element) => {
fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
const data = response.data.av;
// header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>';
data.columns.forEach((column: IAVColumn) => {
if (column.hidden) {
return;
@ -47,7 +47,7 @@ export const avRender = (element: Element) => {
// body
data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`;
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>`;
});