Improvements to toots display in admin view (#7452)

* Distinguish boosts from original statuses in the admin panel (fixes #7449)

* Show the “show more” button in admin view to make CWs clearer (fixes #7451)

* Make content warnings swag

app/helpers/admin/account_moderation_notes_helper.rb

@@ -10,10 +10,16 @@ module Admin::AccountModerationNotesHelper
     end
   end
 
+  def admin_account_inline_link_to(account)
+    link_to admin_account_path(account.id), class: name_tag_classes(account, true) do
+      content_tag(:span, account.acct, class: 'username')
+    end
+  end
+
   private
 
-  def name_tag_classes(account)
+  def name_tag_classes(account, inline = false)
-    classes = ['name-tag']
+    classes = [inline ? 'inline-name-tag' : 'name-tag']
     classes << 'suspended' if account.suspended?
     classes.join(' ')
   end

app/javascript/styles/mastodon/admin.scss

@@ -484,19 +484,12 @@
 }
 
 a.name-tag,
-.name-tag {
+.name-tag,
-  display: flex;
+a.inline-name-tag,
-  align-items: center;
+.inline-name-tag {
   text-decoration: none;
   color: $secondary-text-color;
 
-  .avatar {
-    display: block;
-    margin: 0;
-    margin-right: 5px;
-    border-radius: 50%;
-  }
-
   .username {
     font-weight: 500;
   }
@@ -514,6 +507,26 @@ a.name-tag,
   }
 }
 
+a.name-tag,
+.name-tag {
+  display: flex;
+  align-items: center;
+
+  .avatar {
+    display: block;
+    margin: 0;
+    margin-right: 5px;
+    border-radius: 50%;
+  }
+
+  &.suspended {
+    .avatar {
+      filter: grayscale(100%);
+      opacity: 0.8;
+    }
+  }
+}
+
 .speech-bubble {
   margin-bottom: 20px;
   border-left: 4px solid $ui-highlight-color;

app/javascript/styles/mastodon/tables.scss

@@ -1,3 +1,9 @@
+@keyframes Swag {
+  0% { background-position: 0% 0%; }
+  50% { background-position: 100% 0%; }
+  100% { background-position: 200% 0%; }
+}
+
 .table {
   width: 100%;
   max-width: 100%;
@@ -187,6 +193,11 @@ a.table-action-link {
 
     strong {
       font-weight: 700;
+      background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet,orange , yellow, green, cyan, blue, violet);
+      background-size: 200% 100%;
+      background-clip: text;
+      color: transparent;
+      animation: Swag 2s linear 0s infinite;
     }
   }
 }

app/views/admin/reports/_status.html.haml

@@ -3,26 +3,30 @@
     = f.check_box :status_ids, { multiple: true, include_hidden: false }, status.id
   .batch-table__row__content
     .status__content><
-      - unless status.spoiler_text.blank?
+      - unless status.proper.spoiler_text.blank?
         %p><
-          %strong= Formatter.instance.format_spoiler(status)
+          %strong> Content warning: #{Formatter.instance.format_spoiler(status.proper)}
 
-      = Formatter.instance.format(status, custom_emojify: true)
+      = Formatter.instance.format(status.proper, custom_emojify: true)
 
-    - unless status.media_attachments.empty?
+    - unless status.proper.media_attachments.empty?
-      - if status.media_attachments.first.video?
+      - if status.proper.media_attachments.first.video?
-        - video = status.media_attachments.first
+        - video = status.proper.media_attachments.first
-        = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, width: 610, height: 343, inline: true
+        = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.proper.sensitive? && !current_account&.user&.setting_display_sensitive_media, width: 610, height: 343, inline: true
       - else
-        = react_component :media_gallery, height: 343, sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }
+        = react_component :media_gallery, height: 343, sensitive: status.proper.sensitive? && !current_account&.user&.setting_display_sensitive_media, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.proper.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }
 
     .detailed-status__meta
       = link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime', target: stream_link_target, rel: 'noopener' do
         %time.formatted{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)
       ·
-      = fa_visibility_icon(status)
+      - if status.reblog?
-      = t("statuses.visibilities.#{status.visibility}")
+        = fa_icon('retweet fw')
-      - if status.sensitive?
+        = t('statuses.boosted_from_html', acct_link: admin_account_inline_link_to(status.proper.account))
+      - else
+        = fa_visibility_icon(status)
+        = t("statuses.visibilities.#{status.visibility}")
+      - if status.proper.sensitive?
         ·
         = fa_icon('eye-slash fw')
         = t('stream_entries.sensitive_content')

config/locales/en.yml

@@ -682,6 +682,7 @@ en:
       video:
         one: "%{count} video"
         other: "%{count} videos"
+    boosted_from_html: Boosted from %{acct_link}
     content_warning: 'Content warning: %{warning}'
     disallowed_hashtags:
       one: 'contained a disallowed hashtag: %{tags}'