diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss index bf63e1f..946f69c 100644 --- a/src/assets/css/sendattachments.scss +++ b/src/assets/css/sendattachments.scss @@ -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 { diff --git a/src/assets/icons/ic_original.vue b/src/assets/icons/ic_original.vue new file mode 100644 index 0000000..da9cbc2 --- /dev/null +++ b/src/assets/icons/ic_original.vue @@ -0,0 +1,13 @@ + diff --git a/src/assets/icons/ic_scaled.vue b/src/assets/icons/ic_scaled.vue new file mode 100644 index 0000000..472e2dd --- /dev/null +++ b/src/assets/icons/ic_scaled.vue @@ -0,0 +1,13 @@ + diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 6ecf63f..a518c46 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -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." } } diff --git a/src/components/file_mode/AttachmentInfo.vue b/src/components/file_mode/AttachmentInfo.vue index df71d97..3cd503f 100644 --- a/src/components/file_mode/AttachmentInfo.vue +++ b/src/components/file_mode/AttachmentInfo.vue @@ -1,30 +1,33 @@ @@ -32,8 +35,10 @@