diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-12-21 15:05:47 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-12-21 15:05:47 +0000 |
commit | 213e91d43926f09eb969859aa2c306eeb127deb4 (patch) | |
tree | 4904c49f664a8ad040e593e5ac354a36b7033f60 /app/assets/javascripts/ide/components/repo_tab.vue | |
parent | 889c7081f1c8bea2cd2cf7d50854babd7df92f72 (diff) | |
download | gitlab-ce-213e91d43926f09eb969859aa2c306eeb127deb4.tar.gz |
Resolve "Decouple multi-file editor from file list"
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> |