add show less show more button

3 files changed, 31 insertions, 6 deletions

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())} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index a81195c95..9ced90a00 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -42,7 +42,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         if (state) {
             this.currState = state;
             this.currState[StateEntryFunc]?.();
-            TopBar.Instance.FlipDocumentationIcon();
+            // TopBar.Instance.FlipDocumentationIcon();
         }
     };
 
@@ -105,7 +105,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
               return movedDoc2;
             }],
           },
-          'dash-colon-menu.gif'
+          'dash-colon-menu.gif',
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc2 = InfoState(
@@ -119,7 +120,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
               return movedDoc3;
             }],
           },
-          'dash-colon-menu.gif'
+          'dash-colon-menu.gif',
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc3 = InfoState(
@@ -133,7 +135,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
               return movedDoc1;
             }],
           },
-          'dash-colon-menu.gif'
+          'dash-colon-menu.gif',
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const multipleDocs = InfoState(
@@ -178,7 +181,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             activePen: [() => activeTool() === InkTool.Pen, () => penMode],
           },
           'documentation.png',
-
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const presentDocs = InfoState(
diff --git a/src/server/public/assets/nProtectOnlineSecurityV1.dmg b/src/server/public/assets/nProtectOnlineSecurityV1.dmg
new file mode 100644
index 000000000..5d72a0b0a
--- /dev/null
+++ b/src/server/public/assets/nProtectOnlineSecurityV1.dmg