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 { &__firstcol {
input { svg {
margin: 11px 5px; color: var(--b3-theme-on-surface);
height: 36px;
width: 24px;
opacity: 0; opacity: 0;
padding: 5px;
box-sizing: border-box;
float: left;
} }
&:hover input { &:hover svg {
opacity: 1; 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 {getIconByType} from "./render";
import {openEditorTab} from "../../../menus/util"; import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem"; import {copySubMenu} from "../../../menus/commonMenuItem";
import {popTextCell} from "./cell";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
const blockElement = hasClosestBlock(event.target); 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"); const cellElement = hasClosestByClassName(event.target, "av__cell");
if (cellElement && blockElement) { if (cellElement && blockElement) {
const type = cellElement.getAttribute("data-dtype") as TAVCol; const type = cellElement.getAttribute("data-dtype") as TAVCol;
const menu = new Menu("av-header-cell"); if (cellElement.parentElement.classList.contains("av__row--header")) {
menu.addItem({ const menu = new Menu("av-header-cell");
icon: getIconByType(type),
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
bind() {
}
});
if (type !== "block") {
menu.addItem({ menu.addItem({
icon: "iconEdit", icon: getIconByType(type),
label: window.siyuan.languages.edit, label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
click() { bind() {
} }
}); });
} if (type !== "block") {
menu.addSeparator(); menu.addItem({
menu.addItem({ icon: "iconEdit",
icon: "iconUp", label: window.siyuan.languages.edit,
label: window.siyuan.languages.fileNameNatASC, click() {
click() {
}
});
} }
}); menu.addSeparator();
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.addItem({ menu.addItem({
icon: "iconEyeoff", icon: "iconUp",
label: window.siyuan.languages.hide, label: window.siyuan.languages.fileNameNatASC,
click() { click() {
} }
}); });
menu.addItem({ menu.addItem({
icon: "iconCopy", icon: "iconDown",
label: window.siyuan.languages.duplicate, label: window.siyuan.languages.fileNameNatDESC,
click() { click() {
} }
}); });
menu.addItem({ menu.addItem({
icon: "iconTrashcan", icon: "iconFilter",
label: window.siyuan.languages.delete, label: window.siyuan.languages.filter,
click() { 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.addSeparator();
} if (type !== "block") {
menu.addItem({ 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> icon: "iconEyeoff",
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`, label: window.siyuan.languages.hide,
click() { 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();
} }
}); menu.addItem({
const cellRect = cellElement.getBoundingClientRect(); label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
menu.open({ <input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`,
x: cellRect.left, click() {
y: cellRect.bottom,
h: cellRect.height }
}); });
(window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement)?.select(); const cellRect = cellElement.getBoundingClientRect();
event.preventDefault(); menu.open({
event.stopPropagation(); 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 true;
} }
return false; 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) => { fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
const data = response.data.av; const data = response.data.av;
// header // 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) => { data.columns.forEach((column: IAVColumn) => {
if (column.hidden) { if (column.hidden) {
return; return;
@ -47,7 +47,7 @@ export const avRender = (element: Element) => {
// body // body
data.rows.forEach((row: IAVRow) => { 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) => { 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" style="width: ${data.columns[index].width || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`;
}); });