diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 668ea5e1c..f60f6bf2e 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -282,7 +282,7 @@ } .av__gallery-actions { - opacity: 1; + opacity: .86; } } @@ -335,6 +335,16 @@ flex: 1; transition: background 100ms ease-out; white-space: nowrap; + font-size: 85%; + + .av__cell { + padding: 0 8px; + border-right: 0; + + &:hover .block__icon { + opacity: 0; + } + } &--wrap { word-break: break-all; diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index d9d47f1b5..0cc406714 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -34,6 +34,7 @@ import {hideElements} from "../../ui/hideElements"; import {fetchPost, fetchSyncPost} from "../../../util/fetch"; import {scrollCenter} from "../../../util/highlightById"; import {escapeHtml} from "../../../util/escape"; +import {openGalleryItemMenu} from "./gallery/util"; export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { if (isOnlyMeta(event)) { @@ -263,6 +264,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.stopPropagation(); return true; } else if (type === "av-gallery-more") { + openGalleryItemMenu({target, blockElement, protyle}); event.preventDefault(); event.stopPropagation(); return true; diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts index ac46c6089..92e06afaf 100644 --- a/app/src/protyle/render/av/gallery/render.ts +++ b/app/src/protyle/render/av/gallery/render.ts @@ -1,7 +1,7 @@ import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../../util/hasClosest"; import {Constants} from "../../../../constants"; import {fetchPost} from "../../../../util/fetch"; -import {escapeAriaLabel, escapeHtml} from "../../../../util/escape"; +import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../../util/escape"; import {unicode2Emoji} from "../../../../emoji"; import {renderCell} from "../cell"; import {focusBlock} from "../../../util/selection"; @@ -95,7 +95,11 @@ export const renderGallery = (options: { if (cell.valueType === "checkbox") { checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck"; } - galleryHTML += `