add default-avatar and change hover icon

This commit is contained in:
yogesh_gohil
2019-11-22 12:42:03 +05:30
parent 812afc2dab
commit e9218e4d21
6 changed files with 23 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -13,7 +13,7 @@
<label class="input-label">{{ $tc('settings.company_info.company_logo') }}</label>
<div id="pick-avatar" class="image-upload-box">
<div class="overlay">
<font-awesome-icon class="white-icon" icon="cloud-upload-alt"/>
<font-awesome-icon class="white-icon" icon="camera"/>
</div>
<img v-if="previewLogo" :src="previewLogo" class="preview-logo">
<div v-else class="upload-content">

View File

@ -16,7 +16,7 @@
<font-awesome-icon class="white-icon" icon="camera"/>
</div>
<img v-if="previewAvatar" :src="previewAvatar" class="preview-logo">
<div v-else class="upload-content">
<div v-if="!previewAvatar" class="upload-content">
<font-awesome-icon class="upload-icon" icon="cloud-upload-alt"/>
<p class="upload-text"> {{ $tc('general.choose_file') }} </p>
</div>
@ -183,7 +183,11 @@ export default {
let response = await this.loadData()
this.formData.name = response.data.name
this.formData.email = response.data.email
this.previewAvatar = response.data.avatar
if (response.data.avatar) {
this.previewAvatar = response.data.avatar
} else {
this.previewAvatar = '/images/default-avatar.jpg'
}
},
async updateUserData () {
this.$v.formData.$touch()

View File

@ -8,7 +8,7 @@
<label class="input-label">{{ $tc('settings.company_info.company_logo') }}</label>
<div id="pick-avatar" class="image-upload-box">
<div class="overlay">
<font-awesome-icon class="white-icon" icon="cloud-upload-alt"/>
<font-awesome-icon class="white-icon" icon="camera"/>
</div>
<img v-if="previewLogo" :src="previewLogo" class="preview-logo">
<div v-else class="upload-content">

View File

@ -129,7 +129,7 @@ export default {
confirm_password: null
},
loading: false,
previewAvatar: null,
previewAvatar: '/images/default-avatar.jpg',
fileObject: null
}
},

View File

@ -11,8 +11,10 @@
cursor: pointer;
.preview-logo {
max-height: 50%;
max-height: 80%;
position: absolute;
opacity: 1;
animation: fadeIn 2s ease;
}
.upload-content {
@ -69,7 +71,17 @@
height: 130px;
width: 130px;
.preview-logo {
max-height: 80% !important;
max-width: 80% !important;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
}