moved CSS out of the components

hooked up commit section to activity bar
fixed commit section SVGs not loading
added the different theme defintions to the activity bar

app/assets/javascripts/ide/components/activity_bar.vue

@@ -30,80 +30,33 @@ export default {
         />
       </li>
       <li>
-        <a
-          href="#"
-          class="ide-sidebar-link ide-activity-bar-link"
+        <button
+          type="button"
+          class="ide-sidebar-link js-ide-edit-mode"
           :class="{
             active: currentActivityView === $options.ActivityBarViews.edit
           }"
           @click.prevent="updateActivityBarView($options.ActivityBarViews.edit)"
         >
           <icon
-            :size="16"
             name="code"
           />
-        </a>
+        </button>
       </li>
       <li>
-        <a
-          href="#"
-          class="ide-sidebar-link ide-activity-bar-link"
+        <button
+          type="button"
+          class="ide-sidebar-link js-ide-commit-mode"
           :class="{
             active: currentActivityView === $options.ActivityBarViews.commit
           }"
           @click.prevent="updateActivityBarView($options.ActivityBarViews.commit)"
         >
           <icon
-            :size="16"
             name="commit"
           />
-        </a>
+        </button>
       </li>
     </ul>
   </nav>
 </template>
-
-<style>
-.ide-activity-bar {
-  position: relative;
-  flex: 0 0 60px;
-  z-index: 2;
-}
-
-.ide-activity-bar-link {
-  position: relative;
-  height: 55px;
-  margin: 2.5px 0;
-  color: #707070;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-}
-
-.ide-activity-bar-link svg {
-  margin: 0 auto;
-  fill: currentColor;
-}
-
-.ide-activity-bar-link.active {
-  color: #4b4ba3;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-  border-bottom: 1px solid #eaeaea;
-  box-shadow: inset 3px 0 #4b4ba3;
-}
-
-a.ide-sidebar-link.ide-activity-bar-link.active::after {
-  content: '';
-  position: absolute;
-  right: -1px;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: #fff;
-}
-
-.ide-activity-bar-link:hover {
-  color: #4b4ba3;
-  background-color: #fff;
-}
-</style>

app/assets/javascripts/ide/components/ide.vue

@@ -19,14 +19,6 @@ export default {
       type: String,
       required: true,
     },
-    noChangesStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     ...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),

app/assets/javascripts/ide/components/ide_project_tree.vue

 <script>
