css and other cleanup for info UI

3 files changed, 45 insertions, 97 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 7661f5aff..24aedfa56 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -18,9 +18,9 @@ export const StateMessageGIF = Symbol('StateMessageGIF');
 export const StateEntryFunc = Symbol('StateEntryFunc');
 export class infoState {
     [StateMessage]: string = '';
-    [key: string]: infoArc;
     [StateMessageGIF]?: string = '';
     [StateEntryFunc]?: () => any;
+    [key: string]: infoArc;
     constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
@@ -58,6 +58,7 @@ export interface CollectionFreeFormInfoStateProps {
 export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
     @observable _hide = false;
+    @observable _expanded = false;
 
     constructor(props: any) {
         super(props);
@@ -72,22 +73,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
 
     clearState = () => this._disposers.map(disposer => disposer());
-    initState = () =>
-        (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
-            return reaction(
-                //
+    initState = () => (this._disposers = 
+        this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(
+            arc => reaction(
                 arc.test,
-                res => {
-                    if (res) {
-                        const next = arc.act(res);
-                        this._props.next(next);
-                    }
-                },
+                res => res && this._props.next(arc.act(res)),
                 { fireImmediately: true }
-            );
-        }));
+            )
+        )); // prettier-ignore
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.initState();
     }
     componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
@@ -95,39 +90,24 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
         this.clearState();
         this.initState();
     }
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         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() {
+        const gif = this.State?.[StateMessageGIF];
         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' }}>
-                    <span id="dots"></span>
-                    <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
-                    <button id="toggle-gif" onClick={() => this.toggleGIF()}>
-                        Show less
+            <div className={'collectionFreeform-' + (this._hide ? 'hidden' : 'infoUI')}>
+                <p className="collectionFreeform-infoUI-msg">
+                    {this.State?.[StateMessage]}
+                    <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
+                        {this._expanded ? 'Less...' : 'More...'}
                     </button>
+                </p>
+                <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
+                    <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
-                <div style={{ position: 'absolute', top: -10, left: -10 }}>
+                <div className="collectionFreeform-infoUI-close">
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 3b1847c00..f8fe2bb0b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -61,6 +61,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const docNewY = () => firstDoc()?.y;
 
         const linkStart = () => DocumentLinksButton.StartLink;
+        const linkUnstart = () => !DocumentLinksButton.StartLink;
 
         const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
         const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
@@ -94,51 +95,16 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
                     docX = firstDoc()?.x;
                     docY = firstDoc()?.y;
-                    return movedDoc1;
+                    return movedDoc;
                 }],
             }
         ); // prettier-ignore
 
-        const movedDoc1 = InfoState(
-            'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+        const movedDoc = InfoState(
+            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (\":\")',
             {
                 docCreated: [() => numDocs() == 2, () => multipleDocs],
                 docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    return movedDoc2;
-                }],
-            },
-            'dash-colon-menu.gif',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
-
-        const movedDoc2 = InfoState(
-            'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-            {
-                docCreated: [() => numDocs() == 2, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    return movedDoc3;
-                }],
-            },
-            'dash-colon-menu.gif',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
-
-        const movedDoc3 = InfoState(
-            'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-            {
-                docCreated: [() => numDocs() == 2, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    return movedDoc1;
-                }],
             },
             'dash-colon-menu.gif',
             () => TopBar.Instance.FlipDocumentationIcon()
@@ -156,6 +122,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const startedLink = InfoState(
             'Now click the highlighted link icon on your other document.',
             {
+                linkUnstart: [() => linkUnstart(), () => multipleDocs],
                 linkCreated: [() => numDocLinks(), () => madeLink],
                 docRemoved: [() => numDocs() < 2, () => oneDoc],
             },
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 9e7d364ea..2c94446fb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -273,33 +273,34 @@
 
     margin: 15px;
     padding: 10px;
+    .collectionFreeform-infoUI-close {
+        position: absolute;
+        top: -10;
+        left: -10;
+    }
 
-    .msg {
+    .collectionFreeform-infoUI-msg {
+        position: relative;
+        max-width: 500;
+        margin: 10;
+    }
+    .collectionFreeform-infoUI-button {
+        border-radius: 50px;
+        font-size: 12px;
+        padding: 6;
         position: relative;
-        // display: block;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -o-user-select: none;
-        user-select: none;
     }
 
-    .gif-container {
+    .collectionFreeform-infoUI-gif-container {
         position: relative;
         margin-top: 5px;
-        // display: block;
+        pointer-events: none;
 
-        justify-content: center;
-        align-items: center;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -o-user-select: none;
-        user-select: none;
-
-        .gif {
-            background-color: transparent;
+        > img {
             height: 300px;
         }
     }
+    .collectionFreeform-hidden {
+        display: none;
+    }
 }