diff --git a/vite/src/pipedal/TextInfoDialog.css b/vite/src/pipedal/TextInfoDialog.css index 559bb57..3b39fdc 100644 --- a/vite/src/pipedal/TextInfoDialog.css +++ b/vite/src/pipedal/TextInfoDialog.css @@ -7,6 +7,14 @@ margin-top: 8px; margin-bottom: 32px; } +.text-info-dialog-content #user-content-tone3000_float_right { + display: flex; + flex-direction: row-reverse; + flex-wrap: nowrap; + align-items: justify; + margin-top: 8px; + margin-bottom: 32px; +} .text-info-dialog-content #user-content-tone3000_float_content { flex-grow: 1; @@ -17,6 +25,16 @@ } +.text-info-dialog-content .tone3000_content { + flex-grow: 1; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + font-size: 0.8em; + justify-content: space-between; + +} + .text-info-dialog-content #user-content-tone3000_title { margin-top: 0; margin-bottom: 12px; @@ -45,9 +63,25 @@ border-radius: 6px; align-self: flex-start; } + +.text-info-dialog-content #user-content-tone3000_small_thumbnail { + width: 64px; + height: auto; + object-fit: contain; + margin-left: 24px; + margin-right: 8px; + border: 1px solid var(--pd-border-color); + border-radius: 6px; + align-self: flex-start; +} + @media (max-width: 600px) { .text-info-dialog-content #user-content-tone3000_thumbnail { width: 80px; margin-right: 20px; } + .text-info-dialog-content #user-content-tone3000_small_thumbnail { + display: none; + } + } \ No newline at end of file diff --git a/vite/src/pipedal/TextInfoDialog.tsx b/vite/src/pipedal/TextInfoDialog.tsx index 0690e3e..053321a 100644 --- a/vite/src/pipedal/TextInfoDialog.tsx +++ b/vite/src/pipedal/TextInfoDialog.tsx @@ -33,6 +33,7 @@ import rehypeSanitize, {defaultSchema} from 'rehype-sanitize'; import rehypeExternalLinks from 'rehype-external-links' import remarkGfm from 'remark-gfm'; import { PiPedalError } from './PiPedalError'; +import { rewriteT3kUrls } from './TextInfo_RewriteT3kUrls'; // Extend the default schema to allow target and rel attributes on anchor tags const extendedSchema = { @@ -72,6 +73,7 @@ interface TextInfoDialogProps { fileName: string; title: string; onClose: () => void; + onT3kLinkClick?: (href: string) => boolean; }; interface TextInfoDialogState { @@ -162,6 +164,13 @@ const TextInfoDialog = class extends ResizeResponsiveComponent { + if (this.props.onT3kLinkClick) { + return this.props.onT3kLinkClick(href); + } + return false; + } + render() { return ( @@ -204,7 +213,11 @@ const TextInfoDialog = class extends ResizeResponsiveComponent {this.state.textFileContent}