+import { mapGetters } from 'vuex';
 import BranchesTree from './ide_project_branches_tree.vue';
 
 export default {
   components: {
     BranchesTree,
   },
-  props: {
-    project: {
-      type: Object,
-      required: true,
-    },
+  computed: {
+    ...mapGetters(['currentProjectWithTree']),
   },
 };
 </script>
 
 <template>
   <div class="projects-sidebar">
-    <div class="multi-file-commit-panel-inner-scroll">
     <branches-tree
-        v-for="branch in project.branches"
+      v-for="branch in currentProjectWithTree.branches"
       :key="branch.name"
-        :project-id="project.path_with_namespace"
+      :project-id="currentProjectWithTree.path_with_namespace"
       :branch="branch"
     />
   </div>
-  </div>
 </template>

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -8,6 +8,7 @@ import Identicon from '../../vue_shared/components/identicon.vue';
 import projectTree from './ide_project_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
 import ActivityBar from './activity_bar.vue';
+import CommitSection from './repo_commit_section.vue';
 
 export default {
   components: {
@@ -19,6 +20,7 @@ export default {
     ActivityBar,
     ProjectAvatarImage,
     Identicon,
+    CommitSection,
   },
   computed: {
     ...mapState(['loading']),
@@ -75,10 +77,11 @@ export default {
             </div>
           </a>
         </div>
+        <div class="multi-file-commit-panel-inner-scroll">
           <component
             :is="activityBarComponent"
-          :project="currentProjectWithTree"
           />
+        </div>
       </template>
     </div>
   </resizable-panel>

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -21,16 +21,6 @@ export default {
   directives: {
     tooltip,
   },
-  props: {
-    noChangesStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
     ...mapState([
       'currentProjectId',
@@ -38,6 +28,8 @@ export default {
       'rightPanelCollapsed',
       'lastCommitMsg',
       'changedFiles',
+      'noChangesStateSvgPath',
+      'committedStateSvgPath',
     ]),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),

app/assets/javascripts/ide/index.js

@@ -14,12 +14,17 @@ function initIde(el) {
     components: {
       ide,
     },
+    created() {
+      this.$store.dispatch('setEmptyStateSvgs', {
+        emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+        noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
+        committedStateSvgPath: el.dataset.committedStateSvgPath,
+      });
+    },
     render(createElement) {
       return createElement('ide', {
         props: {
           emptyStateSvgPath: el.dataset.emptyStateSvgPath,
-          noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
-          committedStateSvgPath: el.dataset.committedStateSvgPath,
         },
       });
     },

app/assets/javascripts/ide/stores/actions.js

@@ -116,6 +116,10 @@ export const updateActivityBarView = ({ commit }, view) => {
   commit(types.UPDATE_ACTIVITY_BAR_VIEW, view);
 };
 
+export const setEmptyStateSvgs = ({ commit }, svgs) => {
+  commit(types.SET_EMPTY_STATE_SVGS, svgs);
+};
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';

app/assets/javascripts/ide/stores/getters.js

@@ -56,6 +56,8 @@ export const activityBarComponent = state => {
   switch (state.currentActivityView) {
     case ActivityBarViews.edit:
       return 'project-tree';
+    case ActivityBarViews.commit:
+      return 'commit-section';
     default:
       return null;
   }

app/assets/javascripts/ide/stores/mutation_types.js

@@ -5,6 +5,7 @@ export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
 export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
 export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
 export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
+export const SET_EMPTY_STATE_SVGS = 'SET_EMPTY_STATE_SVGS';
 
 // Project Mutation Types
 export const SET_PROJECT = 'SET_PROJECT';

app/assets/javascripts/ide/stores/mutations.js

@@ -100,6 +100,16 @@ export default {
       currentActivityView,
     });
   },
+  [types.SET_EMPTY_STATE_SVGS](
+    state,
+    { emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath },
+  ) {
+    Object.assign(state, {
+      emptyStateSvgPath,
+      noChangesStateSvgPath,
+      committedStateSvgPath,
+    });
+  },
   ...projectMutations,
   ...mergeRequestMutation,
   ...fileMutations,

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -184,6 +184,18 @@
   .ide-file-list .file.file-active {
     color: $color-700;
   }
+
+  .ide-sidebar-link {
+    &:hover,
+    &:focus,
+    &.active {
+      color: $color-700;
+    }
+
+    &.active {
+      box-shadow: inset 3px 0 $color-700;
+    }
+  }
 }
 
 body {

app/assets/stylesheets/pages/repo.scss

@@ -112,14 +112,6 @@
 .multi-file-loading-container {
   margin-top: 10px;
   padding: 10px;
-
-  .animation-container {
-    background: $gray-light;
-
-    div {
-      background: $gray-light;
-    }
-  }
 }
 
 .multi-file-table-col-commit-message {
@@ -423,7 +415,7 @@
   width: 340px;
   padding: 0;
   background-color: $gray-light;
-  padding-right: 3px;
+  padding-right: 1px;
 
   .context-header {
     width: auto;
@@ -438,9 +430,10 @@
 
   .multi-file-commit-panel-inner {
     display: flex;
+    flex: 1;
     flex-direction: column;
     height: 100%;
-    width: 100%;
+    width: 0;
   }
 
   .multi-file-commit-panel-inner-scroll {
@@ -448,8 +441,10 @@
     flex: 1;
     flex-direction: column;
     overflow: auto;
-    background-color: #fff;
-    border-left: 1px solid #eaeaea;
+    background-color: $white-light;
+    border-left: 1px solid $white-dark;
+    border-top: 1px solid $white-dark;
+    border-top-left-radius: $border-radius-small;
   }
 
   .branch-header {
@@ -763,7 +758,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 3px;
+  width: 1px;
   background-color: $white-dark;
 
   &.dragright {
@@ -791,10 +786,49 @@
 }
 
 .ide-sidebar-link {
-  padding: $gl-padding-8 $gl-padding;
   display: flex;
   align-items: center;
-  font-weight: $gl-font-weight-bold;
+  position: relative;
+  height: 55px;
+  width: 100%;
+  margin: 2.5px 0;
+  padding: $gl-padding-8 $gl-padding;
+  color: $gl-text-color-secondary;
+  background-color: transparent;
+  border: 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  outline: 0;
+
+  svg {
+    margin: 0 auto;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $white-light;
+  }
+
+  &.active {
+    background-color: $white-light;
+    border-top-color: $white-dark;
+    border-bottom-color: $white-dark;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: -1px;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background: $white-light;
+    }
+  }
+}
+
+.ide-activity-bar {
+  position: relative;
+  flex: 0 0 60px;
 }
 
 .ide-commit-message-field {