aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CaptureManager.scss84
-rw-r--r--src/client/util/CaptureManager.tsx66
-rw-r--r--src/client/views/collections/CollectionMenu.tsx3
-rw-r--r--src/client/views/collections/CollectionStackedTimeline.tsx8
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
-rw-r--r--src/client/views/nodes/VideoBox.tsx3
6 files changed, 146 insertions, 20 deletions
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index 8447bd2d5..71539ee1e 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -60,8 +60,7 @@
}
.capture-block {
- display: flex;
- border-bottom: 1px solid grey;
+ display: block;
padding-bottom: 8px;
padding-top: 6px;
@@ -72,10 +71,87 @@
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';
+ }
}
- &:last-child {
- border-bottom: none;
+ .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;
+ }
}
}
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index cea0c182f..c38337c91 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -2,11 +2,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, computed, observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
-import { Doc } from "../../fields/Doc";
+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;
@@ -35,23 +38,69 @@ export class CaptureManager extends React.Component<{}> {
@computed get visibilityContent() {
return <div className="capture-block">
- <div className="capture-block-title">Visibility
- <div className="visibility-radio">
- <input type="radio" value="private" name="visibility" /> Private
- <input type="radio" value="public" name="visibility" /> Public
+ <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>
+ }
@@ -72,6 +121,7 @@ export class CaptureManager extends React.Component<{}> {
<div className="close-button" onClick={this.close}>
<FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
</div>
+ {this.closeButtons}
</div>;
}
@@ -82,7 +132,7 @@ export class CaptureManager extends React.Component<{}> {
isDisplayed={this.isOpen}
interactive={true}
closeOnExternalClick={this.close}
- dialogueBoxStyle={{ width: "500px", height: "300px", border: "none", background: Cast(Doc.SharingDoc().userColor, "string", null) }}
+ dialogueBoxStyle={{ width: "500px", height: "350px", border: "none", background: "whitesmoke" }}
overlayStyle={{ background: "black" }}
overlayDisplayedOpacity={0.6}
/>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 3299ea3a9..6816b4739 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -403,7 +403,6 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
doc.x = 0;
doc.y = 0;
doc.startRec = true;
- Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
CollectionDockingView.AddSplit(doc, "right");
}
@@ -548,8 +547,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
<div className="collectionMenu-divider" key="divider1"></div>
{this.aliasButton}
{/* {this.pinButton} */}
- {/* {this.pinWithViewButton} */}
{this.toggleOverlayButton}
+ {this.pinWithViewButton}
<div className="collectionMenu-divider" key="divider2"></div>
{this.subChrome}
<div className="collectionMenu-divider" key="divider3"></div>
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 6a1242f20..4f9f297a2 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -234,15 +234,15 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
return level;
}
- dictationHeight = () => this.props.PanelHeight() / 3;
- timelineContentHeight = () => this.props.PanelHeight() * 2 / 3;
+ dictationHeight = () => "50%";
+ timelineContentHeight = () => this.props.PanelHeight() / 2;
dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight());
@computed get renderDictation() {
const dictation = Cast(this.dataDoc[this.props.dictationKey], Doc, null);
- return !dictation ? (null) : <div style={{ position: "absolute", height: this.dictationHeight(), top: this.timelineContentHeight(), background: "tan" }}>
+ return !dictation ? (null) : <div style={{ position: "absolute", height: this.dictationHeight(), top: "50%", background: "tan" }}>
<DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
Document={dictation}
- PanelHeight={this.dictationHeight}
+ PanelHeight={() => "100%"}
isAnnotationOverlay={true}
isDocumentActive={returnFalse}
select={emptyFunction}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 26cf52f17..153603c3c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1105,7 +1105,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
position: this.props.Document.isInkMask ? "absolute" : undefined,
transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
width: xshift() ?? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%`,
- height: yshift() ?? (this.fitWidth ? `${this.panelHeight}px` :
+ height: this.props.Document.type === DocumentType.VID ? "100%" : yshift() ?? (this.fitWidth ? `${this.panelHeight}px` :
`${100 * this.effectiveNativeHeight / this.effectiveNativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%`),
}}>
<DocumentViewInternal {...this.props}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fb58ddefc..ab072a97f 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -417,12 +417,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
onTimelineHdlDown = action((e: React.PointerEvent) => {
this._clicking = true;
+ console.log('timeline click');
setupMoveUpEvents(this, e,
action((e: PointerEvent) => {
this._clicking = false;
if (this.isContentActive()) {
const local = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformPoint(e.clientX, e.clientY);
- this.layoutDoc._timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100));
+ this.layoutDoc._timelineHeightPercent = 50;
}
return false;
}), emptyFunction,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 22:55:52 +0000