Revert "Improve adaptive width for Attributes View (#9280)"
This reverts commit 2e46bee776.
This commit is contained in:
Vanessa
parent
2e46bee776
commit
f5da5b78c1
13 changed files with 204 additions and 199 deletions
|
|
@ -1,8 +1,4 @@
|
|||
.av {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -31,11 +27,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
&__container {
|
||||
// width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__header {
|
||||
top: -43px;
|
||||
z-index: 2;
|
||||
|
|
@ -69,15 +60,14 @@
|
|||
|
||||
&__gutters {
|
||||
@extend .protyle-gutters;
|
||||
position: absolute;
|
||||
line-height: normal;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: -44px;
|
||||
opacity: 0;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
svg {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,10 +84,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__body {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--b3-theme-surface-lighter);
|
||||
|
|
@ -125,6 +111,10 @@
|
|||
|
||||
&--select {
|
||||
background-color: var(--b3-theme-primary-lightest);
|
||||
|
||||
.av__firstcol svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&--header {
|
||||
|
|
@ -191,15 +181,18 @@
|
|||
|
||||
&--add {
|
||||
color: var(--b3-theme-on-surface);
|
||||
padding: 5px 5px 5px 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background 20ms ease-in 0s;
|
||||
font-size: 87.5%;
|
||||
|
||||
.av__calc {
|
||||
padding: 0 5px;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
left: 49px;
|
||||
svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -208,27 +201,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__firstcol {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
background-color: var(--b3-theme-background);
|
||||
border-right: 1px solid var(--b3-theme-surface-lighter);
|
||||
|
||||
svg {
|
||||
color: var(--b3-theme-on-surface);
|
||||
height: 36px;
|
||||
width: 24px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
|
@ -262,18 +234,6 @@
|
|||
top: 5px;
|
||||
}
|
||||
|
||||
&[data-wrap=true] {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
&[data-wrap=false] {
|
||||
white-space: nowrap;
|
||||
|
||||
img.av__cellassetimg {
|
||||
max-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .block__icon {
|
||||
opacity: 1;
|
||||
background-color: var(--b3-theme-background-light) !important;
|
||||
|
|
@ -299,7 +259,6 @@
|
|||
|
||||
&__celltext {
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
|
||||
.b3-chip {
|
||||
margin: 1px 2px;
|
||||
|
|
@ -317,6 +276,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__firstcol {
|
||||
svg {
|
||||
color: var(--b3-theme-on-surface);
|
||||
height: 33px;
|
||||
width: 24px;
|
||||
opacity: 0;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__widthdrag {
|
||||
position: absolute;
|
||||
cursor: col-resize;
|
||||
|
|
@ -398,13 +373,20 @@
|
|||
&.protyle-wysiwyg--select,
|
||||
&.protyle-wysiwyg--hl {
|
||||
.av__row--header,
|
||||
.av__row--footer,
|
||||
.av__firstcol {
|
||||
.av__row--footer {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img.av__cellassetimg {
|
||||
max-height: 20px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
margin: 1px 2px;
|
||||
max-width: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
html[data-theme-mode="dark"] .av__panel .b3-menu__item {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,10 +69,6 @@
|
|||
line-height: 26px;
|
||||
min-height: 26px;
|
||||
|
||||
img.av__cellassetimg {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--b3-theme-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
color: var(--b3-tooltips-color);
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
background-color: var(--b3-tooltips-background);
|
||||
border-radius: var(--b3-border-radius);
|
||||
line-height: 17px;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,18 @@ import {Plugin} from "./index";
|
|||
/// #if !MOBILE
|
||||
import {exportLayout, resizeTopBar} from "../layout/util";
|
||||
/// #endif
|
||||
import {PluginRequire} from "./require";
|
||||
import {API} from "./API";
|
||||
import {getFrontend, isMobile, isWindow} from "../util/functions";
|
||||
import {Constants} from "../constants";
|
||||
|
||||
const getObject = (key: string) => {
|
||||
const api = {
|
||||
siyuan: API
|
||||
};
|
||||
// @ts-ignore
|
||||
return api[key];
|
||||
};
|
||||
|
||||
const runCode = (code: string, sourceURL: string) => {
|
||||
return window.eval("(function anonymous(require, module, exports){".concat(code, "\n})\n//# sourceURL=").concat(sourceURL, "\n"));
|
||||
};
|
||||
|
|
@ -32,7 +40,7 @@ const loadPluginJS = async (app: App, item: IPluginData) => {
|
|||
const exportsObj: { [key: string]: any } = {};
|
||||
const moduleObj = {exports: exportsObj};
|
||||
try {
|
||||
runCode(item.js, "plugin:" + encodeURIComponent(item.name))(PluginRequire.require, moduleObj, exportsObj);
|
||||
runCode(item.js, "plugin:" + encodeURIComponent(item.name))(getObject, moduleObj, exportsObj);
|
||||
} catch (e) {
|
||||
console.error(`plugin ${item.name} run error:`, e);
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
import {API as siyuan} from "./API";
|
||||
|
||||
const libs: Record<string, any> = {
|
||||
siyuan,
|
||||
} as const;
|
||||
|
||||
export const PluginRequire = {
|
||||
require(module: string) {
|
||||
return libs[module];
|
||||
}
|
||||
}
|
||||
|
|
@ -1616,7 +1616,8 @@ export class Gutter {
|
|||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "flex-start";
|
||||
e.style.margin = "";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "left";
|
||||
}
|
||||
|
|
@ -1629,7 +1630,8 @@ export class Gutter {
|
|||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "center";
|
||||
e.style.margin = "0 auto";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "center";
|
||||
}
|
||||
|
|
@ -1642,7 +1644,8 @@ export class Gutter {
|
|||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "flex-end";
|
||||
e.style.margin = "0 0 0 auto";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "right";
|
||||
}
|
||||
|
|
@ -1653,11 +1656,7 @@ export class Gutter {
|
|||
icon: "iconMenu",
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "stretch";
|
||||
} else {
|
||||
e.style.textAlign = "justify";
|
||||
}
|
||||
e.style.textAlign = "justify";
|
||||
});
|
||||
}
|
||||
}, {
|
||||
|
|
@ -1687,11 +1686,12 @@ export class Gutter {
|
|||
icon: "iconTrashcan",
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
e.style.direction = "";
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "";
|
||||
e.style.margin = "";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "";
|
||||
e.style.direction = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1754,6 +1754,7 @@ export class Gutter {
|
|||
id: e.getAttribute("data-node-id"),
|
||||
data: e.outerHTML
|
||||
});
|
||||
resizeAV(e);
|
||||
});
|
||||
transaction(protyle, operations, undoOperations);
|
||||
window.siyuan.menus.menu.remove();
|
||||
|
|
|
|||
|
|
@ -24,25 +24,6 @@ import {unicode2Emoji} from "../../../emoji";
|
|||
import {selectRow} from "./row";
|
||||
import * as dayjs from "dayjs";
|
||||
|
||||
export const avAdd = (protyle: IProtyle, blockElement: HTMLElement, rowElement: HTMLElement, above: boolean) => {
|
||||
const avID = blockElement.getAttribute("data-av-id");
|
||||
const srcIDs = [Lute.NewNodeID()];
|
||||
const previousID = above ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : rowElement.getAttribute("data-id");
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
avID,
|
||||
previousID,
|
||||
srcIDs,
|
||||
isDetached: true,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
srcIDs,
|
||||
avID,
|
||||
}]);
|
||||
insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
|
||||
popTextCell(protyle, [rowElement[above ? "previousElementSibling" : "nextElementSibling"].querySelector('[data-detached="true"]')], "block");
|
||||
}
|
||||
|
||||
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
|
||||
const blockElement = hasClosestBlock(event.target);
|
||||
if (!blockElement) {
|
||||
|
|
@ -56,29 +37,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
}
|
||||
}
|
||||
|
||||
const addRowElement = hasClosestByClassName(event.target, "av__row--add");
|
||||
if (addRowElement) {
|
||||
const avID = blockElement.getAttribute("data-av-id");
|
||||
const srcIDs = [Lute.NewNodeID()];
|
||||
const previousID = addRowElement.previousElementSibling.getAttribute("data-id") || "";
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
avID,
|
||||
previousID,
|
||||
srcIDs,
|
||||
isDetached: true,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
srcIDs,
|
||||
avID,
|
||||
}]);
|
||||
insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
|
||||
popTextCell(protyle, [addRowElement.previousElementSibling.querySelector('[data-detached="true"]')], "block");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return true;
|
||||
}
|
||||
|
||||
const copyElement = hasClosestByAttribute(event.target, "data-type", "copy");
|
||||
if (copyElement) {
|
||||
writeText(copyElement.previousElementSibling.textContent.trim());
|
||||
|
|
@ -105,11 +63,26 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
return true;
|
||||
}
|
||||
|
||||
const gutterElement = hasClosestByClassName(event.target, "av__gutter");
|
||||
const gutterElement = hasClosestByClassName(event.target, "ariaLabel");
|
||||
if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
|
||||
const rowElement = gutterElement.parentElement.parentElement.parentElement;
|
||||
const rowElement = gutterElement.parentElement.parentElement;
|
||||
if (gutterElement.dataset.action === "add") {
|
||||
avAdd(protyle, blockElement, rowElement, event.altKey);
|
||||
const avID = blockElement.getAttribute("data-av-id");
|
||||
const srcIDs = [Lute.NewNodeID()];
|
||||
const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : rowElement.getAttribute("data-id");
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
avID,
|
||||
previousID,
|
||||
srcIDs,
|
||||
isDetached: true,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
srcIDs,
|
||||
avID,
|
||||
}]);
|
||||
insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
|
||||
popTextCell(protyle, [rowElement[event.altKey ? "previousElementSibling" : "nextElementSibling"].querySelector('[data-detached="true"]')], "block");
|
||||
} else {
|
||||
const gutterRect = gutterElement.getBoundingClientRect();
|
||||
avContextmenu(protyle, rowElement, {
|
||||
|
|
@ -124,10 +97,10 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
return true;
|
||||
}
|
||||
|
||||
const firstcolElement = hasClosestByClassName(event.target, "av__firstcol");
|
||||
if (firstcolElement) {
|
||||
const checkElement = hasClosestByClassName(event.target, "av__firstcol");
|
||||
if (checkElement) {
|
||||
window.siyuan.menus.menu.remove();
|
||||
selectRow(firstcolElement, "toggle");
|
||||
selectRow(checkElement, "toggle");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return true;
|
||||
|
|
@ -229,7 +202,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
selectRow(cellElement.parentElement.querySelector(".av__firstcol"), "toggle");
|
||||
} else {
|
||||
cellElement.parentElement.parentElement.querySelectorAll(".av__row--select").forEach(item => {
|
||||
item.querySelector(".av__firstcol .icon__check use").setAttribute("xlink:href", "#iconUncheck");
|
||||
item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
|
||||
item.classList.remove("av__row--select");
|
||||
});
|
||||
updateHeader(cellElement.parentElement);
|
||||
|
|
@ -248,6 +221,29 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
return true;
|
||||
}
|
||||
|
||||
const addRowElement = hasClosestByClassName(event.target, "av__row--add");
|
||||
if (addRowElement) {
|
||||
const avID = blockElement.getAttribute("data-av-id");
|
||||
const srcIDs = [Lute.NewNodeID()];
|
||||
const previousID = addRowElement.previousElementSibling.getAttribute("data-id") || "";
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
avID,
|
||||
previousID,
|
||||
srcIDs,
|
||||
isDetached: true,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
srcIDs,
|
||||
avID,
|
||||
}]);
|
||||
insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
|
||||
popTextCell(protyle, [addRowElement.previousElementSibling.querySelector('[data-detached="true"]')], "block");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
|
@ -263,7 +259,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 .icon__check use").forEach(item => {
|
||||
blockElement.querySelectorAll(".av__firstcol use").forEach(item => {
|
||||
item.setAttribute("xlink:href", "#iconUncheck");
|
||||
});
|
||||
}
|
||||
|
|
@ -273,7 +269,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
|
|||
return true;
|
||||
}
|
||||
rowElement.classList.add("av__row--select");
|
||||
rowElement.querySelector(".av__firstcol .icon__check use").setAttribute("xlink:href", "#iconCheck");
|
||||
rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
|
||||
const rowIds: string[] = [];
|
||||
const blockIds: string[] = [];
|
||||
const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)");
|
||||
|
|
@ -309,24 +305,6 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
|
|||
}
|
||||
});
|
||||
if (rowIds.length === 1) {
|
||||
menu.addSeparator();
|
||||
menu.addItem({
|
||||
label: window.siyuan.languages.addAttr,
|
||||
icon: "iconAdd",
|
||||
type: "submenu",
|
||||
submenu: [
|
||||
{
|
||||
label: window.siyuan.languages.insertRowAbove,
|
||||
icon: "iconBefore",
|
||||
click: () => avAdd(protyle, blockElement, rowElement, true),
|
||||
},
|
||||
{
|
||||
label: window.siyuan.languages.insertRowBelow,
|
||||
icon: "iconAfter",
|
||||
click: () => avAdd(protyle, blockElement, rowElement, false),
|
||||
},
|
||||
]
|
||||
});
|
||||
menu.addSeparator();
|
||||
openEditorTab(protyle.app, rowIds[0]);
|
||||
menu.addItem({
|
||||
|
|
|
|||
|
|
@ -53,13 +53,13 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
|
|||
}, (response) => {
|
||||
const data = response.data.view as IAVTable;
|
||||
// header
|
||||
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg class="icon__check"><use xlink:href="#iconUncheck"></use></svg></div>';
|
||||
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 32px"><use xlink:href="#iconUncheck"></use></svg></div>';
|
||||
let calcHTML = "";
|
||||
data.columns.forEach((column: IAVColumn) => {
|
||||
if (column.hidden) {
|
||||
return;
|
||||
}
|
||||
tableHTML += `<div class="av__cell" data-col-id="${column.id}" data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}"
|
||||
tableHTML += `<div class="av__cell" data-col-id="${column.id}" data-icon="${column.icon}" data-dtype="${column.type}"
|
||||
style="width: ${column.width || "200px"};
|
||||
${column.wrap ? "" : "white-space: nowrap;"}">
|
||||
<div draggable="true" class="av__cellheader">
|
||||
|
|
@ -80,17 +80,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
|
|||
// body
|
||||
data.rows.forEach((row: IAVRow) => {
|
||||
tableHTML += `<div class="av__row" data-id="${row.id}">
|
||||
<div class="av__firstcol">
|
||||
<svg class="icon__check"><use xlink:href="#iconUncheck"></use></svg>
|
||||
<div class="av__gutters">
|
||||
<button class="av__gutter ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}">
|
||||
<svg><use xlink:href="#iconDrag"></use></svg>
|
||||
</button>
|
||||
<button class="av__gutter ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}">
|
||||
<svg><use xlink:href="#iconAdd"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
<div class="av__gutters">
|
||||
<button class="ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
|
||||
<button class="ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
|
||||
</div>
|
||||
<div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
|
||||
row.cells.forEach((cell, index) => {
|
||||
if (data.columns[index].hidden) {
|
||||
return;
|
||||
|
|
@ -160,12 +154,12 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
|
|||
text += `<span ${cell.valueType !== "number" ? "" : 'style="right:auto;left:5px"'} data-type="copy" class="b3-tooltips b3-tooltips__n block__icon" aria-label="${window.siyuan.languages.copy}"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
|
||||
}
|
||||
}
|
||||
|
||||
tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}" data-wrap="${data.columns[index].wrap}"
|
||||
tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
|
||||
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
|
||||
${cell.value?.isDetached ? ' data-detached="true"' : ""}
|
||||
style="width: ${data.columns[index].width || "200px"};
|
||||
${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
|
||||
white-space: ${data.columns[index].wrap ? "pre-wrap" : "nowrap"};
|
||||
${cell.valueType !== "number" ? "" : "flex-direction: row-reverse;"}
|
||||
${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
|
||||
});
|
||||
|
|
@ -179,7 +173,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
|
|||
</div>`;
|
||||
});
|
||||
setTimeout(() => {
|
||||
e.firstElementChild.outerHTML = `<div class="av__container">
|
||||
e.firstElementChild.outerHTML = `<div>
|
||||
<div class="av__header">
|
||||
<div class="layout-tab-bar fn__flex">
|
||||
${tabHTML}
|
||||
|
|
@ -203,17 +197,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
|
|||
<div class="av__counter fn__none"></div>
|
||||
</div>
|
||||
<div class="av__scroll">
|
||||
<div class="av__body">
|
||||
<div style="float: left;">
|
||||
${tableHTML}
|
||||
<div class="av__row--add">
|
||||
<div class="av__firstcol">
|
||||
<svg><use xlink:href="#iconAdd"></use></svg>
|
||||
</div>
|
||||
<div class="av__calc" style>
|
||||
${window.siyuan.languages.addAttr}
|
||||
</div>
|
||||
<svg><use xlink:href="#iconAdd"></use></svg>
|
||||
${window.siyuan.languages.addAttr}
|
||||
</div>
|
||||
<div class="av__row--footer"><div class="av__firstcol"></div>${calcHTML}</div>
|
||||
<div class="av__row--footer"><div style="width: 24px"></div>${calcHTML}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
import {hasClosestBlock} from "../../util/hasClosest";
|
||||
import {focusBlock} from "../../util/selection";
|
||||
|
||||
export const selectRow = (firstcolElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => {
|
||||
const rowElement = firstcolElement.parentElement;
|
||||
const useElement = firstcolElement.querySelector(".icon__check use");
|
||||
export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => {
|
||||
const rowElement = checkElement.parentElement;
|
||||
const useElement = checkElement.querySelector("use");
|
||||
if (rowElement.classList.contains("av__row--header") || type === "unselectAll") {
|
||||
if ("#iconCheck" === useElement.getAttribute("xlink:href")) {
|
||||
rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => {
|
||||
item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconUncheck");
|
||||
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
|
||||
item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
|
||||
item.parentElement.classList.remove("av__row--select");
|
||||
});
|
||||
} else {
|
||||
rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => {
|
||||
item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconCheck");
|
||||
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
|
||||
item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
|
||||
item.parentElement.classList.add("av__row--select");
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (type === "select" || (useElement.getAttribute("xlink:href") === "#iconUncheck" && type === "toggle")) {
|
||||
firstcolElement.parentElement.classList.add("av__row--select");
|
||||
checkElement.parentElement.classList.add("av__row--select");
|
||||
useElement.setAttribute("xlink:href", "#iconCheck");
|
||||
} else if (type === "unselect" || (useElement.getAttribute("xlink:href") === "#iconCheck" && type === "toggle")) {
|
||||
firstcolElement.parentElement.classList.remove("av__row--select");
|
||||
checkElement.parentElement.classList.remove("av__row--select");
|
||||
useElement.setAttribute("xlink:href", "#iconUncheck");
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ export const updateHeader = (rowElement: HTMLElement) => {
|
|||
const selectCount = rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").length;
|
||||
const diffCount = rowElement.parentElement.childElementCount - 3 - selectCount;
|
||||
const headElement = rowElement.parentElement.firstElementChild;
|
||||
const headUseElement = headElement.querySelector(".icon__check use");
|
||||
const headUseElement = headElement.querySelector("use");
|
||||
const counterElement = blockElement.querySelector(".av__counter");
|
||||
const avHeadElement = blockElement.querySelector(".av__header") as HTMLElement;
|
||||
if (diffCount === 0 && rowElement.parentElement.childElementCount - 3 !== 0) {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,30 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
|
|||
}
|
||||
}
|
||||
|
||||
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
|
||||
if (item.parentElement.classList.contains("protyle-wysiwyg")) {
|
||||
const headerTop = item.offsetTop + 43;
|
||||
const headerElement = item.querySelector(".av__row--header") as HTMLElement;
|
||||
if (headerElement) {
|
||||
if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
|
||||
headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
|
||||
} else {
|
||||
headerElement.style.transform = "";
|
||||
}
|
||||
}
|
||||
const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
|
||||
if (footerElement) {
|
||||
const footerBottom = headerTop + footerElement.parentElement.clientHeight;
|
||||
const scrollBottom = element.scrollTop + element.clientHeight + 5;
|
||||
if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) {
|
||||
footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`;
|
||||
} else {
|
||||
footerElement.style.transform = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (!protyle.element.classList.contains("block__edit") && !isMobile()) {
|
||||
protyle.contentElement.setAttribute("data-scrolltop", element.scrollTop.toString());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,11 @@ export const resize = (protyle: IProtyle) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) {
|
||||
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
|
||||
resizeAV(item);
|
||||
});
|
||||
}
|
||||
}, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束
|
||||
};
|
||||
|
||||
|
|
@ -49,11 +54,34 @@ export const resizeAV = (item: HTMLElement) => {
|
|||
if (!item.classList.contains("av") || item.getAttribute("data-render") !== "true") {
|
||||
return;
|
||||
}
|
||||
|
||||
const containerElement = item.querySelector<HTMLElement>(".av__container");
|
||||
if (item.style.width.endsWith("%")) {
|
||||
containerElement.style.width = "auto";
|
||||
const attrElement = item.querySelector(".protyle-attr") as HTMLElement
|
||||
if (item.style.width.endsWith("%") || item.style.margin) {
|
||||
const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
|
||||
avHeaderElement.style.paddingLeft = "";
|
||||
avHeaderElement.style.paddingRight = "";
|
||||
const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
|
||||
avBodyElement.style.paddingLeft = "";
|
||||
avBodyElement.style.paddingRight = "";
|
||||
attrElement.style.paddingRight = "";
|
||||
item.style.alignSelf = "";
|
||||
if (!item.style.width.endsWith("%")) {
|
||||
item.style.width = "";
|
||||
item.style.maxWidth = "100%";
|
||||
}
|
||||
} else {
|
||||
containerElement.style.width = "";
|
||||
const paddingLeft = item.parentElement.style.paddingLeft;
|
||||
const paddingRight = item.parentElement.style.paddingRight;
|
||||
const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
|
||||
avHeaderElement.style.paddingLeft = paddingLeft;
|
||||
avHeaderElement.style.paddingRight = paddingRight;
|
||||
const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
|
||||
avBodyElement.style.paddingLeft = paddingLeft;
|
||||
avBodyElement.style.paddingRight = paddingRight;
|
||||
attrElement.style.paddingRight = paddingRight;
|
||||
item.style.alignSelf = "center";
|
||||
if (item.parentElement.clientWidth > 0) {
|
||||
item.style.width = item.parentElement.clientWidth + "px";
|
||||
item.style.maxWidth = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1452,6 +1452,12 @@ export class WYSIWYG {
|
|||
if (embedElement) {
|
||||
protyle.gutter.render(protyle, embedElement, this.element);
|
||||
} else {
|
||||
// database 行块标
|
||||
const rowElement = hasClosestByClassName(event.target, "av__row");
|
||||
if (rowElement && rowElement.dataset.id) {
|
||||
const rowRect = rowElement.getBoundingClientRect();
|
||||
rowElement.firstElementChild.setAttribute("style", `left:${rowRect.left - 44}px;top:${rowRect.top}px`);
|
||||
}
|
||||
protyle.gutter.render(protyle, nodeElement, this.element);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ import {escapeHtml} from "../../util/escape";
|
|||
import {insertHTML} from "../util/insertHTML";
|
||||
import {removeSearchMark} from "../toolbar/util";
|
||||
import {avKeydown} from "../render/av/keydown";
|
||||
import {resizeAV} from "../util/resize";
|
||||
|
||||
|
||||
export const getContentByInlineHTML = (range: Range, cb: (content: string) => void) => {
|
||||
|
|
@ -1146,7 +1147,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
}
|
||||
updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "flex-start";
|
||||
e.style.margin = "";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "left";
|
||||
}
|
||||
|
|
@ -1167,7 +1169,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
}
|
||||
updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "center";
|
||||
e.style.margin = "0 auto";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "center";
|
||||
}
|
||||
|
|
@ -1184,7 +1187,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
}
|
||||
updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => {
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.alignItems = "flex-end";
|
||||
e.style.margin = "0 0 0 auto";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "right";
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue