From 1ea51992bd418c319a253ed41c50497a6b13de25 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 30 Jul 2020 15:31:34 -0500
Subject: fixing layouts UI

---
 src/client/util/CurrentUserUtils.ts                |   6 +-
 src/client/views/MainView.scss                     |  49 +-----
 src/client/views/MainView.tsx                      | 173 ++++++++-------------
 .../collectionFreeForm/PropertiesView.scss         |  27 ++--
 .../collectionFreeForm/PropertiesView.tsx          |  14 +-
 5 files changed, 89 insertions(+), 180 deletions(-)

(limited to 'src')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 725be882e..3d8bd6bd5 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -508,12 +508,12 @@ export class CurrentUserUtils {
         return [
             { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' },
             { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' },
-            { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' },
+            { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
             { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
-            { title: "Sharing", icon: "users", click: 'scriptContext.groupManager.open()' },
+            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' },
             { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' },
             { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' },
-            { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
+            { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' },
         ];
     }
 
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index fe01c27a3..054a409df 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -124,14 +124,13 @@
     }
 
     &:hover {
-        cursor: pointer;
+        cursor: grab;
     }
 }
 
 .mainiView-propertiesView {
     display: flex;
     flex-direction: column;
-    width: 200px;
     height: 100%;
     position: absolute;
     right: 0;
@@ -212,50 +211,6 @@
     }
 }
 
-// .mainView-menuPanel-bottomButton {
-//     width: 45px;
-//     height: 45px;
-//     padding: 10px;
-//     pointer-events: all;
-//     touch-action: none;
-//     //border-radius: inherit;
-//     background: black;
-//     background-color: black;
-//     //border-radius: 100%;
-//     transform-origin: top left;
-//     margin-bottom: 20px;
-//     margin-top: 5px;
-
-//     margin-right: 25px;
-
-//     .mainView-menuPanel-bottomButton-label {
-//         background: black;
-//         color: white;
-//         margin-left: -10px;
-//         border-radius: 8px;
-//         width: 65px;
-//         position: absolute;
-//         text-align: center;
-//         font-size: 9.5px;
-//         margin-top: 2px;
-//         letter-spacing: normal;
-//         padding: 3px;
-//         //margin-bottom: 23px;
-//     }
-
-//     .mainView-menuPanel-bottomButton-icon {
-//         width: 50px;
-//         height: 50px;
-//         color: white;
-//     }
-
-//     svg {
-//         width: 95% !important;
-//         height: 95%;
-//     }
-// }
-
-
 .mainView-searchPanel {
     width: 100%;
     height: 33px;
@@ -342,7 +297,7 @@
     position: absolute;
     z-index: 2;
     touch-action: none;
-    cursor: grab;
+    cursor: ew-resize;
 
     .mainView-libraryHandle-icon {
         width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ec0bff8a7..825a75afa 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -101,6 +101,7 @@ export class MainView extends React.Component {
             return "chevron-right";
         }
     }
+    @observable propertiesDownX: number | undefined;
 
     componentDidMount() {
         DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
@@ -233,7 +234,7 @@ export class MainView extends React.Component {
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
-            _width: this._panelWidth * .7 - this._propertiesWidth,
+            _width: this._panelWidth * .7 - this.propertiesWidth(),
             _height: this._panelHeight,
             title: "Collection " + workspaceCount,
         };
@@ -299,12 +300,12 @@ export class MainView extends React.Component {
 
     @action
     onResize = (r: any) => {
-        this._panelWidth = r.offset.width - this._propertiesWidth;
+        this._panelWidth = r.offset.width - this.propertiesWidth();
         this._panelHeight = r.offset.height;
     }
 
     @action
-    getPWidth = () => this._panelWidth - this._propertiesWidth;
+    getPWidth = () => this._panelWidth - this.propertiesWidth();
 
     getPHeight = () => this._panelHeight;
     getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
@@ -401,20 +402,67 @@ export class MainView extends React.Component {
         }
     }
 
+    @action
+    onDown = (e: React.PointerEvent) => {
+        this.propertiesDownX = e.screenX;
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        e.preventDefault();
+        // setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
+        //     this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
+        //     return false;
+        // }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+    }
+
     @action
     onPointerMove = (e: PointerEvent) => {
-        this.flyoutWidth = Math.max(e.clientX, 0);
-        Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
-        this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+        if (this.propertiesDownX) {
+            this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+            if (this._propertiesWidth < 150) {
+                this._propertiesWidth = 0;
+                this.propertiesDownX = undefined;
+            } else if (this._propertiesWidth > 400) {
+                this._propertiesWidth = 400;
+                this.propertiesDownX = undefined;
+            }
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        } else {
+            this.flyoutWidth = Math.max(e.clientX, 0);
+            Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
+            this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+        }
     }
     @action
     onPointerUp = (e: PointerEvent) => {
-        if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
-            this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
-            this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+        if (this.propertiesDownX) {
+            if (Math.abs(this.propertiesDownX - e.screenX) < 3) {
+                if (this._propertiesWidth < 10) {
+                    this._propertiesWidth = 200;
+                } else {
+                    this._propertiesWidth = 0;
+                }
+            } else {
+                this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+                if (this._propertiesWidth < 150) {
+                    this._propertiesWidth = 0;
+                } else if (this._propertiesWidth > 400) {
+                    this._propertiesWidth = 400;
+                }
+            }
+            this.propertiesDownX = undefined;
+        } else {
+            if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
+                this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
+                this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+            }
         }
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
+
     }
     flyoutWidthFunc = () => this.flyoutWidth;
     addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
@@ -501,91 +549,6 @@ export class MainView extends React.Component {
         </div>;
     }
 
-    // @computed get menuPanel() {
-    //     return <div className="mainView-menuPanel">
-    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
-    //                 onPointerDown={e => this.selectPanel("workspace")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
-    //                     color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
-    //                 onPointerDown={e => this.selectPanel("catalog")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
-    //                     color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
-    //                 onPointerDown={e => this.selectPanel("deleted")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
-    //                     color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 onPointerDown={e => this.selectPanel("upload")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Import </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 //onPointerDown={e => this.selectPanel("sharing")}
-    //                 onClick={() => GroupManager.Instance.open()}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Sharing </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 onPointerDown={e => this.selectPanel("tools")}
-    //                 style={{
-    //                     backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
-    //                 }}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
-    //                     color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
-    //                 onPointerDown={e => this.selectPanel("help")} >
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Help </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 // onPointerDown={e => this.selectPanel("settings")}
-    //                 onClick={() => SettingsManager.Instance.open()}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Settings </div>
-    //             </div>
-    //         </div>
-    //     </div>;
-    // }
-
 
     @action @undoBatch
     closeFlyout = () => {
@@ -606,8 +569,9 @@ export class MainView extends React.Component {
                 case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
                 case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
                 case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
-                case "deleted": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
-                case "Search": this.sidebarContent.proto = CurrentUserUtils.searchStack; break;
+                case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
+                case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
+                case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
             }
             MainView.expandFlyout();
         }
@@ -615,25 +579,21 @@ export class MainView extends React.Component {
     }
 
     @action @undoBatch
-    onDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
-            this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
-            return false;
-        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+    closeProperties = () => {
+        this._propertiesWidth = 0;
     }
 
     @computed get propertiesView() {
         TraceMobx();
         return <div className="mainView-propertiesView" style={{
-            width: `200px`,
             overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
         }}>
             <PropertiesView
-                width={200}
+                width={this.propertiesWidth()}
                 height={this._panelHeight}
                 renderDepth={1}
                 ScreenToLocalTransform={Transform.Identity}
-                onDown={this.onDown}
+                onDown={this.closeProperties}
             />
         </div>;
     }
@@ -643,7 +603,7 @@ export class MainView extends React.Component {
         const n = (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;
+        const rightFlyout = this.propertiesWidth() - 1;
         return !this.userDoc ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
@@ -684,7 +644,8 @@ export class MainView extends React.Component {
                                 <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
                         </div>
                     }
-                    {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
+                    {this.propertiesWidth() < 10 ? (null) :
+                        <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>}
                 </div>
             </div>);
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 83e0fc0d5..76c934551 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -57,7 +57,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -92,7 +91,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -126,7 +124,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -160,7 +157,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -275,7 +271,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -299,18 +294,17 @@
                     cursor: pointer;
                 }
             }
+        }
 
-            .propertiesView-fields-title-checkbox {
-                float: right;
-                height: 20px;
-                margin-top: -13px;
-                margin-left: 115px;
-
-                .propertiesView-fields-title-checkbox-text {
-                    font-size: 7px;
-                    margin-top: -10px;
-                    margin-left: 6px;
-                }
+        .propertiesView-fields-checkbox {
+            float: right;
+            height: 20px;
+            margin-top: -9px;
+
+            .propertiesView-fields-checkbox-text {
+                font-size: 7px;
+                margin-top: -10px;
+                margin-left: 6px;
             }
         }
 
@@ -352,7 +346,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c4291f2a4..976e52fda 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -361,16 +361,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     render() {
 
         if (!this.selectedDoc) {
-            return <div className="propertiesView" >
-                <div className="propertiesView-title">
+            return <div className="propertiesView" style={{ width: this.props.width }}>
+                <div className="propertiesView-title" style={{ width: this.props.width, paddingLeft: 6 }}>
                     No Document Selected
             </div> </div>;
         }
 
         const novice = Doc.UserDoc().noviceMode;
 
-        return <div className="propertiesView" >
-            <div className="propertiesView-title">
+        return <div className="propertiesView" style={{ width: this.props.width }} >
+            <div className="propertiesView-title" style={{ width: this.props.width }}>
                 <div className="propertiesView-title-name">Properties </div>
                 <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                     <FontAwesomeIcon icon="times" color="black" size="sm" />
@@ -381,7 +381,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             </div>
             <div className="propertiesView-settings">
                 <div className="propertiesView-settings-title" style={{ backgroundColor: this.openActions ? "black" : "" }}>
-                    Document Actions
+                    Actions
                     <div className="propertiesView-settings-title-icon"
                         onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
                         <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
@@ -447,9 +447,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         </div>
                     </div>
                 </div>
-                {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
+                {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
                     {this.fieldsCheckbox}
-                    <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+                    <div className="propertiesView-fields-checkbox-text">Layout</div>
                 </div> : null}
                 {this.openFields ?
                     <div className="propertiesView-fields-content">
-- 
cgit v1.2.3-70-g09d2