From e1fb489ea8a16472e7b752fd5d08e964fbd87a8d Mon Sep 17 00:00:00 2001
From: newalina <157907056+newalina@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:58:29 -0500
Subject: add show less show more button

---
 .../CollectionFreeFormInfoState.tsx                | 24 +++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 688f84cd5..ed77f29ad 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -98,12 +98,34 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     componentWillUnmount(): void {
         this.clearState();
     }
+
+    toggleGIF(): void {
+        let dots = document.getElementById('dots');
+        var moreText = document.getElementById('gif');
+        var btnText = document.getElementById('toggle-gif');
+
+        if (dots && btnText && moreText) {
+            if (dots.style.display === 'none') {
+                dots.style.display = 'inline';
+                moreText.style.display = 'none';
+                btnText.innerHTML = 'Show more';
+            } else {
+                dots.style.display = 'none';
+                moreText.style.display = 'inline';
+                btnText.innerHTML = 'Show less';
+            }
+        }
+    }
     render() {
         return (
             <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
                 <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <img className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
+                    <span id="dots"></span>
+                    <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
+                    <button onClick={() => this.toggleGIF()} id="toggle-gif">
+                        Show less
+                    </button>
                 </div>
                 <div style={{ position: 'absolute', top: -10, left: -10 }}>
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
-- 
cgit v1.2.3-70-g09d2