diff options
| author | shpuld <shp@cock.li> | 2019-01-31 17:00:31 +0200 |
|---|---|---|
| committer | shpuld <shp@cock.li> | 2019-01-31 17:00:31 +0200 |
| commit | 476bf0afe1c890b0f08587b3942981c8c591c7be (patch) | |
| tree | fcadf92a94d8e310355f640a69a92010eee002cb /src/components/tab_switcher/tab_switcher.jsx | |
| parent | fbe7af3d56e4e6e168208a511bd7cd4e4e4e7a40 (diff) | |
Fix media timeline attachments being small by adding an option to not render background tabs in tab switcher
Diffstat (limited to 'src/components/tab_switcher/tab_switcher.jsx')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.jsx | 65 |
1 files changed, 0 insertions, 65 deletions
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx deleted file mode 100644 index 9038733c..00000000 --- a/src/components/tab_switcher/tab_switcher.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import Vue from 'vue' - -import './tab_switcher.scss' - -export default Vue.component('tab-switcher', { - name: 'TabSwitcher', - data () { - return { - active: this.$slots.default.findIndex(_ => _.tag) - } - }, - methods: { - activateTab (index) { - return () => { - this.active = index - } - } - }, - beforeUpdate () { - const currentSlot = this.$slots.default[this.active] - if (!currentSlot.tag) { - this.active = this.$slots.default.findIndex(_ => _.tag) - } - }, - render (h) { - const tabs = this.$slots.default - .map((slot, index) => { - if (!slot.tag) return - const classesTab = ['tab'] - const classesWrapper = ['tab-wrapper'] - - if (index === this.active) { - classesTab.push('active') - classesWrapper.push('active') - } - - return ( - <div class={ classesWrapper.join(' ')}> - <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> - </div> - ) - }) - - const contents = this.$slots.default.map((slot, index) => { - if (!slot.tag) return - const active = index === this.active - return ( - <div class={active ? 'active' : 'hidden'}> - {slot} - </div> - ) - }) - - return ( - <div class="tab-switcher"> - <div class="tabs"> - {tabs} - </div> - <div class="contents"> - {contents} - </div> - </div> - ) - } -}) |
