diff options
| author | Shpuld Shpludson <shp@cock.li> | 2019-02-19 15:37:01 +0000 |
|---|---|---|
| committer | Shpuld Shpludson <shp@cock.li> | 2019-02-19 15:37:01 +0000 |
| commit | 7b9a6f8d43e6810957f37923ace0d83b8ae44f59 (patch) | |
| tree | 2eba1b6f6037e1cc02d11df79ab436e70280a093 /src/components/user_settings/user_settings.vue | |
| parent | 8f96de2ba5b87f71bc4a669090b16ec4156461fe (diff) | |
| parent | 3094c50ff9e7abc7fc8b7fa4d21d606170843178 (diff) | |
Merge branch '256-avatar-crop-popup' into 'develop'
Add avatar cropper
Closes #256
See merge request pleroma/pleroma-fe!547
Diffstat (limited to 'src/components/user_settings/user_settings.vue')
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 25 |
1 files changed, 13 insertions, 12 deletions
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index d2381da2..8ab92e95 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -48,19 +48,10 @@ <h2>{{$t('settings.avatar')}}</h2> <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p> <p>{{$t('settings.current_avatar')}}</p> - <img :src="user.profile_image_url_original" class="old-avatar"></img> + <img :src="user.profile_image_url_original" class="current-avatar"></img> <p>{{$t('settings.set_new_avatar')}}</p> - <img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview"> - </img> - <div> - <input type="file" @change="uploadFile('avatar', $event)" ></input> - </div> - <i class="icon-spin4 animate-spin" v-if="avatarUploading"></i> - <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button> - <div class='alert error' v-if="avatarUploadError"> - Error: {{ avatarUploadError }} - <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i> - </div> + <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button> + <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" /> </div> <div class="setting-item"> <h2>{{$t('settings.profile_banner')}}</h2> @@ -167,6 +158,8 @@ </script> <style lang="scss"> +@import '../../_variables.scss'; + .profile-edit { .bio { margin: 0; @@ -193,5 +186,13 @@ .bg { max-width: 100%; } + + .current-avatar { + display: block; + width: 150px; + height: 150px; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + } } </style> |