diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/repo_tab.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/repo_tab.vue | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue new file mode 100644 index 00000000000..5bd63ac9ec5 --- /dev/null +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -0,0 +1,69 @@ +<script> +import { mapActions } from 'vuex'; + +export default { + props: { + tab: { + type: Object, + required: true, + }, + }, + + computed: { + closeLabel() { + 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 && !this.tab.tempFile, + 'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile, + }; + return tabChangedObj; + }, + }, + + methods: { + ...mapActions([ + 'closeFile', + ]), + clickFile(tab) { + this.$router.push(`/project${tab.url}`); + }, + }, +}; +</script> + +<template> + <li + @click="clickFile(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> + + <div + class="multi-file-tab" + :class="{active : tab.active }" + :title="tab.url" + > + {{ tab.name }} + </div> + </li> +</template> |