diff options
author | Joas Schilling <coding@schilljs.com> | 2021-06-09 11:57:22 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2021-06-17 11:35:21 +0300 |
commit | 5adb73f8f99100baeb88f0c833c871e660c5cfa3 (patch) | |
tree | e170f3a9fcc17b3c585f2ce28adbf04a36236af8 | |
parent | 4fc545ef8cdab592fabd0584ef93389902c2b879 (diff) |
Bad UI that works
Signed-off-by: Joas Schilling <coding@schilljs.com>
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue | 56 |
1 files changed, 51 insertions, 5 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 162f1e3b7..11f1344e5 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -39,7 +39,13 @@ fill-color="#ffffff" title="" /> </span> - <img v-if="!failed" + <img v-if="contactPhotoFromBase64" + v-tooltip="previewTooltip" + :class="previewImageClass" + class="file-preview__image" + alt="" + :src="contactPhotoFromBase64"> + <img v-else-if="!failed" v-tooltip="previewTooltip" :class="previewImageClass" class="file-preview__image" @@ -65,7 +71,7 @@ </button> <ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" /> <div class="name-container"> - <strong v-if="shouldShowFileName">{{ name }}</strong> + <strong v-if="shouldShowFileDetail">{{ fileDetail }}</strong> </div> </file-preview> </template> @@ -85,6 +91,7 @@ const PREVIEW_TYPE = { MIME_ICON: 1, DIRECT: 2, PREVIEW: 3, + CONTACT: 4, } export default { @@ -153,6 +160,18 @@ export default { type: String, default: 'no', }, + contactName: { + type: String, + default: '', + }, + contactPhoto: { + type: String, + default: '', + }, + contactPhotoMimetype: { + type: String, + default: '', + }, /** * Whether to render a small preview to embed in replies */ @@ -204,8 +223,8 @@ export default { } }, computed: { - shouldShowFileName() { - // display the file name below the preview if the preview + shouldShowFileDetail() { + // display the file detail below the preview if the preview // is not easily recognizable, when: return ( // the file is not an image @@ -218,8 +237,21 @@ export default { || this.isUploadEditor ) }, + fileDetail() { + // display the file name or contact name when its a vCard + if (this.contactName) { + return this.contactName + } + return this.name + }, + contactPhotoFromBase64() { + if (!this.contactPhotoMimetype || !this.contactPhoto) { + return null + } + return 'data:' + this.contactPhotoMimetype + ';base64,' + this.contactPhoto + }, previewTooltip() { - if (this.shouldShowFileName) { + if (this.shouldShowFileDetail) { // no tooltip as the file name is already visible directly return null } @@ -257,6 +289,10 @@ export default { return imagePath('core', 'filetypes/file') }, previewImageClass() { + if (this.previewType === PREVIEW_TYPE.CONTACT) { + return 'contact' + } + let classes = '' if (this.smallPreview) { classes += 'preview-small ' @@ -270,6 +306,10 @@ export default { return classes }, previewType() { + if (this.contactPhotoFromBase64) { + return PREVIEW_TYPE.CONTACT + } + if (this.hasTemporaryImageUrl) { return PREVIEW_TYPE.TEMPORARY } @@ -484,6 +524,12 @@ export default { max-width: 100%; max-height: 32px; } + .contact { + display: inline-block; + border-radius: 50%; + max-width: 44px; + max-height: 44px; + } .image-container { display: inline-block; |