Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop

src/components/media_modal/media_modal.js

@@ -84,10 +84,12 @@ const MediaModal = {
     }
   },
   mounted () {
+    window.addEventListener('popstate', this.hide)
     document.addEventListener('keyup', this.handleKeyupEvent)
     document.addEventListener('keydown', this.handleKeydownEvent)
   },
   destroyed () {
+    window.removeEventListener('popstate', this.hide)
     document.removeEventListener('keyup', this.handleKeyupEvent)
     document.removeEventListener('keydown', this.handleKeydownEvent)
   }

src/components/react_button/react_button.js

@@ -24,7 +24,7 @@ const ReactButton = {
   },
   computed: {
     commonEmojis () {
-      return ['❤️', '😠', '👀', '😂', '🔥']
+      return ['👍', '😠', '👀', '😂', '🔥']
     },
     emojis () {
       if (this.filterWord !== '') {

src/components/settings/settings.js

@@ -30,7 +30,8 @@ const settings = {
         Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
 
       backendVersion: instance.backendVersion,
-      frontendVersion: instance.frontendVersion
+      frontendVersion: instance.frontendVersion,
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
     }
   },
   components: {
@@ -86,8 +87,11 @@ const settings = {
       .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
     // Special cases (need to transform values or perform actions first)
     muteWordsString: {
-      get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
+      get () {
+        return this.muteWordsStringLocal
+      },
       set (value) {
+        this.muteWordsStringLocal = value
         this.$store.dispatch('setOption', {
           name: 'muteWords',
           value: filter(value.split('\n'), (word) => trim(word).length > 0)

src/components/status_content/status_content.js

@@ -176,8 +176,8 @@ const StatusContent = {
           }
         }
         if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
-          // Extract tag name from link url
-          const tag = extractTagFromUrl(target.href)
+          // Extract tag name from dataset or link url
+          const tag = target.dataset.tag || extractTagFromUrl(target.href)
           if (tag) {
             const link = this.generateTagLink(tag)
             this.$router.push(link)

src/components/still-image/still-image.vue

@@ -23,12 +23,21 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+.contain-fit {
+  .still-image {
+    img {
+      height: 100%;
+    }
+  }
+}
+
 .still-image {
   position: relative;
   line-height: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
+  display: flex;
 
   &:hover canvas {
     display: none;
@@ -36,8 +45,8 @@
 
   img {
     width: 100%;
-    height: 100%;
     object-fit: contain;
+    align-self: center;
   }
 
   &.animated {