From 6294d64d4a6e596c3bbe734e4ff97ea74ad3fd94 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 11 Dec 2024 10:07:38 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/13263 --- app/src/assets/scss/business/_color.scss | 7 +- app/src/protyle/render/av/select.ts | 156 ++++++++++++----------- 2 files changed, 85 insertions(+), 78 deletions(-) diff --git a/app/src/assets/scss/business/_color.scss b/app/src/assets/scss/business/_color.scss index 033f60c7f..1bc02524e 100644 --- a/app/src/assets/scss/business/_color.scss +++ b/app/src/assets/scss/business/_color.scss @@ -21,8 +21,11 @@ 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 { - 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); } } diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts index f2614ac3c..8f48d0444 100644 --- a/app/src/protyle/render/av/select.ts +++ b/app/src/protyle/render/av/select.ts @@ -318,87 +318,91 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, } }); menu.addSeparator(); + let html = '
' Array.from(Array(13).keys()).forEach(index => { - menu.addItem({ - checked: parseInt(color) === index + 1, - iconHTML: "", - label: `A`, - click(element) { - if (element.lastElementChild.classList.contains("b3-menu__checked")) { - return; - } - element.parentElement.querySelector(".b3-menu__checked")?.remove(); - element.insertAdjacentHTML("beforeend", ''); - transaction(protyle, [{ - action: "updateAttrViewColOption", - id: colId, - avID: data.id, - data: { - oldName: name, - newName: inputElement.value, - oldColor: color, - newColor: (index + 1).toString(), - newDesc: descElement.value - }, - }], [{ - action: "updateAttrViewColOption", - id: colId, - avID: data.id, - data: { - oldName: inputElement.value, - newName: name, - oldColor: (index + 1).toString(), - newColor: color, - newDesc: descElement.value - }, - }]); + html += `` + }); + menu.addItem({ + type: "empty", + iconHTML: "", + label: html + "
", + bind(element) { + element.addEventListener("click", (event) => { + const target = event.target as HTMLElement + if (target.classList.contains("color__square") && !target.classList.contains("color__square--current")) { + element.querySelector(".color__square--current")?.classList.remove("color__square--current"); + target.classList.add("color__square--current"); + const newColor = target.getAttribute("data-color") + transaction(protyle, [{ + action: "updateAttrViewColOption", + id: colId, + avID: data.id, + data: { + oldName: name, + newName: inputElement.value, + oldColor: color, + newColor, + newDesc: descElement.value + }, + }], [{ + action: "updateAttrViewColOption", + id: colId, + avID: data.id, + data: { + oldName: inputElement.value, + newName: name, + oldColor: newColor, + newColor: color, + newDesc: descElement.value + }, + }]); - data.view.columns.find(column => { - if (column.id === colId) { - column.options.find((item) => { - if (item.name === name) { - item.name = inputElement.value; - item.color = (index + 1).toString(); - 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]); + data.view.columns.find(column => { + if (column.id === colId) { + column.options.find((item) => { + if (item.name === name) { + item.name = inputElement.value; + item.color = newColor; + return true; + } + }); + return true; } }); - menuElement.innerHTML = getSelectHTML(data.view, cellElements); - bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); + 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 = 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(); menu.open({