added tooltips to various icons in the sidebars

fixed SVG colors

1 files changed, 71 insertions, 16 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index 3ab454c2441..068b05d5db0 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
@@ -1,10 +1,15 @@
 <script>
 import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { sprintf, n__ } from '~/locale';
 
 export default {
   components: {
     icon,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     files: {
       type: Array,
@@ -14,6 +19,10 @@ export default {
       type: String,
       required: true,
     },
+    title: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     addedFilesLength() {
@@ -28,6 +37,29 @@ export default {
     modifiedFilesClass() {
       return this.modifiedFilesLength ? 'multi-file-modified' : '';
     },
+    additionsTooltip() {
+      return sprintf(
+        n__(
+          '1 %{type} addition',
+          '%d %{type} additions',
+          this.modifiedFilesLength,
+        ),
+        { type: this.title.toLowerCase() },
+      );
+    },
+    modifiedTooltip() {
+      return sprintf(
+        n__(
+          '1 %{type} modification',
+          '%d %{type} modifications',
+          this.modifiedFilesLength,
+        ),
+        { type: this.title.toLowerCase() },
+      );
+    },
+    titleTooltip() {
+      return `${this.title} changes`;
+    },
   },
 };
 </script>
@@ -36,23 +68,46 @@ export default {
   <div
     class="multi-file-commit-list-collapsed text-center"
   >
-    <icon
-      v-once
-      :name="icon"
-      :size="18"
-      css-classes="append-bottom-15"
-    />
-    <icon
-      name="file-addition"
-      :size="18"
-      :css-classes="addedFilesIconClass + 'append-bottom-10'"
-    />
+    <div
+      v-tooltip
+      :title="titleTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-15"
+    >
+      <icon
+        v-once
+        :name="icon"
+        :size="18"
+      />
+    </div>
+    <div
+      v-tooltip
+      :title="additionsTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-10"
+    >
+      <icon
+        name="file-addition"
+        :size="18"
+        :css-classes="addedFilesIconClass"
+      />
+    </div>
     {{ addedFilesLength }}
-    <icon
-      name="file-modified"
-      :size="18"
-      :css-classes="modifiedFilesClass + ' prepend-top-10 append-bottom-10'"
-    />
+    <div
+      v-tooltip
+      :title="modifiedTooltip"
+      data-container="body"
+      data-placement="left"
+      class="prepend-top-10 append-bottom-10"
+    >
+      <icon
+        name="file-modified"
+        :size="18"
+        :css-classes="modifiedFilesClass"
+      />
+    </div>
     {{ modifiedFilesLength }}
   </div>
 </template>