diff options
author | suntala <suntala@hotmail.com> | 2018-09-27 22:33:53 +0200 |
---|---|---|
committer | suntala <suntala@hotmail.com> | 2018-09-27 22:33:53 +0200 |
commit | 9b85192e9a60879528f8b4b25e10e882374c3f18 (patch) | |
tree | 3cf8b4c4d99c55b6ee2b355b2b86c1aec142b9f0 /src | |
parent | 96f0afd98ae57983c7552966914e2d0d13fed62b (diff) | |
parent | 8ad001cb14a3a3b0b4f1d4e65f9ac169de71e56e (diff) |
Merge branch 'vue-avatar-management' of https://github.com/nextcloud/contacts into vue-avatar-management
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactDetails.vue | 14 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 85 | ||||
-rw-r--r-- | src/models/contact.js | 20 |
3 files changed, 111 insertions, 8 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index f72af6ff..530df74c 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -41,13 +41,9 @@ <header :style="{ 'backgroundColor': colorAvatar }"> <!-- avatar and upload photo --> - <div id="contact-header-avatar"> - <div class="contact-avatar-background" /> - <img v-if="contact.photo"> - <input id="contact-avatar-upload" type="file" class="hidden" - accept="image/*"> - <label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" class="icon-upload-white" /> - </div> + <contact-avatar :contact="contact" /> + <!-- QUESTION: is it better to pass contact as a prop or get it from the store inside + contact-avatar ? :avatar="contact.photo"--> <!-- fullname, org, title --> <div id="contact-header-infos"> @@ -118,6 +114,7 @@ import ContactProperty from './ContactDetails/ContactDetailsProperty' import AddNewProp from './ContactDetails/ContactDetailsAddNewProp' import PropertySelect from './Properties/PropertySelect' import PropertyGroups from './Properties/PropertyGroups' +import ContactAvatar from './ContactDetails/ContactDetailsAvatar' Vue.use(VTooltip) @@ -129,7 +126,8 @@ export default { ContactProperty, PropertySelect, PropertyGroups, - AddNewProp + AddNewProp, + ContactAvatar }, directives: { diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue new file mode 100644 index 00000000..f160c848 --- /dev/null +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -0,0 +1,85 @@ +<!-- +import rfcProps from '../../models/rfcProps'; + * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com> + * + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <div :class="{'maximised':maximizeAvatar }" class="contact-header-avatar"> + <div class="contact-header-avatar__background" @click="toggleSize" /> + <img v-if="contact.photo" :src="contact.photo" + class="contact-header-avatar__picture" + @click="toggleSize"> + <div class="contact-header-avatar__options"> + <input id="contact-avatar-upload" type="file" class="hidden" + accept="image/*" @change="processFile"> + <label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" + class="icon-upload-white" @click="processFile" /> + <div v-if="maximizeAvatar" class="icon-delete-white" @click="removePhoto" /> + <!-- <div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="toggleSize" /> --> + <a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-white" /> + </div> + </div> +</template> + +<script> + +export default { + name: 'ContactAvatar', + + props: { + contact: { + type: Object, + required: true + } + }, + data() { + return { + maximizeAvatar: false + } + }, + methods: { + processFile(event) { + let file = event.target.files[0] + let reader = new FileReader() + let self = this + // check if photo property exists to decide whether to add/update it + reader.onload = function(e) { + self.contact.photo + ? self.contact.photo = reader.result + : self.contact.vCard.addPropertyWithValue('photo', reader.result) + + self.$store.dispatch('updateContact', self.contact) + } + reader.readAsDataURL(file) + }, + toggleSize() { + // maximise or minimise avatar photo + this.maximizeAvatar = !this.maximizeAvatar + }, + removePhoto() { + // self.contact.vCard.removePropertyWithValue('photo', reader.result) + // remove avatar photo + console.log("remove") // eslint-disable-line + } + } + +} +</script> diff --git a/src/models/contact.js b/src/models/contact.js index 3836d91d..95a20ca2 100644 --- a/src/models/contact.js +++ b/src/models/contact.js @@ -122,6 +122,26 @@ export default class Contact { } /** + * Return the photo + * + * @readonly + * @memberof Contact + */ + get photo() { + return this.vCard.getFirstPropertyValue('photo') + } + + /** + * Set the photo + * + * @memberof Contact + */ + set photo(photo) { + this.vCard.updatePropertyWithValue('photo', photo) + return true + } + + /** * Return the groups * * @readonly |