1 files changed, 96 insertions, 0 deletions
diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx
new file mode 100644
index 000000000..1533b1e62
--- /dev/null
+++ b/src/server/authentication/controllers/WorkspacesMenu.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { observable, action, configure, reaction, computed, ObservableMap, runInAction } from 'mobx';
+import { observer } from "mobx-react";
+import './WorkspacesMenu.css'
+import { Document } from '../../../fields/Document';
+import { EditableView } from '../../../client/views/EditableView';
+import { KeyStore } from '../../../fields/KeyStore';
+
+export interface WorkspaceMenuProps {
+    active: Document | undefined;
+    open: (workspace: Document) => void;
+    new: (init: boolean) => void;
+    allWorkspaces: Document[];
+}
+
+@observer
+export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> {
+    static Instance: WorkspacesMenu;
+    @observable private workspacesExposed: boolean = false;
+
+    constructor(props: WorkspaceMenuProps) {
+        super(props);
+        WorkspacesMenu.Instance = this;
+        this.addNewWorkspace = this.addNewWorkspace.bind(this);
+    }
+
+    @action
+    addNewWorkspace() {
+        this.props.new(false);
+        this.toggle();
+    }
+
+    @action
+    toggle() {
+        this.workspacesExposed = !this.workspacesExposed;
+    }
+
+    render() {
+        return (
+            <div
+                style={{
+                    width: "auto",
+                    maxHeight: '200px',
+                    overflow: 'scroll',
+                    borderRadius: 5,
+                    position: "absolute",
+                    top: 78,
+                    left: this.workspacesExposed ? 11 : -500,
+                    background: "white",
+                    border: "black solid 2px",
+                    transition: "all 1s ease",
+                    zIndex: 15,
+                    padding: 10,
+                    paddingRight: 12,
+                }}>
+                <img
+                    src="https://bit.ly/2IBBkxk"
+                    style={{
+                        width: 20,
+                        height: 20,
+                        marginTop: 3,
+                        marginLeft: 3,
+                        marginBottom: 3,
+                        cursor: "grab"
+                    }}
+                    onClick={this.addNewWorkspace}
+                />
+                {this.props.allWorkspaces.map((s, i) =>
+                    <div
+                        key={s.Id}
+                        onContextMenu={(e) => {
+                            e.preventDefault();
+                            this.props.open(s);
+                        }}
+                        style={{
+                            marginTop: 10,
+                            color: s === this.props.active ? "red" : "black"
+                        }}
+                    >
+                        <span>{i + 1} - </span>
+                        <EditableView
+                            display={"inline"}
+                            GetValue={() => { return s.Title }}
+                            SetValue={(title: string): boolean => {
+                                s.SetText(KeyStore.Title, title);
+                                return true;
+                            }}
+                            contents={s.Title}
+                            height={20}
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+\ No newline at end of file