Improve Activity stream spoiler (#4088)

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index a0e511b0a3f42ce8e715802a12a2d9f4f8a00d7c..254250a3b9589d5fb52c646a7366e7f8be4f555c 100644 (file)
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -53,8 +53,12 @@ function main() {
     }
   });
 
-  delegate(document, '.media-spoiler', 'click', ({ target }) => {
-    target.style.display = 'none';
+  delegate(document, '.activity-stream .media-spoiler-wrapper .media-spoiler', 'click', function() {
+    this.parentNode.classList.add('media-spoiler-wrapper__visible');
+  });
+
+  delegate(document, '.activity-stream .media-spoiler-wrapper .spoiler-button', 'click', function() {
+    this.parentNode.classList.remove('media-spoiler-wrapper__visible');
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {

diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss
index fcec32d4473d699e94ffcdb2af68c2a3927f9ea7..e89cc3f09019f59e72d90c2e65817bdadb468dcb 100644 (file)
--- a/app/javascript/styles/stream_entries.scss
+++ b/app/javascript/styles/stream_entries.scss
@@ -330,6 +330,18 @@
     }
   }
 
+  .media-spoiler-wrapper {
+    &.media-spoiler-wrapper__visible {
+      .media-spoiler {
+        display: none;
+      }
+
+      .spoiler-button {
+        display: block;
+      }
+    }
+  }
+
   .pre-header {
     padding: 14px 0;
     padding-left: (48px + 14px * 2);

diff --git a/app/views/stream_entries/_content_spoiler.html.haml b/app/views/stream_entries/_content_spoiler.html.haml
index d80ea46a03e62e5c67f9e3e522f5a3638215be1b..798dfce670da4d8c05dcc65247d0d75dbd7c9c43 100644 (file)
--- a/app/views/stream_entries/_content_spoiler.html.haml
+++ b/app/views/stream_entries/_content_spoiler.html.haml
@@ -1,3 +1,7 @@
-.media-spoiler
-  %span= t('stream_entries.sensitive_content')
-  %span= t('stream_entries.click_to_show')
+.media-spoiler-wrapper{ class: sensitive == false && 'media-spoiler-wrapper__visible' }
+  .spoiler-button
+    .icon-button.overlayed
+      %i.fa.fa-fw.fa-eye
+  .media-spoiler
+    %span= t('stream_entries.sensitive_content')
+    %span= t('stream_entries.click_to_show')

diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml
index ef60b9925a3cfaf9d94647017fdefa2787f0bfa7..193cc64702eeece4401bf698bdaaebca09408348 100644 (file)
--- a/app/views/stream_entries/_detailed_status.html.haml
+++ b/app/views/stream_entries/_detailed_status.html.haml
@@ -17,13 +17,11 @@
   - unless status.media_attachments.empty?
     - if status.media_attachments.first.video?
       .video-player
-        - if status.sensitive?
-          = render partial: 'stream_entries/content_spoiler'
+        = render partial: 'stream_entries/content_spoiler', locals: { sensitive: status.sensitive? }
         %video.u-video{ src: status.media_attachments.first.file.url(:original), loop: true }
     - else
       .detailed-status__attachments
-        - if status.sensitive?
-          = render partial: 'stream_entries/content_spoiler'
+        = render partial: 'stream_entries/content_spoiler', locals: { sensitive: status.sensitive? }
         .status__attachments__inner
           - status.media_attachments.each do |media|
             = render partial: 'stream_entries/media', locals: { media: media }

diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml
index db4e30fda47231cda5242cd450f31c69b67a3605..2df0cc850a40d25ad8d22de6045cbb1739926cf1 100644 (file)
--- a/app/views/stream_entries/_simple_status.html.haml
+++ b/app/views/stream_entries/_simple_status.html.haml
@@ -22,8 +22,7 @@
 
   - unless status.media_attachments.empty?
     .status__attachments
-      - if status.sensitive?
-        = render partial: 'stream_entries/content_spoiler'
+      = render partial: 'stream_entries/content_spoiler', locals: { sensitive: status.sensitive? }
       - if status.media_attachments.first.video?
         .status__attachments__inner
           .video-item