diff --git a/src/intl/en-US.js b/src/intl/en-US.js index 046a1c57..8516d6bb 100644 --- a/src/intl/en-US.js +++ b/src/intl/en-US.js @@ -255,6 +255,8 @@ export default { showNextMedia: 'Show next media', enterPinchZoom: 'Pinch-zoom mode', exitPinchZoom: 'Exit pinch-zoom mode', + showFullImageDescription: 'Show full image description', + hideFullImageDescription: 'Hide full image description', showMedia: `Show {index, select, 1 {first} 2 {second} diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html index a2ff2886..a7ac5c97 100644 --- a/src/routes/_components/dialog/components/MediaDialog.html +++ b/src/routes/_components/dialog/components/MediaDialog.html @@ -25,8 +25,24 @@ {/each} + {#if hasDescription } +
+ {mediaItem.description} +
+ {/if}
- {#if canPinchZoom} + {#if hasDescription } + + {:elseif canPinchZoom } {/if} - {#if canPinchZoom} + {#if canPinchZoom } + {:elseif hasDescription } + {/if}
@@ -142,6 +167,20 @@ padding: 15px 5px 5px 5px; } + .media-description-outside { + margin: 5px 15px; + max-height: 1.5em; + text-align: center; + color: white; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .media-description-outside.expanded { + max-height: none; + white-space: normal; + } + .media-controls-outside { display: flex; justify-content: space-between; @@ -263,12 +302,14 @@ }, store: () => store, data: () => ({ - pinchZoomMode: false + pinchZoomMode: false, + showFullImageDescription: false }), computed: { length: ({ mediaItems }) => mediaItems.length, dots: ({ length }) => times(length, i => ({ i })), canPinchZoom: ({ mediaItems }) => !mediaItems.some(media => ['video', 'audio'].includes(media.type)), + hasDescription: ({ mediaItem }) => mediaItem.description, mediaItem: ({ mediaItems, scrolledItem }) => mediaItems[scrolledItem], nativeWidth: ({ mediaItem }) => get(mediaItem, ['meta', 'original', 'width'], 300), // TODO: Pleroma placeholder nativeHeight: ({ mediaItem }) => get(mediaItem, ['meta', 'original', 'height'], 200) // TODO: Pleroma placeholder @@ -355,6 +396,9 @@ togglePinchZoomMode () { this.set({ pinchZoomMode: !this.get().pinchZoomMode }) }, + toggleFullImageDescription () { + this.set({ showFullImageDescription: !this.get().showFullImageDescription }) + }, onImageClick (e) { const { nativeWidth, nativeHeight, pinchZoomMode } = this.get() if (pinchZoomMode) {