moved contexts from properties button to properties view section

7 files changed, 66 insertions, 40 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index db32dbaec..759310241 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -825,8 +825,8 @@ export namespace Docs {
 
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
             const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { treeViewLockExpandedView: true, treeViewDefaultExpandedView: "data", ...options, _viewType: CollectionViewType.Docking, dockingConfig: config }, id);
-            const tabs = TreeDocument(documents, { title: "On-Screen Tabs", treeViewLockExpandedView: true, treeViewDefaultExpandedView: "data" });
-            const all = TreeDocument([], { title: "Off-Screen Tabs", treeViewLockExpandedView: true, treeViewDefaultExpandedView: "data" });
+            const tabs = TreeDocument(documents, { title: "On-Screen Tabs", treeViewLockExpandedView: true, treeViewDefaultExpandedView: "data", system: true });
+            const all = TreeDocument([], { title: "Off-Screen Tabs", treeViewLockExpandedView: true, treeViewDefaultExpandedView: "data", system: true });
             Doc.GetProto(inst).data = new List<Doc>([tabs, all]);
             return inst;
         }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b036adcd4..9189c1951 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -357,7 +357,7 @@ export class MainView extends React.Component {
 
     defaultBackgroundColors = (doc: Opt<Doc>, renderDepth: number) => {
         if (doc?.type === DocumentType.COL) {
-            const system = Object.getOwnPropertyNames(doc).indexOf("system") !== -1;
+            const system = Doc.IsSystem(doc);
             return system ? "lightgrey" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
         }
         if (this.darkScheme) {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 63837282c..29aa1ff61 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -558,27 +558,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
-    @computed
-    get contextButton() {
-        if (this.selectedDoc) {
-            return <Tooltip title={<><div className="dash-tooltip">Show Context</div></>} placement="top">
-                <div>
-                    <div className={"propertiesButtons-linkButton-empty"}>
-                        <ParentDocSelector Document={this.selectedDoc} addDocTab={(doc, where) => {
-                            where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
-                                this.selectedDocumentView?.props.addDocTab(doc, "onRight");
-                            return true;
-                        }} />
-                    </div>
-                    <div className="propertiesButtons-title"> context </div>
-                </div>
-            </Tooltip>;
-        } else {
-            return false;
-        }
-
-    }
-
     // @computed
     // get importButton() {
     //     const targetDoc = this.selectedDoc;
@@ -607,8 +586,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isInk = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof InkField;
         const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
         const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false;
-        const hasContext = this.selectedDoc.context ? true : false;
-        const collectionAcl = GetEffectiveAcl(this.selectedDocumentView?.props.ContainingCollectionDoc?.[DataSym]);
+        //const collectionAcl = GetEffectiveAcl(this.selectedDocumentView?.props.ContainingCollectionDoc?.[DataSym]);
 
         return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
             {/* <div className="propertiesButtons-button">
@@ -640,9 +618,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.onClickButton}
             </div>
-            <div className="propertiesButtons-button">
-                {this.contextButton}
-            </div>
             <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
                 {this.considerGoogleDocsPush}
             </div>
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index a6de32145..6556e7889 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -19,6 +19,7 @@ export const Flyout = higflyout.default;
 type SelectorProps = {
     Document: Doc,
     Stack?: any,
+    hideTitle?: boolean,
     addDocTab(doc: Doc, location: string): void
 };
 
@@ -35,20 +36,15 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
         this._reaction?.();
     }
     async fetchDocuments() {
-        const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document));
-        const containerProtoSets = await Promise.all(aliases.map(async alias =>
-            ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs)));
+        const aliases = await SearchUtil.GetAliasesOfDocument(this.props.Document);
+        const containerProtoSets = await Promise.all(aliases.map(async alias => ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs)));
         const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>());
-        const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => {
-            return (SearchUtil.GetAliasesOfDocument(container));
-        }));
+        const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => SearchUtil.GetAliasesOfDocument(container)));
         const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>());
-        const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => {
-            return (SearchUtil.GetAliasesOfDocument(dp));
-        }));
+        const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => SearchUtil.GetAliasesOfDocument(dp)));
         const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>()).keys());
         runInAction(() => {
-            this._docs = doclayouts.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.Document }));
+            this._docs = doclayouts.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).filter(doc => !Doc.IsSystem(doc)).map(doc => ({ col: doc, target: this.props.Document }));
             this._otherDocs = [];
         });
     }
@@ -68,7 +64,7 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
 
     render() {
         return <div >
-            <p key="contexts">Contexts:</p>
+            {this.props.hideTitle ? (null) : <p key="contexts">Contexts:</p>}
             {this._docs.map(doc => <p key={doc.col[Id] + doc.target[Id]}><a onClick={this.getOnClick(doc)}>{doc.col.title?.toString()}</a></p>)}
             {this._otherDocs.length ? <hr key="hr" /> : null}
             {this._otherDocs.map(doc => <p key={"p" + doc.col[Id] + doc.target[Id]}><a onClick={this.getOnClick(doc)}>{doc.col.title?.toString()}</a></p>)}
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index e3ced887d..254afeb0a 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -394,6 +394,40 @@
             cursor: auto;
         }
     }
+    .propertiesView-contexts {
+
+        .propertiesView-contexts-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            .propertiesView-contexts-title-icon {
+                float: right;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-contexts-content {
+            overflow: hidden;
+            padding: 10px;
+        }
+
+    }
 
     .propertiesView-layout {
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c5d396859..f3e3c77f7 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -25,6 +25,8 @@ import { PropertiesButtons } from "../../PropertiesButtons";
 import { FormatShapePane } from "./FormatShapePane";
 import "./FormatShapePane.scss";
 import "./PropertiesView.scss";
+import { CollectionDockingView } from "../CollectionDockingView";
+import { ParentDocSelector, SelectorContextMenu } from "../ParentDocumentSelector";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -64,6 +66,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable openSharing: boolean = true;
     @observable openFields: boolean = true;
     @observable openLayout: boolean = true;
+    @observable openContexts: boolean = true;
     @observable openAppearance: boolean = true;
     @observable openTransform: boolean = true;
     // @observable selectedUser: string = "";
@@ -251,6 +254,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         ref && observer.observe(ref);
     }
 
+    @computed get contexts() {
+        return !this.selectedDoc ? (null) : <SelectorContextMenu Document={this.selectedDoc} hideTitle={true} addDocTab={(doc, where) => CollectionDockingView.AddRightSplit(doc)} />;
+    }
+
     previewBackground = () => "lightgrey";
     @computed get layoutPreview() {
         if (this.selectedDoc) {
@@ -959,6 +966,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 {novice ? this.noviceFields : this.expandedField}
                             </div>}
                     </div>
+                    <div className="propertiesView-contexts">
+                        <div className="propertiesView-contexts-title"
+                            onPointerDown={action(() => this.openContexts = !this.openContexts)}
+                            style={{ backgroundColor: this.openContexts ? "black" : "" }}>
+                            Contexts
+                        <div className="propertiesView-contexts-title-icon">
+                                <FontAwesomeIcon icon={this.openContexts ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
+                        </div>
+                        {this.openContexts ? <div className="propertiesView-contexts-content"  >{this.contexts}</div> : null}
+                    </div>
                     <div className="propertiesView-layout">
                         <div className="propertiesView-layout-title"
                             onPointerDown={action(() => this.openLayout = !this.openLayout)}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index c2b491454..6218fda26 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -344,6 +344,9 @@ export namespace Doc {
     export function IsBaseProto(doc: Doc) {
         return GetT(doc, "baseProto", "boolean", true);
     }
+    export function IsSystem(doc: Doc) {
+        return GetT(doc, "system", "boolean", true);
+    }
     export async function SetInPlace(doc: Doc, key: string, value: Field | undefined, defaultProto: boolean) {
         const hasProto = doc.proto instanceof Doc;
         const onDeleg = Object.getOwnPropertyNames(doc).indexOf(key) !== -1;