Make sure CC icon/badge is shown
Also, always compress images, even if smaller than 640 pixels. For issue #680.
This commit is contained in:
parent
6fd59aa4c9
commit
a318934376
3 changed files with 59 additions and 29 deletions
|
|
@ -107,6 +107,16 @@ $hiliteColor: #4642f1;
|
|||
align-items: end;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.send-attachments__selecting__current-item__cc {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-thumbnail-container,
|
||||
|
|
|
|||
|
|
@ -28,6 +28,10 @@
|
|||
<v-progress-circular indeterminate class="mb-0"></v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="showCCIcon" class="send-attachments__selecting__current-item__cc">
|
||||
<v-icon style="width:24px;height:24px">$vuetify.icons.ic_cr</v-icon>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="file-drop-thumbnail-container">
|
||||
<v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
|
||||
|
|
@ -85,15 +89,17 @@
|
|||
:disabled="sendButtonDisabled"
|
||||
></v-btn>
|
||||
</div>
|
||||
<v-btn
|
||||
class="info-button clickable"
|
||||
icon="$vuetify.icons.ic_share_settings"
|
||||
size="44"
|
||||
elevation="0"
|
||||
color="black"
|
||||
@click.stop="showInformation"
|
||||
:disabled="currentAttachment?.status !== 'loaded'"
|
||||
></v-btn>
|
||||
<v-badge location="top right" color="#ff3300" dot class="cc-badge" :model-value="anyContainsCC">
|
||||
<v-btn
|
||||
class="info-button clickable"
|
||||
icon="$vuetify.icons.ic_share_settings"
|
||||
size="44"
|
||||
elevation="0"
|
||||
color="black"
|
||||
@click.stop="showInformation"
|
||||
:disabled="currentAttachment?.status !== 'loaded'"
|
||||
></v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -283,6 +289,12 @@ export default defineComponent({
|
|||
}
|
||||
return undefined;
|
||||
},
|
||||
anyContainsCC(): boolean {
|
||||
return this.batch.attachments.some((a: Attachment) => a.proof?.integrity?.c2pa !== undefined);
|
||||
},
|
||||
showCCIcon(): boolean {
|
||||
return this.currentAttachment && this.currentAttachment.proof?.integrity?.c2pa !== undefined && !this.currentAttachment.useScaled;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"batch.attachments": {
|
||||
|
|
@ -360,4 +372,10 @@ export default defineComponent({
|
|||
<style lang="scss">
|
||||
@use "@/assets/css/chat.scss" as *;
|
||||
@use "@/assets/css/sendattachments.scss" as *;
|
||||
|
||||
.cc-badge.v-badge--dot .v-badge__badge {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -94,25 +94,24 @@ export class AttachmentManager {
|
|||
// Need to resize?
|
||||
const w = attachment.dimensions?.width ?? 0;
|
||||
const h = attachment.dimensions?.height ?? 0;
|
||||
if (w > 640 || h > 640) {
|
||||
var aspect = w / h;
|
||||
var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
|
||||
var newHeight = parseInt((w > h ? 640 / aspect : 640).toFixed());
|
||||
const img = await imageResize(file, {
|
||||
format: "webp",
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
outputType: "blob",
|
||||
});
|
||||
attachment.scaledFile = new File([img as BlobPart], file.name, {
|
||||
type: "image/webp",
|
||||
lastModified: Date.now(),
|
||||
});
|
||||
attachment.scaledDimensions = {
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
};
|
||||
}
|
||||
const sizeDown = (w > 640 || h > 640);
|
||||
var aspect = w / h;
|
||||
var newWidth = sizeDown ? parseInt((w > h ? 640 : 640 * aspect).toFixed()) : w;
|
||||
var newHeight = sizeDown ? parseInt((w > h ? 640 / aspect : 640).toFixed()) : h;
|
||||
const compressedImg = await imageResize(file, {
|
||||
format: "webp",
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
outputType: "blob",
|
||||
});
|
||||
attachment.scaledFile = new File([compressedImg as BlobPart], file.name, {
|
||||
type: "image/webp",
|
||||
lastModified: Date.now(),
|
||||
});
|
||||
attachment.scaledDimensions = {
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Failed to get image dimensions: " + error);
|
||||
}
|
||||
|
|
@ -478,7 +477,10 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
|
|||
|
||||
const removeAttachment = (attachment: Attachment) => {
|
||||
if (sendingStatus.value == "initial") {
|
||||
attachments.value = attachments.value.filter((a) => a !== attachment);
|
||||
const index = attachments.value.indexOf(attachment);
|
||||
if (index > -1) {
|
||||
attachments.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue