Merge pull request #4 from NeuromatchAcademy/style-bigger-collapse

Expand number of lines in collapsed posts
NeuromatchAcademy · Dec 25, 2022 · 607eb3a · 607eb3a
2 parents 7a27227 + 149d374
commit 607eb3a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 39 deletions.
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
@@ -6,6 +6,7 @@ import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
+import StatusExpandButton from './status_expand_button';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -799,6 +800,14 @@ class Status extends ImmutablePureComponent {
             tagLinks={settings.get('tag_misleading_links')}
             rewriteMentions={settings.get('rewrite_mentions')}
           />
+          {/* Only show expand button if collapsed and no spoiler tag is present */}
+          {isCollapsed && status.get('spoiler_text').length===0 ? (
+            <StatusExpandButton
+              hidden={isCollapsed}
+              handleSpoilerClick={parseClick}
+              mediaIcons={contentMediaIcons}
+            />
+          ) : null}
 
           {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
             <StatusActionBar

diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import Icon from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
+import StatusExpandButton from './status_expand_button';
 
 const textMatchesTarget = (text, origin, host) => {
   return (text === origin || text === host
@@ -359,38 +360,6 @@ class StatusContent extends React.PureComponent {
         </Permalink>
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      let toggleText = null;
-      if (hidden) {
-        toggleText = [
-          <FormattedMessage
-            id='status.show_more'
-            defaultMessage='Show more'
-            key='0'
-          />,
-        ];
-        if (mediaIcons) {
-          mediaIcons.forEach((mediaIcon, idx) => {
-            toggleText.push(
-              <Icon
-                fixedWidth
-                className='status__content__spoiler-icon'
-                id={mediaIcon}
-                aria-hidden='true'
-                key={`icon-${idx}`}
-              />,
-            );
-          });
-        }
-      } else {
-        toggleText = (
-          <FormattedMessage
-            id='status.show_less'
-            defaultMessage='Show less'
-            key='0'
-          />
-        );
-      }
-
       if (hidden) {
         mentionsPlaceholder = <div>{mentionLinks}</div>;
       }
@@ -402,9 +371,11 @@ class StatusContent extends React.PureComponent {
           >
             <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={lang} />
             {' '}
-            <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
-              {toggleText}
-            </button>
+            <StatusExpandButton
+              hidden={hidden}
+              handleSpoilerClick={this.handleSpoilerClick}
+              mediaIcons={mediaIcons}
+            />
           </p>
 
           {mentionsPlaceholder}

diff --git a/app/javascript/flavours/glitch/components/status_expand_button.js b/app/javascript/flavours/glitch/components/status_expand_button.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Icon from './icon';
+
+
+const StatusExpandButton=(
+  {
+    hidden,
+    handleSpoilerClick,
+    mediaIcons,
+  },
+)=>{
+  const makeToggleText = () => {
+    let newText;
+    if (hidden) {
+      newText = [
+        <FormattedMessage
+          id='status.show_more'
+          defaultMessage='Show more'
+          key='0'
+        />,
+      ];
+      if (mediaIcons) {
+        mediaIcons.forEach((mediaIcon, idx) => {
+          newText.push(
+            <Icon
+              fixedWidth
+              className='status__content__spoiler-icon'
+              id={mediaIcon}
+              aria-hidden='true'
+              key={`icon-${idx}`}
+            />,
+          );
+        });
+      }
+    } else {
+      newText = (
+        <FormattedMessage
+          id='status.show_less'
+          defaultMessage='Show less'
+          key='0'
+        />
+      );
+    }
+    return(newText);
+  };
+
+  // const [hidden, setHidden] = useState(false);
+  const [toggleText, setToggleText] = useState(makeToggleText());
+
+  // Change the text when the hidden state changes
+  useEffect(() => {
+    setToggleText(makeToggleText());
+  }, [hidden]);
+
+  return(
+    <button type='button' className='status__content__spoiler-link' onClick={handleSpoilerClick} aria-expanded={!hidden}>
+      {toggleText}
+    </button>
+  );
+};
+
+StatusExpandButton.propTypes = {
+  hidden: PropTypes.bool,
+  handleSpoilerClick: PropTypes.func,
+  mediaIcons: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default StatusExpandButton;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -391,22 +391,22 @@
     }
 
     .status__content {
-      height: 20px;
+      max-height: 6em;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-top: 0;
+      //padding-top: 0;
 
       &:after {
         content: "";
         position: absolute;
-        top: 0;
+        height: 40%;
         bottom: 0;
         left: 0;
         right: 0;
         background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
         pointer-events: none;
       }
-      
+
       a:hover {
         text-decoration: none;
       }