mirror of
https://github.com/thelounge/thelounge.git
synced 2024-05-29 03:42:20 +02:00
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:
parent
5f015529cd
commit
bfca8f6237
|
@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue