Discard changes to files when cancel edit is hit.

app/assets/javascripts/repo/index.js

@@ -37,7 +37,6 @@ function addEventsForNonVueEls() {
   window.onbeforeunload = function (e) {
     const hasChanged = Store.openedFiles
       .some(file => file.changed);
-    console.log('hasChanged',hasChanged)
     if(!hasChanged) return;
     e = e || window.event;
     if (e) {

app/assets/javascripts/repo/repo_edit_button.js

@@ -30,17 +30,6 @@ export default class RepoEditButton {
           this.editMode = !this.editMode;
         },
       },
-
-      watch: {
-        dialog: {
-          handler(obj) {
-            if(obj.status) {
-              obj.status = false;
-            }
-          },
-          deep: true,
-        }
-      }
     });
   }
 }

app/assets/javascripts/repo/repo_editor.vue

@@ -86,6 +86,23 @@ const RepoEditor = {
       this.showHide();
     },
 
+    dialog: {
+      handler(obj) {
+        if(obj.status) {
+          obj.status = false;
+          this.openedFiles.map((f) => {
+            if(f.active) {
+              this.blobRaw = f.plain;
+            }
+            f.changed = false;
+            delete f.newContent;
+          });
+          this.editMode = false;
+        }
+      },
+      deep: true,
+    },
+
     isTree() {
       this.showHide();
     },

app/assets/javascripts/repo/repo_store.js

@@ -97,7 +97,7 @@ const RepoStore = {
       RepoStore.blobRaw = file.base64;
       RepoStore.binaryMimeType = file.mime_type;
     } else {
-      RepoStore.blobRaw = file.plain;
+      RepoStore.blobRaw = file.newContent || file.plain;
     }
 
     if (!file.loading) RepoHelper.toURL(file.url, file.name);

app/assets/javascripts/repo/repo_tab.vue

@@ -24,7 +24,7 @@ const RepoTab = {
 
     xClicked(file) {
       if (file.changed) return;
-      RepoStore.removeFromOpenedFiles(file);
+      this.$emit('xclicked', file);
     },
   },
 };

app/assets/javascripts/repo/repo_tabs.vue

@@ -17,6 +17,10 @@ const RepoTabs = {
     isOverflow() {
       return this.$el.scrollWidth > this.$el.offsetWidth;
     },
+
+    xclicked(file) {
+      Store.removeFromOpenedFiles(file);
+    }
   },
 
   watch: {
@@ -33,6 +37,6 @@ export default RepoTabs;
 
 <template>
 <ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}">
-  <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}"/>
+  <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xclicked"/>
 </ul>
 </template>

app/assets/stylesheets/pages/repo.scss

@@ -97,6 +97,15 @@
         white-space: nowrap;
         border-radius: 3px 3px 0 0;
 
+        &.remove {
+          animation: swipeRightDissapear ease-in 0.1s;
+          animation-iteration-count: 1;
+          transform-origin: 0% 50%;
+          a {
+            width: 0;
+          }
+        }
+
         &.active {
           background: $white-light;
         }
@@ -372,11 +381,17 @@
     transform: scaleX(0.00);
   }
 
-  45% {
-    transform: scaleX(0.26);
+  100% {
+    transform: scaleX(1.00);
+  }
+}
+
+@keyframes swipeRightDissapear {
+  0% {
+    transform: scaleX(1.00);
   }
 
   100% {
-    transform: scaleX(1.00);
+    transform: scaleX(0.00);
   }
 }