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

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

Browse source
This commit is contained in:
Vanessa 2024-04-07 11:25:52 +08:00
parent 3c5749f48f
commit 2b65d2af22
3 changed files with 43 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/src/protyle/render/av/col.ts
View file

@ -201,7 +201,7 @@ export const getEditHTML = (options: {
</label>`; </label>`;
} }
if (colData.type !== "block") { if (colData.type !== "block") {
html += ` <button class="b3-menu__separator"></button> html += `<button class="b3-menu__separator"></button>
<button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}"> <button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
<svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg> <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
<span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span> <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
@ -215,7 +215,15 @@ export const getEditHTML = (options: {
<span class="b3-menu__label">${window.siyuan.languages.delete}</span> <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button>` </button>`
} }
return `<div class="b3-menu__items">${html}</div> return `<div class="b3-menu__items">
${html}
<button class="b3-menu__separator"></button>
<label class="b3-menu__item">
<span class="fn__flex-center">${window.siyuan.languages.wrap}</span>
<span class="fn__space fn__flex-1"></span>
<input data-type="wrap" type="checkbox" class="b3-switch b3-switch--menu" ${colData.wrap ? " checked" : ""}>
</label>
</div>
<div class="b3-menu__items fn__none"> <div class="b3-menu__items fn__none">
<button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}"> <button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goEditCol"> <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goEditCol">
@ -245,6 +253,7 @@ export const getEditHTML = (options: {
export const bindEditEvent = (options: { export const bindEditEvent = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV, data: IAV,
blockID: string,
menuElement: HTMLElement, menuElement: HTMLElement,
isCustomAttr: boolean isCustomAttr: boolean
}) => { }) => {
@ -320,6 +329,24 @@ export const bindEditEvent = (options: {
}); });
} }
const wrapElement = options.menuElement.querySelector('.b3-switch[data-type="wrap"]') as HTMLInputElement;
if (wrapElement) {
wrapElement.addEventListener("change", () => {
transaction(options.protyle, [{
action: "setAttrViewColWrap",
id: colId,
avID,
data: wrapElement.checked,
blockID: options.blockID
}], [{
action: "setAttrViewColWrap",
id: colId,
avID,
data: !wrapElement.checked,
blockID: options.blockID
}]);
})
}
const addOptionElement = options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement; const addOptionElement = options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement;
if (addOptionElement) { if (addOptionElement) {
addOptionElement.addEventListener("keydown", (event: KeyboardEvent) => { addOptionElement.addEventListener("keydown", (event: KeyboardEvent) => {
@ -365,12 +392,14 @@ export const bindEditEvent = (options: {
protyle: options.protyle, protyle: options.protyle,
menuElement: options.menuElement, menuElement: options.menuElement,
data: options.data, data: options.data,
isCustomAttr: options.isCustomAttr isCustomAttr: options.isCustomAttr,
blockID: options.blockID
}); });
(options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement).focus(); (options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement).focus();
} }
}); });
} }
const fillCreatedElement = options.menuElement.querySelector('[data-type="fillCreated"]') as HTMLInputElement; const fillCreatedElement = options.menuElement.querySelector('[data-type="fillCreated"]') as HTMLInputElement;
if (fillCreatedElement) { if (fillCreatedElement) {
fillCreatedElement.addEventListener("change", () => { fillCreatedElement.addEventListener("change", () => {
@ -840,8 +869,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
menu.addSeparator(); menu.addSeparator();
} }
menu.addItem({ menu.addItem({
label: `<label class="fn__flex" style="margin: 4px 0;padding-right: 6px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span> label: `<label class="fn__flex"><span class="fn__flex-center">${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.dataset.wrap === "true" ? " checked" : ""}></label>`, <input type="checkbox" class="b3-switch b3-switch--menu"${cellElement.dataset.wrap === "true" ? " checked" : ""}></label>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input") as HTMLInputElement; const inputElement = element.querySelector("input") as HTMLInputElement;
inputElement.addEventListener("change", () => { inputElement.addEventListener("change", () => {

10
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -162,7 +162,7 @@ export const openMenuPanel = (options: {
if (options.type === "sorts") { if (options.type === "sorts") {
bindSortsEvent(options.protyle, menuElement, data, blockID); bindSortsEvent(options.protyle, menuElement, data, blockID);
} else if (options.type === "edit") { } else if (options.type === "edit") {
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else if (options.type === "config") { } else if (options.type === "config") {
bindViewEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement}); bindViewEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement});
} }
@ -358,7 +358,7 @@ export const openMenuPanel = (options: {
colId, colId,
isCustomAttr isCustomAttr
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} }
return; return;
} }
@ -823,7 +823,7 @@ export const openMenuPanel = (options: {
colId: target.dataset.id, colId: target.dataset.id,
isCustomAttr isCustomAttr
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -940,7 +940,7 @@ export const openMenuPanel = (options: {
colId, colId,
isCustomAttr isCustomAttr
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(data.view);
} }
@ -972,7 +972,7 @@ export const openMenuPanel = (options: {
colId, colId,
isCustomAttr isCustomAttr
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(data.view);
} }

7
app/src/protyle/render/av/select.ts
View file

@ -135,6 +135,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
if (!menuElement) { if (!menuElement) {
return; return;
} }
const blockID = blockElement.getAttribute("data-node-id");
const colId = cellElements ? cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); const colId = cellElements ? cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
let name = target.parentElement.dataset.name; let name = target.parentElement.dataset.name;
let color = target.parentElement.dataset.color; let color = target.parentElement.dataset.color;
@ -189,7 +190,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
if (!cellElements) { if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr}); menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
bindEditEvent({protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
cellElements.forEach((cellElement: HTMLMediaElement) => { cellElements.forEach((cellElement: HTMLMediaElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
@ -267,7 +268,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
if (!cellElements) { if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr}); menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
bindEditEvent({protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
cellElements.forEach((cellElement: HTMLElement) => { cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
@ -346,7 +347,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
if (!cellElements) { if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr}); menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
bindEditEvent({protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
cellElements.forEach((cellElement: HTMLElement) => { cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {