diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 5295f3797..5a6b81b93 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -48,8 +48,15 @@ background-color: transparent; font-size: 87.5%; + .item__graphic { + height: 1.625em; + width: calc(1.625em - 10px); + padding: 5px 5px 5px 8px; + } + .item__text { padding-left: 5px; + line-height: normal; } } } @@ -175,9 +182,9 @@ } svg { - height: 8px; - width: 8px; margin-left: 5px; + height: 1.625em; + width: calc(1.625em - 10px); } span { @@ -196,7 +203,7 @@ display: flex; .b3-button { - margin: 3px 0 3px 24px; + margin: 5px 0 5px 1.625em; color: var(--b3-theme-on-surface); background-color: transparent; font-size: 75%; @@ -209,8 +216,8 @@ } svg { - width: 12px; - height: 20px; + height: 1.625em; + width: calc(1.625em - 8px); &[data-type="set-page-size"] { margin: 0 0 0 4px; @@ -287,12 +294,11 @@ } .av__cellheadericon { - height: 1em; - width: 1em; + height: 1.625em; + width: calc(1.625em - 10px); color: var(--b3-theme-on-surface); margin: 0 5px 0 0; flex-shrink: 0; - line-height: 1em; font-size: inherit; &--pin { @@ -315,6 +321,8 @@ .b3-chip { margin: 1px 2px; padding: 2px 6px; + line-height: calc(1.625em - 6px); + font-size: inherit; } } @@ -345,7 +353,7 @@ text-overflow: ellipsis; display: inline-block; vertical-align: top; - height: 20px; + border-bottom: 0; } & > .av__cellicon { @@ -357,10 +365,11 @@ &__checkbox { color: var(--b3-theme-on-surface); - height: 14px; - width: 14px; - vertical-align: bottom; - padding: 4.5px 0; + height: 1.625em; + width: calc(1.625em - 10px); + box-sizing: border-box; + padding: 5px 0; + display: block; &:hover { color: var(--b3-theme-on-background); @@ -371,7 +380,7 @@ svg { @extend .av__checkbox; opacity: 0; - padding: 9.5px 5px; + margin: 5px; cursor: pointer; } @@ -515,11 +524,12 @@ } img.av__cellassetimg { - max-height: 20px; + max-height: calc(1.625em - 2px); border-radius: var(--b3-border-radius); margin: 1px 2px; max-width: none; vertical-align: top; + font-size: inherit; } html[data-theme-mode="dark"] .av__panel .b3-menu__item[draggable="true"] { diff --git a/app/src/assets/scss/business/_custom.scss b/app/src/assets/scss/business/_custom.scss index 8d9ce4ab3..1e5712b42 100644 --- a/app/src/assets/scss/business/_custom.scss +++ b/app/src/assets/scss/business/_custom.scss @@ -12,6 +12,11 @@ &:hover { background-color: var(--b3-theme-background); } + + .av__checkbox { + width: 16px; + height: 26px; + } } &__avheader { diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index 8b1b81ebd..e80ed1a3b 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -102,7 +102,7 @@ export const genAVValueHTML = (value: IAVCellValue) => { `; break; case "checkbox": - html = ``; + html = ``; break; case "template": html = `
${value.template.content}
`; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 819382aa9..b6c7a640c 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -462,7 +462,7 @@ export const openMenuPanel = (options: { } let target = event.target as HTMLElement; while (target && !target.isSameNode(avPanelElement) || type) { - type = target.dataset.type || type; + type = target?.dataset.type || type; if (type === "close") { if (!options.protyle.toolbar.subElement.classList.contains("fn__none")) { // 优先关闭资源文件搜索