From 85457fc9173d64d39b1d942496cae1366a0d95ab Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 1 Apr 2019 22:30:06 -0400 Subject: fetch reblogged users --- src/components/status/status.vue | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'src/components/status/status.vue') 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 { -- cgit v1.2.3-70-g09d2 From 44d07ceb25ab8902a4d67b156474e737d6541362 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 04:25:08 -0400 Subject: 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(-) (limited to 'src/components/status/status.vue') 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; -- cgit v1.2.3-70-g09d2 From 6511166631aa752faff02568802362155918e804 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 12:02:40 -0400 Subject: 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(-) (limited to 'src/components/status/status.vue') 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) { -- cgit v1.2.3-70-g09d2 From 8c9bcdc6c16f3a6dad5131b8163ee9d933b6b952 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 2 Apr 2019 12:13:55 -0400 Subject: 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/backend_interactor_service.js | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) (limited to 'src/components/status/status.vue') 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 } -- cgit v1.2.3-70-g09d2 From 45b69dc312b991fba9ecb7649e7c5f9db24374a7 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 03:08:40 -0400 Subject: add avatar list section title --- src/components/status/status.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a8042afe..ceb8bdf7 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -133,7 +133,10 @@
-
+
+
+ Favorites {{statusoid.favoritedBy.length}} Repeats {{statusoid.rebloggedBy.length}} +
@@ -616,8 +619,15 @@ a.unmute { } } -.favs-favorited-users { +.favs-repeated-users { margin-top: 10px; + + .favs-repeated-title { + margin-bottom: 5px; + & > span { + border-bottom: 1px solid var(--text); + } + } } @media all and (max-width: 800px) { -- cgit v1.2.3-70-g09d2 From a8de51515581c61a4de7fd7911d89ba06e990dbe Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 03:11:32 -0400 Subject: use i18n for title text --- src/components/status/status.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ceb8bdf7..cef86df6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -135,7 +135,7 @@
- Favorites {{statusoid.favoritedBy.length}} Repeats {{statusoid.rebloggedBy.length}} + {{ $t('user_card.favorites') }} {{statusoid.favoritedBy.length}} {{ $t('settings.notification_visibility_repeats') }} {{statusoid.rebloggedBy.length}}
@@ -623,7 +623,7 @@ a.unmute { margin-top: 10px; .favs-repeated-title { - margin-bottom: 5px; + margin-bottom: 8px; & > span { border-bottom: 1px solid var(--text); } -- cgit v1.2.3-70-g09d2 From 5be03eb16104fe5adca9718a034daaf145415f28 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 03:29:31 -0400 Subject: handle 0 length of avatars --- src/components/status/status.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index cef86df6..01ace0cf 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -135,7 +135,7 @@
- {{ $t('user_card.favorites') }} {{statusoid.favoritedBy.length}} {{ $t('settings.notification_visibility_repeats') }} {{statusoid.rebloggedBy.length}} + {{ statusoid.favoritedBy.length ? `${$t('user_card.favorites')} ${statusoid.favoritedBy.length}` : '' }} {{ statusoid.rebloggedBy.length ? `${$t('settings.notification_visibility_repeats')} ${statusoid.rebloggedBy.length}` : '' }}
-- cgit v1.2.3-70-g09d2 From db2733b2654d3d7dc1c82d6d61eb34d559df5815 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 03:35:22 -0400 Subject: set fall back value of border color --- src/components/status/status.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 01ace0cf..c26b9792 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -625,7 +625,7 @@ a.unmute { .favs-repeated-title { margin-bottom: 8px; & > span { - border-bottom: 1px solid var(--text); + border-bottom: 1px solid var(--text, $fallback--lightText); } } } -- cgit v1.2.3-70-g09d2 From 94730c9ff7d28fb4d040af5f68a73206a7b5abd1 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 13:35:05 -0400 Subject: update design of stats section --- src/components/status/status.vue | 56 ++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 8 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index c26b9792..8d95343d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -134,10 +134,17 @@
-
- {{ statusoid.favoritedBy.length ? `${$t('user_card.favorites')} ${statusoid.favoritedBy.length}` : '' }} {{ statusoid.rebloggedBy.length ? `${$t('settings.notification_visibility_repeats')} ${statusoid.rebloggedBy.length}` : '' }} -
- +
@@ -622,10 +629,43 @@ a.unmute { .favs-repeated-users { margin-top: 10px; - .favs-repeated-title { - margin-bottom: 8px; - & > span { - border-bottom: 1px solid var(--text, $fallback--lightText); + .stats { + border-bottom: 1px solid var(--faint, $fallback--faint); + border-top: 1px solid var(--faint, $fallback--faint); + width: 100%; + margin: 0; + list-style: none; + overflow: hidden; + padding: 0; + display: flex; + + .stat-count { + margin-right: 10px; + + a { + cursor: pointer; + padding-top: 14px; + float: left; + color: var(--faint, $fallback--faint); + + strong { + color: var(--text, $fallback--text); + } + + &:hover, + &:focus { + border-bottom: 1px solid var(--faint, $fallback--faint); + } + } + } + + .avatar-row { + flex: 1; + overflow: hidden; + } + + li { + display: block; } } } -- cgit v1.2.3-70-g09d2 From 80ba4f27c8109be6871a8c2b539cbb392eb8513f Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 14:20:50 -0400 Subject: add hover effect to label --- src/components/avatar_list/avatar_list.vue | 2 - src/components/status/status.vue | 61 +++++++++++++++++++++++++----- 2 files changed, 51 insertions(+), 12 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index d7ac22dd..dcffb7cd 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -20,10 +20,8 @@ height: 24px; width: 24px; margin: 0 5px 0 0; - padding: 11px 0; &:first-child { - border-left: 1px solid var(--faint, $fallback--faint); padding-left: 12px !important; } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8d95343d..9be6b2b9 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -135,11 +135,13 @@
    -
  • - {{statusoid.favoritedBy.length}} {{ $t('user_card.favorites') }} -
  • - {{statusoid.rebloggedBy.length}} {{ $t('settings.notification_visibility_repeats') }} +
    {{ $t('settings.notification_visibility_repeats') }}
    +
    {{ statusoid.rebloggedBy.length }}
    +
    • +
  • +
    {{ $t('user_card.favorites') }}
    +
    {{ statusoid.favoritedBy.length }}
  • @@ -627,25 +629,52 @@ a.unmute { } .favs-repeated-users { - margin-top: 10px; + margin-top: 0.75em; .stats { - border-bottom: 1px solid var(--faint, $fallback--faint); - border-top: 1px solid var(--faint, $fallback--faint); width: 100%; margin: 0; list-style: none; overflow: hidden; padding: 0; display: flex; + line-height: 1em; .stat-count { margin-right: 10px; + .stat-title { + color: var(--faint, rgba(185, 185, 186, 0.5)); + font-weight: lighter; + font-size: 12px; + text-transform: uppercase; + position: relative; + margin-bottom: 3px; + cursor: pointer; + line-height: 1em; + + &:hover, + &:focus { + &::after { + content: ''; + position: absolute; + left: 0; + top: 100%; + width: 100%; + height: 1px; + background-color: var(--faint, $fallback--faint); + } + } + } + + .stat-number { + font-weight: bolder; + font-size: 16px; + line-height: 1em; + } + a { cursor: pointer; - padding-top: 14px; - float: left; color: var(--faint, $fallback--faint); strong { @@ -662,10 +691,22 @@ a.unmute { .avatar-row { flex: 1; overflow: hidden; + position: relative; + + &::before { + content: ''; + position: absolute; + height: 100%; + width: 1px; + left: 0; + background-color: var(--faint, $fallback--faint); + } } li { - display: block; + display: flex; + flex-direction: column; + justify-content: center; } } } -- cgit v1.2.3-70-g09d2 From c361b41641d9860ac42263ae8b81b512439fa471 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Fri, 5 Apr 2019 14:55:19 -0400 Subject: use global fallback variable --- src/components/status/status.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 9be6b2b9..ea929b6b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -644,7 +644,7 @@ a.unmute { margin-right: 10px; .stat-title { - color: var(--faint, rgba(185, 185, 186, 0.5)); + color: var(--faint, $fallback--faint); font-weight: lighter; font-size: 12px; text-transform: uppercase; -- cgit v1.2.3-70-g09d2 From 2d826abb41833d927ef9dcb39082e52d7892c548 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Sat, 6 Apr 2019 14:38:08 -0400 Subject: use normal font weight instead of lighter --- src/components/status/status.vue | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ea929b6b..a56fc31f 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -645,7 +645,6 @@ a.unmute { .stat-title { color: var(--faint, $fallback--faint); - font-weight: lighter; font-size: 12px; text-transform: uppercase; position: relative; -- cgit v1.2.3-70-g09d2 From e734370e335b76adff783378cd3ae0e977855938 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Sat, 6 Apr 2019 14:49:37 -0400 Subject: use a tag for favs/repeated title --- src/components/status/status.vue | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a56fc31f..352f0d78 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -136,11 +136,11 @@
    • -
      {{ $t('settings.notification_visibility_repeats') }}
      + {{ $t('settings.notification_visibility_repeats') }}
      {{ statusoid.rebloggedBy.length }}
    • -
      {{ $t('user_card.favorites') }}
      + {{ $t('user_card.favorites') }}
      {{ statusoid.favoritedBy.length }}
    • @@ -654,15 +654,7 @@ a.unmute { &:hover, &:focus { - &::after { - content: ''; - position: absolute; - left: 0; - top: 100%; - width: 100%; - height: 1px; - background-color: var(--faint, $fallback--faint); - } + text-decoration: underline; } } @@ -672,19 +664,14 @@ a.unmute { line-height: 1em; } - a { + /* a { cursor: pointer; color: var(--faint, $fallback--faint); strong { color: var(--text, $fallback--text); } - - &:hover, - &:focus { - border-bottom: 1px solid var(--faint, $fallback--faint); - } - } + } */ } .avatar-row { -- cgit v1.2.3-70-g09d2 From 1f4fcf56cdda58b20804b131adcdca9c7290ed12 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Sat, 6 Apr 2019 14:52:17 -0400 Subject: remove custom fadein logic --- src/components/status/status.vue | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 352f0d78..67ba714f 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -133,7 +133,7 @@
    -
    +
    • {{ $t('settings.notification_visibility_repeats') }} @@ -530,20 +530,6 @@ $status-margin: 0.75em; } } -.status-fadein { - animation-duration: 0.4s; - animation-name: fadein; -} - -@keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - .greentext { color: green; } -- cgit v1.2.3-70-g09d2 From b75d899c7a54ff38d1331f043c156bd90baf0f59 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Sat, 6 Apr 2019 14:54:23 -0400 Subject: use transition wrapper component --- src/components/status/status.vue | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 67ba714f..ff93b24d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -133,21 +133,23 @@
    -
    - -
    + +
    + +
    +
    -- cgit v1.2.3-70-g09d2 From 246fab328faf427d26f0a328033e07a286b429a3 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 8 Apr 2019 13:58:29 -0400 Subject: remove commented code --- src/components/status/status.vue | 9 --------- 1 file changed, 9 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ff93b24d..653e07b7 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -651,15 +651,6 @@ a.unmute { font-size: 16px; line-height: 1em; } - - /* a { - cursor: pointer; - color: var(--faint, $fallback--faint); - - strong { - color: var(--text, $fallback--text); - } - } */ } .avatar-row { -- cgit v1.2.3-70-g09d2 From 8cac0dec6ff8be9180f29bd09cdc996fb1ad3556 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 8 Apr 2019 14:06:18 -0400 Subject: add fadein effect to panel --- src/components/status/status.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 653e07b7..1c055c41 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -532,6 +532,20 @@ $status-margin: 0.75em; } } +.status-fadein { + animation-duration: 0.4s; + animation-name: fadein; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + .greentext { color: green; } -- cgit v1.2.3-70-g09d2 From efd20967df1eb633206dcab3d37905653dccd723 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Mon, 8 Apr 2019 14:21:01 -0400 Subject: display avatars only on highlighted post --- src/components/status/status.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1c055c41..34bb64d0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -134,7 +134,7 @@
    -
    +
    • {{ $t('settings.notification_visibility_repeats') }} -- cgit v1.2.3-70-g09d2 From 8ed4eb8a7ffe0e370cfc06017d2bce34b2c9d987 Mon Sep 17 00:00:00 2001 From: Brenden Bice Date: Tue, 9 Apr 2019 11:45:33 -0400 Subject: refactor showing favs and repeats logic --- src/components/conversation/conversation.js | 6 ++-- src/components/status/status.js | 7 +++- src/components/status/status.vue | 8 ++--- src/components/timeline/timeline.vue | 3 +- src/modules/statuses.js | 39 +++++----------------- .../backend_interactor_service.js | 4 +-- 6 files changed, 23 insertions(+), 44 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 5cc7f4ee..ffeb7244 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -41,8 +41,7 @@ const conversation = { props: [ 'statusoid', 'collapsable', - 'isPage', - 'timelineName' + 'isPage' ], created () { if (this.isPage) { @@ -121,8 +120,6 @@ const conversation = { if (this.status) { this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id}) .then(({ancestors, descendants}) => { - this.$store.dispatch('fetchFavoritedByUsers', { id: this.statusId, retweetedStatusId: this.status.id, timelineName: this.timelineName }) - this.$store.dispatch('fetchRebloggedByUsers', { id: this.statusId, retweetedStatusId: this.status.id, timelineName: this.timelineName }) this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) }) @@ -142,6 +139,7 @@ const conversation = { }, setHighlight (id) { this.highlight = id + this.$store.dispatch('fetchFavsAndRepeats', id) }, getHighlight () { return this.isExpanded ? this.highlight : null diff --git a/src/components/status/status.js b/src/components/status/status.js index 44caf3af..db234ec1 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -98,6 +98,10 @@ const Status = { return this.statusoid } }, + statusFromGlobalRepository () { + // NOTE: Consider to replace status with statusFromGlobalRepository + return this.$store.state.statuses.allStatusesObject[this.status.id] + }, loggedIn () { return !!this.$store.state.users.currentUser }, @@ -260,7 +264,8 @@ const Status = { return this.status.summary_html + '
      ' + this.status.statusnet_html }, combinedFavsAndRepeatsAvatars () { - const combinedAvatars = [].concat(this.statusoid.favoritedBy, this.statusoid.rebloggedBy).filter(_ => _) + // Use the status from the global status repository since favs and repeats are saved in it + const combinedAvatars = [].concat(this.statusFromGlobalRepository.favoritedBy, this.statusFromGlobalRepository.rebloggedBy).filter(_ => _) return uniqBy(combinedAvatars, 'id') } }, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 34bb64d0..b0882964 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -136,13 +136,13 @@
        -
      • +
      • {{ $t('settings.notification_visibility_repeats') }} -
        {{ statusoid.rebloggedBy.length }}
        +
        {{ statusFromGlobalRepository.rebloggedBy.length }}
        • -
      • +
      • {{ $t('user_card.favorites') }} -
        {{ statusoid.favoritedBy.length }}
        +
        {{ statusFromGlobalRepository.favoritedBy.length }}
      • diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 147e8a1d..e6a8d458 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -16,13 +16,12 @@
      -
      diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 023f132e..527cafc2 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -460,32 +460,11 @@ export const mutations = { queueFlush (state, { timeline, id }) { state.timelines[timeline].flushMarker = id }, - addFavoritedByUsers (state, { favoritedByUsers, id, timelineName }) { - if (timelineName) { - state.timelines[timelineName].visibleStatusesObject[id] = { - ...state.timelines[timelineName].visibleStatusesObject[id], - favoritedBy: favoritedByUsers - } - state.timelines[timelineName].visibleStatuses = state.timelines[timelineName].visibleStatuses.map(visibleStatus => visibleStatus.id === id ? { ...visibleStatus, favoritedBy: favoritedByUsers } : visibleStatus) - } else { - state.allStatusesObject[id] = { - ...state.allStatusesObject[id], - favoritedBy: favoritedByUsers - } - } - }, - addRebloggedByUsers (state, { rebloggedByUsers, id, timelineName }) { - if (timelineName) { - state.timelines[timelineName].visibleStatusesObject[id] = { - ...state.timelines[timelineName].visibleStatusesObject[id], - rebloggedBy: rebloggedByUsers - } - state.timelines[timelineName].visibleStatuses = state.timelines[timelineName].visibleStatuses.map(visibleStatus => visibleStatus.id === id ? { ...visibleStatus, rebloggedBy: rebloggedByUsers } : visibleStatus) - } else { - state.allStatusesObject[id] = { - ...state.allStatusesObject[id], - rebloggedBy: rebloggedByUsers - } + addFavsAndRepeats (state, { id, favoritedByUsers, rebloggedByUsers }) { + state.allStatusesObject[id] = { + ...state.allStatusesObject[id], + favoritedBy: favoritedByUsers, + rebloggedBy: rebloggedByUsers } } } @@ -553,11 +532,9 @@ const statuses = { credentials: rootState.users.currentUser.credentials }) }, - fetchFavoritedByUsers ({ rootState, commit }, { id, retweetedStatusId, timelineName }) { - rootState.api.backendInteractor.fetchFavoritedByUsers({id}).then((favoritedByUsers) => commit('addFavoritedByUsers', { favoritedByUsers, id: retweetedStatusId, timelineName })) - }, - fetchRebloggedByUsers ({ rootState, commit }, { id, retweetedStatusId, timelineName }) { - rootState.api.backendInteractor.fetchRebloggedByUsers({id}).then((rebloggedByUsers) => commit('addRebloggedByUsers', { rebloggedByUsers, id: retweetedStatusId, timelineName })) + fetchFavsAndRepeats ({ rootState, commit }, id) { + Promise.all([rootState.api.backendInteractor.fetchFavoritedByUsers(id), rootState.api.backendInteractor.fetchRebloggedByUsers(id)]) + .then(([favoritedByUsers, rebloggedByUsers]) => commit('addFavsAndRepeats', { id, favoritedByUsers, rebloggedByUsers })) } }, mutations diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 0768c806..c6742d26 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -112,8 +112,8 @@ const backendInteractorService = (credentials) => { const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password}) const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation}) - const fetchFavoritedByUsers = ({id}) => apiService.fetchFavoritedByUsers({id}) - const fetchRebloggedByUsers = ({id}) => apiService.fetchRebloggedByUsers({id}) + const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({id}) + const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({id}) const backendInteractorServiceInstance = { fetchStatus, -- cgit v1.2.3-70-g09d2 From 75a650aa6de13eaf1e0e17d5ec7bfffeee0db212 Mon Sep 17 00:00:00 2001 From: shpuld Date: Wed, 17 Apr 2019 18:28:44 +0300 Subject: update styles and remove unnecessary stuff --- src/components/avatar_list/avatar_list.vue | 49 ++++++++---------------------- src/components/status/status.vue | 30 ++++++------------ 2 files changed, 22 insertions(+), 57 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index 077d002d..fc5abf01 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -1,7 +1,7 @@ @@ -10,53 +10,28 @@ diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js new file mode 100644 index 00000000..40bab2ab --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.js @@ -0,0 +1,51 @@ +import Popper from 'vue-popperjs/src/component/popper.js.vue' + +const ExtraButtons = { + props: [ 'status' ], + components: { + Popper + }, + data () { + return { + showDropDown: false + } + }, + methods: { + deleteStatus () { + const confirmed = window.confirm(this.$t('status.delete_confirm')) + if (confirmed) { + this.$store.dispatch('deleteStatus', { id: this.status.id }) + } + }, + toggleMenu () { + this.showDropDown = !this.showDropDown + }, + pinStatus () { + this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => { + if (status.error) { + this.$emit('onError', status.error) + } else { + this.$store.dispatch('updatePinned', status) + } + }) + }, + unpinStatus () { + this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => { + this.$store.dispatch('updatePinned', status) + }) + } + }, + computed: { + currentUser () { return this.$store.state.users.currentUser }, + canDelete () { + if (!this.currentUser) { return } + const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin + return superuser || this.status.user.id === this.currentUser.id + }, + ownStatus () { + return this.status.user.id === this.currentUser.id + } + } +} + +export default ExtraButtons diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue new file mode 100644 index 00000000..13f8587b --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index c24a2280..c9e3fc78 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -127,6 +127,14 @@ width: 100%; height: 100%; + &-icon { + padding-left: 0.5rem; + + i { + margin-right: 0.25rem; + } + } + &:hover { // TODO: improve the look on breeze themes background-color: $fallback--fg; diff --git a/src/components/status/status.js b/src/components/status/status.js index 85159fc4..fa4b426c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,7 +1,7 @@ import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' -import DeleteButton from '../delete_button/delete_button.vue' +import ExtraButtons from '../extra_buttons/extra_buttons.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' @@ -280,7 +280,7 @@ const Status = { Attachment, FavoriteButton, RetweetButton, - DeleteButton, + ExtraButtons, PostStatusForm, UserCard, UserAvatar, @@ -301,6 +301,12 @@ const Status = { return 'icon-globe' } }, + showError (error) { + this.error = error + setTimeout(() => { + this.error = null + }, 5000) + }, linkClicked (event) { let { target } = event if (target.tagName === 'SPAN') { @@ -358,23 +364,6 @@ const Status = { this.expandingSubject = true } }, - pinStatus () { - this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => { - if (status.error) { - this.error = status.error - setTimeout(() => { - this.error = null - }, 5000) - } else { - this.$store.dispatch('updatePinned', status) - } - }) - }, - unpinStatus () { - this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => { - this.$store.dispatch('updatePinned', status) - }) - }, replyEnter (id, event) { this.showPreview = true const targetId = id diff --git a/src/components/status/status.vue b/src/components/status/status.vue index bc7ff43c..1644f6b0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -16,9 +16,6 @@
      Pinned -
      - -
      @@ -60,9 +57,6 @@ -
      - -
      @@ -175,7 +169,7 @@
      - +
    diff --git a/src/i18n/en.json b/src/i18n/en.json index b4f0deb2..8429367c 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -402,6 +402,10 @@ "status": { "favorites": "Favorites", "repeats": "Repeats", + "delete": "Delete status", + "pin": "Pin on profile", + "unpin": "Unpin form profile", + "delete_confirm": "Do you really want to delete this status?", "reply_to": "Reply to", "replies_list": "Replies:" }, -- cgit v1.2.3-70-g09d2 From 32be0e15d11c14513ff4fdc984aeaa4a5f462eac Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 26 Apr 2019 15:46:40 -0400 Subject: use pinned property from status directly --- src/components/conversation/conversation.js | 3 +-- src/components/conversation/conversation.vue | 1 - src/components/status/status.js | 3 +-- src/components/status/status.vue | 2 +- src/components/user_profile/user_profile.vue | 1 - 5 files changed, 3 insertions(+), 7 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index fc239ee9..ffeb7244 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -41,8 +41,7 @@ const conversation = { props: [ 'statusoid', 'collapsable', - 'isPage', - 'pinned' + 'isPage' ], created () { if (this.isPage) { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 40011113..d04ff722 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -13,7 +13,6 @@ :key="status.id" :inlineExpanded="collapsable && isExpanded" :statusoid="status" - :pinned="pinned" :expandable='!isExpanded' :focused="focused(status.id)" :inConversation="isExpanded" diff --git a/src/components/status/status.js b/src/components/status/status.js index fa4b426c..09a2a010 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -26,8 +26,7 @@ const Status = { 'replies', 'isPreview', 'noHeading', - 'inlineExpanded', - 'pinned' + 'inlineExpanded' ], data () { return { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1644f6b0..41662576 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -13,7 +13,7 @@