TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-29 12:41:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

add default-avatar and change hover icon

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/default-avatar.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

2
resources/assets/js/views/settings/CompanyInfo.vue
View File

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

6
resources/assets/js/views/settings/UserProfile.vue
View File

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

2
resources/assets/js/views/wizard/CompanyInfo.vue
View File

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

2
resources/assets/js/views/wizard/UserProfile.vue
View File

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

16
resources/assets/sass/components/avatar-cropper.scss vendored
View File

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