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) => {