fixed right handle issues

5 files changed, 180 insertions, 163 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c89f9b8fe..d41aa4b58 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -498,14 +498,14 @@ export class CurrentUserUtils {
         title: string, icon: string, click: string, backgroundColor?: string,
     }[] {
         return [
-            { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
-            { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
-            { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
+            { title: "Workspace", icon: "desktop", click: 'MainView.selectPanel("workspace")' },
+            { title: "Catalog", icon: "file", click: 'MainView.selectPanel("catalog")' },
+            { title: "Recently Deleted", icon: "trash-alt", click: 'MainView.selectPanel("deleted")' },
             { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
             { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
-            { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
-            { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
-            { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
+            { title: "Tools", icon: "wrench", click: 'MainView.selectPanel("tools")' },
+            { title: "Search", icon: "search", click: 'MainView.selectPanel("search")' },
+            { title: "Help", icon: "question-circle", click: 'MainView.selectPanel("help")' },
             { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
         ];
     }
@@ -514,7 +514,7 @@ export class CurrentUserUtils {
         if (doc.menuStackBtns === undefined) {
             const buttons = CurrentUserUtils.menuBtnDescriptions();
             const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
-                _width: 100, _height: 100,
+                _width: 40, _height: 40,
                 icon,
                 title,
                 onClick: click ? ScriptField.MakeScript(click) : undefined,
@@ -522,18 +522,19 @@ export class CurrentUserUtils {
             }));
 
             doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
-                _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, lockedPosition: true, _chromeStatus: "disabled",
             }));
         }
         return doc.menuStackBtns as Doc;
     }
 
     static setupMenuPanel(doc: Doc) {
+        doc.menuStack = undefined;
         if (doc.menuStack === undefined) {
             const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
-                title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
-                _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                _yMargin: 0, _autoHeight: true, _xMargin: 0,
+                _width: 80, lockedPosition: true, _chromeStatus: "disabled",
             })) as any as Doc;
         }
         return doc.menuStack;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index bd074adea..10e7f471b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -137,7 +137,8 @@
     right: 0;
     top: 0;
     border-left: solid 1px;
-    z-index: 10;
+    z-index: 10000;
+    cursor: auto;
 }
 
 .mainView-flyoutContainer {
@@ -160,7 +161,7 @@
     padding-right: 50px;
 
     overflow-y: scroll;
-    overflow-x: hidden;
+    overflow-x: clip;
 
     .mainView-menuPanel-button {
         width: 45px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bc20059e8..beee9289e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -84,7 +84,7 @@ export class MainView extends React.Component {
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
     @observable private _flyoutTranslate: boolean = false;
-    @observable public flyoutWidth: number = 250;
+    @observable public flyoutWidth: number = 275;
     private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
 
     @computed private get userDoc() { return Doc.UserDoc(); }
@@ -96,6 +96,11 @@ export class MainView extends React.Component {
     @observable public panelContent: string = "none";
     @observable public showProperties: boolean = false;
     public isPointerDown = false;
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
 
     @observable _propertiesWidth: number = 0;
     propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
@@ -447,148 +452,152 @@ export class MainView extends React.Component {
                     bringToFront={emptyFunction}
                     docFilters={returnEmptyFilter}
                     ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
+                    ContainingCollectionDoc={undefined}
+                    relative={true}
+                />
             </div>
             {this.docButtons}</div>;
     }
 
-    @computed get menuPanel() {
-
-        return <div className="mainView-menuPanel">
-            <DocumentView
-                Document={Doc.UserDoc().menuStack as Doc}
-                DataDoc={undefined}
-                LibraryPath={emptyPath}
-                addDocument={undefined}
-                addDocTab={this.addDocTabFunc}
-                pinToPres={emptyFunction}
-                NativeHeight={returnZero}
-                NativeWidth={returnZero}
-                rootSelected={returnTrue}
-                removeDocument={returnFalse}
-                onClick={undefined}
-                ScreenToLocalTransform={this.mainContainerXf}
-                ContentScaling={returnOne}
-                PanelWidth={() => 100}
-                PanelHeight={this.getContentsHeight}
-                renderDepth={0}
-                focus={emptyFunction}
-                backgroundColor={this.defaultBackgroundColors}
-                parentActive={returnTrue}
-                whenActiveChanged={emptyFunction}
-                bringToFront={emptyFunction}
-                docFilters={returnEmptyFilter}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />
-        </div>;
-    }
-
     // @computed get menuPanel() {
+
     //     return <div className="mainView-menuPanel">
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("workspace")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Workspace </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("catalog")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Catalog </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("deleted")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //                 marginBottom: "30px"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Recently Closed </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("upload")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Import </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             //onPointerDown={e => this.selectPanel("sharing")}
-    //             onClick={() => GroupManager.Instance.open()}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Sharing </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("tools")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //                 //marginBottom: "45px"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Tools </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("search")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //                 //marginBottom: "45px"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Search </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-bottomButton"
-    //             onPointerDown={e => this.selectPanel("help")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "323232",
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-bottomButton-label"> Help </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-bottomButton"
-    //             // onPointerDown={e => this.selectPanel("settings")}
-    //             onClick={() => SettingsManager.Instance.open()}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "323232",
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
-    //         </button>
+    //         <DocumentView
+    //             Document={Doc.UserDoc().menuStack as Doc}
+    //             DataDoc={undefined}
+    //             LibraryPath={emptyPath}
+    //             addDocument={undefined}
+    //             addDocTab={this.addDocTabFunc}
+    //             pinToPres={emptyFunction}
+    //             NativeHeight={returnZero}
+    //             NativeWidth={returnZero}
+    //             rootSelected={returnTrue}
+    //             removeDocument={returnFalse}
+    //             onClick={undefined}
+    //             ScreenToLocalTransform={this.mainContainerXf}
+    //             ContentScaling={returnOne}
+    //             PanelWidth={() => 80}
+    //             PanelHeight={this.getContentsHeight}
+    //             renderDepth={0}
+    //             focus={emptyFunction}
+    //             backgroundColor={this.defaultBackgroundColors}
+    //             parentActive={returnTrue}
+    //             whenActiveChanged={emptyFunction}
+    //             bringToFront={emptyFunction}
+    //             docFilters={returnEmptyFilter}
+    //             ContainingCollectionView={undefined}
+    //             ContainingCollectionDoc={undefined}
+    //             relative={true}
+    //         />
     //     </div>;
     // }
 
+    @computed get menuPanel() {
+        return <div className="mainView-menuPanel">
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("workspace")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Workspace </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("catalog")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Catalog </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("deleted")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                    marginBottom: "30px"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Recently Closed </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("upload")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Import </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                //onPointerDown={e => this.selectPanel("sharing")}
+                onClick={() => GroupManager.Instance.open()}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Sharing </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("tools")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                    //marginBottom: "45px"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Tools </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("search")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                    //marginBottom: "45px"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Search </div>
+            </button>
+
+            <button className="mainView-menuPanel-bottomButton"
+                onPointerDown={e => this.selectPanel("help")}
+                style={{
+                    padding: "5px",
+                    background: "323232",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
+                <div className="mainView-menuPanel-bottomButton-label"> Help </div>
+            </button>
+
+            <button className="mainView-menuPanel-bottomButton"
+                // onPointerDown={e => this.selectPanel("settings")}
+                onClick={() => SettingsManager.Instance.open()}
+                style={{
+                    padding: "5px",
+                    background: "323232",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
+                <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
+            </button>
+        </div>;
+    }
+
     @action
     selectPanel = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -623,23 +632,24 @@ export class MainView extends React.Component {
 
     @computed get propertiesView() {
         TraceMobx();
-        return this._propertiesWidth === 0 ? (null) :
-            <div className="mainView-propertiesView" style={{
-                width: `${this.propertiesWidth()}px`,
-                overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
-            }}>
-                <PropertiesView
-                    width={this._propertiesWidth}
-                    height={this._panelHeight}
-                    renderDepth={1}
-                    ScreenToLocalTransform={Transform.Identity}
-                />
-            </div>;
+        return <div className="mainView-propertiesView" style={{
+            width: `200px`,
+            overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
+        }}>
+            <PropertiesView
+                width={200}
+                height={this._panelHeight}
+                renderDepth={1}
+                ScreenToLocalTransform={Transform.Identity}
+            />
+        </div>;
     }
 
     @computed get mainContent() {
         const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
+
+        const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
         return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
@@ -675,7 +685,7 @@ export class MainView extends React.Component {
                     {this.dockingContent}
                     {this.showProperties ? (null) :
                         <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown}
-                            style={{ right: this._propertiesWidth - 1, top: "45%" }}>
+                            style={{ right: rightFlyout, top: "45%" }}>
                             <div className="mainView-propertiesDragger-icon">
                                 <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
                         </div>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 98eae1ac7..f64ef2211 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -2,7 +2,6 @@
 
     background-color: rgb(205, 205, 205);
     height: 100%;
-    z-index: 1;
     font-family: "Noto Sans";
     cursor: auto;
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 998c6798e..02fe60255 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -100,6 +100,7 @@ export interface DocumentViewProps {
     layoutKey?: string;
     radialMenu?: String[];
     display?: string;
+    relative?: boolean;
 }
 
 @observer
@@ -1021,8 +1022,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
     @computed get contents() {
+        const pos = this.props.relative ? "relative " : "absolute";
         TraceMobx();
-        return (<div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        return (<div style={{ position: pos, width: "100%", height: "100%" }}>
             <DocumentContentsView key={1}
                 docFilters={this.props.docFilters}
                 ContainingCollectionView={this.props.ContainingCollectionView}
@@ -1109,8 +1111,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     @computed get innards() {
         TraceMobx();
+        const pos = this.props.relative ? "relative" : undefined;
         if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) {  // this happens when the document is a tree view label (but not an anchor dot)
-            return <div className="documentView-treeView" style={{ maxWidth: this.props.PanelWidth() || undefined }}>
+            return <div className="documentView-treeView" style={{
+                maxWidth: this.props.PanelWidth() || undefined,
+                position: pos
+            }}>
                 {StrCast(this.props.Document.title)}
                 {this.allAnchors}
             </div>;
@@ -1235,7 +1241,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 background: finalColor,
                 opacity: finalOpacity,
                 fontFamily: StrCast(this.Document._fontFamily, "inherit"),
-                fontSize: Cast(this.Document._fontSize, "string", null)
+                fontSize: Cast(this.Document._fontSize, "string", null),
             }}>
             {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <>
                 {this.innards}