changes to icon box and decorations.

6 files changed, 56 insertions, 19 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index d07adcb71..9771c6580 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -48,14 +48,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     @observable private _fieldKey = "title";
     @observable private _hidden = false;
     @observable private _opacity = 1;
-    @observable private _iconifying = false;
+    @observable private _removeIcon = false;
     @observable public Interacting = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
         DocumentDecorations.Instance = this;
         this.keyinput = React.createRef();
-        reaction(() => SelectionManager.SelectedDocuments().slice(), (docs) => docs.length === 0 && (this._edtingTitle = false));
+        reaction(() => SelectionManager.SelectedDocuments().slice(), docs => this._edtingTitle = false);
     }
 
     @action titleChanged = (event: any) => { this._title = event.target.value; };
@@ -197,6 +197,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         if (e.button === 0) {
             this._downX = e.pageX;
             this._downY = e.pageY;
+            this._removeIcon = false;
             let selDoc = SelectionManager.SelectedDocuments()[0];
             let selDocPos = selDoc.props.ScreenToLocalTransform().scale(selDoc.props.ContentScaling()).inverse().transformPoint(0, 0);
             this._minimizedX = selDocPos[0] + 12;
@@ -222,18 +223,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             Promise.all(selectedDocs.map(selDoc => this.getIconDoc(selDoc))).then(minDocSet =>
                 this.moveIconDocs(SelectionManager.SelectedDocuments())
             );
-            this._iconifying = snapped;
+            this._removeIcon = snapped;
         }
     }
 
-
     @action createIcon = (docView: DocumentView, layoutString: string): Doc => {
         let doc = docView.props.Document;
         let iconDoc = Docs.IconDocument(layoutString);
         iconDoc.title = "ICON" + StrCast(doc.title);
+        iconDoc.labelField = this._fieldKey;
         iconDoc.isMinimized = false;
-        iconDoc.nativeWidth = Number(MINIMIZED_ICON_SIZE);
-        iconDoc.nativeHeight = Number(MINIMIZED_ICON_SIZE);
         iconDoc.width = Number(MINIMIZED_ICON_SIZE);
         iconDoc.height = Number(MINIMIZED_ICON_SIZE);
         iconDoc.x = NumCast(doc.x);
@@ -275,15 +274,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 minDocs.map(minDoc => {
                     minDoc.x = NumCast(minDocs[0].x);
                     minDoc.y = NumCast(minDocs[0].y);
-                    minDoc.linkTags = new List(minDocs.filter(d => d !== minDoc));
-                    if (this._iconifying && selectedDocs[0].props.removeDocument) {
+                    minDoc.linkedIconTags = new List(minDocs.filter(d => d !== minDoc));
+                    if (this._removeIcon && selectedDocs[0].props.removeDocument) {
                         selectedDocs[0].props.removeDocument(minDoc);
                         (minDoc.maximizedDoc as Doc).minimizedDoc = undefined;
                     }
                 });
                 runInAction(() => this._minimizedX = this._minimizedY = 0);
-                if (!this._iconifying) selectedDocs[0].props.toggleMinimized();
-                this._iconifying = false;
+                selectedDocs[0].props.toggleMinimized();
+                this._removeIcon = false;
             });
         }
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 54b721f7b..17c25c9db 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -225,7 +225,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     onDragOver = (): void => {
     }
 
