diff options
author | Luke Bennett <lukeeeebennettplus@gmail.com> | 2018-03-21 18:26:06 +0000 |
---|---|---|
committer | Luke Bennett <lukeeeebennettplus@gmail.com> | 2018-03-21 18:26:06 +0000 |
commit | 2bb3e4c6e389915d2702ffcfaff5d31b6a41f582 (patch) | |
tree | da71c857eee52a4f9ac4705ca3f06c9ec7dd9384 /app/assets/javascripts/ide/components/repo_tab.vue | |
parent | 5595afe807c3c11d9c695c558da1210a25544387 (diff) | |
parent | 9027d023a58c8ac803bc114c6213b1f124a978a2 (diff) | |
download | gitlab-ce-2bb3e4c6e389915d2702ffcfaff5d31b6a41f582.tar.gz |
Merge remote-tracking branch 'origin/master' into deprecation-warning-for-dynamic-milestones
Diffstat (limited to 'app/assets/javascripts/ide/components/repo_tab.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/repo_tab.vue | 62 |
1 files changed, 43 insertions, 19 deletions
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue index 5ed7bddf6ae..c337bc813e6 100644 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -1,10 +1,17 @@ <script> import { mapActions } from 'vuex'; - import fileIcon from '../../vue_shared/components/file_icon.vue'; + + import fileIcon from '~/vue_shared/components/file_icon.vue'; + import icon from '~/vue_shared/components/icon.vue'; + import fileStatusIcon from './repo_file_status_icon.vue'; + import changedFileIcon from './changed_file_icon.vue'; export default { components: { + fileStatusIcon, fileIcon, + icon, + changedFileIcon, }, props: { tab: { @@ -12,6 +19,11 @@ required: true, }, }, + data() { + return { + tabMouseOver: false, + }; + }, computed: { closeLabel() { if (this.tab.changed || this.tab.tempFile) { @@ -19,12 +31,8 @@ } return `Close ${this.tab.name}`; }, - changedClass() { - const tabChangedObj = { - 'fa-times close-icon': !this.tab.changed && !this.tab.tempFile, - 'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile, - }; - return tabChangedObj; + showChangedIcon() { + return this.tab.changed ? !this.tabMouseOver : false; }, }, @@ -35,28 +43,41 @@ clickFile(tab) { this.$router.push(`/project${tab.url}`); }, + mouseOverTab() { + if (this.tab.changed) { + this.tabMouseOver = true; + } + }, + mouseOutTab() { + if (this.tab.changed) { + this.tabMouseOver = false; + } + }, }, }; </script> <template> - <li @click="clickFile(tab)"> + <li + @click="clickFile(tab)" + @mouseover="mouseOverTab" + @mouseout="mouseOutTab" + > <button type="button" class="multi-file-tab-close" - @click.stop.prevent="closeFile({ file: tab })" + @click.stop.prevent="closeFile(tab.path)" :aria-label="closeLabel" - :class="{ - 'modified': tab.changed, - }" - :disabled="tab.changed" > - <i - class="fa" - :class="changedClass" - aria-hidden="true" - > - </i> + <icon + v-if="!showChangedIcon" + name="close" + :size="12" + /> + <changed-file-icon + v-else + :file="tab" + /> </button> <div @@ -69,6 +90,9 @@ :size="16" /> {{ tab.name }} + <file-status-icon + :file="tab" + /> </div> </li> </template> |