2017-07-24 12:15:41 -04:00
|
|
|
<script>
|
|
|
|
import Vue from 'vue';
|
|
|
|
import Store from './repo_store';
|
|
|
|
import RepoTab from './repo_tab.vue';
|
2017-07-28 13:36:07 -04:00
|
|
|
import RepoMixin from './repo_mixin';
|
2017-07-24 12:15:41 -04:00
|
|
|
|
|
|
|
const RepoTabs = {
|
2017-07-28 13:36:07 -04:00
|
|
|
mixins: [RepoMixin],
|
2017-07-24 12:15:41 -04:00
|
|
|
|
2017-07-24 13:42:11 -04:00
|
|
|
components: {
|
2017-07-24 12:15:41 -04:00
|
|
|
'repo-tab': RepoTab,
|
|
|
|
},
|
|
|
|
|
|
|
|
data: () => Store,
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
isOverflow() {
|
|
|
|
return this.$el.scrollWidth > this.$el.offsetWidth;
|
2017-07-26 08:56:31 -04:00
|
|
|
},
|
2017-07-30 13:34:53 -04:00
|
|
|
|
|
|
|
xclicked(file) {
|
|
|
|
Store.removeFromOpenedFiles(file);
|
|
|
|
}
|
2017-07-24 12:15:41 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
openedFiles() {
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
this.tabsOverflow = this.isOverflow();
|
|
|
|
});
|
2017-07-26 08:56:31 -04:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2017-07-24 12:15:41 -04:00
|
|
|
|
|
|
|
export default RepoTabs;
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}">
|
2017-07-30 13:34:53 -04:00
|
|
|
<repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xclicked"/>
|
2017-07-24 12:15:41 -04:00
|
|
|
</ul>
|
|
|
|
</template>
|