From 794910ba8072c234a8d5153dc751a3ace6e367bb Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Tue, 27 Mar 2018 18:01:58 +0200
Subject: [PATCH] feat(ui): git FileDiff auto-refresh on page focus

---
 .../cli-ui/src/components/FileDiffView.vue    | 26 ++++++++++++---
 .../@vue/cli-ui/src/mixins/PageVisibility.js  | 33 +++++++++++++++++++
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 packages/@vue/cli-ui/src/mixins/PageVisibility.js

diff --git a/packages/@vue/cli-ui/src/components/FileDiffView.vue b/packages/@vue/cli-ui/src/components/FileDiffView.vue
index 1b06c3689a..0a5b544f68 100644
--- a/packages/@vue/cli-ui/src/components/FileDiffView.vue
+++ b/packages/@vue/cli-ui/src/components/FileDiffView.vue
@@ -64,10 +64,12 @@
       </template>
     </div>
 
-    <VueLoadingIndicator
-      v-if="loading"
-      class="overlay"
-    />
+    <transition name="vue-ui-fade">
+      <VueLoadingIndicator
+        v-if="loading"
+        class="overlay"
+      />
+    </transition>
 
     <VueModal
       v-if="showCommitModal"
@@ -108,10 +110,16 @@
 </template>
 
 <script>
+import PageVisibility from '../mixins/PageVisibility'
+
 import FILE_DIFFS from '../graphql/fileDiffs.gql'
 import GIT_COMMIT from '../graphql/gitCommit.gql'
 
 export default {
+  mixins: [
+    PageVisibility
+  ],
+
   data () {
     return {
       fileDiffs: [],
@@ -151,6 +159,14 @@ export default {
     }
   },
 
+  watch: {
+    documentFocus (value) {
+      if (value) {
+        this.refresh()
+      }
+    }
+  },
+
   methods: {
     setCollapsedToAll (value) {
       const map = {}
@@ -180,6 +196,8 @@ export default {
             message: this.commitMessage
           }
         })
+        this.showCommitModal = false
+        this.refresh()
         this.$emit('continue')
       } catch (e) {
         console.error(e)
diff --git a/packages/@vue/cli-ui/src/mixins/PageVisibility.js b/packages/@vue/cli-ui/src/mixins/PageVisibility.js
new file mode 100644
index 0000000000..65c8a821ef
--- /dev/null
+++ b/packages/@vue/cli-ui/src/mixins/PageVisibility.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+const vm = new Vue({
+  data: {
+    documentVisible: !document.hidden,
+    documentFocus: document.hasFocus()
+  }
+})
+
+document.addEventListener('visibilitychange', () => {
+  vm.documentVisible = !document.hidden
+}, false)
+
+window.addEventListener('focus', () => {
+  vm.documentFocus = true
+})
+
+window.addEventListener('blur', () => {
+  vm.documentFocus = false
+})
+
+// @vue/component
+export default {
+  computed: {
+    documentVisible () {
+      return vm.documentVisible
+    },
+
+    documentFocus () {
+      return vm.documentFocus
+    }
+  }
+}