Merge branch 'misc-style-fixes-or-changes' into shigusegubu-themes3

src/components/notification/notification.js

@@ -42,6 +42,7 @@ library.add(
 const Notification = {
   data () {
     return {
+      selecting: false,
       statusExpanded: false,
       unmuted: false,
       showingApproveConfirmDialog: false,
@@ -62,11 +63,35 @@ const Notification = {
     UserLink,
     ConfirmModal
   },
+  mounted () {
+    document.addEventListener('selectionchange', this.onContentSelect)
+  },
+  unmounted () {
+    document.removeEventListener('selectionchange', this.onContentSelect)
+  },
   methods: {
     toggleStatusExpanded () {
       if (!this.expandable) return
       this.statusExpanded = !this.statusExpanded
     },
+    onContentSelect () {
+      const { isCollapsed, anchorNode, offsetNode } = document.getSelection()
+      if (isCollapsed) {
+        this.selecting = false
+        return
+      }
+      const within = this.$refs.root.contains(anchorNode) || this.$refs.root.contains(offsetNode)
+      if (within) {
+        this.selecting = true
+      } else {
+        this.selecting = false
+      }
+    },
+    onContentClick (e) {
+      if (!this.selecting && !e.target.closest('a') && !e.target.closest('button')) {
+        this.toggleStatusExpanded()
+      }
+    },
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
@@ -138,7 +163,7 @@ const Notification = {
       return highlightStyle(highlight[user.screen_name])
     },
     expandable () {
-      return (new Set(['like', '-pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
+      return (new Set(['like', 'pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
     },
     user () {
       return this.$store.getters.findUser(this.notification.from_profile.id)

src/components/notification/notification.vue

@@ -1,6 +1,7 @@
 <template>
   <article
     v-if="notification.type === 'mention' || notification.type === 'status'"
+    ref="root"
   >
     <Status
       class="Notification"
@@ -12,6 +13,7 @@
   <article
     class="NotificationParent"
     :class="{ '-expandable': expandable }"
+    ref="root"
     v-else
   >
     <div
@@ -256,8 +258,8 @@
             class="status-content"
             :compact="!statusExpanded"
             :status="notification.status"
-            :collapse="statusExpanded"
+            :collapse="!statusExpanded"
-            @click="toggleStatusExpanded()"
+            @click="onContentClick"
           />
         </template>
       </div>

src/components/rich_content/rich_content.jsx

@@ -92,6 +92,12 @@ export default {
       required: false,
       type: Boolean,
       default: true
+    },
+    // Collapse newlines
+    collapse: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -290,11 +296,20 @@ export default {
 
     const pass1 = convertHtmlToTree(html).map(processItem)
     const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
+
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
+    const result =
-      { pass2 }
+    <span class={['RichContent', this.faint ? '-faint' : '']}>
+      {
+        this.collapse
+          ? pass2.map(x => {
+            if (!Array.isArray(x)) return x.replace(/\n/g, ' ')
+            return x.map(y => y.type === 'br' ? ' ' : y)
+          })
+          : pass2
+      }
     </span>
 
     const event = {

src/components/status_body/status_body.js

@@ -41,6 +41,7 @@ const StatusBody = {
       parseReadyDone: false
     }
   },
+  emits: ['parseReady'],
   computed: {
     localCollapseSubjectDefault () {
       return this.mergedConfig.collapseMessageWithSubject

src/components/status_body/status_body.vue

@@ -39,7 +39,8 @@
           v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
           :class="{ '-single-line': singleLine }"
           class="text media-body"
-          :html="collapse ? collapsedStatus : status.raw_html"
+          :html="status.raw_html"
+          :collapse="collapse"
           :emoji="status.emojis"
           :handle-links="true"
           :faint="compact"

src/components/status_content/status_content.js

@@ -65,6 +65,7 @@ const StatusContent = {
     'controlledShowingLongSubject',
     'controlledToggleShowingLongSubject'
   ],
+  emits: ['parseReady', 'mediaplay', 'mediapause'],
   data () {
     return {
       uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),