Add a clearer visual indicator when a post is collapsed (glitch-soc#15)

Closes glitch-soc#10 Co-authored-by: dean <[email protected]>
Teqed · Dec 30, 2022 · 856997e · 856997e
1 parent 5561834
commit 856997e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
@@ -518,7 +518,7 @@ class Status extends ImmutablePureComponent {
       pictureInPicture,
       ...other
     } = this.props;
-    const { isCollapsed, forceFilter } = this.state;
+    const { isCollapsed } = this.state;
     let background = null;
     let attachments = null;
 
@@ -796,6 +796,7 @@ class Status extends ImmutablePureComponent {
             extraMedia={extraMedia}
             mediaIcons={contentMediaIcons}
             expanded={isExpanded}
+            collapsed={isCollapsed}
             onExpandedToggle={this.handleExpandedToggle}
             onTranslate={this.handleTranslate}
             parseClick={parseClick}

diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
@@ -306,6 +306,7 @@ class StatusContent extends React.PureComponent {
       status,
       media,
       extraMedia,
+      collapsed,
       mediaIcons,
       parseClick,
       disabled,
@@ -329,6 +330,14 @@ class StatusContent extends React.PureComponent {
       <TranslateButton onClick={this.handleTranslate} translation={status.get('translation')} />
     );
 
+    const collapsedIndicator = collapsed && (
+      <div className='status__content--uncollapse-msg'>
+        <span className='status__content--uncollapse-msg-arrow' aria-hidden>⬇⬇</span>
+        <FormattedMessage id='status.uncollapse' defaultMessage='Uncollapse' />
+        <span className='status__content--uncollapse-msg-arrow' aria-hidden>⬇⬇</span>
+      </div>
+    );
+
     if (status.get('spoiler_text').length > 0) {
       let mentionsPlaceholder = '';
 
@@ -409,6 +418,7 @@ class StatusContent extends React.PureComponent {
           </div>
 
           {extraMedia}
+          {collapsedIndicator}
         </div>
       );
     } else if (parseClick) {
@@ -432,6 +442,7 @@ class StatusContent extends React.PureComponent {
           {translateButton}
           {media}
           {extraMedia}
+          {collapsedIndicator}
         </div>
       );
     } else {
@@ -453,6 +464,7 @@ class StatusContent extends React.PureComponent {
           {translateButton}
           {media}
           {extraMedia}
+          {collapsedIndicator}
         </div>
       );
     }

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -48,7 +48,7 @@
 
 .status__content {
   position: relative;
-  margin: 10px 0;
+  margin: 20px 0;
   font-size: 15px;
   line-height: 20px;
   word-wrap: break-word;
@@ -214,6 +214,20 @@
       text-decoration: none;
     }
   }
+
+  .status__content--uncollapse-msg {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    z-index: 1;
+    width: 100%;
+    color: $light-text-color;
+    background: linear-gradient(90deg, rgba($ui-base-color,0), rgba($ui-base-color,1) 40% 60%, rgba($ui-base-color,0));
+
+    .status__content--uncollapse-msg-arrow {
+      margin: 0 10px;
+    }
+  }
 }
 
 .translate-button {
@@ -406,6 +420,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       padding-top: 0;
+      margin-bottom: 5px;
 
       &:after {
         content: "";