Move image filename to the side for slim images

With this we vastly improve the readability of filenames for slim images. The breakpoint is at an aspect ratio of 16:10.
This commit is contained in:
Nachtalb 2021-04-30 03:28:49 +02:00 committed by Nachtalb
parent 5f015529cd
commit bfca8f6237
No known key found for this signature in database
GPG key ID: FB8B6CA09AE73612
3 changed files with 48 additions and 2 deletions

View file

@ -69,7 +69,7 @@
<a
:href="link.link"
:title="link.filename"
class="toggle-thumbnail"
:class="['toggle-thumbnail', {'wide-view': useWideImageView}]"
target="_blank"
rel="noopener"
@click="onThumbnailClick"
@ -81,6 +81,7 @@
</div>
<img
v-show="link.sourceLoaded"
ref="image"
:src="link.thumb"
decoding="async"
alt=""
@ -192,7 +193,9 @@ export default defineComponent({
const showMoreButton = ref(false);
const isContentShown = ref(false);
const useWideImageView = ref(false);
const imageViewer = inject(imageViewerKey);
const image = ref(null);
onBeforeRouteUpdate((to, from, next) => {
// cancel the navigation if the user is trying to close the image viewer
@ -242,6 +245,20 @@ export default defineComponent({
}
};
const updateWideImageViewDecision = () => {
if (window.innerWidth < 480) {
// Mobile
useWideImageView.value =
(image.value && image.value.naturalWidth / image.value.naturalHeight <= 1.34) ||
false; // aspect ratio around 4:3 and slimmer
} else {
// Desktop
useWideImageView.value =
(image.value && image.value.naturalWidth / image.value.naturalHeight <= 1.6) ||
false; // aspect ratio 16:10 and slimmer
}
};
const onPreviewUpdate = () => {
// Don't display previews while they are loading on the server
if (props.link.type === "loading") {
@ -258,6 +275,8 @@ export default defineComponent({
handleResize();
props.keepScrollPosition();
}
updateWideImageViewDecision();
};
const onThumbnailError = () => {
@ -346,8 +365,11 @@ export default defineComponent({
onPreviewUpdate,
showMoreButton,
isContentShown,
useWideImageView,
image,
content,
container,
updateWideImageViewDecision,
};
},
});

View file

@ -1624,6 +1624,24 @@ textarea.input {
white-space: normal;
}
#chat .toggle-content .wide-view {
display: flex;
flex-direction: row;
}
#chat .toggle-content .wide-view .image-filename {
order: 2;
}
#chat .toggle-content .wide-view .image-filename span {
width: auto;
max-width: 500px;
}
#chat .toggle-content .wide-view img {
order: 1;
}
/* This applies to images of preview-type-image and thumbnails of preview-type-link */
#chat .toggle-content img {
max-width: 100%;

View file

@ -10,11 +10,14 @@ import storage from "../storage";
import Client from "../../client";
import Chan from "../../models/chan";
import Msg from "../../models/msg";
import contentDisposition from "content-disposition";
import path from "path";
type FetchRequest = {
data: Buffer;
type: string;
size: number;
filename: string | null;
};
const currentFetchPromises = new Map<string, Promise<FetchRequest>>();
const imageTypeRegex = /^image\/.+/;
@ -30,6 +33,7 @@ export type LinkPreview = {
shown?: boolean | null;
error?: string;
message?: string;
filename: string | null;
media?: string;
mediaType?: string;
@ -68,6 +72,7 @@ export default function (client: Client, chan: Chan, msg: Msg, cleanText: string
size: -1,
link: link.link, // Send original matched link to the client
shown: null,
filename: null,
};
cleanLinks.push(preview);
@ -446,9 +451,10 @@ function fetch(uri: string, headers: Record<string, string>) {
.on("response", function (res) {
contentLength = parseInt(res.headers["content-length"], 10) || 0;
contentType = res.headers["content-type"];
filename =
"content-disposition" in res.headers
? contentDisposition.parse(res.headers["content-disposition"])
? contentDisposition?.parse(res.headers["content-disposition"])
.parameters.filename || null
: null;