diff options
Diffstat (limited to 'app/assets/javascripts/repo/components/repo_tab.vue')
-rw-r--r-- | app/assets/javascripts/repo/components/repo_tab.vue | 70 |
1 files changed, 37 insertions, 33 deletions
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue index 0d0c34ec741..fb29a60df66 100644 --- a/app/assets/javascripts/repo/components/repo_tab.vue +++ b/app/assets/javascripts/repo/components/repo_tab.vue @@ -1,7 +1,7 @@ <script> -import Store from '../stores/repo_store'; +import { mapActions } from 'vuex'; -const RepoTab = { +export default { props: { tab: { type: Object, @@ -11,53 +11,57 @@ const RepoTab = { computed: { closeLabel() { - if (this.tab.changed) { + if (this.tab.changed || this.tab.tempFile) { return `${this.tab.name} changed`; } return `Close ${this.tab.name}`; }, changedClass() { const tabChangedObj = { - 'fa-times close-icon': !this.tab.changed, - 'fa-circle unsaved-icon': this.tab.changed, + 'fa-times close-icon': !this.tab.changed && !this.tab.tempFile, + 'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile, }; return tabChangedObj; }, }, methods: { - tabClicked: Store.setActiveFiles, - - closeTab(file) { - if (file.changed) return; - this.$emit('tabclosed', file); - }, + ...mapActions([ + 'setFileActive', + 'closeFile', + ]), }, }; - -export default RepoTab; </script> <template> -<li @click="tabClicked(tab)"> - <a - href="#0" - class="close" - @click.stop.prevent="closeTab(tab)" - :aria-label="closeLabel"> - <i - class="fa" - :class="changedClass" - aria-hidden="true"> - </i> - </a> + <li + @click="setFileActive(tab)" + > + <button + type="button" + class="multi-file-tab-close" + @click.stop.prevent="closeFile({ file: tab })" + :aria-label="closeLabel" + :class="{ + 'modified': tab.changed, + }" + :disabled="tab.changed" + > + <i + class="fa" + :class="changedClass" + aria-hidden="true" + > + </i> + </button> - <a - href="#" - class="repo-tab" - :title="tab.url" - @click.prevent="tabClicked(tab)"> - {{tab.name}} - </a> -</li> + <div + class="multi-file-tab" + :class="{active : tab.active }" + :title="tab.url" + > + {{ tab.name }} + </div> + </li> </template> |