aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CaptureManager.scss175
-rw-r--r--src/client/util/CaptureManager.tsx140
-rw-r--r--src/client/util/CurrentUserUtils.ts2
3 files changed, 316 insertions, 1 deletions
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
new file mode 100644
index 000000000..71539ee1e
--- /dev/null
+++ b/src/client/util/CaptureManager.scss
@@ -0,0 +1,175 @@
+@import "../views/globalCssVariables";
+
+.capture-interface {
+ //background-color: whitesmoke !important;
+ width: 450px;
+
+ button {
+ background: #315a96;
+ outline: none;
+ border-radius: 5px;
+ border: 0px;
+ color: #fcfbf7;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ padding: 10px;
+ margin: 10px;
+ transition: transform 0.2s;
+ margin: 2px;
+ }
+}
+
+.capture-t1 {
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ font-size: 20px;
+ font-family: 'Roboto';
+ font-weight: 600;
+ color: black;
+
+ .recordButtonOutline {
+ border-radius: 100%;
+ width: 25px;
+ height: 25px;
+ margin-right: 10px;
+ border: solid 1px #a94442;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .recordButtonInner {
+ border-radius: 100%;
+ width: 70%;
+ height: 70%;
+ background: #a94442;
+ }
+}
+
+.capture-t2 {
+ font-size: 12px;
+ padding-right: 15px;
+ color: black;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ /* right: 135; */
+ // position: absolute;
+ // left: 243;
+}
+
+.capture-block {
+ display: block;
+ padding-bottom: 8px;
+ padding-top: 6px;
+
+ .capture-block-title {
+ font-size: 16;
+ font-weight: bold;
+ text-align: left;
+ color: black;
+ width: 80;
+ margin-right: 50px;
+ margin-bottom: 5px;
+ }
+
+ .capture-block-list {
+ height: 135px;
+ width: calc(100% + 15px);
+ overflow: scroll;
+ }
+
+ .capture-block-radio {
+ font-size: 12;
+ display: block;
+ font-weight: normal;
+
+ .radio-container {
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ font-size: 13px;
+ font-family: 'Roboto';
+ }
+ }
+
+ .list-item {
+ display: flex;
+ height: 25px;
+ font-family: 'Roboto';
+ font-size: 13px;
+
+ .number {
+ width: 20px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #BDDBE8;
+ border-radius: 100%;
+ font-weight: 800;
+ margin-right: 5px;
+ }
+ }
+
+ .buttons {
+ display: flex;
+ position: absolute;
+ bottom: 0;
+ right: 15;
+ justify-content: flex-end;
+ align-items: center;
+ height: 60px;
+
+ .save {
+ cursor: pointer;
+ width: 80px;
+ height: 40px;
+ font-size: 14px;
+ display: flex;
+ font-weight: bold;
+ justify-content: center;
+ align-items: center;
+ background: #337ab7;
+ color: whitesmoke;
+ border-radius: 5px;
+ text-transform: uppercase;
+ }
+
+ .cancel {
+ cursor: pointer;
+ width: 80px;
+ height: 40px;
+ font-size: 14px;
+ display: flex;
+ font-weight: 100;
+ justify-content: center;
+ align-items: center;
+ background: #ccc;
+ color: black;
+ border-radius: 5px;
+ text-transform: uppercase;
+ margin-left: 10px;
+ }
+ }
+}
+
+.close-button {
+ position: absolute;
+ top: 10;
+ right: 10;
+ background:transparent;
+ border-radius:100%;
+ width: 25px;
+ height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: 0.2s;
+}
+
+.close-button:hover {
+ background: rgba(0,0,0,0.1);
+}
+
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
new file mode 100644
index 000000000..c38337c91
--- /dev/null
+++ b/src/client/util/CaptureManager.tsx
@@ -0,0 +1,140 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { convertToObject } from "typescript";
+import { Doc, DocListCast } from "../../fields/Doc";
+import { BoolCast, StrCast, Cast } from "../../fields/Types";
+import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils";
+import { LightboxView } from "../views/LightboxView";
+import { MainViewModal } from "../views/MainViewModal";
+import "./CaptureManager.scss";
+import { SelectionManager } from "./SelectionManager";
+import { undoBatch } from "./UndoManager";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+@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) {
+ console.log('title', doc.title);
+ console.log('links', doc.links);
+ const linkDocs = DocListCast(doc.links);
+ const firstDocs = linkDocs.filter(linkDoc => Doc.AreProtosEqual(linkDoc.anchor1 as Doc, doc) || Doc.AreProtosEqual((linkDoc.anchor1 as Doc).annotationOn as Doc, doc)); // link docs where 'doc' is anchor1
+ const secondDocs = linkDocs.filter(linkDoc => Doc.AreProtosEqual(linkDoc.anchor2 as Doc, doc) || Doc.AreProtosEqual((linkDoc.anchor2 as Doc).annotationOn as Doc, doc)); // link docs where 'doc' is anchor2
+ linkDocs.forEach((l, i) => {
+ if (l) {
+ console.log(i, (l.anchor1 as Doc).title);
+ console.log(i, (l.anchor2 as Doc).title);
+ order.push(
+ <div className="list-item">
+ <div className="number">{i}</div>
+ {(l.anchor1 as Doc).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.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}
+ />
+ }
+} \ No newline at end of file
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 0875d9be7..cb8bf5a7f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -423,7 +423,7 @@ export class CurrentUserUtils {
((doc.emptyScript as Doc).proto as Doc)["dragFactory-count"] = 0;
}
if (doc.emptyScreenshot === undefined) {
- doc.emptyScreenshot = Docs.Create.ScreenshotDocument("", { _fitWidth: true, _width: 400, _height: 200, title: "screen snapshot", system: true, cloneFieldFilter: new List<string>(["system"]) });
+ doc.emptyScreenshot = Docs.Create.ScreenshotDocument("empty screenshot", { _fitWidth: true, _width: 400, _height: 200, system: true, cloneFieldFilter: new List<string>(["system"]) });
}
if (doc.emptyAudio === undefined) {
doc.emptyAudio = Docs.Create.AudioDocument(nullAudio, { _width: 200, title: "audio recording", system: true, cloneFieldFilter: new List<string>(["system"]) });
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-20 00:29:29 +0000