diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index c1ebdc2..630d959 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -1617,17 +1617,4 @@ body { .zip { color: #1d1d1d; } -} - -.c2pa-badge { - position: absolute; - top: 0; - right: 0; - width: 32px; - height: 32px; - overflow: hidden; - .v-icon { - width: 100%; - height: 100%; - } } \ No newline at end of file diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss index 2a2fc65..70e4c49 100644 --- a/src/assets/css/sendattachments.scss +++ b/src/assets/css/sendattachments.scss @@ -51,6 +51,14 @@ $hiliteColor: #4642f1; z-index: 1; } + .info-button { + position: absolute; + top: 16px; + right: 16px; + margin: 0; + z-index: 1; + } + .send-button { position: absolute; top: 4px; @@ -123,8 +131,9 @@ $hiliteColor: #4642f1; width: 12px; height: 12px; padding: 0; - min-width: 12px; + min-width: 12px; user-select: none; + span { width: 100%; height: 100%; @@ -417,4 +426,29 @@ $hiliteColor: #4642f1; } } } +} + +.attachment-info { + text-align: start; + position: relative; + + .attachment-info__size { + white-space: pre; + overflow: hidden; + margin-right: 36px; + text-overflow: ellipsis; + } + + .attachment-info__size__filename { + opacity: 0.7; + font-size: 0.8em; + } + + .c2pa-badge { + overflow: hidden; + .v-icon { + width: 32px; + height: 32px; + } + } } \ No newline at end of file diff --git a/src/components/c2pa/C2PABadge.vue b/src/components/c2pa/C2PABadge.vue index c1358b7..93af5ac 100644 --- a/src/components/c2pa/C2PABadge.vue +++ b/src/components/c2pa/C2PABadge.vue @@ -1,45 +1,31 @@ - diff --git a/src/components/file_mode/AttachmentInfo.vue b/src/components/file_mode/AttachmentInfo.vue new file mode 100644 index 0000000..df71d97 --- /dev/null +++ b/src/components/file_mode/AttachmentInfo.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue index 81fd029..9e586d5 100644 --- a/src/components/file_mode/SendAttachmentsLayout.vue +++ b/src/components/file_mode/SendAttachmentsLayout.vue @@ -31,14 +31,20 @@ +
+ + + + + + + +
@@ -185,10 +199,11 @@ import prettyBytes from "pretty-bytes"; import { Attachment } from "../../models/attachment"; import C2PABadge from "../c2pa/C2PABadge.vue"; import { createUploadBatch } from "../../models/attachmentManager"; +import AttachmentInfo from "./AttachmentInfo.vue"; export default defineComponent({ mixins: [messageMixin], - components: { C2PABadge }, + components: { C2PABadge, AttachmentInfo }, emits: ["pick-file", "close"], props: { showBackButton: { @@ -200,7 +215,7 @@ export default defineComponent({ batch: { type: Object, default: function () { - return reactive(createUploadBatch(null, null, 0)) + return reactive(createUploadBatch(null, null, 0)); }, }, }, @@ -215,6 +230,7 @@ export default defineComponent({ }), status: 0, dropTarget: false, + showAttachmentInformation: false, }; }, mounted() { @@ -255,6 +271,11 @@ export default defineComponent({ }, }, methods: { + showInformation() { + if (this.currentAttachment) { + this.showAttachmentInformation = true; + } + }, filesDropped(e: DragEvent) { this.dropTarget = false; let droppedFiles: FileList | undefined = e.dataTransfer?.files; @@ -264,9 +285,6 @@ export default defineComponent({ this.batch.addAttachment(this.$matrix.attachmentManager.createAttachment(file)); } }, - formatBytes(bytes: number) { - return prettyBytes(bytes); - }, close() { this.batch.cancel(); this.status = this.mainStatuses.SELECTING;