diff options
| -rw-r--r-- | css/Properties/Properties.scss | 4 | ||||
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 13 |
2 files changed, 14 insertions, 3 deletions
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index e22cb5b8..55ad6c99 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -56,8 +56,8 @@ $property-value-max-width: 250px; padding: $grid-input-padding 0; flex: 1 0; // min width is 60px, let's grow until 120px height: $grid-input-height-with-margin; - width: $property-label-min-width !important; // override multiselect - min-width: $property-label-min-width; + width: $property-label-min-width; + min-width: $property-label-min-width !important; // override multiselect max-width: $property-label-max-width; opacity: .7; diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index e6281d0b..eec04eb0 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -25,7 +25,7 @@ import rfcProps from '../../models/rfcProps'; <div :class="{'maximised':maximizeAvatar }" class="contact-header-avatar"> <div class="contact-header-avatar__wrapper"> <div class="contact-header-avatar__background" @click="toggleSize" /> - <div v-if="contact.photo" :style="{ 'backgroundImage': `url(${contact.photo})` }" + <div v-if="contact.photo" :style="{ 'backgroundImage': `url(${photo})` }" class="contact-header-avatar__photo" @click="toggleSize" /> <div class="contact-header-avatar__options"> @@ -56,6 +56,17 @@ export default { maximizeAvatar: false } }, + computed: { + photo() { + const type = this.contact.vCard.getFirstProperty('photo').type + if (!this.contact.photo.startsWith('data') && type === 'binary') { + // split on coma in case of any leftover base64 data and retrieve last part + // usually we come to this part when the base64 image type is unknown + return `data:image;base64,${this.contact.photo.split(',').pop()}` + } + return this.contact.photo + } + }, methods: { /** * Handler to store a new photo on the current contact |