diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 364a9be21..f90036132 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -410,12 +410,6 @@ display: none; } - &[data-dtype="mAsset"], - &[data-dtype="mSelect"], - &[data-dtype="select"] { - margin-left: -2px; - } - &:hover .b3-chip[data-type=block-more] { top: 2px; display: block; @@ -427,14 +421,28 @@ white-space: pre-wrap; } + &:not(.av__gallery-fields--edit) .av__cell { + &[data-dtype="mAsset"], + &[data-dtype="mSelect"], + &[data-dtype="select"] { + margin-left: -2px; + } + } + &--edit { .av__cell { min-height: 1.625em; + } - &[data-empty="true"]:after { - content: attr(aria-label); - position: absolute; - color: var(--b3-theme-on-surface-light); + .av__cell[data-empty="true"] .av__gallery-tip { + display: flex; + } + + .av__cell { + &[data-dtype="mAsset"][data-empty="false"], + &[data-dtype="mSelect"][data-empty="false"], + &[data-dtype="select"][data-empty="false"] { + margin-left: -2px; } } } @@ -470,6 +478,26 @@ transition: var(--b3-transition); z-index: 2; } + + &-tip { + display: none; + align-items: center; + opacity: 0.38; + + img, svg { + height: calc(1.625em - 8px); + width: calc(1.625em - 8px); + margin: 0 5px 0 0; + font-size: 1em; + } + + span { + width: calc(1.625em - 8px); + margin: 0 5px 0 0; + height: 1.625em; + font-size: 1em; + } + } } &__layout { diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index e6ae62065..6824c9e41 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -124,7 +124,7 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) } else if (colType === "mAsset") { const mAsset: IAVCellAssetValue[] = []; Array.from(cellElement.children).forEach((item) => { - if (item.classList.contains("av__drag-fill")) { + if (!item.classList.contains("av__celltext--url") && !item.classList.contains("av__cellassetimg")) { return; } const isImg = item.classList.contains("av__cellassetimg"); diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts index cbffa4be0..0395555a1 100644 --- a/app/src/protyle/render/av/gallery/render.ts +++ b/app/src/protyle/render/av/gallery/render.ts @@ -10,6 +10,7 @@ import {addClearButton} from "../../../../util/addClearButton"; import {avRender, updateSearch} from "../render"; import {getViewIcon} from "../view"; import {processRender} from "../../../util/processCode"; +import {getColIconByType} from "../col"; export const renderGallery = (options: { blockElement: HTMLElement, @@ -92,7 +93,7 @@ export const renderGallery = (options: { const isEmpty = cellValueIsEmpty(cell.value); galleryHTML += `
${renderCell(cell.value, rowIndex, view.showIcon, "gallery")}
`; +${cell.color ? `color:${cell.color};` : ""}"> + ${renderCell(cell.value, rowIndex, view.showIcon, "gallery")} + +`; }); galleryHTML += `