updates towards a menu

1 files changed, 80 insertions, 21 deletions

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 8f4df4a92..55af4650f 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -15,29 +15,31 @@ import { RichTextField } from "../../../fields/RichTextField";
 import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from "../../../fields/ScriptField";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils";
+import { Docs } from "../../documents/Documents";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { DragManager } from "../../util/DragManager";
 import { Scripting } from "../../util/Scripting";
 import { SelectionManager } from "../../util/SelectionManager";
+import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { AntimodeMenu, AntimodeMenuProps } from "../AntimodeMenu";
 import { EditableView } from "../EditableView";
 import { GestureOverlay } from "../GestureOverlay";
-import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, ActiveArrowStart, ActiveArrowEnd } from "../InkingStroke";
+import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke";
+import { LightboxView } from "../LightboxView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
+import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
 import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
 import { PresBox } from "../nodes/trails/PresBox";
+import { DefaultStyleProvider } from "../StyleProvider";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionLinearView } from "./CollectionLinearView";
 import "./CollectionMenu.scss";
 import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { TabDocView } from "./TabDocView";
-import { LightboxView } from "../LightboxView";
-import { Docs } from "../../documents/Documents";
-import { DocumentManager } from "../../util/DocumentManager";
-import { CollectionDockingView } from "./CollectionDockingView";
-import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
 
 @observer
 export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -46,6 +48,8 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
     @observable SelectedCollection: DocumentView | undefined;
     @observable FieldKey: string;
 
+    private _docBtnRef = React.createRef<HTMLDivElement>();
+
     constructor(props: any) {
         super(props);
         this.FieldKey = "";
@@ -82,30 +86,85 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
         }
     }
 
+    buttonBarXf = () => {
+        if (!this._docBtnRef.current) return Transform.Identity();
+        const { scale, translateX, translateY } = Utils.GetScreenTransform(this._docBtnRef.current);
+        return new Transform(-translateX, -translateY, 1 / scale);
+    }
+
+    @computed get contMenuButtons() {
+        const selDoc = Doc.UserDoc().contextMenuBtns;
+        return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: "35px" }} >
+            <CollectionLinearView
+                Document={selDoc}
+                DataDoc={undefined}
+                fieldKey={"data"}
+                dropAction={"alias"}
+                setHeight={returnFalse}
+                styleProvider={DefaultStyleProvider}
+                layerProvider={undefined}
+                rootSelected={returnTrue}
+                bringToFront={emptyFunction}
+                select={emptyFunction}
+                isContentActive={returnFalse}
+                isSelected={returnFalse}
+                docViewPath={returnEmptyDoclist}
+                moveDocument={returnFalse}
+                CollectionView={undefined}
+                addDocument={returnFalse}
+                addDocTab={returnFalse}
+                pinToPres={emptyFunction}
+                removeDocument={returnFalse}
+                ScreenToLocalTransform={this.buttonBarXf}
+                PanelWidth={() => 100}
+                PanelHeight={() => 35}
+                renderDepth={0}
+                focus={() => undefined}
+                whenChildContentsActiveChanged={emptyFunction}
+                docFilters={returnEmptyFilter}
+                docRangeFilters={returnEmptyFilter}
+                searchFilterDocs={returnEmptyDoclist}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined} />
+        </div>;
+    }
+
     render() {
-        const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} key="pin menu" placement="bottom">
-            <button className="antimodeMenu-button" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
-                <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
-            </button>
-        </Tooltip>;
 
         const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
         const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
 
         const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="properties" placement="bottom">
-            <button className="antimodeMenu-button" key="properties" style={{ backgroundColor: "#424242" }}
+            <div className="collectionMenu-hardCodedButton" key="properties"
                 onPointerDown={this.toggleProperties}>
                 <FontAwesomeIcon icon={propIcon} size="lg" />
-            </button>
+            </div>
         </Tooltip>;
 
-        return this.getElement(!this.SelectedCollection ? [/*button*/] :
-            [<CollectionViewBaseChrome key="chrome"
-                docView={this.SelectedCollection}
-                fieldKey={this.SelectedCollection.LayoutFieldKey}
-                type={StrCast(this.SelectedCollection?.props.Document._viewType, CollectionViewType.Invalid) as CollectionViewType} />,
-                prop,
-                /*button*/]);
+        // NEW BUTTONS
+        //dash col linear view buttons
+        const contMenuButtons = 
+        <div className="collectionMenu-container">
+            {this.contMenuButtons}
+            {prop}
+        </div>;
+
+        return contMenuButtons;
+
+        // const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} key="pin menu" placement="bottom">
+        //     <button className="antimodeMenu-button" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
+        //         <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
+        //     </button>
+        // </Tooltip>;
+
+        // OLD BUTTONS
+        // return this.getElement(!this.SelectedCollection ? [/*button*/] :
+        //     [<CollectionViewBaseChrome key="chrome"
+        //         docView={this.SelectedCollection}
+        //         fieldKey={this.SelectedCollection.LayoutFieldKey}
+        //         type={StrCast(this.SelectedCollection?.props.Document._viewType, CollectionViewType.Invalid) as CollectionViewType} />,
+        //         prop,
+        //         /*button*/]);
     }
 }