diff options
| -rw-r--r-- | css/ContactDetails.scss | 38 | ||||
| -rw-r--r-- | css/contact-details-avatar.scss | 64 | ||||
| -rw-r--r-- | css/contacts.scss | 1 | ||||
| -rw-r--r-- | src/components/ContactDetails.vue | 4 | ||||
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 43 |
5 files changed, 105 insertions, 45 deletions
diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss index 78c453a3..4a017529 100644 --- a/css/ContactDetails.scss +++ b/css/ContactDetails.scss @@ -28,44 +28,6 @@ display: flex; font-weight: bold; align-items: center; - - // AVATAR - #contact-header-avatar { - position: relative; - height: 75px; - width: 75px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; - margin: 0 22px 0 44px; - .contact-avatar-background { - background-color: var(--color-background-dark); - opacity: .2; - z-index: 0; - } - img { - z-index: 1; - } - label.icon-upload-white { - opacity: .5; - z-index: 2; - &:hover, - a:active, - a:focus { - opacity: .7; - } - } - img + label.icon-upload-white { - opacity: 0; - } - .contact-avatar-background, - img, - label.icon-upload-white { - position: absolute; - width: 100%; - height: 100%; - } - } // ORG-TITLE-NAME #contact-header-infos { diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss new file mode 100644 index 00000000..07b494ba --- /dev/null +++ b/css/contact-details-avatar.scss @@ -0,0 +1,64 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.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/>. + * + */ + + // AVATAR + #contact-header-avatar { + position: relative; + height: 75px; + width: 75px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + margin: 0 22px 0 44px; + .contact-avatar-background { + background-color: var(--color-background-dark); + opacity: .2; + z-index: 0; + } + img { + z-index: 1; + } + label.icon-upload-white { + opacity: .5; + z-index: 2; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + img + label.icon-upload-white { + opacity: 0; + } + .contact-avatar-background, + img, + label.icon-upload-white { + position: absolute; + width: 100%; + height: 100%; + } + &__picture { + border-radius: 50%; + flex-shrink: 0; + } +}
\ No newline at end of file diff --git a/css/contacts.scss b/css/contacts.scss index 993ed7dd..74b70e2b 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -44,6 +44,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; @import 'settings/settings-addressbook-sharee'; @import 'details'; @import 'ContactDetails'; +@import 'contact-details-avatar'; @import './Properties/Properties'; @import './Properties/PropertyTitle'; @import 'importScreen';
\ No newline at end of file diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index 164445c3..8fa8f7cb 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -190,8 +190,8 @@ export default { sortedProperties() { return this.contact.properties.slice(0).sort((a, b) => { return ( - rfcProps.fieldOrder.indexOf(a.name) - - rfcProps.fieldOrder.indexOf(b.name) + rfcProps.fieldOrder.indexOf(a.name) + - rfcProps.fieldOrder.indexOf(b.name) ) }) }, diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index ab98cb33..b0ad9057 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -22,11 +22,19 @@ <template> <div id="contact-header-avatar"> - <div class="contact-avatar-background" /> - <img v-if="contact.avatar"> - <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" /> + <div :class="{'maximized': maximizeAvatar}" class="contact-avatar-background" /> + <img v-click="maximise" v-if="contact.photo !==undefined" :id="contact.key" + class="avatar__picture" + src=""> + <div class="contact-header-avatar__options"> + <input id="contact-header-avatar__upload" type="file" class="hidden" + accept="image/*" + @change="uploadPhoto"> + <label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="avatar-upload" class="icon-upload-white" /> + <div v-click="removePhoto" v-if="contact.photo !==undefined" class="icon-delete-white" /> + <div v-click="openPhoto" v-if="contact.photo !==undefined" class="icon-fullscreen-white" /> + <div v-click="downloadPhoto" v-if="contact.photo !==undefined" class="icon-download-white" /> + </div> </div> </template> @@ -40,6 +48,14 @@ export default { required: true } }, + data() { + return { + maximizeAvatar: false + } + }, + mounted: { + + }, methods: { processFile(event) { let file = event.target.files[0] @@ -66,6 +82,23 @@ export default { } } reader.readAsDataURL(file) + }, + maximise() { + // maximise avatar photo + this.maximizeAvatar = true + }, + uploadPhoto() { + // upload avatar photo + }, + removePhoto() { + // remove avatar photo + }, + minimizePhoto() { + // minimize avatar photo + this.maximizeAvatar = false + }, + downloadPhoto() { + // download avatar photo } } |