diff options
author | bob <bcz@cs.brown.edu> | 2019-04-03 12:42:32 -0400 |
---|---|---|
committer | bob <bcz@cs.brown.edu> | 2019-04-03 12:42:32 -0400 |
commit | 5fbee077873c3dd0a9b5939babbaa1fd4dfe1393 (patch) | |
tree | 1418a22161e88c734f51c4e1a117c3957a14115d /src/server/authentication/controllers/WorkspacesMenu.tsx | |
parent | d9076d48a17a4ec2a5b4f4dbd82160bd10f1af22 (diff) | |
parent | c406c8d123ce0aa9d63fb8a4dd90adfe83d2889d (diff) |
merged with master
Diffstat (limited to 'src/server/authentication/controllers/WorkspacesMenu.tsx')
-rw-r--r-- | src/server/authentication/controllers/WorkspacesMenu.tsx | 89 |
1 files changed, 89 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..8e14cf98e --- /dev/null +++ b/src/server/authentication/controllers/WorkspacesMenu.tsx @@ -0,0 +1,89 @@ +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: () => void; + allWorkspaces: Document[]; + isShown: () => boolean; + toggle: () => void; +} + +@observer +export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> { + constructor(props: WorkspaceMenuProps) { + super(props); + this.addNewWorkspace = this.addNewWorkspace.bind(this); + } + + @action + addNewWorkspace() { + this.props.new(); + this.props.toggle(); + } + + render() { + return ( + <div + style={{ + width: "auto", + maxHeight: '200px', + overflow: 'scroll', + borderRadius: 5, + position: "absolute", + top: 78, + left: this.props.isShown() ? 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 |