commit: 1a6207be1d81f8270840667babe262c24e53f1d7
parent: 3e4c598af471d52664b22ad11435e9df2a8f2677
Author: Shpuld Shpludson <shp@cock.li>
Date: Thu, 31 Jan 2019 19:21:49 +0000
Merge branch 'fix/add-option-to-not-render-background-tabs' into 'develop'
Fix #298 Add option to tab switcher to not render background tabs
Closes #298
See merge request pleroma/pleroma-fe!504
Diffstat:
7 files changed, 112 insertions(+), 76 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
