butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Re-style image quality selection

Browse source
This commit is contained in:
N-Pex 2025-07-03 18:12:36 +02:00
parent 1a08b38fdb
commit 995f20b8e5
6 changed files with 174 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/file_mode/AttachmentInfo.vue
View file

@ -1,30 +1,33 @@
<template>
<div class="attachment-info">
<div class="attachment-info__size">
<span v-if="attachment.scaledFile && attachment.useScaled && attachment.scaledDimensions">
{{ attachment.scaledDimensions.width }} x {{ attachment.scaledDimensions.height }}</span
>
<span v-else-if="attachment.dimensions">
{{ attachment.dimensions.width }} x {{ attachment.dimensions.height }}
</span>
<div v-if="attachment.scaledFile" class="attachment-info__quality">
<div class="attachment-info__quality__title">
{{ t("file_mode.quality") }}
</div>
<div class="d-flex justify-center">
<div @click="attachment.useScaled = true" :class="{ 'attachment-info__quality__class': true, selected: attachment.useScaled, clickable: true }">
<v-icon>$vuetify.icons.ic_scaled</v-icon>
<div class="attachment-info__quality__class-name">{{ t("file_mode.compressed") }}</div>
<div class="attachment-info__quality__class-size">
<span>{{ attachment.scaledDimensions?.width }} x {{ attachment.scaledDimensions?.height }}</span>
<span> ({{ formatBytes(attachment.scaledFile.size) }})</span>
</div>
</div>
<div @click="attachment.useScaled = false" :class="{ 'attachment-info__quality__class': true, selected: !attachment.useScaled, clickable: true }">
<v-icon>$vuetify.icons.ic_original</v-icon>
<div class="attachment-info__quality__class-name">{{ t("file_mode.original") }}</div>
<div class="attachment-info__quality__class-size">
<span>{{ attachment.dimensions?.width }} x {{ attachment.dimensions?.height }}</span>
<span> ({{ formatBytes(attachment.file.size) }})</span>
</div>
</div>
</div>
<span v-if="attachment.scaledFile && attachment.useScaled">
({{ formatBytes(attachment.scaledFile.size) }})
</span>
<span v-else> ({{ formatBytes(attachment.file.size) }}) </span>
<span class="attachment-info__size__filename" v-if="attachment.src && attachment.file.name">
- {{ attachment.file.name }}
</span>
<div class="attachment-info__quality__info">
{{ t(attachment.useScaled ? "file_mode.metadata_info_compressed" : "file_mode.metadata_info_original") }}
</div>
</div>
<v-switch
v-if="attachment.scaledFile"
:label="$t('message.scale_image')"
v-model="attachment.useScaled"
:disabled="attachment.sendInfo !== undefined"
/>
<C2PABadge :proof="attachment.proof" />
</div>
</template>
@ -32,8 +35,10 @@
<script setup lang="ts">
import { Attachment } from "../../models/attachment";
import prettyBytes from "pretty-bytes";
import C2PABadge from "../c2pa/C2PABadge.vue";
import { useI18n } from "vue-i18n";
import C2PABadge from '../c2pa/C2PABadge.vue'
const { t } = useI18n();
defineProps<{
attachment: Attachment;

23
src/components/file_mode/SendAttachmentsLayout.vue
View file

@ -181,8 +181,27 @@
</div>
</template>
<v-bottom-sheet v-model="showAttachmentInformation" theme="dark">
<v-card class="text-center">
<v-bottom-sheet v-model="showAttachmentInformation" theme="dark" height="80%">
<v-card class="text-center send-attachments-info-popup">
<v-card-title class="d-flex flex-column pa-0">
<div class="align-self-end done-button clickable" @click="showAttachmentInformation = false">{{ $t("menu.done") }}</div>
<v-divider />
</v-card-title>
<v-card-title class="d-flex">
<v-btn
class="left-right-arrow flex-0-0"
icon="chevron_left"
@click.stop="currentItemIndex -= 1"
:disabled="currentItemIndex == 0"
></v-btn>
<div class="title flex-fill">{{ currentAttachment.file.name }}</div>
<v-btn
class="left-right-arrow flex-0-0"
icon="chevron_right"
@click.stop="currentItemIndex += 1"
:disabled="currentItemIndex >= batch.attachments.length - 1"
></v-btn>
</v-card-title>
<v-card-text>
<AttachmentInfo :attachment="currentAttachment" />
</v-card-text>