From 476bf0afe1c890b0f08587b3942981c8c591c7be Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Thu, 31 Jan 2019 17:00:31 +0200
Subject: Fix media timeline attachments being small by adding an option to not
 render background tabs in tab switcher

---
 src/components/settings/settings.js             |  2 +-
 src/components/style_switcher/style_switcher.js |  2 +-
 src/components/tab_switcher/tab_switcher.js     | 67 +++++++++++++++++++++++++
 src/components/tab_switcher/tab_switcher.jsx    | 65 ------------------------
 src/components/user_profile/user_profile.vue    | 48 +++++++++++++++---
 src/components/user_settings/user_settings.js   |  2 +-
 src/components/user_settings/user_settings.vue  |  2 +-
 7 files changed, 112 insertions(+), 76 deletions(-)
 create mode 100644 src/components/tab_switcher/tab_switcher.js
 delete mode 100644 src/components/tab_switcher/tab_switcher.jsx

(limited to 'src')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 06011e7c..7000fa5e 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,5 +1,5 @@
 /* eslint-env browser */
-import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
+import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import { filter, trim } from 'lodash'
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 6a4e1cba..8c3d4861 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -7,7 +7,7 @@ import OpacityInput from '../opacity_input/opacity_input.vue'
 import ShadowControl from '../shadow_control/shadow_control.vue'
 import FontControl from '../font_control/font_control.vue'
 import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
-import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
+import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import Preview from './preview.vue'
 import ExportImport from '../export_import/export_import.vue'
 
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
new file mode 100644
index 00000000..f9c3f927
--- /dev/null
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -0,0 +1,67 @@
+import Vue from 'vue'
+
+import './tab_switcher.scss'
+
+export default Vue.component('tab-switcher', {
+  name: 'TabSwitcher',
+  props: ['renderOnlyFocused'],
+  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
+      if (this.renderOnlyFocused) {
+        return active
+          ? <div class="active">{slot}</div>
+          : <div class="hidden"></div>
+      }
+      return <div class={active ? 'active' : 'hidden' }>{slot}</div>
+    })
+
+    return (
+      <div class="tab-switcher">
+        <div class="tabs">
+          {tabs}
+        </div>
+        <div class="contents">
+          {contents}
+        </div>
+      </div>
+    )
+  }
+})
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>
-    )
-  }
-})
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f9b964ce..e53ce4cc 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,12 +1,28 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
-    <tab-switcher>
-      <Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="fetchBy"/>
+    <user-card-content
+      :user="user"
+      :switcher="true"
+      :selected="timeline.viewing"
+    />
+    <tab-switcher :renderOnlyFocused="true">
+      <Timeline
+        :label="$t('user_card.statuses')"
+        :embedded="true"
+        :title="$t('user_profile.timeline_title')"
+        :timeline="timeline"
+        :timeline-name="'user'"
+        :user-id="fetchBy"
+      />
       <div :label="$t('user_card.followees')">
         <div v-if="friends">
-          <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
+          <user-card
+            v-for="friend in friends"
+            :key="friend.id"
+            :user="friend"
+            :showFollows="true"
+          />
         </div>
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
@@ -14,14 +30,32 @@
       </div>
       <div :label="$t('user_card.followers')">
         <div v-if="followers">
-          <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
+          <user-card
+            v-for="follower in followers"
+            :key="follower.id"
+            :user="follower"
+            :showFollows="false"
+          />
         </div>
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
-      <Timeline :label="$t('user_card.media')" :embedded="true" :title="$t('user_card.media')" timeline-name="media" :timeline="media" :user-id="fetchBy" />
-      <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_card.favorites')" timeline-name="favorites" :timeline="favorites"/>
+      <Timeline
+        :label="$t('user_card.media')"
+        :embedded="true" :title="$t('user_card.media')"
+        timeline-name="media"
+        :timeline="media"
+        :user-id="fetchBy"
+      />
+      <Timeline
+        v-if="isUs"
+        :label="$t('user_card.favorites')"
+        :embedded="true"
+        :title="$t('user_card.favorites')"
+        timeline-name="favorites"
+        :timeline="favorites"
+      />
     </tab-switcher>
   </div>
   <div v-else class="panel user-profile-placeholder">
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index be799f5d..719a9c0c 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -1,4 +1,4 @@
-import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
+import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 253bbd34..993675ba 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -130,7 +130,7 @@
           <div class="setting-item">
             <h2>{{$t('settings.follow_import')}}</h2>
             <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
-            <form v-model="followImportForm">
+            <form>
               <input type="file" ref="followlist" v-on:change="followListChange"></input>
             </form>
             <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
-- 
cgit v1.2.3-70-g09d2