From b10f96c6a8b3187707b6d7356e7b0fea9b8b6e72 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 29 Jul 2020 15:31:40 -0500
Subject: tried making documents into buttons

---
 src/client/views/MainView.scss                  |  26 +--
 src/client/views/MainView.tsx                   | 253 +++++++++++++-----------
 src/client/views/PropertiesButtons.tsx          |   4 +-
 src/client/views/nodes/DocumentContentsView.tsx |   3 +-
 src/client/views/nodes/MenuIconBox.scss         |  49 +++++
 src/client/views/nodes/MenuIconBox.tsx          |  41 ++++
 6 files changed, 247 insertions(+), 129 deletions(-)
 create mode 100644 src/client/views/nodes/MenuIconBox.scss
 create mode 100644 src/client/views/nodes/MenuIconBox.tsx

(limited to 'src/client/views')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 7318d451b..8bf38ebe9 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -155,8 +155,9 @@
 
 .mainView-menuPanel {
 
-    max-width: 60px;
+    width: 60px;
     background-color: black;
+    height: 100%;
     //overflow-y: scroll;
     //overflow-x: hidden;
 
@@ -165,22 +166,23 @@
         padding: 7px;
         padding-left: 7px;
         width: 100%;
+
         .mainView-menuPanel-button-wrap {
-        width: 45px;
-        /* padding: 5px; */
-        touch-action: none;
-        background: black;
-        transform-origin: top left;
-        /* margin-bottom: 5px; */
-        margin-top: 5px;
-        margin-right: 25px;
-        border-radius: 8px;
-    
+            width: 45px;
+            /* padding: 5px; */
+            touch-action: none;
+            background: black;
+            transform-origin: top left;
+            /* margin-bottom: 5px; */
+            margin-top: 5px;
+            margin-right: 25px;
+            border-radius: 8px;
+
             &:hover {
                 background: rgb(61, 61, 61);
                 cursor: pointer;
             }
-        }  
+        }
     }
 
     .mainView-menuPanel-button-label {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 891d08214..5f7f7ca03 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -381,6 +381,7 @@ export class MainView extends React.Component {
     onPointerDown = (e: React.PointerEvent) => {
         if (this._flyoutTranslate) {
             this.panelContent = "none";
+            CurrentUserUtils.panelContent = "none";
             this._canClick = true;
             this._flyoutSizeOnDown = e.clientX;
             document.removeEventListener("pointermove", this.onPointerMove);
@@ -462,125 +463,125 @@ export class MainView extends React.Component {
             {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={() => 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}
-    //             scriptContext={this}
-    //         />
-    //     </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>
+        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={() => 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}
+                scriptContext={this}
+            />
         </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
     selectPanel = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -605,6 +606,30 @@ export class MainView extends React.Component {
         return true;
     }
 
+    @action
+    selectMenu = (str: string) => {
+        if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) {
+            CurrentUserUtils.panelContent = "none";
+            this.flyoutWidth = 0;
+        } else {
+            CurrentUserUtils.panelContent = str;
+            MainView.expandFlyout();
+            if (str === "tools") {
+                CurrentUserUtils.toolsBtn;
+                this.sidebarContent.proto = CurrentUserUtils.toolsStack;
+            } else if (str === "workspace") {
+                this.sidebarContent.proto = CurrentUserUtils.workspaceStack;
+            } else if (str === "catalog") {
+                this.sidebarContent.proto = CurrentUserUtils.catalogStack;
+            } else if (str === "deleted") {
+                this.sidebarContent.proto = CurrentUserUtils.closedStack;
+            } else if (str === "search") {
+                this.sidebarContent.proto = CurrentUserUtils.searchStack;
+            }
+        }
+        return true;
+    }
+
     @action
     onDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index eecf670e6..3113d8cb4 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -392,10 +392,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             this.selectedDocumentView?.toggleDetail();
         } else if (value === "linkInPlace") {
             this.selectedDocumentView?.noOnClick();
-            this.selectedDocumentView?.toggleFollowInPlace();
+            this.selectedDocumentView?.toggleFollowLink("inPlace", true, false);
         } else if (value === "linkOnRight") {
             this.selectedDocumentView?.noOnClick();
-            this.selectedDocumentView?.toggleFollowOnRight();
+            this.selectedDocumentView?.toggleFollowLink("onRight", false, false);
         }
     }
 
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 47dc0a773..d72133cb9 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox";
 import { DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import { FontIconBox } from "./FontIconBox";
+import { MenuIconBox } from "./MenuIconBox";
 import { FieldView, FieldViewProps } from "./FieldView";
 import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 import { ImageBox } from "./ImageBox";
@@ -190,7 +191,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 blacklistedAttrs={[]}
                 renderInWrapper={false}
                 components={{
-                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
+                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
new file mode 100644
index 000000000..1b72f5a8f
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.scss
@@ -0,0 +1,49 @@
+.menuButton {
+    //padding: 7px;
+    padding-left: 7px;
+    width: 100%;
+    width: 60px;
+    height: 70px;
+
+    .menuButton-wrap {
+        width: 45px;
+        /* padding: 5px; */
+        touch-action: none;
+        background: black;
+        transform-origin: top left;
+        /* margin-bottom: 5px; */
+        margin-top: 5px;
+        margin-right: 25px;
+        border-radius: 8px;
+
+        &:hover {
+            background: rgb(61, 61, 61);
+            cursor: pointer;
+        }
+    }
+
+    .menuButton-label {
+        color: white;
+        margin-right: 4px;
+        border-radius: 8px;
+        width: 42px;
+        position: relative;
+        text-align: center;
+        font-size: 8px;
+        margin-top: 1px;
+        letter-spacing: normal;
+        padding: 3px;
+        background-color: inherit;
+    }
+
+    .menuButton-icon {
+        width: auto;
+        height: 35px;
+        padding: 5px;
+    }
+
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
new file mode 100644
index 000000000..e1656fcba
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.tsx
@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { DocComponent } from '../DocComponent';
+import './MenuIconBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { StrCast, Cast, NumCast } from '../../../fields/Types';
+import { Utils } from "../../../Utils";
+import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
+import { Doc } from '../../../fields/Doc';
+import { ScriptField } from '../../../fields/ScriptField';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
+const MenuIconSchema = createSchema({
+    icon: "string"
+});
+
+type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
+const MenuIconDocument = makeInterface(MenuIconSchema);
+@observer
+export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
+    _ref: React.RefObject<HTMLButtonElement> = React.createRef();
+
+    render() {
+
+        const menuBTN = <div className="menuButton" style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}>
+            <div className="menuButton-wrap"
+                style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}
+            //onPointerDown={this.dataDoc.click}
+            >
+                <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any}
+                    color={CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white"} size="lg" />
+                <div className="menuButton-label"
+                    style={{ color: CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white" }}> {this.dataDoc.title} </div>
+            </div>
+        </div>;
+
+        return menuBTN;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2