From b70c2bfef756a398305c7933f0b6906be4432e4c Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 2 Jul 2019 14:43:01 -0400 Subject: make sure that user timelines are empty when opening profile page --- src/components/user_profile/user_profile.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index eab330e7..7eb4ed3a 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -31,6 +31,8 @@ const UserProfile = { } }, created () { + // Make sure that timelines used in this page are empty + this.cleanUp() const routeParams = this.$route.params this.load(routeParams.name || routeParams.id) }, -- cgit v1.2.3-70-g09d2 From e1d6e56e1b5b189f0738fb174c23965b51bcd8f2 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 26 Apr 2019 00:39:43 -0400 Subject: clean up layout --- .../moderation_tools/moderation_tools.vue | 244 +++++++-------------- src/components/user_card/user_card.vue | 75 +++---- src/components/user_profile/user_profile.js | 2 - 3 files changed, 118 insertions(+), 203 deletions(-) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index c6f8354b..785fe7ba 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -1,168 +1,85 @@ @@ -190,4 +107,11 @@ } } +.moderation-toggle-btn { + &#{&} { + margin: 0; + width: 100%; + } +} + diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index eedb67b5..2f2f9e5f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -47,7 +47,7 @@
- -
+
- + {{ $t('user_card.subscribe') }} - + {{ $t('user_card.subscribed') }}
+
- - - - - - + +
+
- - - - - - + +
-
- - - + +
+
+
@@ -366,25 +361,23 @@ justify-content: space-between; margin-right: -.75em; - > div { + > * { flex: 1 0 0; - margin-right: .75em; - margin-bottom: .6em; + margin: 0 .75em .6em 0; white-space: nowrap; - } - button { - width: 100%; - height: 100%; - margin: 0; + > button { + margin: 0; + width: 100%; + } } .remote-button { - height: 28px !important; - width: 92%; + height: 28px; + margin: 0; } - .pressed { + button.pressed { border-bottom-color: rgba(255, 255, 255, 0.2); border-top-color: rgba(0, 0, 0, 0.2); } diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 7eb4ed3a..39b99dac 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -3,7 +3,6 @@ import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import Conversation from '../conversation/conversation.vue' -import ModerationTools from '../moderation_tools/moderation_tools.vue' import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' @@ -132,7 +131,6 @@ const UserProfile = { Timeline, FollowerList, FriendList, - ModerationTools, FollowCard, Conversation } -- cgit v1.2.3-70-g09d2 From 2e0603bdcaab4543bec9cb8d37256aa754548f6e Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 9 Aug 2019 16:47:11 -0400 Subject: clear timelines only if load user not viewed previously --- src/components/user_profile/user_profile.js | 59 ++++++++++++++++------------- 1 file changed, 32 insertions(+), 27 deletions(-) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 39b99dac..b8a165c4 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -30,13 +30,11 @@ const UserProfile = { } }, created () { - // Make sure that timelines used in this page are empty - this.cleanUp() const routeParams = this.$route.params this.load(routeParams.name || routeParams.id) }, destroyed () { - this.cleanUp() + this.stopFetching() }, computed: { timeline () { @@ -67,17 +65,35 @@ const UserProfile = { }, methods: { load (userNameOrId) { + const startFetchingTimeline = (timeline, userId) => { + // Clear timeline only if load another user's profile + if (userId !== this.$store.state.statuses.timelines[timeline].userId) { + this.$store.commit('clearTimeline', { timeline }) + } + this.$store.dispatch('startFetchingTimeline', { timeline, userId }) + } + + const loadById = (userId) => { + this.userId = userId + startFetchingTimeline('user', userId) + startFetchingTimeline('media', userId) + if (this.isUs) { + startFetchingTimeline('favorites', userId) + } + // Fetch all pinned statuses immediately + this.$store.dispatch('fetchPinnedStatuses', userId) + } + + // Reset view + this.userId = null + // Check if user data is already loaded in store const user = this.$store.getters.findUser(userNameOrId) if (user) { - this.userId = user.id - this.fetchTimelines() + loadById(user.id) } else { this.$store.dispatch('fetchUser', userNameOrId) - .then(({ id }) => { - this.userId = id - this.fetchTimelines() - }) + .then(({ id }) => loadById(id)) .catch((reason) => { const errorMessage = get(reason, 'error.error') if (errorMessage === 'No user with such user_id') { // Known error @@ -90,36 +106,25 @@ const UserProfile = { }) } }, - fetchTimelines () { - const userId = this.userId - this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId }) - this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId }) - if (this.isUs) { - this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId }) - } - // Fetch all pinned statuses immediately - this.$store.dispatch('fetchPinnedStatuses', userId) - }, - cleanUp () { + stopFetching () { this.$store.dispatch('stopFetching', 'user') this.$store.dispatch('stopFetching', 'favorites') this.$store.dispatch('stopFetching', 'media') - this.$store.commit('clearTimeline', { timeline: 'user' }) - this.$store.commit('clearTimeline', { timeline: 'favorites' }) - this.$store.commit('clearTimeline', { timeline: 'media' }) + }, + switchUser (userNameOrId) { + this.stopFetching() + this.load(userNameOrId) } }, watch: { '$route.params.id': function (newVal) { if (newVal) { - this.cleanUp() - this.load(newVal) + this.switchUser(newVal) } }, '$route.params.name': function (newVal) { if (newVal) { - this.cleanUp() - this.load(newVal) + this.switchUser(newVal) } }, $route () { -- cgit v1.2.3-70-g09d2 From 539913673fc854facc9d1f28017434d367e1cd3d Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 9 Aug 2019 16:50:49 -0400 Subject: reset error state when load new profile --- src/components/user_profile/user_profile.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index b8a165c4..1250d6f1 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -86,6 +86,7 @@ const UserProfile = { // Reset view this.userId = null + this.error = false // Check if user data is already loaded in store const user = this.$store.getters.findUser(userNameOrId) -- cgit v1.2.3-70-g09d2 From 7dfcabb5433a5eb805bbda6ef87390c6ed2d5372 Mon Sep 17 00:00:00 2001 From: taehoon Date: Sat, 10 Aug 2019 14:49:37 -0400 Subject: sync profile tab state with location query --- src/components/user_profile/user_profile.js | 14 +++++++++++--- src/components/user_profile/user_profile.vue | 29 ++++++++++++++++------------ 2 files changed, 28 insertions(+), 15 deletions(-) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 1250d6f1..00055707 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -22,16 +22,20 @@ const FriendList = withLoadMore({ additionalPropNames: ['userId'] })(List) +const defaultTabKey = 'statuses' + const UserProfile = { data () { return { error: false, - userId: null + userId: null, + tab: defaultTabKey } }, created () { const routeParams = this.$route.params this.load(routeParams.name || routeParams.id) + this.tab = get(this.$route, 'query.tab', defaultTabKey) }, destroyed () { this.stopFetching() @@ -115,6 +119,10 @@ const UserProfile = { switchUser (userNameOrId) { this.stopFetching() this.load(userNameOrId) + }, + onTabSwitch (tab) { + this.tab = tab + this.$router.replace({ query: { tab } }) } }, watch: { @@ -128,8 +136,8 @@ const UserProfile = { this.switchUser(newVal) } }, - $route () { - this.$refs.tabSwitcher.activateTab(0)() + '$route.query': function (newVal) { + this.tab = newVal.tab || defaultTabKey } }, components: { diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index cffa28f1..42516916 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -12,22 +12,24 @@ rounded="top" /> -
- -
+
@@ -42,6 +44,7 @@
@@ -58,6 +61,7 @@