Merge branch 'expand-notifications' into 'develop'

add icon to allow expand collapsed (status-related) notifications

Closes #1224

See merge request pleroma/pleroma-fe!1701

src/components/notification/notification.js

@@ -20,7 +20,9 @@ import {
   faUserPlus,
   faEyeSlash,
   faUser,
-  faSuitcaseRolling
+  faSuitcaseRolling,
+  faExpandAlt,
+  faCompressAlt
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -31,13 +33,15 @@ library.add(
   faUserPlus,
   faUser,
   faEyeSlash,
-  faSuitcaseRolling
+  faSuitcaseRolling,
+  faExpandAlt,
+  faCompressAlt
 )
 
 const Notification = {
   data () {
     return {
-      userExpanded: false,
+      statusExpanded: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       unmuted: false
     }
@@ -55,8 +59,8 @@ const Notification = {
     UserLink
   },
   methods: {
-    toggleUserExpanded () {
+    toggleStatusExpanded () {
-      this.userExpanded = !this.userExpanded
+      this.statusExpanded = !this.statusExpanded
     },
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)

src/components/notification/notification.vue

@@ -144,13 +144,25 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="faint-link"
+              class="timeago-link faint-link"
             >
               <Timeago
                 :time="notification.created_at"
                 :auto-update="240"
               />
             </router-link>
+            <button
+              class="button-unstyled expand-icon"
+              @click.prevent="toggleStatusExpanded"
+              :title="$t('tool_tip.toggle_expand')"
+              :aria-expanded="statusExpanded"
+            >
+              <FAIcon
+                class="fa-scale-110"
+                fixed-width
+                :icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
+              />
+            </button>
           </div>
           <div
             v-else
@@ -166,6 +178,8 @@
           <button
             v-if="needMute"
             class="button-unstyled"
+            :title="$t('tool_tip.toggle_mute')"
+            :aria-expanded="!unmuted"
             @click.prevent="toggleMute"
           >
             <FAIcon
@@ -222,8 +236,8 @@
         />
         <template v-else>
           <StatusContent
-            class="faint"
+            :class="{ faint: !statusExpanded }"
-            :compact="true"
+            :compact="!statusExpanded"
             :status="notification.action"
           />
         </template>

src/components/notifications/notifications.scss

@@ -112,6 +112,16 @@
       min-width: 3em;
       text-align: right;
     }
+
+    .timeago-link {
+      margin-right: 0.2em;
+    }
+
+    .expand-icon {
+      .svg-inline--fa {
+        margin-left: 0.25em;
+      }
+    }
   }
 
   .emoji-reaction-emoji {

src/i18n/en.json

@@ -986,7 +986,9 @@
     "user_settings": "User Settings",
     "accept_follow_request": "Accept follow request",
     "reject_follow_request": "Reject follow request",
-    "bookmark": "Bookmark"
+    "bookmark": "Bookmark",
+    "toggle_expand": "Expand or collapse notification to show post in full",
+    "toggle_mute": "Expand or collapse notification to reveal muted content"
   },
   "upload": {
     "error": {