You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AppUpdate.vue 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <!-- Cannot update, only show the version... -->
  3. <box-section-item
  4. v-if="!updater.enabled"
  5. :label="updater.getCurrentVersion()"
  6. icon="🌐" />
  7. <!-- Updated! -->
  8. <box-section-item
  9. v-else-if="!updater.available"
  10. :label="`${projectTitle} is up to date.`"
  11. :description="updater.getCurrentVersion()"
  12. icon="🌐" />
  13. <!-- Update available -->
  14. <box-section-item
  15. v-else-if="!updater.updating.active"
  16. :label="`${projectTitle} ${updater.latest.tag_name} available.`"
  17. icon="🌐"
  18. class="update-item">
  19. <button v-tooltip="'Download and install the update automatically.'" type="button" class="button is-sm" @click.prevent="updater.download()">Update</button>
  20. <app-external-link v-tooltip="'Download the update manually.'" :href="downloadURL" class="button is-sm">Manual</app-external-link>
  21. </box-section-item>
  22. <!-- Updating... -->
  23. <!-- eslint-disable-next-line vue/valid-template-root --->
  24. <box-section-item
  25. v-else
  26. :label="updater.updating.text"
  27. icon="🌐">
  28. <template slot="description">
  29. <p v-if="updater.updating.text === 'Downloading...'" class="item-description"><strong>{{ updater.updating.progress | progress }}</strong> - {{ updater.updating.mbWritten | size }}/{{ updater.updating.mbTotal | size }} MB.</p>
  30. <p v-else class="item-description">Wait a few minutes, please do not close the program.</p>
  31. </template>
  32. <button type="button" class="button is-danger is-sm" @click.prevent="updater.cancel()">Cancel</button>
  33. </box-section-item>
  34. </template>
  35. <script>
  36. export default {
  37. filters: {
  38. progress(value) {
  39. value = (value * 100).toFixed(2)
  40. // value = Math.round(value * 100)
  41. return `${value}%`
  42. },
  43. size(value) {
  44. return value.toFixed(2)
  45. }
  46. },
  47. props: {
  48. project: {
  49. type: String,
  50. required: true
  51. },
  52. projectTitle: {
  53. type: String,
  54. default: 'Project'
  55. }
  56. },
  57. computed: {
  58. updater() {
  59. return this.$updater[this.project]
  60. },
  61. downloadURL() {
  62. return this.updater.getUpdateDownloadURLs()[0]
  63. }
  64. },
  65. beforeDestroy() {
  66. this.updater.cancel()
  67. },
  68. methods: {
  69. openDownload() {
  70. $tools.shell.openItem($tools.paths.get('downloads'))
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss">
  76. @keyframes updateAnim {
  77. 0% {
  78. @apply bg-transparent;
  79. }
  80. 50% {
  81. @apply bg-dark-400;
  82. }
  83. 100% {
  84. @apply bg-transparent;
  85. }
  86. }
  87. .update-item {
  88. transition: all 0.2s ease-in-out;
  89. animation-name: updateAnim;
  90. animation-duration: 2s;
  91. animation-iteration-count: infinite;
  92. &:hover {
  93. animation-name: none;
  94. background: theme('colors.dark.400') !important;
  95. }
  96. .item-label {
  97. @apply text-white;
  98. }
  99. .item-description {
  100. @apply text-generic-600;
  101. }
  102. }
  103. </style>