diff --git a/client/ui/custom-elements/chat-image.ts b/client/ui/custom-elements/chat-image.ts index 06bb7fe..9a3914b 100644 --- a/client/ui/custom-elements/chat-image.ts +++ b/client/ui/custom-elements/chat-image.ts @@ -1,7 +1,7 @@ import { $ } from 'mdui/jq' -import { dialog } from 'mdui' import 'pinch-zoom-element' +import { snackbar } from "../snackbar.ts"; function openImageViewer(src: string) { $('#image-viewer-dialog-inner').empty() @@ -25,32 +25,18 @@ customElements.define('chat-image', class extends HTMLElement { const e = new Image() e.style.maxWidth = "100%" e.style.maxHeight = "90%" - e.style.marginTop = "13px" + e.style.marginTop = '5px' + e.style.marginBottom = '5px' e.style.borderRadius = "var(--mdui-shape-corner-medium)" e.alt = $(this).attr('alt') || "" e.onerror = () => { - const bak = $(this).html() - $(this).html(`
`) + const src = $(this).attr('src') + $(this).html(``) $(this).attr('alt', '無法加載圖像') $(this).on('click', () => { - dialog({ - headline: "圖片無法載入", - description: "您是否需要重新加載?", - actions: [ - { - text: "重載", - onClick: () => { - $(this).html(bak) - return false - }, - }, - { - text: "取消", - onClick: () => { - return false - }, - }, - ], + snackbar({ + message: `圖片 (${src}) 無法加載!`, + placement: 'top' }) }) }