Add refreash animation for "Known remotes" import screen

nirui · Dec 31, 2019 · ed2f815 · ed2f815
1 parent 8af9f1a
commit ed2f815
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/ui/home.vue b/ui/home.vue
@@ -444,7 +444,9 @@ export default {
       return this.connector.historyRec.export();
     },
     importKnowns(d) {
-      return this.connector.historyRec.import(d);
+      this.connector.historyRec.import(d);
+
+      this.connector.knowns = this.connector.historyRec.all();
     },
     removeKnown(uid) {
       this.connector.historyRec.del(uid);

diff --git a/ui/widgets/connect_known.css b/ui/widgets/connect_known.css
@@ -26,6 +26,28 @@
   background: #3a3a3a;
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+
+#connect-known-list.reloaded {
+}
+
+#connect-known-list.reloaded::after {
+  opacity: 0;
+  z-index: 2;
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 0;
+  top: -2px;
+  left: 0;
+  right: 0;
+  background: #fff;
+  animation-name: home-window-display-flash;
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  box-shadow: 0 0 10px #fff;
 }
 
 #connect-known-list-list,

diff --git a/ui/widgets/connect_known.vue b/ui/widgets/connect_known.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div id="connect-known-list">
+  <div id="connect-known-list" :class="{ reloaded: reloaded }">
     <div v-if="knownList.length <= 0" id="connect-known-list-empty">
       No known remote available
     </div>
@@ -101,12 +101,28 @@ export default {
   data() {
     return {
       knownList: [],
+      reloaded: false,
       busy: false
     };
   },
   watch: {
     knowns(newVal) {
+      // Only play reload animation when we're adding data into the records,
+      // not reducing
+      const playReloaded = newVal.length > this.knownList.length;
+
       this.reload(newVal);
+
+      if (!playReloaded) {
+        return;
+      }
+
+      const self = this;
+
+      self.reloaded = true;
+      setTimeout(() => {
+        self.reloaded = false;
+      }, 500);
     }
   },
   mounted() {