From 2d339cd3b8b3ffc1509c954f68636d8ed4d37253 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 1 Apr 2019 22:29:45 -0400 Subject: [PATCH 01/42] fetch favorited users --- src/components/conversation/conversation.js | 12 +++++++++ src/components/status/status.js | 8 +++++- src/modules/statuses.js | 11 ++++++++ src/services/api/api.service.js | 27 +++++++++++++++++++ .../backend_interactor_service.js | 4 ++- 5 files changed, 60 insertions(+), 2 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 30600f73..b3335f64 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -120,6 +120,8 @@ const conversation = { if (this.status) { this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id}) .then(({ancestors, descendants}) => { + const ancestorId = ancestors.length ? ancestors[0].id : this.status.id + this.fetchFavouritedByUsers(ancestorId) this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) }) @@ -148,6 +150,16 @@ const conversation = { if (!this.expanded) { this.setHighlight(null) } + }, + fetchFavouritedByUsers (id) { + this.$store.state.api.backendInteractor.fetchFavouritedByUsers({id: this.status.id}).then((response) => { + const favoritedByUsers = response.map(item => ({ + src: item.avatar_static, + name: item.display_name + })) + this.$store.dispatch('addFavoritedByUsers', { favoritedByUsers, id }) + }) + }, } } } diff --git a/src/components/status/status.js b/src/components/status/status.js index 0295cd04..e470eaeb 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -7,6 +7,7 @@ import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import Gallery from '../gallery/gallery.vue' import LinkPreview from '../link-preview/link-preview.vue' +import AvatarList from '../avatar_list/avatar_list.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import fileType from 'src/services/file_type/file_type.service' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' @@ -257,6 +258,10 @@ const Status = { return this.status.statusnet_html } return this.status.summary_html + '
' + this.status.statusnet_html + }, + favouritedByUsers () { + return this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [] + }, } }, components: { @@ -268,7 +273,8 @@ const Status = { UserCard, UserAvatar, Gallery, - LinkPreview + LinkPreview, + AvatarList }, methods: { visibilityIcon (visibility) { diff --git a/src/modules/statuses.js b/src/modules/statuses.js index e70c2400..8d2eb424 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -459,6 +459,13 @@ export const mutations = { }, queueFlush (state, { timeline, id }) { state.timelines[timeline].flushMarker = id + }, + addFavoritedByUsers (state, { favoritedByUsers, id }) { + state.allStatusesObject[id] = { + ...state.allStatusesObject[id], + favoritedBy: favoritedByUsers + } + }, } } @@ -524,6 +531,10 @@ const statuses = { id: rootState.statuses.notifications.maxId, credentials: rootState.users.currentUser.credentials }) + }, + addFavoritedByUsers ({ rootState, commit }, { favoritedByUsers, id }) { + commit('addFavoritedByUsers', { favoritedByUsers, id }) + }, } }, mutations diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 2dd52cb5..45eec566 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -49,6 +49,7 @@ const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute` const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute` const MASTODON_POST_STATUS_URL = '/api/v1/statuses' const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media' +const MASTODON_STATUS_FAVOURITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by` import { each, map } from 'lodash' import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js' @@ -722,6 +723,32 @@ const markNotificationsAsSeen = ({id, credentials}) => { }).then((data) => data.json()) } +const fetchFavouritedByUsers = ({id}) => { + return fetch(MASTODON_STATUS_FAVOURITEDBY_URL(id), { + method: 'GET' + }) + .then(response => { + if (response.ok) { + return response.json() + } else { + throw new Error('Error fetching favorited by users') + } + }) +} + +const fetchRebloggedByUsers = ({id}) => { + return fetch(MASTODON_STATUS_REBLOGGEDBY_URL(id), { + method: 'GET' + }) + .then(response => { + if (response.ok) { + return response.json() + } else { + throw new Error('Error reblogged by users') + } + }) +} + const apiService = { verifyCredentials, fetchTimeline, diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 75bba92b..5faec9af 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -112,6 +112,7 @@ const backendInteractorService = (credentials) => { const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password}) const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation}) + const fetchFavouritedByUsers = ({id}) => apiService.fetchFavouritedByUsers({id}) const backendInteractorServiceInstance = { fetchStatus, fetchConversation, @@ -152,7 +153,8 @@ const backendInteractorService = (credentials) => { changePassword, fetchFollowRequests, approveUser, - denyUser + denyUser, + fetchFavouritedByUsers, } return backendInteractorServiceInstance From 85457fc9173d64d39b1d942496cae1366a0d95ab Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 1 Apr 2019 22:30:06 -0400 Subject: [PATCH 02/42] fetch reblogged users --- src/components/conversation/conversation.js | 9 +++++++ src/components/status/status.js | 2 ++ src/components/status/status.vue | 25 +++++++++++++++++++ src/modules/statuses.js | 7 ++++++ src/services/api/api.service.js | 5 +++- .../backend_interactor_service.js | 3 +++ 6 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index b3335f64..24d48dd8 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -122,6 +122,7 @@ const conversation = { .then(({ancestors, descendants}) => { const ancestorId = ancestors.length ? ancestors[0].id : this.status.id this.fetchFavouritedByUsers(ancestorId) + this.fetchRebloggedByUsers(ancestorId) this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) }) @@ -160,6 +161,14 @@ const conversation = { this.$store.dispatch('addFavoritedByUsers', { favoritedByUsers, id }) }) }, + fetchRebloggedByUsers (id) { + this.$store.state.api.backendInteractor.fetchRebloggedByUsers({id: this.status.id}).then((response) => { + const rebloggedByUsers = response.map(item => ({ + src: item.avatar_static, + name: item.display_name + })) + this.$store.dispatch('addRebloggedByUsers', { rebloggedByUsers, id }) + }) } } } diff --git a/src/components/status/status.js b/src/components/status/status.js index e470eaeb..eda96373 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -262,6 +262,8 @@ const Status = { favouritedByUsers () { return this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [] }, + rebloggedByUsers () { + return this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : [] } }, components: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 690e8318..6b8e0b3d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -142,6 +142,16 @@ +
+
+

Boosted By {{rebloggedByUsers.length}}:

+ +
+
+

Favourited By {{favouritedByUsers.length}}:

+ +
+
@@ -612,6 +622,21 @@ a.unmute { } } +.boosted-users { + display: flex; + justify-content: space-between; + margin-top: 10px; + + .favourited-users, + .reblogged-users { + flex: 1; + + .title { + margin: 0 0 10px 0; + } + } +} + @media all and (max-width: 800px) { .status-el { .retweet-info { diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 8d2eb424..c749e60f 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -466,6 +466,11 @@ export const mutations = { favoritedBy: favoritedByUsers } }, + addRebloggedByUsers (state, { rebloggedByUsers, id }) { + state.allStatusesObject[id] = { + ...state.allStatusesObject[id], + rebloggedBy: rebloggedByUsers + } } } @@ -535,6 +540,8 @@ const statuses = { addFavoritedByUsers ({ rootState, commit }, { favoritedByUsers, id }) { commit('addFavoritedByUsers', { favoritedByUsers, id }) }, + addRebloggedByUsers ({ rootState, commit }, { rebloggedByUsers, id }) { + commit('addRebloggedByUsers', { rebloggedByUsers, id }) } }, mutations diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 45eec566..120398f0 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -50,6 +50,7 @@ const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute` const MASTODON_POST_STATUS_URL = '/api/v1/statuses' const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media' const MASTODON_STATUS_FAVOURITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by` +const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by` import { each, map } from 'lodash' import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js' @@ -797,7 +798,9 @@ const apiService = { approveUser, denyUser, suggestions, - markNotificationsAsSeen + markNotificationsAsSeen, + fetchFavouritedByUsers, + fetchRebloggedByUsers } export default apiService diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 5faec9af..01663a64 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -113,6 +113,8 @@ const backendInteractorService = (credentials) => { const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation}) const fetchFavouritedByUsers = ({id}) => apiService.fetchFavouritedByUsers({id}) + const fetchRebloggedByUsers = ({id}) => apiService.fetchRebloggedByUsers({id}) + const backendInteractorServiceInstance = { fetchStatus, fetchConversation, @@ -155,6 +157,7 @@ const backendInteractorService = (credentials) => { approveUser, denyUser, fetchFavouritedByUsers, + fetchRebloggedByUsers } return backendInteractorServiceInstance From ff259667023b8bb46bf8b122e4d1caaa6503274e Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 1 Apr 2019 22:30:23 -0400 Subject: [PATCH 03/42] display users in stacked avatarlist --- src/components/avatar_list/avatar_list.js | 15 ++++++ src/components/avatar_list/avatar_list.vue | 54 ++++++++++++++++++++++ 2 files changed, 69 insertions(+) create mode 100644 src/components/avatar_list/avatar_list.js create mode 100644 src/components/avatar_list/avatar_list.vue diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js new file mode 100644 index 00000000..0fb61691 --- /dev/null +++ b/src/components/avatar_list/avatar_list.js @@ -0,0 +1,15 @@ +import UserAvatar from '../user_avatar/user_avatar.vue' + +const AvatarList = { + props: ['avatars'], + computed: { + slicedAvatars () { + return this.avatars ? this.avatars.slice(0, 9) : [] + } + }, + components: { + UserAvatar + } +} + +export default AvatarList diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue new file mode 100644 index 00000000..204ccb9a --- /dev/null +++ b/src/components/avatar_list/avatar_list.vue @@ -0,0 +1,54 @@ + + + + + From 2db607f49cbfb3068354581559e6e605d9dea03b Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 1 Apr 2019 22:38:48 -0400 Subject: [PATCH 04/42] limit avatars list to display 10 --- src/components/avatar_list/avatar_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js index 0fb61691..7bd1c556 100644 --- a/src/components/avatar_list/avatar_list.js +++ b/src/components/avatar_list/avatar_list.js @@ -4,7 +4,7 @@ const AvatarList = { props: ['avatars'], computed: { slicedAvatars () { - return this.avatars ? this.avatars.slice(0, 9) : [] + return this.avatars ? this.avatars.slice(0, 10) : [] } }, components: { From 0d8eb1d00b9044398fccf0760329fb81887c9b18 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 1 Apr 2019 22:38:56 -0400 Subject: [PATCH 05/42] set default avatar background --- src/components/avatar_list/avatar_list.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index 204ccb9a..3241609c 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -28,6 +28,7 @@ height: 40px; width: 40px; line-height: 40px; + background-color: $main-background; } } } From 44d07ceb25ab8902a4d67b156474e737d6541362 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 04:25:08 -0400 Subject: [PATCH 06/42] support mobile size screen --- src/components/avatar_list/avatar_list.vue | 20 ++++++++++++++++---- src/components/status/status.vue | 4 +++- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index 3241609c..56ca12a2 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -14,14 +14,26 @@ display: inline-flex; /* Causes LI items to display in row. */ list-style-type: none; margin: 0; - padding: 0px 16px 0px 0px; - flex-direction: row-reverse; + padding: 0px 20px 0px 0px; + flex-direction: row; + flex-wrap: wrap; &__item { height: 40px; margin: 0; padding: 0; - width: 25px; + width: 20px; + + &:nth-child( 1 ) { z-index: 10 ; } + &:nth-child( 2 ) { z-index: 9 ; } + &:nth-child( 3 ) { z-index: 8 ; } + &:nth-child( 4 ) { z-index: 7 ; } + &:nth-child( 5 ) { z-index: 6 ; } + &:nth-child( 6 ) { z-index: 5 ; } + &:nth-child( 7 ) { z-index: 4 ; } + &:nth-child( 8 ) { z-index: 3 ; } + &:nth-child( 9 ) { z-index: 2 ; } + &:nth-child( 10 ) { z-index: 1 ; } .avatars__img { border-radius: 50%; @@ -35,7 +47,7 @@ .transparent-avatar { .avatars__item { - &:first-child { + &:last-child { position: relative; .avatars__img { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6b8e0b3d..f67f849c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -629,7 +629,9 @@ a.unmute { .favourited-users, .reblogged-users { - flex: 1; + flex-basis: 50%; + flex-grow: 1; + flex-shrink: 1; .title { margin: 0 0 10px 0; From d19bee0b66737b3723584b1fa16fa6d244700545 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 04:25:30 -0400 Subject: [PATCH 07/42] fetch parent post boost users information --- src/components/conversation/conversation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 24d48dd8..18635aa1 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -153,7 +153,7 @@ const conversation = { } }, fetchFavouritedByUsers (id) { - this.$store.state.api.backendInteractor.fetchFavouritedByUsers({id: this.status.id}).then((response) => { + this.$store.state.api.backendInteractor.fetchFavouritedByUsers({id}).then((response) => { const favoritedByUsers = response.map(item => ({ src: item.avatar_static, name: item.display_name @@ -162,7 +162,7 @@ const conversation = { }) }, fetchRebloggedByUsers (id) { - this.$store.state.api.backendInteractor.fetchRebloggedByUsers({id: this.status.id}).then((response) => { + this.$store.state.api.backendInteractor.fetchRebloggedByUsers({id}).then((response) => { const rebloggedByUsers = response.map(item => ({ src: item.avatar_static, name: item.display_name From 4ab2ddb03cdd3740eb18d8c7d85de80e176db29f Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 11:04:39 -0400 Subject: [PATCH 08/42] improve code quality --- src/components/avatar_list/avatar_list.vue | 4 ++-- src/components/conversation/conversation.js | 16 ++-------------- src/modules/statuses.js | 8 ++++---- 3 files changed, 8 insertions(+), 20 deletions(-) diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index 56ca12a2..a3bed515 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -1,7 +1,7 @@ diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 18635aa1..851d30e9 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -153,22 +153,10 @@ const conversation = { } }, fetchFavouritedByUsers (id) { - this.$store.state.api.backendInteractor.fetchFavouritedByUsers({id}).then((response) => { - const favoritedByUsers = response.map(item => ({ - src: item.avatar_static, - name: item.display_name - })) - this.$store.dispatch('addFavoritedByUsers', { favoritedByUsers, id }) - }) + this.$store.dispatch('fetchFavouritedByUsers', { id }) }, fetchRebloggedByUsers (id) { - this.$store.state.api.backendInteractor.fetchRebloggedByUsers({id}).then((response) => { - const rebloggedByUsers = response.map(item => ({ - src: item.avatar_static, - name: item.display_name - })) - this.$store.dispatch('addRebloggedByUsers', { rebloggedByUsers, id }) - }) + this.$store.dispatch('fetchRebloggedByUsers', { id }) } } } diff --git a/src/modules/statuses.js b/src/modules/statuses.js index c749e60f..2cfc3ff1 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -537,11 +537,11 @@ const statuses = { credentials: rootState.users.currentUser.credentials }) }, - addFavoritedByUsers ({ rootState, commit }, { favoritedByUsers, id }) { - commit('addFavoritedByUsers', { favoritedByUsers, id }) + fetchFavouritedByUsers ({ rootState, commit }, { id }) { + rootState.api.backendInteractor.fetchFavouritedByUsers({id}).then((favoritedByUsers) => commit('addFavoritedByUsers', { favoritedByUsers, id })) }, - addRebloggedByUsers ({ rootState, commit }, { rebloggedByUsers, id }) { - commit('addRebloggedByUsers', { rebloggedByUsers, id }) + fetchRebloggedByUsers ({ rootState, commit }, { id }) { + rootState.api.backendInteractor.fetchRebloggedByUsers({id}).then((rebloggedByUsers) => commit('addRebloggedByUsers', { rebloggedByUsers, id })) } }, mutations From 0c3a922341a6f04f203396fb1c932411f6df0cd5 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 12:01:48 -0400 Subject: [PATCH 09/42] use promisedRequest for api call --- src/services/api/api.service.js | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 120398f0..1f9e9a88 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -725,29 +725,11 @@ const markNotificationsAsSeen = ({id, credentials}) => { } const fetchFavouritedByUsers = ({id}) => { - return fetch(MASTODON_STATUS_FAVOURITEDBY_URL(id), { - method: 'GET' - }) - .then(response => { - if (response.ok) { - return response.json() - } else { - throw new Error('Error fetching favorited by users') - } - }) + return promisedRequest(MASTODON_STATUS_FAVOURITEDBY_URL(id)).then((users) => users.map(parseUser)) } const fetchRebloggedByUsers = ({id}) => { - return fetch(MASTODON_STATUS_REBLOGGEDBY_URL(id), { - method: 'GET' - }) - .then(response => { - if (response.ok) { - return response.json() - } else { - throw new Error('Error reblogged by users') - } - }) + return promisedRequest(MASTODON_STATUS_REBLOGGEDBY_URL(id)).then((users) => users.map(parseUser)) } const apiService = { From df68ce4d83a7dfef0130d10e122f3523f95c7073 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 12:02:01 -0400 Subject: [PATCH 10/42] set maximum avatars count to 15 --- src/components/avatar_list/avatar_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js index 7bd1c556..d65125c2 100644 --- a/src/components/avatar_list/avatar_list.js +++ b/src/components/avatar_list/avatar_list.js @@ -4,7 +4,7 @@ const AvatarList = { props: ['avatars'], computed: { slicedAvatars () { - return this.avatars ? this.avatars.slice(0, 10) : [] + return this.avatars ? this.avatars.slice(0, 15) : [] } }, components: { From 6511166631aa752faff02568802362155918e804 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 12:02:40 -0400 Subject: [PATCH 11/42] display favs & favorited user in one line --- src/components/avatar_list/avatar_list.vue | 42 ++++++++-------------- src/components/status/status.js | 10 +++--- src/components/status/status.vue | 29 +++------------ 3 files changed, 25 insertions(+), 56 deletions(-) diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index a3bed515..fd6d8336 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -1,7 +1,7 @@ @@ -14,43 +14,31 @@ display: inline-flex; /* Causes LI items to display in row. */ list-style-type: none; margin: 0; - padding: 0px 20px 0px 0px; - flex-direction: row; - flex-wrap: wrap; + padding: 0px 15px 0px 0px; + flex-direction: row-reverse; - &__item { - height: 40px; + &-item { + height: 30px; margin: 0; padding: 0; - width: 20px; + width: 15px; - &:nth-child( 1 ) { z-index: 10 ; } - &:nth-child( 2 ) { z-index: 9 ; } - &:nth-child( 3 ) { z-index: 8 ; } - &:nth-child( 4 ) { z-index: 7 ; } - &:nth-child( 5 ) { z-index: 6 ; } - &:nth-child( 6 ) { z-index: 5 ; } - &:nth-child( 7 ) { z-index: 4 ; } - &:nth-child( 8 ) { z-index: 3 ; } - &:nth-child( 9 ) { z-index: 2 ; } - &:nth-child( 10 ) { z-index: 1 ; } - - .avatars__img { + .avatars-img { border-radius: 50%; - height: 40px; - width: 40px; - line-height: 40px; + height: 30px; + width: 30px; + line-height: 30px; background-color: $main-background; } } } .transparent-avatar { - .avatars__item { - &:last-child { + .avatars-item { + &:first-child { position: relative; - .avatars__img { + .avatars-img { &::after { content: ''; position: absolute; diff --git a/src/components/status/status.js b/src/components/status/status.js index eda96373..b275d4fa 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -259,11 +259,11 @@ const Status = { } return this.status.summary_html + '
' + this.status.statusnet_html }, - favouritedByUsers () { - return this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [] - }, - rebloggedByUsers () { - return this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : [] + combinedFavsAndRepeatsAvatars () { + return [].concat( + this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [], + this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : [] + ) } }, components: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f67f849c..ce4b2554 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -133,6 +133,10 @@
+
+ +
+
@@ -142,16 +146,6 @@
-
-
-

Boosted By {{rebloggedByUsers.length}}:

- -
-
-

Favourited By {{favouritedByUsers.length}}:

- -
-
@@ -622,21 +616,8 @@ a.unmute { } } -.boosted-users { - display: flex; - justify-content: space-between; +.favs-favourited-users { margin-top: 10px; - - .favourited-users, - .reblogged-users { - flex-basis: 50%; - flex-grow: 1; - flex-shrink: 1; - - .title { - margin: 0 0 10px 0; - } - } } @media all and (max-width: 800px) { From 8c9bcdc6c16f3a6dad5131b8163ee9d933b6b952 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 12:13:55 -0400 Subject: [PATCH 12/42] rename favourite to favorite --- src/components/conversation/conversation.js | 6 +++--- src/components/status/status.vue | 4 ++-- src/modules/statuses.js | 4 ++-- src/services/api/api.service.js | 8 ++++---- .../backend_interactor_service.js | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 851d30e9..ba90746e 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -121,7 +121,7 @@ const conversation = { this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id}) .then(({ancestors, descendants}) => { const ancestorId = ancestors.length ? ancestors[0].id : this.status.id - this.fetchFavouritedByUsers(ancestorId) + this.fetchFavoritedByUsers(ancestorId) this.fetchRebloggedByUsers(ancestorId) this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) @@ -152,8 +152,8 @@ const conversation = { this.setHighlight(null) } }, - fetchFavouritedByUsers (id) { - this.$store.dispatch('fetchFavouritedByUsers', { id }) + fetchFavoritedByUsers (id) { + this.$store.dispatch('fetchFavoritedByUsers', { id }) }, fetchRebloggedByUsers (id) { this.$store.dispatch('fetchRebloggedByUsers', { id }) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ce4b2554..a8042afe 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -133,7 +133,7 @@
-
+
@@ -616,7 +616,7 @@ a.unmute { } } -.favs-favourited-users { +.favs-favorited-users { margin-top: 10px; } diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 2cfc3ff1..44213e75 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -537,8 +537,8 @@ const statuses = { credentials: rootState.users.currentUser.credentials }) }, - fetchFavouritedByUsers ({ rootState, commit }, { id }) { - rootState.api.backendInteractor.fetchFavouritedByUsers({id}).then((favoritedByUsers) => commit('addFavoritedByUsers', { favoritedByUsers, id })) + fetchFavoritedByUsers ({ rootState, commit }, { id }) { + rootState.api.backendInteractor.fetchFavoritedByUsers({id}).then((favoritedByUsers) => commit('addFavoritedByUsers', { favoritedByUsers, id })) }, fetchRebloggedByUsers ({ rootState, commit }, { id }) { rootState.api.backendInteractor.fetchRebloggedByUsers({id}).then((rebloggedByUsers) => commit('addRebloggedByUsers', { rebloggedByUsers, id })) diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 1f9e9a88..90309edf 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -49,7 +49,7 @@ const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute` const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute` const MASTODON_POST_STATUS_URL = '/api/v1/statuses' const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media' -const MASTODON_STATUS_FAVOURITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by` +const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by` const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by` import { each, map } from 'lodash' @@ -724,8 +724,8 @@ const markNotificationsAsSeen = ({id, credentials}) => { }).then((data) => data.json()) } -const fetchFavouritedByUsers = ({id}) => { - return promisedRequest(MASTODON_STATUS_FAVOURITEDBY_URL(id)).then((users) => users.map(parseUser)) +const fetchFavoritedByUsers = ({id}) => { + return promisedRequest(MASTODON_STATUS_FAVORITEDBY_URL(id)).then((users) => users.map(parseUser)) } const fetchRebloggedByUsers = ({id}) => { @@ -781,7 +781,7 @@ const apiService = { denyUser, suggestions, markNotificationsAsSeen, - fetchFavouritedByUsers, + fetchFavoritedByUsers, fetchRebloggedByUsers } diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 01663a64..0768c806 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -112,7 +112,7 @@ const backendInteractorService = (credentials) => { const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password}) const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation}) - const fetchFavouritedByUsers = ({id}) => apiService.fetchFavouritedByUsers({id}) + const fetchFavoritedByUsers = ({id}) => apiService.fetchFavoritedByUsers({id}) const fetchRebloggedByUsers = ({id}) => apiService.fetchRebloggedByUsers({id}) const backendInteractorServiceInstance = { @@ -156,7 +156,7 @@ const backendInteractorService = (credentials) => { fetchFollowRequests, approveUser, denyUser, - fetchFavouritedByUsers, + fetchFavoritedByUsers, fetchRebloggedByUsers } From 8a2f55644c56cdedf27c5bdb8bd54c642fadbe4d Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 16:00:09 -0400 Subject: [PATCH 13/42] improve code quality --- src/components/avatar_list/avatar_list.vue | 35 +++++---------------- src/components/conversation/conversation.js | 10 ++---- 2 files changed, 9 insertions(+), 36 deletions(-) diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index fd6d8336..5df62ce5 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -1,6 +1,6 @@