diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/timeline/timeline.js | 36 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 33 | ||||
| -rw-r--r-- | src/components/user_card/user_card.js | 4 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 10 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.js | 24 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 66 |
6 files changed, 105 insertions, 68 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index f28b85bd..98da8660 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -10,7 +10,8 @@ const Timeline = { 'timelineName', 'title', 'userId', - 'tag' + 'tag', + 'embedded' ], data () { return { @@ -20,15 +21,6 @@ const Timeline = { }, computed: { timelineError () { return this.$store.state.statuses.error }, - followers () { - return this.timeline.followers - }, - friends () { - return this.timeline.friends - }, - viewing () { - return this.timeline.viewing - }, newStatusCount () { return this.timeline.newStatusCount }, @@ -38,6 +30,14 @@ const Timeline = { } else { return ` (${this.newStatusCount})` } + }, + classes () { + return { + root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []), + header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []), + body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []), + footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : []) + } } }, components: { @@ -60,12 +60,6 @@ const Timeline = { userId: this.userId, tag: this.tag }) - - // don't fetch followers for public, friend, twkn - if (this.timelineName === 'user') { - this.fetchFriends() - this.fetchFollowers() - } }, mounted () { if (typeof document.hidden !== 'undefined') { @@ -103,16 +97,6 @@ const Timeline = { tag: this.tag }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) }, 1000, this), - fetchFollowers () { - const id = this.userId - this.$store.state.api.backendInteractor.fetchFollowers({ id }) - .then((followers) => this.$store.dispatch('addFollowers', { followers })) - }, - fetchFriends () { - const id = this.userId - this.$store.state.api.backendInteractor.fetchFriends({ id }) - .then((friends) => this.$store.dispatch('addFriends', { friends })) - }, scrollLoad (e) { const bodyBRect = document.body.getBoundingClientRect() const height = Math.max(bodyBRect.height, -(bodyBRect.y)) diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index bc7f74c2..6ba598c5 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,6 +1,6 @@ <template> - <div class="timeline panel panel-default" v-if="viewing == 'statuses'"> - <div class="panel-heading timeline-heading"> + <div :class="classes.root"> + <div :class="classes.header"> <div class="title"> {{title}} </div> @@ -14,43 +14,20 @@ {{$t('timeline.up_to_date')}} </div> </div> - <div class="panel-body"> + <div :class="classes.body"> <div class="timeline"> <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation> </div> </div> - <div class="panel-footer"> + <div :class="classes.footer"> <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> </a> <div class="new-status-notification text-center panel-footer" v-else>...</div> </div> </div> - <div class="timeline panel panel-default" v-else-if="viewing == 'followers'"> - <div class="panel-heading timeline-heading"> - <div class="title"> - {{$t('user_card.followers')}} - </div> - </div> - <div class="panel-body"> - <div class="timeline"> - <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card> - </div> - </div> - </div> - <div class="timeline panel panel-default" v-else-if="viewing == 'friends'"> - <div class="panel-heading timeline-heading"> - <div class="title"> - {{$t('user_card.followees')}} - </div> - </div> - <div class="panel-body"> - <div class="timeline"> - <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card> - </div> - </div> - </div> </template> + <script src="./timeline.js"></script> <style lang="scss"> diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index b8eb28e3..e674627a 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -1,4 +1,5 @@ import UserCardContent from '../user_card_content/user_card_content.vue' +import StillImage from '../still-image/still-image.vue' const UserCard = { props: [ @@ -12,7 +13,8 @@ const UserCard = { } }, components: { - UserCardContent + UserCardContent, + StillImage }, computed: { currentUser () { return this.$store.state.users.currentUser } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index eb0d7576..a16960cd 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -1,7 +1,7 @@ <template> <div class="card"> <a href="#"> - <img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url"> + <StillImage @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url"/> </a> <div class="usercard" v-if="userExpanded"> <user-card-content :user="user" :switcher="false"></user-card-content> @@ -40,6 +40,14 @@ margin-top:0.0em; text-align: left; width: 100%; + .user-name { + img { + object-fit: contain; + height: 16px; + width: 16px; + vertical-align: middle; + } + } } .follows-you { diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 1d79713d..8ff0daad 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -1,4 +1,5 @@ import UserCardContent from '../user_card_content/user_card_content.vue' +import UserCard from '../user_card/user_card.vue' import Timeline from '../timeline/timeline.vue' const UserProfile = { @@ -14,6 +15,12 @@ const UserProfile = { }, computed: { timeline () { return this.$store.state.statuses.timelines.user }, + friends () { + return this.user.friends + }, + followers () { + return this.user.followers + }, userId () { return this.$route.params.id }, @@ -25,15 +32,32 @@ const UserProfile = { } } }, + methods: { + fetchFollowers () { + const id = this.userId + this.$store.dispatch('addFollowers', { id }) + }, + fetchFriends () { + const id = this.userId + this.$store.dispatch('addFriends', { id }) + } + }, watch: { userId () { this.$store.dispatch('stopFetching', 'user') this.$store.commit('clearTimeline', { timeline: 'user' }) this.$store.dispatch('startFetching', ['user', this.userId]) + }, + user () { + if (!this.user.followers) { + this.fetchFollowers() + this.fetchFriends() + } } }, components: { UserCardContent, + UserCard, Timeline } } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 4d2853a6..319c9850 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -1,20 +1,38 @@ <template> - <div> - <div v-if="user" class="user-profile panel panel-default"> - <user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content> - </div> - <div v-else class="panel user-profile-placeholder"> - <div class="panel-heading"> - <div class="title"> - {{ $t('settings.profile_tab') }} +<div> + <div v-if="user" class="user-profile panel panel-default"> + <user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content> + <tab-switcher> + <Timeline label="Posts" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/> + <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> + </div> + <div class="userlist-placeholder" v-else> + <i class="icon-spin3 animate-spin"></i> + </div> + </div> + <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> + </div> + <div class="userlist-placeholder" v-else> + <i class="icon-spin3 animate-spin"></i> </div> </div> - <div class="panel-body"> - <i class="icon-spin3 animate-spin"></i> + </tab-switcher> + </div> + <div v-else class="panel user-profile-placeholder"> + <div class="panel-heading"> + <div class="title"> + {{ $t('settings.profile_tab') }} </div> </div> - <Timeline :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/> + <div class="panel-body"> + <i class="icon-spin3 animate-spin"></i> + </div> </div> +</div> </template> <script src="./user_profile.js"></script> @@ -24,12 +42,36 @@ .user-profile { flex: 2; flex-basis: 500px; - padding-bottom: 10px; + .panel-heading { background: transparent; flex-direction: column; align-items: stretch; } + .userlist-placeholder { + display: flex; + justify-content: center; + align-items: middle; + padding: 2em; + } + + .timeline-heading { + display: flex; + justify-content: center; + + .loadmore-button, .alert { + flex: 1; + } + + .loadmore-button { + height: 28px; + margin: 10px .6em; + } + + .title, .loadmore-text { + display: none + } + } } .user-profile-placeholder { .panel-body { |