diff --git a/app/src/assets/scss/component/_form.scss b/app/src/assets/scss/component/_form.scss index f6c1e4bf8..ce997c6a0 100644 --- a/app/src/assets/scss/component/_form.scss +++ b/app/src/assets/scss/component/_form.scss @@ -51,10 +51,11 @@ } } - // repo password + // repo password & av description &__icona { position: relative; color: var(--b3-theme-on-surface); + line-height: normal; &-icon { position: absolute; diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index cba960393..8cbe910eb 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -199,7 +199,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)} let tabHTML = ""; let viewData: IAVView; response.data.views.forEach((item: IAVView) => { - tabHTML += `
+ tabHTML += `
" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}"> ${item.icon ? unicode2Emoji(item.icon, "item__graphic", true) : ''} ${item.name}
`; diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts index 83c47dc4e..22dd0e8e3 100644 --- a/app/src/protyle/render/av/view.ts +++ b/app/src/protyle/render/av/view.ts @@ -120,6 +120,36 @@ export const bindViewEvent = (options: { } }); inputElement.select(); + const descElement = options.menuElement.querySelector('.b3-text-field[data-type="desc"]') as HTMLInputElement; + inputElement.nextElementSibling.addEventListener("click", () => { + descElement.parentElement.classList.toggle("fn__none"); + }) + descElement.addEventListener("blur", () => { + if (descElement.value !== descElement.dataset.value) { + transaction(options.protyle, [{ + action: "setAttrViewViewDesc", + avID: options.data.id, + id: options.data.viewID, + data: descElement.value + }], [{ + action: "setAttrViewViewDesc", + avID: options.data.id, + id: options.data.viewID, + data: descElement.dataset.value + }]); + descElement.dataset.value = descElement.value; + } + }); + descElement.addEventListener("keydown", (event) => { + if (event.isComposing) { + return; + } + if (event.key === "Enter") { + event.preventDefault(); + descElement.blur(); + options.menuElement.parentElement.remove(); + } + }); const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement; toggleTitleElement.addEventListener("change", () => { const avID = options.blockElement.getAttribute("data-av-id"); @@ -163,8 +193,19 @@ export const getViewHTML = (data: IAV) => {