From 58b780563c7fc4a1496f5c676f2d14faddb096e0 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Fri, 3 Jul 2020 17:32:40 -0700 Subject: merge with master --- src/client/views/AntimodeMenu.scss | 31 ++ src/client/views/AntimodeMenu.tsx | 2 +- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/GestureOverlay.scss | 2 +- src/client/views/GestureOverlay.tsx | 21 +- src/client/views/GlobalKeyHandler.ts | 2 +- src/client/views/InkingStroke.tsx | 4 +- src/client/views/MainView.tsx | 6 +- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/CollectionStackingView.scss | 14 +- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 21 +- .../views/collections/CollectionViewChromes.scss | 6 + .../views/collections/CollectionViewChromes.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 +- .../collectionFreeForm/InkOptionsMenu.scss | 39 ++- .../collectionFreeForm/InkOptionsMenu.tsx | 6 +- src/client/views/nodes/AudioBox.scss | 153 ++++++---- src/client/views/nodes/AudioBox.tsx | 6 +- src/client/views/nodes/ColorBox.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 35 +-- src/client/views/nodes/ImageBox.tsx | 11 +- src/client/views/nodes/LinkDocPreview.tsx | 2 +- src/client/views/nodes/PDFBox.scss | 325 +++++++++++++-------- src/client/views/nodes/PDFBox.tsx | 9 +- src/client/views/nodes/PresBox.scss | 65 ++++- src/client/views/nodes/RadialMenu.tsx | 6 +- .../nodes/formattedText/FormattedTextBox.scss | 297 ++++++++++++++++++- .../views/nodes/formattedText/FormattedTextBox.tsx | 66 ++++- .../formattedText/FormattedTextBoxComment.tsx | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 42 +-- .../views/nodes/formattedText/RichTextRules.ts | 2 +- src/client/views/nodes/formattedText/marks_rts.ts | 20 +- .../nodes/formattedText/prosemirrorPatches.js | 55 ++++ src/client/views/pdf/PDFMenu.scss | 19 ++ src/client/views/pdf/PDFMenu.tsx | 68 ++++- src/client/views/pdf/PDFViewer.tsx | 12 +- .../views/presentationview/PresElementBox.scss | 64 +++- .../views/presentationview/PresElementBox.tsx | 2 +- 40 files changed, 1092 insertions(+), 346 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index e56574bb7..be21cec12 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -42,4 +42,35 @@ background-repeat: no-repeat; background-position: left center; } +} + +@media only screen and (max-device-width: 480px) { + .antimodeMenu-cont { + height: 100px; + width: 100vw; + + &.with-rows { + flex-direction: column-reverse; + } + + .antimodeMenu-row { + display: flex; + height: 100%; + width: 100%; + } + + .antimodeMenu-button { + background-color: transparent; + width: 100px; + height: 100px; + + &.active { + background-color: #121212; + } + } + + .antimodeMenu-button:hover { + background-color: #121212; + } + } } \ No newline at end of file diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index a4634103c..cb293dee4 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -128,7 +128,7 @@ export default abstract class AntimodeMenu extends React.Component { } protected getDragger = () => { - return
; + return
; } protected getElement(buttons: JSX.Element[]) { diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c05ca33fb..40a9d0c45 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -293,4 +293,4 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
; } -} \ No newline at end of file +} diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss index 107077792..f61f4a05e 100644 --- a/src/client/views/GestureOverlay.scss +++ b/src/client/views/GestureOverlay.scss @@ -1,7 +1,7 @@ .gestureOverlay-cont { width: 100vw; height: 100vh; - position: absolute; + position: fixed; top: 0; left: 0; touch-action: none; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 85695bbac..487467b2b 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -5,7 +5,6 @@ import { Doc } from "../../fields/Doc"; import { InkData, InkTool } from "../../fields/InkField"; import { Cast, FieldValue, NumCast } from "../../fields/Types"; import MobileInkOverlay from "../../mobile/MobileInkOverlay"; -import MobileInterface from "../../mobile/MobileInterface"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; import { MobileInkOverlayContent } from "../../server/Message"; import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from "../../Utils"; @@ -112,7 +111,7 @@ export default class GestureOverlay extends Touchable { onReactTouchStart = (te: React.TouchEvent) => { document.removeEventListener("touchmove", this.onReactHoldTouchMove); document.removeEventListener("touchend", this.onReactHoldTouchEnd); - if (RadialMenu.Instance._display === true) { + if (RadialMenu.Instance?._display === true) { te.preventDefault(); te.stopPropagation(); RadialMenu.Instance.closeMenu(); @@ -162,8 +161,8 @@ export default class GestureOverlay extends Touchable { // -- radial menu code -- this._holdTimer = setTimeout(() => { console.log("hold"); - const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); - const pt: any = te.touches[te.touches.length - 1]; + const target = document.elementFromPoint(te.changedTouches?.item(0).clientX, te.changedTouches?.item(0).clientY); + const pt: any = te.touches[te.touches?.length - 1]; if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) { target?.dispatchEvent( new CustomEvent>("dashOnTouchHoldStart", @@ -580,14 +579,6 @@ export default class GestureOverlay extends Touchable { const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top })); //push first points to so interactionUtil knows pointer is up this._points.push({ X: this._points[0].X, Y: this._points[0].Y }); - if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) { - DocServer.Mobile.dispatchGesturePoints({ - points: this._points, - bounds: B, - color: ActiveInkColor(), - width: ActiveInkWidth() - }); - } const initialPoint = this._points[0.]; const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + (this.height); @@ -725,7 +716,7 @@ export default class GestureOverlay extends Touchable { this._points = []; switch (shape) { //must push an extra point in the end so InteractionUtils knows pointer is up. - //must be (points[0].X,points[0]-1) + //must be (points[0].X,points[0]-1) case "rectangle": this._points.push({ X: left, Y: top }); this._points.push({ X: right, Y: top }); @@ -912,7 +903,7 @@ export default class GestureOverlay extends Touchable { } } -// export class +// export class export enum ToolglassTools { InkToText = "inktotext", @@ -949,4 +940,4 @@ Scripting.addGlobal(function resetPen() { }, "resets the pen tool"); Scripting.addGlobal(function createText(text: any, x: any, y: any) { GestureOverlay.Instance.dispatchGesture("text", [{ X: x, Y: y }], text); -}, "creates a text document with inputted text and coordinates", "(text: any, x: any, y: any)"); \ No newline at end of file +}, "creates a text document with inputted text and coordinates", "(text: any, x: any, y: any)"); diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index c85849adb..ff8380965 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -335,4 +335,4 @@ export default class KeyManager { }; }); -} \ No newline at end of file +} diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index c32e76cec..7d6e7e5dd 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -72,8 +72,8 @@ export class InkingStroke extends ViewBoxBaseComponent { - ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" }); - ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" }); + ContextMenu.Instance?.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" }); + ContextMenu.Instance?.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" }); }} > diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f6db1af66..c0edf7032 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -99,7 +99,7 @@ export class MainView extends React.Component { window.removeEventListener("keydown", KeyManager.Instance.handle); window.addEventListener("keydown", KeyManager.Instance.handle); window.addEventListener("paste", KeyManager.Instance.paste as any); - document.addEventListener("dash", (e: any) => { // event used by chrome plugin to tell Dash which document to focus on + document.addEventListener("dash", (e: any) => { // event used by chrome plugin to tell Dash which document to focus on const id = FormattedTextBox.GetDocFromUrl(e.detail); DocServer.GetRefField(id).then(doc => { if (doc instanceof Doc) { @@ -107,6 +107,10 @@ export class MainView extends React.Component { } }); }); + document.addEventListener("linkComplete", (e: any) => { // event used by Hypothes.is plugin to tell Dash when an annotation has been linked + const annotatedUrl = e.details; + console.log("This website " + annotatedUrl + " has a linked annotation"); + }); } componentWillUnMount() { diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index f65a89422..bd0e4fc9a 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -87,7 +87,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onContextMenu = (e: React.MouseEvent): void => { // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout if (!e.isPropagationStopped()) { - ContextMenu.Instance.addItem({ + ContextMenu.Instance?.addItem({ description: "Make Hero Image", event: () => { const index = NumCast(this.layoutDoc._itemIndex); (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField); diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 3d8ec2fd5..8fc74a9c6 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -33,8 +33,9 @@ .collectionStackingViewFieldColumn { height: max-content; } + .collectionStackingViewFieldColumnDragging { - height:100%; + height: 100%; } .collectionSchemaView-previewDoc { @@ -425,4 +426,15 @@ .rc-switch-checked .rc-switch-inner { left: 8px; } +} + +@media only screen and (max-device-width: 480px) { + + .collectionStackingView .collectionStackingView-columnDragger, + .collectionMasonryView .collectionStackingView-columnDragger { + width: 0.1; + height: 0.1; + opacity: 0; + font-size: 0; + } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 7bdf5e7df..9d8790dda 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -498,4 +498,4 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) ); } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 705fbdd34..10ebe571b 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -180,7 +180,7 @@ export class CollectionView extends Touchable boolean): boolean => { if (Doc.AreProtosEqual(this.props.Document, targetCollection)) { @@ -202,7 +202,7 @@ export class CollectionView extends Touchable { return (null); - // this section would display an icon in the bototm right of a collection to indicate that all + // this section would display an icon in the bototm right of a collection to indicate that all // photos had been processed through Google's content analysis API and Google's tags had been // assigned to the documents googlePhotosTags field. // const children = DocListCast(this.props.Document[this.props.fieldKey]); @@ -277,7 +277,8 @@ export class CollectionView extends Touchable { - if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + const cm = ContextMenu.Instance; + if (cm && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 this.setupViewTypes("Add a Perspective...", vtype => { const newRendition = Doc.MakeAlias(this.props.Document); newRendition._viewType = vtype; @@ -285,7 +286,7 @@ export class CollectionView extends Touchable this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }); if (this.props.Document.childLayout instanceof Doc) { @@ -296,9 +297,9 @@ export class CollectionView extends Touchable this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" }); - !existing && ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" }); + !existing && cm.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" }); - const existingOnClick = ContextMenu.Instance.findByDescription("OnClick..."); + const existingOnClick = cm.findByDescription("OnClick..."); const onClicks = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; const funcs = [ { key: "onChildClick", name: "On Child Clicked" }, @@ -314,13 +315,13 @@ export class CollectionView extends Touchable this.props.Document[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)), })); - !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); if (!Doc.UserDoc().noviceMode) { - const more = ContextMenu.Instance.findByDescription("More..."); + const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; moreItems.push({ description: "Export Image Hierarchy", icon: "columns", event: () => ImageUtils.ExportHierarchyToFileSystem(this.props.Document) }); - !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); + !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); } } } @@ -571,5 +572,3 @@ export class CollectionView extends Touchable); } } - - diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 822e15aed..b1e8d20ad 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -81,6 +81,12 @@ // margin-top: 10px; } + @media only screen and (max-device-width: 480px) { + .collectionViewBaseChrome-collapse { + display: none; + } + } + .collectionViewBaseChrome-template, .collectionViewBaseChrome-viewModes { display: grid; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 4e91a2928..7f1fe7649 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -300,7 +300,7 @@ export class CollectionViewBaseChrome extends React.Component - {Object.values(CollectionViewType).map(type => ["invalid", "docking"].includes(type) ? (null) : ( + {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (