Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-03-04 11:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2024-12-11 10:07:38 +08:00
parent 404f10aee3
commit 6294d64d4a
2 changed files with 85 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/src/assets/scss/business/_color.scss
View file

@ -21,8 +21,11 @@
margin: 0 8px 0 0; margin: 0 8px 0 0;
} }
&:hover:not(.color__square--list), &:hover:not(.color__square--list):not(.color__square--current) {
box-shadow: 0 0 0 1px var(--b3-border-color) inset, 0 0 0 3px var(--b3-list-hover);
}
&--current { &--current {
box-shadow: 0 0 0 1px var(--b3-list-hover) inset, 0 0 0 4px var(--b3-theme-background); box-shadow: 0 0 0 2px var(--b3-menu-background) inset, 0 0 0 3px var(--b3-list-hover);
} }
} }

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

@ -318,87 +318,91 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
} }
}); });
menu.addSeparator(); menu.addSeparator();
let html = '<div class="fn__flex fn__flex-wrap" style="width: 238px"><button data-color="0" class="color__square" style="color: var(--b3-font-color0);background-color: var(--b3-font-background0);">A</button>'
Array.from(Array(13).keys()).forEach(index => { Array.from(Array(13).keys()).forEach(index => {
menu.addItem({ html += `<button data-color="${index + 1}" class="color__square${parseInt(color) === index + 1 ? " color__square--current" : ""}" style="color: var(--b3-font-color${index + 1});background-color: var(--b3-font-background${index + 1});">A</button>`
checked: parseInt(color) === index + 1, });
iconHTML: "", menu.addItem({
label: `<span class="color__square color__square--list" style="margin: 2px 0;color: var(--b3-font-color${index + 1});background-color: var(--b3-font-background${index + 1});">A</span>`, type: "empty",
click(element) { iconHTML: "",
if (element.lastElementChild.classList.contains("b3-menu__checked")) { label: html + "</div>",
return; bind(element) {
} element.addEventListener("click", (event) => {
element.parentElement.querySelector(".b3-menu__checked")?.remove(); const target = event.target as HTMLElement
element.insertAdjacentHTML("beforeend", '<svg class="b3-menu__checked"><use xlink:href="#iconSelect"></use></svg></span>'); if (target.classList.contains("color__square") && !target.classList.contains("color__square--current")) {
transaction(protyle, [{ element.querySelector(".color__square--current")?.classList.remove("color__square--current");
action: "updateAttrViewColOption", target.classList.add("color__square--current");
id: colId, const newColor = target.getAttribute("data-color")
avID: data.id, transaction(protyle, [{
data: { action: "updateAttrViewColOption",
oldName: name, id: colId,
newName: inputElement.value, avID: data.id,
oldColor: color, data: {
newColor: (index + 1).toString(), oldName: name,
newDesc: descElement.value newName: inputElement.value,
}, oldColor: color,
}], [{ newColor,
action: "updateAttrViewColOption", newDesc: descElement.value
id: colId, },
avID: data.id, }], [{
data: { action: "updateAttrViewColOption",
oldName: inputElement.value, id: colId,
newName: name, avID: data.id,
oldColor: (index + 1).toString(), data: {
newColor: color, oldName: inputElement.value,
newDesc: descElement.value newName: name,
}, oldColor: newColor,
}]); newColor: color,
newDesc: descElement.value
},
}]);
data.view.columns.find(column => { data.view.columns.find(column => {
if (column.id === colId) { if (column.id === colId) {
column.options.find((item) => { column.options.find((item) => {
if (item.name === name) { if (item.name === name) {
item.name = inputElement.value; item.name = inputElement.value;
item.color = (index + 1).toString(); item.color = newColor;
return true; return true;
} }
}); });
return true; return true;
}
});
const oldScroll = menuElement.querySelector(".b3-menu__items").scrollTop;
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else {
cellElements.forEach((cellElement: HTMLElement, cellIndex) => {
const rowElement = hasClosestByClassName(cellElement, "av__row");
if (rowElement) {
cellElement = cellElements[cellIndex] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) ||
blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement;
}
cellValues[cellIndex].mSelect.find((item) => {
if (item.content === name) {
item.content = inputElement.value;
item.color = (index + 1).toString();
return true;
}
});
if (cellElement.classList.contains("custom-attr__avvalue")) {
cellElement.innerHTML = genAVValueHTML(cellValues[cellIndex]);
} else {
updateAttrViewCellAnimation(cellElement, cellValues[cellIndex]);
} }
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); const oldScroll = menuElement.querySelector(".b3-menu__items").scrollTop;
bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else {
cellElements.forEach((cellElement: HTMLElement, cellIndex) => {
const rowElement = hasClosestByClassName(cellElement, "av__row");
if (rowElement) {
cellElement = cellElements[cellIndex] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) ||
blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement;
}
cellValues[cellIndex].mSelect.find((item) => {
if (item.content === name) {
item.content = inputElement.value;
item.color = newColor;
return true;
}
});
if (cellElement.classList.contains("custom-attr__avvalue")) {
cellElement.innerHTML = genAVValueHTML(cellValues[cellIndex]);
} else {
updateAttrViewCellAnimation(cellElement, cellValues[cellIndex]);
}
});
menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
}
menuElement.querySelector(".b3-menu__items").scrollTop = oldScroll;
name = inputElement.value;
desc = descElement.value;
color = newColor;
} }
menuElement.querySelector(".b3-menu__items").scrollTop = oldScroll; })
name = inputElement.value; }
desc = descElement.value;
color = (index + 1).toString();
return true;
}
});
}); });
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
menu.open({ menu.open({