repo_tab.vue 1.7 KB
Newer Older
1
<script>
2
import { mapActions } from 'vuex';
3
<<<<<<< HEAD
Tim Zallmann's avatar
Tim Zallmann committed
4
import fileStatusIcon from './repo_file_status_icon.vue';
5 6
=======
>>>>>>> upstream/master
Tim Zallmann's avatar
Tim Zallmann committed
7
import fileIcon from '../../vue_shared/components/file_icon.vue';
Jacob Schatz's avatar
Jacob Schatz committed
8

9
export default {
Jacob Schatz's avatar
Jacob Schatz committed
10
  props: {
11 12 13 14
    tab: {
      type: Object,
      required: true,
    },
Jacob Schatz's avatar
Jacob Schatz committed
15
  },
16
<<<<<<< HEAD
Jacob Schatz's avatar
Jacob Schatz committed
17

Tim Zallmann's avatar
Tim Zallmann committed
18 19
  components: {
    fileStatusIcon,
Tim Zallmann's avatar
Tim Zallmann committed
20
    fileIcon,
Tim Zallmann's avatar
Tim Zallmann committed
21 22
  },

23
=======
24 25 26
  components: {
    fileIcon,
  },
27
>>>>>>> upstream/master
28
  computed: {
29
    closeLabel() {
30
      if (this.tab.changed || this.tab.tempFile) {
31 32 33 34
        return `${this.tab.name} changed`;
      }
      return `Close ${this.tab.name}`;
    },
35 36
    changedClass() {
      const tabChangedObj = {
37 38
        'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
        'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
39
      };
40 41
      return tabChangedObj;
    },
42 43
  },

Jacob Schatz's avatar
Jacob Schatz committed
44
  methods: {
45 46 47
    ...mapActions([
      'closeFile',
    ]),
Tim Zallmann's avatar
Tim Zallmann committed
48 49 50
    clickFile(tab) {
      this.$router.push(`/project${tab.url}`);
    },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
51
  },
Jacob Schatz's avatar
Jacob Schatz committed
52
};
53 54 55
</script>

<template>
56
  <li
Tim Zallmann's avatar
Tim Zallmann committed
57
    @click="clickFile(tab)"
58 59 60
  >
    <button
      type="button"
61
      class="multi-file-tab-close"
62
      @click.stop.prevent="closeFile({ file: tab })"
63 64 65 66 67 68
      :aria-label="closeLabel"
      :class="{
        'modified': tab.changed,
      }"
      :disabled="tab.changed"
    >
69 70 71
      <i
        class="fa"
        :class="changedClass"
72 73
        aria-hidden="true"
      >
74 75
      </i>
    </button>
76

77 78 79
    <div
      class="multi-file-tab"
      :class="{active : tab.active }"
80
      :title="tab.url"
81
    >
Tim Zallmann's avatar
Tim Zallmann committed
82
      <file-icon
83
        :file-name="tab.name"
Tim Zallmann's avatar
Tim Zallmann committed
84 85 86
        :size="16"
      >
      </file-icon>
87
      {{ tab.name }}
Phil Hughes's avatar
Phil Hughes committed
88
      <file-status-icon
89 90 91
        :file="tab"
      />
    </div>
92
  </li>
93
</template>