diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss index 880798b..c3a7528 100644 --- a/src/assets/css/sendattachments.scss +++ b/src/assets/css/sendattachments.scss @@ -472,6 +472,7 @@ $hiliteColor: #4642f1; } .send-attachments-info-popup { + background-color: rgba(0,0,0,0.9); .done-button { padding: 14px 24px; } @@ -531,7 +532,7 @@ $hiliteColor: #4642f1; background-color: #242424; border-radius: 8px; border: 2px solid #242424; - + &.selected { border: 2px solid #4642F1; } @@ -571,12 +572,32 @@ $hiliteColor: #4642f1; } } - .c2pa-badge { - overflow: hidden; + .attachment-info__detail-box { + margin-top: 32px; + padding: 16px; + border-radius: 8px; + background-color: $backgroundDark; - .v-icon { - width: 32px; - height: 32px; + .detail-title { + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 125%; + letter-spacing: 0.4px; + vertical-align: middle; + } + + .detail-row { + margin-top: 12px; + font-family: "Inter", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 125%; + letter-spacing: 0.4px; + color: rgba(255, 255, 255, 0.9); + .v-icon { + margin-right: 8px; + } } } } \ No newline at end of file diff --git a/src/assets/icons/ic_cc_ai.vue b/src/assets/icons/ic_cc_ai.vue new file mode 100644 index 0000000..4f73650 --- /dev/null +++ b/src/assets/icons/ic_cc_ai.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/assets/icons/ic_exif_device_camera.vue b/src/assets/icons/ic_exif_device_camera.vue new file mode 100644 index 0000000..5cf4cd8 --- /dev/null +++ b/src/assets/icons/ic_exif_device_camera.vue @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/assets/icons/ic_exif_location.vue b/src/assets/icons/ic_exif_location.vue new file mode 100644 index 0000000..bee3197 --- /dev/null +++ b/src/assets/icons/ic_exif_location.vue @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/assets/icons/ic_exif_time.vue b/src/assets/icons/ic_exif_time.vue new file mode 100644 index 0000000..d4e8567 --- /dev/null +++ b/src/assets/icons/ic_exif_time.vue @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index a518c46..74b3553 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -488,6 +488,9 @@ "compressed": "Compressed", "original": "Original", "metadata_info_compressed": "Compressing the image automatically excludes its metadata.", - "metadata_info_original": "Sharing the original automatically includes its metadata." + "metadata_info_original": "Sharing the original automatically includes its metadata.", + "exif_data": "Exif Data", + "content_credentials": "Content Credentials", + "ai_used": "AI was used in this media" } } diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 7bf13fd..5edf832 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -336,7 +336,6 @@ import emitter from 'tiny-emitter/instance'; import { markRaw } from "vue"; import timerIcon from '@/assets/icons/ic_timer.svg'; import proofmode from "../plugins/proofmode.js"; -import C2PABadge from "./c2pa/C2PABadge.vue"; import { consoleWarn } from "vuetify/lib/util/console.mjs"; const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */ @@ -392,7 +391,6 @@ export default { MessageOperationsChannel, RoomExport, EmojiPicker, - C2PABadge }, data() { diff --git a/src/components/c2pa/C2PABadge.vue b/src/components/c2pa/C2PABadge.vue deleted file mode 100644 index 93af5ac..0000000 --- a/src/components/c2pa/C2PABadge.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - $vuetify.icons.ic_cr - This image contains C2PA data - - - camera_marker - This image contains EXIF data - - - - - - diff --git a/src/components/content-credentials/C2PAInfo.vue b/src/components/content-credentials/C2PAInfo.vue new file mode 100644 index 0000000..0eb7a01 --- /dev/null +++ b/src/components/content-credentials/C2PAInfo.vue @@ -0,0 +1,73 @@ + + + + {{ t("file_mode.content_credentials") }} + + $vuetify.icons.ic_exif_time{{ dateCreated }} + $vuetify.icons.ic_exif_device_camera{{ creator }} + + $vuetify.icons.ic_cc_ai{{ t("file_mode.ai_used") }} + + + + + + + + + diff --git a/src/components/content-credentials/EXIFInfo.vue b/src/components/content-credentials/EXIFInfo.vue new file mode 100644 index 0000000..e97d848 --- /dev/null +++ b/src/components/content-credentials/EXIFInfo.vue @@ -0,0 +1,113 @@ + + + + {{ t("file_mode.exif_data") }} + + + $vuetify.icons.ic_exif_time{{ dateTime }} + + + $vuetify.icons.ic_exif_location{{ location }} + + + $vuetify.icons.ic_exif_device_camera{{ makeAndModel }} + + + + + + + + diff --git a/src/components/file_mode/AttachmentInfo.vue b/src/components/file_mode/AttachmentInfo.vue index 3cd503f..2fdfa91 100644 --- a/src/components/file_mode/AttachmentInfo.vue +++ b/src/components/file_mode/AttachmentInfo.vue @@ -28,22 +28,35 @@ - + +