Re-style image quality selection
This commit is contained in:
N-Pex
parent
1a08b38fdb
commit
995f20b8e5
6 changed files with 174 additions and 35 deletions
|
|
@ -468,20 +468,104 @@ $hiliteColor: #4642f1;
|
|||
}
|
||||
}
|
||||
|
||||
.send-attachments-info-popup {
|
||||
.done-button {
|
||||
padding: 14px 24px;
|
||||
}
|
||||
|
||||
.left-right-arrow {
|
||||
background-color: transparent !important;
|
||||
|
||||
.v-btn__overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 125%;
|
||||
letter-spacing: 0.4px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-info {
|
||||
text-align: start;
|
||||
position: relative;
|
||||
|
||||
.attachment-info__size {
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
margin-right: 36px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.attachment-info__quality {
|
||||
.attachment-info__quality__title {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
letter-spacing: 0.4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.attachment-info__size__filename {
|
||||
opacity: 0.7;
|
||||
font-size: 0.8em;
|
||||
.attachment-info__quality__class {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
letter-spacing: 0.4px;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
width: 156px;
|
||||
padding: 10px 2px;
|
||||
background-color: #242424;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #242424;
|
||||
|
||||
&.selected {
|
||||
border: 2px solid #4642F1;
|
||||
}
|
||||
|
||||
.attachment-info__quality__class-name {
|
||||
margin: 4px 0 3px 0;
|
||||
}
|
||||
|
||||
.attachment-info__quality__class-size {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 125%;
|
||||
letter-spacing: 0.4px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-info__quality__info {
|
||||
margin-top: 24px;
|
||||
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 125%;
|
||||
letter-spacing: 0.4px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.c2pa-badge {
|
||||
|
|
|
|||
13
src/assets/icons/ic_original.vue
Normal file
13
src/assets/icons/ic_original.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.65">
|
||||
<path
|
||||
d="M8 3H6.2C5.0799 3 4.51984 3 4.09202 3.21799C3.71569 3.40973 3.40973 3.71569 3.21799 4.09202C3 4.51984 3 5.0799 3 6.2V8M8 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V16M21 8V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H16M21 16V17.8C21 18.9201 21 19.4802 20.782 19.908C20.5903 20.2843 20.2843 20.5903 19.908 20.782C19.4802 21 18.9201 21 17.8 21H16M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
13
src/assets/icons/ic_scaled.vue
Normal file
13
src/assets/icons/ic_scaled.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.65">
|
||||
<path
|
||||
d="M16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8M16.2 3C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8M16.2 3H15.2C14.0799 3 13.5198 3 13.092 3.21799C12.7157 3.40973 12.4097 3.71569 12.218 4.09202C12 4.51984 12 5.07989 12 6.2V8.8C12 9.9201 12 10.4802 12.218 10.908C12.4097 11.2843 12.7157 11.5903 13.092 11.782C13.5198 12 14.0799 12 15.2 12H17.8C18.9201 12 19.4802 12 19.908 11.782C20.2843 11.5903 20.5903 11.2843 20.782 10.908C21 10.4802 21 9.92011 21 8.8V7.8M12.5 11.5L7 17M7 17H12M7 17L7 12"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -483,6 +483,11 @@
|
|||
"files_sent_with_note":"1 file sent with a note! | {count} files sent with a note!",
|
||||
"send_more_files": "Send more files",
|
||||
"close": "Close",
|
||||
"files": "Files"
|
||||
"files": "Files",
|
||||
"quality": "Quality",
|
||||
"compressed": "Compressed",
|
||||
"original": "Original",
|
||||
"metadata_info_compressed": "Compressing the image automatically excludes its metadata.",
|
||||
"metadata_info_original": "Sharing the original automatically includes its metadata."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue