improve logic of success message

instead of taking over whole sidebar, it now just shows over the commit box
after 5 seconds the commit box goes back to its compact logic

5 files changed, 36 insertions, 12 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index ab64627e735..0031add101e 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -39,10 +39,17 @@ export default {
   },
   watch: {
     currentActivityView() {
-      this.isCompact = !(
-        this.currentActivityView === activityBarViews.commit &&
-        window.innerHeight >= MAX_WINDOW_HEIGHT_COMPACT
-      );
+      if (this.lastCommitMsg) {
+        this.isCompact = false;
+      } else {
+        this.isCompact = !(
+          this.currentActivityView === activityBarViews.commit &&
+          window.innerHeight >= MAX_WINDOW_HEIGHT_COMPACT
+        );
+      }
+    },
+    lastCommitMsg() {
+      this.isCompact = this.lastCommitMsg === '';
     },
   },
   methods: {
@@ -122,9 +129,11 @@ export default {
         @submit.prevent.stop="commitChanges"
         ref="formEl"
       >
-        <success-message
-          v-show="(lastCommitMsg && someUncommitedChanges)"
-        />
+        <transition name="fade">
+          <success-message
+            v-show="lastCommitMsg"
+          />
+        </transition>
         <commit-message-field
           :text="commitMessage"
           @input="updateCommitMessage"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 06c36085307..00f2312ae51 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -53,6 +53,9 @@ export default {
     <label
       v-tooltip
       :title="tooltipTitle"
+      :class="{
+        'is-disabled': disabled
+      }"
     >
       <input
         type="radio"
@@ -63,9 +66,12 @@ export default {
         :disabled="disabled"
       />
       <span class="prepend-left-10">
-        <template v-if="label">
+        <span
+          v-if="label"
+          class="ide-radio-label"
+        >
           {{ label }}
-        </template>
+        </span>
         <slot v-else></slot>
       </span>
     </label>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 2f3f93a6aed..8015b245c2f 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -112,9 +112,6 @@ export default {
           />
         </div>
         <commit-form />
-        <success-message
-          v-show="showSuccessMessage"
-        />
       </template>
     </div>
   </resizable-panel>
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 32fc3798a5f..13f123b6630 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -173,6 +173,12 @@ export default {
     state.entries[file.path].opened = false;
     state.entries[file.path].active = false;
     state.entries[file.path].lastOpenedAt = new Date().getTime();
+    state.openFiles.forEach(f =>
+      Object.assign(f, {
+        opened: false,
+        active: false,
+      }),
+    );
     state.openFiles = [
       {
         ...file,
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 77bb0198614..e03c38e2775 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -797,6 +797,12 @@
 .ide-commit-radios {
   label {
     font-weight: normal;
+
+    &.is-disabled {
+      .ide-radio-label {
+        text-decoration: line-through;
+      }
+    }
   }
 
   .help-block {