aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/conversation/conversation.js3
-rw-r--r--src/components/conversation/conversation.vue1
-rw-r--r--src/components/delete_button/delete_button.js21
-rw-r--r--src/components/delete_button/delete_button.vue21
-rw-r--r--src/components/extra_buttons/extra_buttons.js61
-rw-r--r--src/components/extra_buttons/extra_buttons.vue47
-rw-r--r--src/components/moderation_tools/moderation_tools.vue8
-rw-r--r--src/components/status/status.js17
-rw-r--r--src/components/status/status.vue19
-rw-r--r--src/components/user_profile/user_profile.js6
-rw-r--r--src/components/user_profile/user_profile.vue32
-rw-r--r--src/i18n/en.json5
-rw-r--r--src/modules/statuses.js16
-rw-r--r--src/modules/users.js17
-rw-r--r--src/services/api/api.service.js21
-rw-r--r--src/services/backend_interactor_service/backend_interactor_service.js6
-rw-r--r--src/services/entity_normalizer/entity_normalizer.service.js4
17 files changed, 244 insertions, 61 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index ffeb7244..b3074590 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -41,7 +41,8 @@ const conversation = {
props: [
'statusoid',
'collapsable',
- 'isPage'
+ 'isPage',
+ 'showPinned'
],
created () {
if (this.isPage) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index d04ff722..0b4998c3 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -14,6 +14,7 @@
:inlineExpanded="collapsable && isExpanded"
:statusoid="status"
:expandable='!isExpanded'
+ :showPinned="showPinned"
:focused="focused(status.id)"
:inConversation="isExpanded"
:highlight="getHighlight()"
diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
deleted file mode 100644
index 22f24625..00000000
--- a/src/components/delete_button/delete_button.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const DeleteButton = {
- props: [ 'status' ],
- methods: {
- deleteStatus () {
- const confirmed = window.confirm('Do you really want to delete this status?')
- if (confirmed) {
- this.$store.dispatch('deleteStatus', { id: this.status.id })
- }
- }
- },
- 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
- }
- }
-}
-
-export default DeleteButton
diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
deleted file mode 100644
index f4c91cfd..00000000
--- a/src/components/delete_button/delete_button.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
- <div v-if="canDelete">
- <a href="#" v-on:click.prevent="deleteStatus()">
- <i class='button-icon icon-cancel delete-status'></i>
- </a>
- </div>
-</template>
-
-<script src="./delete_button.js" ></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.icon-cancel,.delete-status {
- cursor: pointer;
- &:hover {
- color: $fallback--cRed;
- color: var(--cRed, $fallback--cRed);
- }
-}
-</style>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
new file mode 100644
index 00000000..f70ecd1d
--- /dev/null
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -0,0 +1,61 @@
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
+
+const ExtraButtons = {
+ props: [ 'status' ],
+ components: {
+ Popper
+ },
+ data () {
+ return {
+ showDropDown: false,
+ showPopper: true
+ }
+ },
+ methods: {
+ deleteStatus () {
+ this.refreshPopper()
+ 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.refreshPopper()
+ this.$store.dispatch('pinStatus', this.status.id)
+ .then(() => this.$emit('onSuccess'))
+ .catch(err => this.$emit('onError', err.error.error))
+ },
+ unpinStatus () {
+ this.refreshPopper()
+ this.$store.dispatch('unpinStatus', this.status.id)
+ .then(() => this.$emit('onSuccess'))
+ .catch(err => this.$emit('onError', err.error.error))
+ },
+ refreshPopper () {
+ this.showPopper = false
+ this.showDropDown = false
+ setTimeout(() => {
+ this.showPopper = true
+ })
+ }
+ },
+ 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
+ },
+ canPin () {
+ return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
+ }
+ }
+}
+
+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..38e933bb
--- /dev/null
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -0,0 +1,47 @@
+<template>
+ <Popper
+ trigger="click"
+ @hide='showDropDown = false'
+ append-to-body
+ v-if="showPopper"
+ :options="{
+ placement: 'top',
+ modifiers: {
+ arrow: { enabled: true },
+ offset: { offset: '0, 5px' },
+ }
+ }"
+ >
+ <div class="popper-wrapper">
+ <div class="dropdown-menu">
+ <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && canPin">
+ <i class="icon-pin"></i><span>{{$t("status.pin")}}</span>
+ </button>
+ <button class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" v-if="status.pinned && canPin">
+ <i class="icon-pin"></i><span>{{$t("status.unpin")}}</span>
+ </button>
+ <button class="dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" v-if="canDelete">
+ <i class="icon-cancel"></i><span>{{$t("status.delete")}}</span>
+ </button>
+ </div>
+ </div>
+ <div class="button-icon" slot="reference" @click="toggleMenu">
+ <i class='icon-ellipsis' :class="{'icon-clicked': showDropDown}"></i>
+ </div>
+ </Popper>
+</template>
+
+<script src="./extra_buttons.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.icon-ellipsis {
+ cursor: pointer;
+
+ &:hover, &.icon-clicked {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
+}
+</style>
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 c01cfe79..5b3d98c3 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'
@@ -26,7 +26,8 @@ const Status = {
'replies',
'isPreview',
'noHeading',
- 'inlineExpanded'
+ 'inlineExpanded',
+ 'showPinned'
],
data () {
return {
@@ -37,6 +38,7 @@ const Status = {
showPreview: false,
showingTall: this.inConversation && this.focused,
showingLongSubject: false,
+ error: null,
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? !this.$store.state.instance.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject,
@@ -269,13 +271,16 @@ const Status = {
this.statusFromGlobalRepository.rebloggedBy
)
return uniqBy(combinedUsers, 'id')
+ },
+ ownStatus () {
+ return this.status.user.id === this.$store.state.users.currentUser.id
}
},
components: {
Attachment,
FavoriteButton,
RetweetButton,
- DeleteButton,
+ ExtraButtons,
PostStatusForm,
UserCard,
UserAvatar,
@@ -296,6 +301,12 @@ const Status = {
return 'icon-globe'
}
},
+ showError (error) {
+ this.error = error
+ },
+ clearError () {
+ this.error = undefined
+ },
linkClicked (event) {
let { target } = event
if (target.tagName === 'SPAN') {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 21077972..997c1b31 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,9 @@
<template>
<div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+ <div v-if="error" class="alert error">
+ {{error}}
+ <i class="button-icon icon-cancel" @click="clearError"></i>
+ </div>
<template v-if="muted && !isPreview">
<div class="media status container muted">
<small>
@@ -12,6 +16,10 @@
</div>
</template>
<template v-else>
+ <div v-if="showPinned && statusoid.pinned" class="status-pin">
+ <i class="fa icon-pin faint"></i>
+ <span class="faint">{{$t('status.pinned')}}</span>
+ </div>
<div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
<UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :user="statusoid.user"/>
<div class="media-body faint">
@@ -95,7 +103,7 @@
v-if="preview"
:isPreview="true"
:statusoid="preview"
- :compact=true
+ :compact="true"
/>
<div v-else class="status-preview status-preview-loading">
<i class="icon-spin4 animate-spin"></i>
@@ -164,7 +172,7 @@
</div>
<retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
- <delete-button :status='status'></delete-button>
+ <extra-buttons :status="status" @onError="showError" @onSuccess="clearError"></extra-buttons>
</div>
</div>
</div>
@@ -199,6 +207,13 @@ $status-margin: 0.75em;
max-width: 100%;
}
+.status-pin {
+ padding: $status-margin $status-margin 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
.status-preview {
position: absolute;
max-width: 95%;
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 4eddb8b1..eab330e7 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -2,6 +2,7 @@ import get from 'lodash/get'
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'
@@ -95,6 +96,8 @@ const UserProfile = {
if (this.isUs) {
this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId })
}
+ // Fetch all pinned statuses immediately
+ this.$store.dispatch('fetchPinnedStatuses', userId)
},
cleanUp () {
this.$store.dispatch('stopFetching', 'user')
@@ -128,7 +131,8 @@ const UserProfile = {
FollowerList,
FriendList,
ModerationTools,
- FollowCard
+ FollowCard,
+ Conversation
}
}
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 71c625b7..48b774ea 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -3,16 +3,28 @@
<div v-if="user" class="user-profile panel panel-default">
<UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
- <Timeline
- :label="$t('user_card.statuses')"
- :disabled="!user.statuses_count"
- :count="user.statuses_count"
- :embedded="true"
- :title="$t('user_profile.timeline_title')"
- :timeline="timeline"
- :timeline-name="'user'"
- :user-id="userId"
- />
+ <div :label="$t('user_card.statuses')" :disabled="!user.statuses_count">
+ <div class="timeline">
+ <template v-for="statusId in user.pinnedStatuseIds">
+ <Conversation
+ v-if="timeline.statusesObject[statusId]"
+ class="status-fadein"
+ :key="statusId"
+ :statusoid="timeline.statusesObject[statusId]"
+ :collapsable="true"
+ :showPinned="true"
+ />
+ </template>
+ </div>
+ <Timeline
+ :count="user.statuses_count"
+ :embedded="true"
+ :title="$t('user_profile.timeline_title')"
+ :timeline="timeline"
+ :timeline-name="'user'"
+ :user-id="userId"
+ />
+ </div>
<div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
<FriendList :userId="userId">
<template slot="item" slot-scope="{item}">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b4f0deb2..dac0e38d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -402,6 +402,11 @@
"status": {
"favorites": "Favorites",
"repeats": "Repeats",
+ "delete": "Delete status",
+ "pin": "Pin on profile",
+ "unpin": "Unpin from profile",
+ "pinned": "Pinned",
+ "delete_confirm": "Do you really want to delete this status?",
"reply_to": "Reply to",
"replies_list": "Replies:"
},
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 4c92d4e1..e6ee5447 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -424,6 +424,10 @@ export const mutations = {
newStatus.favoritedBy.push(user)
}
},
+ setPinned (state, status) {
+ const newStatus = state.allStatusesObject[status.id]
+ newStatus.pinned = status.pinned
+ },
setRetweeted (state, { status, value }) {
const newStatus = state.allStatusesObject[status.id]
@@ -533,6 +537,18 @@ const statuses = {
rootState.api.backendInteractor.unfavorite(status.id)
.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
},
+ fetchPinnedStatuses ({ rootState, dispatch }, userId) {
+ rootState.api.backendInteractor.fetchPinnedStatuses(userId)
+ .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true }))
+ },
+ pinStatus ({ rootState, commit }, statusId) {
+ return rootState.api.backendInteractor.pinOwnStatus(statusId)
+ .then((status) => commit('setPinned', status))
+ },
+ unpinStatus ({ rootState, commit }, statusId) {
+ rootState.api.backendInteractor.unpinOwnStatus(statusId)
+ .then((status) => commit('setPinned', status))
+ },
retweet ({ rootState, commit }, status) {
// Optimistic retweeting...
commit('setRetweeted', { status, value: true })
diff --git a/src/modules/users.js b/src/modules/users.js
index adcab233..e72a657c 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -165,6 +165,15 @@ export const mutations = {
state.currentUser.muteIds.push(muteId)
}
},
+ setPinned (state, status) {
+ const user = state.usersObject[status.user.id]
+ const index = user.pinnedStatuseIds.indexOf(status.id)
+ if (status.pinned && index === -1) {
+ user.pinnedStatuseIds.push(status.id)
+ } else if (!status.pinned && index !== -1) {
+ user.pinnedStatuseIds.splice(index, 1)
+ }
+ },
setUserForStatus (state, status) {
status.user = state.usersObject[status.user.id]
},
@@ -318,13 +327,17 @@ const users = {
store.commit('addNewUsers', users)
store.commit('addNewUsers', retweetedUsers)
- // Reconnect users to statuses
each(statuses, (status) => {
+ // Reconnect users to statuses
store.commit('setUserForStatus', status)
+ // Set pinned statuses to user
+ store.commit('setPinned', status)
})
- // Reconnect users to retweets
each(compact(map(statuses, 'retweeted_status')), (status) => {
+ // Reconnect users to retweets
store.commit('setUserForStatus', status)
+ // Set pinned retweets to user
+ store.commit('setPinned', status)
})
},
addNewNotifications (store, { notifications }) {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b7a602b8..5f40cfa6 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -51,6 +51,8 @@ const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited
const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by`
const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
const MASTODON_REPORT_USER_URL = '/api/v1/reports'
+const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
+const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
import { each, map, concat, last } from 'lodash'
import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
@@ -210,6 +212,16 @@ const unfollowUser = ({id, credentials}) => {
}).then((data) => data.json())
}
+const pinOwnStatus = ({ id, credentials }) => {
+ return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
+ .then((data) => parseStatus(data))
+}
+
+const unpinOwnStatus = ({ id, credentials }) => {
+ return promisedRequest({ url: MASTODON_UNPIN_OWN_STATUS(id), credentials, method: 'POST' })
+ .then((data) => parseStatus(data))
+}
+
const blockUser = ({id, credentials}) => {
return fetch(MASTODON_BLOCK_USER_URL(id), {
headers: authHeaders(credentials),
@@ -488,6 +500,12 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
.then((data) => data.map(isNotifications ? parseNotification : parseStatus))
}
+const fetchPinnedStatuses = ({ id, credentials }) => {
+ const url = MASTODON_USER_TIMELINE_URL(id) + '?pinned=true'
+ return promisedRequest({ url, credentials })
+ .then((data) => data.map(parseStatus))
+}
+
const verifyCredentials = (user) => {
return fetch(LOGIN_URL, {
method: 'POST',
@@ -708,6 +726,7 @@ const reportUser = ({credentials, userId, statusIds, comment, forward}) => {
const apiService = {
verifyCredentials,
fetchTimeline,
+ fetchPinnedStatuses,
fetchConversation,
fetchStatus,
fetchFriends,
@@ -715,6 +734,8 @@ const apiService = {
fetchFollowers,
followUser,
unfollowUser,
+ pinOwnStatus,
+ unpinOwnStatus,
blockUser,
unblockUser,
fetchUser,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index c2b93de4..e23e1222 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -98,6 +98,9 @@ const backendInteractorService = (credentials) => {
const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
const fetchOAuthTokens = () => apiService.fetchOAuthTokens({credentials})
const revokeOAuthToken = (id) => apiService.revokeOAuthToken({id, credentials})
+ const fetchPinnedStatuses = (id) => apiService.fetchPinnedStatuses({credentials, id})
+ const pinOwnStatus = (id) => apiService.pinOwnStatus({credentials, id})
+ const unpinOwnStatus = (id) => apiService.unpinOwnStatus({credentials, id})
const getCaptcha = () => apiService.getCaptcha()
const register = (params) => apiService.register(params)
@@ -144,6 +147,9 @@ const backendInteractorService = (credentials) => {
fetchBlocks,
fetchOAuthTokens,
revokeOAuthToken,
+ fetchPinnedStatuses,
+ pinOwnStatus,
+ unpinOwnStatus,
tagUser,
untagUser,
addRight,
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 7a8708d5..e3d1646a 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -131,6 +131,8 @@ export const parseUser = (data) => {
output.statuses_count = data.statuses_count
output.friendIds = []
output.followerIds = []
+ output.pinnedStatuseIds = []
+
if (data.pleroma) {
output.follow_request_count = data.pleroma.follow_request_count
}
@@ -141,6 +143,7 @@ export const parseUser = (data) => {
}
output.tags = output.tags || []
+ output.rights = output.rights || {}
return output
}
@@ -211,6 +214,7 @@ export const parseStatus = (data) => {
output.summary_html = addEmojis(data.spoiler_text, data.emojis)
output.external_url = data.url
+ output.pinned = data.pinned
} else {
output.favorited = data.favorited
output.fave_num = data.fave_num
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 20:39:37 +0000