Allow users to set the trigger height for lengthy toot auto-collapse (#2070)

* Allow users to set the trigger height for lengthy toot autocollapse

Add a field in the glitch-soc preferences to set the exact height in pixels of a "lengthy toot" where auto-collapse is triggered

Originally authored by Dean Bassett (github.com/deanveloper)

Squashed 3 commits from neatchee/mastodon and returned some values to project defaults:
* ef665c1df5821e684c8da3392049f33243fafa74
* 0fce108d210efe55027a3af061bfc57aaaa83843
* 998f701a2b2e37edbda7dffb11a61f67f5559b18

* Remove bad escape characters

* Apply feedback from glitch-soc code review
- move input width specification to CSS
- adjust language for clarity

* Update comments re: lengthy toot height

* Fix inconsistent indentation

* Use a calculated width that scales better with browser font instead of static 45px width

1 files changed, 7 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 409ec0adc..cbd8eb31c 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -224,7 +224,7 @@ class Status extends ImmutablePureComponent {
   //   -  The user has decided to collapse all notifications ('muted'
   //      statuses).
   //   -  The user has decided to collapse long statuses and the status is
-  //      over 400px (without media, or 650px with).
+  //      over the user set value (default 400 without media, or 610px with).
   //   -  The status is a reply and the user has decided to collapse all
   //      replies.
   //   -  The status contains media and the user has decided to collapse all
@@ -251,10 +251,15 @@ class Status extends ImmutablePureComponent {
     // as it could cause surprising changes when receiving notifications
     if (settings.getIn(['content_warnings', 'shared_state']) && status.get('spoiler_text').length && !status.get('hidden')) return;
 
+    let autoCollapseHeight = parseInt(autoCollapseSettings.get('height'));
+    if (status.get('media_attachments').size && !muted) {
+      autoCollapseHeight += 210;
+    }
+
     if (collapse ||
       autoCollapseSettings.get('all') ||
       (autoCollapseSettings.get('notifications') && muted) ||
-      (autoCollapseSettings.get('lengthy') && node.clientHeight > ((status.get('media_attachments').size && !muted) ? 650 : 400)) ||
+      (autoCollapseSettings.get('lengthy') && node.clientHeight > autoCollapseHeight) ||
       (autoCollapseSettings.get('reblogs') && prepend === 'reblogged_by') ||
       (autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null) ||
       (autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && status.get('media_attachments').size > 0)