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

update front changes

Browse Source
This commit is contained in:
Aman upadhyay
2019-11-14 19:40:56 +05:30
parent f2546d96b5
commit b3a9291d44
2 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/js/plugins/en.js
View File

@ -665,6 +665,8 @@ export default {
update_app: { update_app: {
title: 'Update App', title: 'Update App',
description: 'update app description', description: 'update app description',
check_update: 'Check for updates',
avail_update: 'Update available',
update: 'Update' update: 'Update'
} }
}, },

33
resources/assets/js/views/settings/UpdateApp.vue
View File

@ -6,9 +6,18 @@
<p class="page-sub-title"> <p class="page-sub-title">
{{ $t('settings.update_app.description') }} {{ $t('settings.update_app.description') }}
</p> </p>
<base-button size="large" icon="sync-alt" color="theme" @click="onUpdateApp"> <p class="page-sub-title">Current version: 1.0.0</p>
{{ $t('settings.update_app.update') }} <base-button size="large" color="theme" @click="checkUpdate">
<font-awesome-icon :class="{'update': isUpdateAvail}" style="margin-right: 5px;" icon="sync-alt" />
{{ $t('settings.update_app.check_update') }}
</base-button> </base-button>
<div v-if="isUpdateAvail" class="mt-4 content">
<label class="input-label">{{ $t('settings.update_app.avail_update') }}</label>
<p class="page-sub-title">Latest version: 2.0.0</p>
<base-button size="large" color="theme" @click="onUpdateApp">
{{ $t('settings.update_app.update') }}
</base-button>
</div>
<div v-if="isShowProgressBar" class="progress mt-4"> <div v-if="isShowProgressBar" class="progress mt-4">
<div <div
:style="[{'width': progress+'%'}]" :style="[{'width': progress+'%'}]"
@ -29,6 +38,7 @@ export default {
data () { data () {
return { return {
isShowProgressBar: false, isShowProgressBar: false,
isUpdateAvail: false,
progress: 10, progress: 10,
interval: null interval: null
} }
@ -49,7 +59,26 @@ export default {
} }
this.progress += 10 this.progress += 10
}, 250) }, 250)
},
checkUpdate () {
this.isUpdateAvail = !this.isUpdateAvail
} }
} }
} }
</script> </script>
<style scoped>
.update {
transform: rotate(360deg);
animation: rotating 1s linear infinite;
}
@keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>