-    bringToFront(doc: Doc) {
+    bringToFront = (doc: Doc) => {
         const docs = (this.children || []);
         docs.slice().sort((doc1, doc2) => {
             if (doc1 === doc) return 1;
@@ -266,6 +266,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             focus: this.focusDocument,
             parentActive: this.props.active,
             whenActiveChanged: this.props.active,
+            bringToFront: this.bringToFront,
         };
     }
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 09f9c8516..53298fbdd 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -112,10 +112,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public toggleIcon = async (): Promise<void> => {
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
-        let minimizedDocSet = Cast(this.props.Document.linkTags, listSpec(Doc));
-        if (!minimizedDocSet) return;
+        let minimizedDocSet = Cast(this.props.Document.linkedIconTags, listSpec(Doc), []);
         let docs = minimizedDocSet.map(d => d);
-        docs.push(this.props.Document);
+        let minimDoc = Cast(this.props.Document.minimizedDoc, Doc);
+        if (minimDoc instanceof Doc) docs.push(minimDoc);
+        else docs.push(this.props.Document);
         docs.map(async minimizedDoc => {
             this.props.addDocument && this.props.addDocument(minimizedDoc, false);
             let maximizedDoc = await Cast(minimizedDoc.maximizedDoc, Doc);
@@ -125,6 +126,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     let maximizedDocMinimizedState = Cast(maximizedDoc.isMinimized, "boolean");
                     isMinimized = (maximizedDocMinimizedState) ? true : false;
                 }
+                if (isMinimized) this.props.bringToFront(maximizedDoc);
                 let minx = NumCast(minimizedDoc.x, undefined);
                 let miny = NumCast(minimizedDoc.y, undefined);
                 let maxx = NumCast(maximizedDoc.x, undefined);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8c245ab3a..892850a69 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -53,6 +53,7 @@ export interface DocumentViewProps {
     parentActive: () => boolean;
     whenActiveChanged: (isActive: boolean) => void;
     toggleMinimized: () => void;
+    bringToFront: (doc: Doc) => void;
 }
 
 const schema = createSchema({
diff --git a/src/client/views/nodes/IconBox.scss b/src/client/views/nodes/IconBox.scss
index ce0ee2e09..85bbdeb59 100644
--- a/src/client/views/nodes/IconBox.scss
+++ b/src/client/views/nodes/IconBox.scss
@@ -4,9 +4,19 @@
     position: absolute;
     left:0;
     top:0;
+    height: 100%;
+    width: max-content;
+    // overflow: hidden;
+    pointer-events: all;
     svg {
-        width: 100% !important;
+        width:  $MINIMIZED_ICON_SIZE !important;
         height: 100%;
         background: white;
     }
+    .iconBox-label {
+        position: inherit;
+        width:max-content;
+        font-size: 14px;
+        margin-top: 3px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index 7a0c49735..08301ae0d 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -2,14 +2,17 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed } from "mobx";
+import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { SelectionManager } from "../../util/SelectionManager";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./IconBox.scss";
-import { Cast } from "../../../new_fields/Types";
-import { Doc } from "../../../new_fields/Doc";
+import { Cast, StrCast, BoolCast } from "../../../new_fields/Types";
+import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
 import { IconField } from "../../../new_fields/IconField";
+import { ContextMenu } from "../ContextMenu";
+import Measure from "react-measure";
+import { MINIMIZED_ICON_SIZE } from "../../views/globalCssVariables.scss";
 
 
 library.add(faCaretUp);
@@ -36,10 +39,31 @@ export class IconBox extends React.Component<FieldViewProps> {
         return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
 
+    setLabelField = (e: React.MouseEvent): void => {
+        this.props.Document.hideLabel = !BoolCast(this.props.Document.hideLabel);
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({
+            description: BoolCast(this.props.Document.hideLabel) ? "show label" : "hide label",
+            event: this.setLabelField
+        });
+    }
+    @observable _panelWidth: number = 0;
+    @observable _panelHeight: number = 0;
     render() {
+        let labelField = StrCast(this.props.Document.labelField);
+        let hideLabel = BoolCast(this.props.Document.hideLabel);
+        let maxDoc = Cast(this.props.Document.maximizedDoc, Doc) as Doc;
+        let label = !hideLabel && maxDoc && labelField ? maxDoc[labelField] : "";
         return (
-            <div className="iconBox-container">
+            <div className="iconBox-container" onContextMenu={this.specificContextMenu}>
                 {this.minimizedIcon}
+                <Measure onResize={(r) => runInAction(() => { if (r.entry.width || BoolCast(this.props.Document.hideLabel)) this.props.Document.nativeWidth = this.props.Document.width = (r.entry.width + Number(MINIMIZED_ICON_SIZE)); })}>
+                    {({ measureRef }) =>
+                        <span ref={measureRef} className="iconBox-label">{label}</span>
+                    }
+                </Measure>
             </div>);
     }
 }
\ No newline at end of file