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
This commit is contained in:
Shpuld Shpludson 2019-01-31 19:21:49 +00:00
commit 1a6207be1d
6 changed files with 52 additions and 16 deletions

View File

@ -1,5 +1,5 @@
/* eslint-env browser */ /* 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 StyleSwitcher from '../style_switcher/style_switcher.vue'
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
import { filter, trim } from 'lodash' import { filter, trim } from 'lodash'

View File

@ -7,7 +7,7 @@ import OpacityInput from '../opacity_input/opacity_input.vue'
import ShadowControl from '../shadow_control/shadow_control.vue' import ShadowControl from '../shadow_control/shadow_control.vue'
import FontControl from '../font_control/font_control.vue' import FontControl from '../font_control/font_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.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 Preview from './preview.vue'
import ExportImport from '../export_import/export_import.vue' import ExportImport from '../export_import/export_import.vue'

View File

@ -4,6 +4,7 @@ import './tab_switcher.scss'
export default Vue.component('tab-switcher', { export default Vue.component('tab-switcher', {
name: 'TabSwitcher', name: 'TabSwitcher',
props: ['renderOnlyFocused'],
data () { data () {
return { return {
active: this.$slots.default.findIndex(_ => _.tag) active: this.$slots.default.findIndex(_ => _.tag)
@ -44,11 +45,12 @@ export default Vue.component('tab-switcher', {
const contents = this.$slots.default.map((slot, index) => { const contents = this.$slots.default.map((slot, index) => {
if (!slot.tag) return if (!slot.tag) return
const active = index === this.active const active = index === this.active
return ( if (this.renderOnlyFocused) {
<div class={active ? 'active' : 'hidden'}> return active
{slot} ? <div class="active">{slot}</div>
</div> : <div class="hidden"></div>
) }
return <div class={active ? 'active' : 'hidden' }>{slot}</div>
}) })
return ( return (

View File

@ -1,12 +1,28 @@
<template> <template>
<div> <div>
<div v-if="user.id" class="user-profile panel panel-default"> <div v-if="user.id" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content> <user-card-content
<tab-switcher> :user="user"
<Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="fetchBy"/> :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 :label="$t('user_card.followees')">
<div v-if="friends"> <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>
<div class="userlist-placeholder" v-else> <div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i> <i class="icon-spin3 animate-spin"></i>
@ -14,14 +30,32 @@
</div> </div>
<div :label="$t('user_card.followers')"> <div :label="$t('user_card.followers')">
<div v-if="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>
<div class="userlist-placeholder" v-else> <div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i> <i class="icon-spin3 animate-spin"></i>
</div> </div>
</div> </div>
<Timeline :label="$t('user_card.media')" :embedded="true" :title="$t('user_card.media')" timeline-name="media" :timeline="media" :user-id="fetchBy" /> <Timeline
<Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_card.favorites')" timeline-name="favorites" :timeline="favorites"/> :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> </tab-switcher>
</div> </div>
<div v-else class="panel user-profile-placeholder"> <div v-else class="panel user-profile-placeholder">

View File

@ -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 StyleSwitcher from '../style_switcher/style_switcher.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'

View File

@ -130,7 +130,7 @@
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.follow_import')}}</h2> <h2>{{$t('settings.follow_import')}}</h2>
<p>{{$t('settings.import_followers_from_a_csv_file')}}</p> <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> <input type="file" ref="followlist" v-on:change="followListChange"></input>
</form> </form>
<i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i> <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>