blob: 271cf74959ea2cfeb75c48b68893d106f7f07f53 (
plain)
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../fields/Doc';
import { DocCast, StrCast } from '../../fields/Types';
import { addStyleSheet } from '../../Utils';
import { LightboxView } from '../views/LightboxView';
import { MainViewModal } from '../views/MainViewModal';
import './CaptureManager.scss';
import { LinkManager } from './LinkManager';
import { SelectionManager } from './SelectionManager';
@observer
export class CaptureManager extends React.Component<{}> {
public static Instance: CaptureManager;
static _settingsStyle = addStyleSheet();
@observable _document: any;
@observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not.
constructor(props: {}) {
super(props);
CaptureManager.Instance = this;
}
public close = action(() => (this.isOpen = false));
public open = action((doc: Doc) => {
this.isOpen = true;
this._document = doc;
});
@computed get visibilityContent() {
return (
<div className="capture-block">
<div className="capture-block-title">Visibility</div>
<div className="capture-block-radio">
<div className="radio-container">
<input type="radio" value="private" name="visibility" style={{ margin: 0, marginRight: 5 }} /> Private
</div>
<div className="radio-container">
<input type="radio" value="public" name="visibility" style={{ margin: 0, marginRight: 5 }} /> Public
</div>
</div>
</div>
);
}
@computed get linksContent() {
const doc = this._document;
const order: JSX.Element[] = [];
if (doc) {
LinkManager.Links(doc).forEach((l, i) =>
order.push(
<div className="list-item">
<div className="number">{i}</div>
{StrCast(DocCast(l.link_anchor_1)?.title)}
</div>
)
);
}
return (
<div className="capture-block">
<div className="capture-block-title">Links</div>
<div className="capture-block-list">{order}</div>
</div>
);
}
@computed get closeButtons() {
return (
<div className="capture-block">
<div className="buttons">
<div
className="save"
onClick={() => {
LightboxView.Instance.SetLightboxDoc(this._document);
this.close();
}}>
Save
</div>
<div
className="cancel"
onClick={() => {
const selected = SelectionManager.Views.slice();
SelectionManager.DeselectAll();
selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
this.close();
}}>
Cancel
</div>
</div>
</div>
);
}
private get captureInterface() {
return (
<div className="capture-interface">
<div className="capture-t1">
<div className="recordButtonOutline" style={{}}>
<div className="recordButtonInner" style={{}}></div>
</div>
Conversation Capture
</div>
<div className="capture-t2"></div>
{this.visibilityContent}
{this.linksContent}
<div className="close-button" onClick={this.close}>
<FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
</div>
{this.closeButtons}
</div>
);
}
render() {
return (
<MainViewModal
contents={this.captureInterface}
isDisplayed={this.isOpen}
interactive={true}
closeOnExternalClick={this.close}
dialogueBoxStyle={{ width: '500px', height: '350px', border: 'none', background: 'whitesmoke' }}
overlayStyle={{ background: 'black' }}
overlayDisplayedOpacity={0.6}
/>
);
}
}
|
