Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: fix fontello Translated using Weblate (Russian) Translated using Weblate (Italian) lint fix fixed copy-pasting leftovers improved algorithm, possibly speed too fix 8x spaces inside this paren feat/reorder-emojis-by-position-of-keyword rename to gravestone Apply 1 suggestion(s) to 1 file(s) change i18n phrasing separate reply button to its own component, add changelog entry add basic deletes support that works with masto WS
2020-10-17 21:26:13 +03:00 · 2020-10-17 21:26:13 +03:00 · a664fde02f
parent 29ff0be92c 76a9a51620
commit a664fde02f
16 changed files with 127 additions and 26 deletions
--- 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
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -97,6 +97,7 @@ module.exports = {
    }),
    new FontelloPlugin({
      config: require('../static/fontello.json'),
+      host: 'https://fontello.com',
      name: 'fontello',
      output: {
        css: 'static/[name].' + now + '.css',  // [hash] is not supported. Use the current timestamp instead for versioning.
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -8,10 +8,20 @@ const LOAD_EMOJI_BY = 60
 const LOAD_EMOJI_MARGIN = 64

 const filterByKeyword = (list, keyword = '') => {
+  if (keyword === '') return list
+
  const keywordLowercase = keyword.toLowerCase()
-  return list.filter(emoji =>
-    emoji.displayText.toLowerCase().includes(keywordLowercase)
-  )
+  let orderedEmojiList = []
+  for (const emoji of list) {
+    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
+    if (indexOfKeyword > -1) {
+      if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
+        orderedEmojiList[indexOfKeyword] = []
+      }
+      orderedEmojiList[indexOfKeyword].push(emoji)
+    }
+  }
+  return orderedEmojiList.flat()
 }

 const EmojiPicker = {
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@ -28,9 +28,17 @@ const ReactButton = {
    emojis () {
      if (this.filterWord !== '') {
        const filterWordLowercase = this.filterWord.toLowerCase()
-        return this.$store.state.instance.emoji.filter(emoji =>
-          emoji.displayText.toLowerCase().includes(filterWordLowercase)
-        )
+        let orderedEmojiList = []
+        for (const emoji of this.$store.state.instance.emoji) {
+          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
+          if (indexOfFilterWord > -1) {
+            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
+              orderedEmojiList[indexOfFilterWord] = []
+            }
+            orderedEmojiList[indexOfFilterWord].push(emoji)
+          }
+        }
+        return orderedEmojiList.flat()
      }
      return this.$store.state.instance.emoji || []
    },
--- 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
--- 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>
--- 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
--- 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;
--- 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"
@ -360,6 +351,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"
--- 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>
--- 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",
--- 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",
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@ -702,7 +702,8 @@
    "reply_to": "Rispondi a",
    "delete_confirm": "Vuoi veramente eliminare questo messaggio?",
    "unbookmark": "Rimuovi segnalibro",
-    "bookmark": "Aggiungi segnalibro"
+    "bookmark": "Aggiungi segnalibro",
+    "status_deleted": "Questo messagio è stato cancellato"
  },
  "time": {
    "years_short": "{0}a",
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@ -473,5 +473,10 @@
  "tool_tip": {
    "accept_follow_request": "Принять запрос на чтение",
    "reject_follow_request": "Отклонить запрос на чтение"
+  },
+  "image_cropper": {
+    "save_without_cropping": "Сохранить не обрезая",
+    "save": "Сохранить",
+    "crop_picture": "Обрезать картинку"
  }
 }
--- 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,
--- 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)
    },