From d0b90a0a7849cdc06f4332df9ad6eae5342520ca Mon Sep 17 00:00:00 2001 From: Geireann <60007097+geireann@users.noreply.github.com> Date: Thu, 8 Apr 2021 04:07:42 -0400 Subject: changes --- src/client/util/CaptureManager.scss | 84 ++++++++++++++++++++-- src/client/util/CaptureManager.tsx | 66 ++++++++++++++--- src/client/views/collections/CollectionMenu.tsx | 3 +- .../collections/CollectionStackedTimeline.tsx | 8 +-- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 3 +- 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
-
Visibility -
- Private - Public +
Visibility
+
+
+ Private +
+
+ Public
; } @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( +
+
{i}
+ {(l.anchor1 as Doc).title} +
+ ); + } + }); + } + return
Links
- +
+ {order} +
; } - + @computed get closeButtons() { + return
+
+
{ + LightboxView.SetLightboxDoc(this._document); + this.close(); + }}> + Save +
+
{ + const selected = SelectionManager.Views().slice(); + SelectionManager.DeselectAll(); + selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); + this.close(); + }}> + Cancel +
+
+
+ } @@ -72,6 +121,7 @@ export class CaptureManager extends React.Component<{}> {
+ {this.closeButtons}
; } @@ -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
{this.aliasButton} {/* {this.pinButton} */} - {/* {this.pinWithViewButton} */} {this.toggleOverlayButton} + {this.pinWithViewButton}
{this.subChrome}
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 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) :
+ return !dictation ? (null) :
"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 { 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()}%`), }}> { 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, -- cgit v1.2.3-70-g09d2