diff options
| author | Jessica Greene <jessica0greene@gmail.com> | 2018-09-26 17:09:14 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-09-26 17:09:14 +0000 |
| commit | 22401768b4427f88032bcce8cc5570bd44be06ef (patch) | |
| tree | 9083cbc0ec4758cca207ae63968ae939f15f115c | |
| parent | 28487050c4fe2136fcd521c2b7745b6443a508cd (diff) | |
| parent | 101db489c68d73cc5ec053314b989ab65b57b19b (diff) | |
Merge pull request #646 from nextcloud/vue-avatar-management-style
Vue avatar management style
| -rw-r--r-- | css/contact-details-avatar.scss | 10 | ||||
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 4 |
2 files changed, 9 insertions, 5 deletions
diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss index 0d31e392..1d010758 100644 --- a/css/contact-details-avatar.scss +++ b/css/contact-details-avatar.scss @@ -33,6 +33,9 @@ &__background { opacity: .2; z-index: 0; + left: 0; + top: 50px; + margin-left: 300px; } img { z-index: 10; @@ -93,7 +96,6 @@ width: 25%; height: 40px; position: relative; - opacity: 1; } .contact-header-avatar__options { height: 40px; @@ -107,15 +109,17 @@ // 300px padding on left to compensate for app-navigation having 1000 z-index padding-left: 300px; flex-wrap: wrap; - justify-content: space-between; + justify-content: space-around; background-color: rgba(0, 0, 0, 0.2); } .contact-header-avatar__options > [class^='icon-'] { width: 25%; display: block; + cursor: pointer; + opacity: 0.5; } .contact-header-avatar__options > [class^='icon-']:hover { - opacity: 0.5; + opacity: 0.8; } } diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index f91ca9fd..9f1f20c1 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -23,7 +23,7 @@ import rfcProps from '../../models/rfcProps'; <template> <div :class="{'maximised':maximizeAvatar }" class="contact-header-avatar"> - <div class="contact-header-avatar__background" /> + <div class="contact-header-avatar__background" @click="toggleSize" /> <img v-if="contact.photo" :src="contact.photo" class="contact-header-avatar__picture" @click="toggleSize"> @@ -33,7 +33,7 @@ import rfcProps from '../../models/rfcProps'; <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" /> + <!-- <div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="toggleSize" /> --> <div v-if="maximizeAvatar" class="icon-download-white" @click="downloadPhoto" /> </div> </div> |