diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue | 87 |
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> |