commit: d86cd3e850fe1c47a52b7730fec126f5787ab439
parent 3ca729d09880813420a263221cdc68bcca13a1fb
Author: Shpuld Shpludson <shp@cock.li>
Date: Mon, 12 Oct 2020 06:05:21 +0000
Merge branch 'feat/masto-ws-deletes' into 'develop'
Support for WS deletes
See merge request pleroma/pleroma-fe!1227
Diffstat:
11 files changed, 95 insertions(+), 19 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,7 +8,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- New option to optimize timeline rendering to make the site more responsive (enabled by default)
## [Unreleased patch]
-
### Fixed
- Fixed chats list not updating its order when new messages come in
- Fixed chat messages sometimes getting lost when you receive a message at the same time
@@ -16,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Added
- Import/export a muted users
+- Proper handling of deletes when using websocket streaming
## [2.1.1] - 2020-09-08
### Changed
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
@@ -0,0 +1,12 @@
+
+const ReplyButton = {
+ name: 'ReplyButton',
+ props: ['status', 'replying'],
+ computed: {
+ loggedIn () {
+ return !!this.$store.state.users.currentUser
+ }
+ }
+}
+
+export default ReplyButton
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
@@ -0,0 +1,21 @@
+<template>
+ <div>
+ <i
+ v-if="loggedIn"
+ class="button-icon button-reply icon-reply"
+ :title="$t('tool_tip.reply')"
+ :class="{'-active': replying}"
+ @click.prevent="$emit('toggle')"
+ />
+ <i
+ v-else
+ class="button-icon button-reply -disabled icon-reply"
+ :title="$t('tool_tip.reply')"
+ />
+ <span v-if="status.replies_count > 0">
+ {{ status.replies_count }}
+ </span>
+ </div>
+</template>
+
+<script src="./reply_button.js"></script>
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import ReplyButton from '../reply_button/reply_button.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue'
import ReactButton from '../react_button/react_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -19,6 +20,7 @@ import { unescape, uniqBy } from 'lodash'
const Status = {
name: 'Status',
components: {
+ ReplyButton,
FavoriteButton,
ReactButton,
RetweetButton,
@@ -158,7 +160,7 @@ const Status = {
return this.mergedConfig.hideFilteredStatuses
},
hideStatus () {
- return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden
+ return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
},
isFocused () {
// retweet or root of an expanded conversation
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -30,6 +30,18 @@ $status-margin: 0.75em;
border-left-style: solid;
}
+ .gravestone {
+ padding: $status-margin;
+ color: $fallback--faint;
+ color: var(--faint, $fallback--faint);
+ display: flex;
+
+ .deleted-text {
+ margin: 0.5em 0;
+ align-items: center;
+ }
+ }
+
.status-container {
display: flex;
padding: $status-margin;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -95,6 +95,7 @@
</div>
<div
+ v-if="!deleted"
:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
:style="[ userStyle ]"
class="status-container"
@@ -323,21 +324,11 @@
v-if="!noHeading && !isPreview"
class="status-actions"
>
- <div>
- <i
- v-if="loggedIn"
- class="button-icon button-reply icon-reply"
- :title="$t('tool_tip.reply')"
- :class="{'-active': replying}"
- @click.prevent="toggleReplying"
- />
- <i
- v-else
- class="button-icon button-reply -disabled icon-reply"
- :title="$t('tool_tip.reply')"
- />
- <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
- </div>
+ <reply-button
+ :replying="replying"
+ :status="status"
+ @toggle="toggleReplying"
+ />
<retweet-button
:visibility="status.visibility"
:logged-in="loggedIn"
@@ -361,6 +352,25 @@
</div>
</div>
<div
+ v-else
+ class="gravestone"
+ >
+ <div class="left-side">
+ <UserAvatar :compact="compact" />
+ </div>
+ <div class="right-side">
+ <div class="deleted-text">
+ {{ $t('status.status_deleted') }}
+ </div>
+ <reply-button
+ v-if="replying"
+ :replying="replying"
+ :status="status"
+ @toggle="toggleReplying"
+ />
+ </div>
+ </div>
+ <div
v-if="replying"
class="status-container reply-form"
>
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
@@ -1,5 +1,6 @@
<template>
<StillImage
+ v-if="user"
class="Avatar"
:alt="user.screen_name"
:title="user.screen_name"
@@ -7,6 +8,11 @@
:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
:image-load-error="imageLoadError"
/>
+ <div
+ v-else
+ class="Avatar -placeholder"
+ :class="{ 'avatar-compact': compact }"
+ />
</template>
<script src="./user_avatar.js"></script>
@@ -42,5 +48,10 @@
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
+
+ &.-placeholder {
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
+ }
}
</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -665,7 +665,8 @@
"show_full_subject": "Show full subject",
"hide_full_subject": "Hide full subject",
"show_content": "Show content",
- "hide_content": "Hide content"
+ "hide_content": "Hide content",
+ "status_deleted": "This post was deleted"
},
"user_card": {
"approve": "Approve",
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
@@ -578,7 +578,8 @@
"show_full_subject": "Näytä koko otsikko",
"hide_full_subject": "Piilota koko otsikko",
"show_content": "Näytä sisältö",
- "hide_content": "Piilota sisältö"
+ "hide_content": "Piilota sisältö",
+ "status_deleted": "Poistettu viesti"
},
"user_card": {
"approve": "Hyväksy",
diff --git a/src/modules/api.js b/src/modules/api.js
@@ -72,6 +72,8 @@ const api = {
showImmediately: timelineData.visibleStatuses.length === 0,
timeline: 'friends'
})
+ } else if (message.event === 'delete') {
+ dispatch('deleteStatusById', message.id)
} else if (message.event === 'pleroma:chat_update') {
dispatch('addChatMessages', {
chatId: message.chatUpdate.id,
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
@@ -611,6 +611,10 @@ const statuses = {
commit('setDeleted', { status })
apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
},
+ deleteStatusById ({ rootState, commit }, id) {
+ const status = rootState.statuses.allStatusesObject[id]
+ commit('setDeleted', { status })
+ },
markStatusesAsDeleted ({ commit }, condition) {
commit('setManyDeleted', condition)
},
