From 64a2ae9f84ca02be676db783920f188bc852301f Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 26 Oct 2020 16:03:01 +0100 Subject: [PATCH 1/3] Chat previews now expanded with aspect ratio Instead of cropping the previews in the conversation to a square, they are now using a limited height but their width is computed based on aspect ratio. This is done by passing different arguments to the previews endpoint so it delivers a preview with the matching size. Adjusted styles around the preview to make it look better. Signed-off-by: Vincent Petry --- .../Message/MessagePart/FilePreview.vue | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 2d4f5844bd1..62aaab584c6 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -162,9 +162,9 @@ export default { } const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio) - return generateUrl('/core/preview?fileId={fileId}&x={width}&y={height}', { + // expand width but keep a max height + return generateUrl('/core/preview?fileId={fileId}&x=-1&y={height}&a=1', { fileId: this.id, - width: previewSize, height: previewSize, }) }, @@ -290,14 +290,18 @@ export default { object-fit: cover; } + .loading { + display: inline-block; + height: 128px; + margin-left: 32px; + } + .preview { - display: block; - width: 128px; + display: inline-block; height: 128px; } .preview-64 { - display: block; - width: 64px; + display: inline-block; height: 64px; } @@ -308,7 +312,6 @@ export default { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - margin-top: 4px; } &:not(.file-preview--viewer-available) { From 9cfa070b61dc291025ea3d896286d8bdebccbc37 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 26 Oct 2020 21:07:20 +0100 Subject: [PATCH 2/3] Expand image preview height to 384 Was 128, expanded to 384 so it can fill a bit more width as well and look better. Signed-off-by: Vincent Petry --- .../MessagesGroup/Message/MessagePart/FilePreview.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 62aaab584c6..2d5377330cb 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -94,7 +94,7 @@ export default { }, previewSize: { type: Number, - default: 128, + default: 384, }, // In case this component is used to display a file that is being uploaded // this parameter is used to access the file upload status in the store @@ -292,13 +292,12 @@ export default { .loading { display: inline-block; - height: 128px; margin-left: 32px; } .preview { display: inline-block; - height: 128px; + height: 384px; } .preview-64 { display: inline-block; From e513241a4bcd01a283d0a5b9964b8fccd020149a Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 26 Oct 2020 21:10:42 +0100 Subject: [PATCH 3/3] Center the loading spinner Center the spinner as it looks better overall, except for when the picture is narrow in the end. But we can't detect the image size beforehand, so this will do for most use cases. Signed-off-by: Vincent Petry --- .../MessagesGroup/Message/MessagePart/FilePreview.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 2d5377330cb..dceefef6c36 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -292,6 +292,7 @@ export default { .loading { display: inline-block; + width: 100%; margin-left: 32px; }