1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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={() => s.Title}
SetValue={(title: string): boolean => {
s.SetText(KeyStore.Title, title);
return true;
}}
contents={s.Title}
height={20}
/>
</div>
)}
</div>
);
}
}
|
