aboutsummaryrefslogtreecommitdiff
path: root/src/components/tab_switcher/tab_switcher.jsx
diff options
context:
space:
mode:
authorshpuld <shp@cock.li>2019-01-31 17:00:31 +0200
committershpuld <shp@cock.li>2019-01-31 17:00:31 +0200
commit476bf0afe1c890b0f08587b3942981c8c591c7be (patch)
treefcadf92a94d8e310355f640a69a92010eee002cb /src/components/tab_switcher/tab_switcher.jsx
parentfbe7af3d56e4e6e168208a511bd7cd4e4e4e7a40 (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.jsx65
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>
- )
- }
-})