From bf94b54dba511bb4badb0ffcb9f017dc9a81942e Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Fri, 15 May 2020 20:13:20 -0700 Subject: branch setup --- .../collections/CollectionCarousel3DView.scss | 68 +++++++++++ .../views/collections/CollectionCarousel3DView.tsx | 125 +++++++++++++++++++++ 2 files changed, 193 insertions(+) create mode 100644 src/client/views/collections/CollectionCarousel3DView.scss create mode 100644 src/client/views/collections/CollectionCarousel3DView.tsx (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss new file mode 100644 index 000000000..2142eca39 --- /dev/null +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -0,0 +1,68 @@ +.collectionCarouselView-outer { + background: white; + height: 100%; + + .collectionCarouselView-center-container { + width: 70%; + margin: auto; + overflow: hidden; //fix ContentFittingView position!! + + .collectionCarouselView-caption { + height: 50; + display: inline-block; + width: 100%; + margin: auto; + } + + .collectionCarouselView-image { + height: calc(100% - 50px); + width: 70%; + display: inline-block; + user-select: none; + } + } + + .collectionCarouselView-prev { + position: absolute; + height: 50%; + width: 50%; + background-color: lightgrey; + left: 0; + top: 25%; + } + + .collectionCarouselView-next { + position: absolute; + height: 50%; + width: 50%; + background-color: lightgrey; + right: 0; + top: 25%; + } +} + +.carouselView-back, +.carouselView-fwd { + position: absolute; + display: flex; + top: 50%; + width: 30; + height: 30; + align-items: center; + border-radius: 5px; + justify-content: center; + background: rgba(255, 255, 255, 0.46); +} + +.carouselView-fwd { + right: 0; +} + +.carouselView-back { + left: 0; +} + +.carouselView-back:hover, +.carouselView-fwd:hover { + background: lightgray; +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx new file mode 100644 index 000000000..4de35a978 --- /dev/null +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -0,0 +1,125 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { observable, computed } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { documentSchema } from '../../../new_fields/documentSchemas'; +import { makeInterface } from '../../../new_fields/Schema'; +import { NumCast, StrCast } from '../../../new_fields/Types'; +import { DragManager } from '../../util/DragManager'; +import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; +import "./CollectionCarousel3DView.scss"; +import { CollectionSubView } from './CollectionSubView'; +import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'; +import { Doc } from '../../../new_fields/Doc'; +import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; +import { ContextMenu } from '../ContextMenu'; +import { ObjectField } from '../../../new_fields/ObjectField'; + +type Carousel3DDocument = makeInterface<[typeof documentSchema,]>; +const Carousel3DDocument = makeInterface(documentSchema); + +@observer +export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocument) { + private _dropDisposer?: DragManager.DragDropDisposer; + + componentWillUnmount() { this._dropDisposer?.(); } + + protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view + this._dropDisposer?.(); + if (ele) { + this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); + } + } + + advance = (e: React.MouseEvent) => { + e.stopPropagation(); + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; + } + goback = (e: React.MouseEvent) => { + e.stopPropagation(); + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + } + + panelHeight = () => this.props.PanelHeight() - 50; + @computed get content() { + const index = NumCast(this.layoutDoc._itemIndex); + return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : + <> +
+
+
+
+ +
+
+ +
+
+ ; + } + @computed get buttons() { + return <> +
+ +
+
+ +
+ ; + } + + + 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({ + 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); + }, icon: "plus" + }); + } + } + _downX = 0; + _downY = 0; + onPointerDown = (e: React.PointerEvent) => { + this._downX = e.clientX; + this._downY = e.clientY; + console.log("CAROUSEL down"); + document.addEventListener("pointerup", this.onpointerup); + } + private _lastTap: number = 0; + private _doubleTap = false; + onpointerup = (e: PointerEvent) => { + console.log("CAROUSEL up"); + this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2); + this._lastTap = Date.now(); + } + + onClick = (e: React.MouseEvent) => { + if (this._doubleTap) { + e.stopPropagation(); + this.props.Document.isLightboxOpen = true; + } + } + + render() { + return
+ {this.content} + {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)} +
; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 3c6e288fa031e8871618170d3b8d6db66dd3c66b Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Sun, 17 May 2020 23:38:58 -0700 Subject: add 3D carousel view to code base --- src/client/documents/Documents.ts | 4 ++ .../views/collections/CollectionCarousel3DView.tsx | 60 ++++++++++------------ src/client/views/collections/CollectionView.tsx | 4 ++ .../views/collections/CollectionViewChromes.tsx | 1 + 4 files changed, 35 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 18a0b43ff..47e13c8e2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -670,6 +670,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Carousel }); } + export function Carousel3DDocument(documents: Array, options: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Carousel3D }); + } + export function SchemaDocument(schemaColumns: SchemaHeaderField[], documents: Array, options: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List(schemaColumns), ...options, _viewType: CollectionViewType.Schema }); } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 4de35a978..8839658d6 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -2,21 +2,20 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observable, computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { documentSchema } from '../../../new_fields/documentSchemas'; -import { makeInterface } from '../../../new_fields/Schema'; -import { NumCast, StrCast } from '../../../new_fields/Types'; +import { documentSchema, collectionSchema } from '../../../fields/documentSchemas'; +import { makeInterface } from '../../../fields/Schema'; +import { NumCast, StrCast, ScriptCast, Cast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import "./CollectionCarousel3DView.scss"; import { CollectionSubView } from './CollectionSubView'; -import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'; -import { Doc } from '../../../new_fields/Doc'; -import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; +import { Doc } from '../../../fields/Doc'; import { ContextMenu } from '../ContextMenu'; -import { ObjectField } from '../../../new_fields/ObjectField'; +import { ObjectField } from '../../../fields/ObjectField'; +import { returnFalse } from '../../../Utils'; -type Carousel3DDocument = makeInterface<[typeof documentSchema,]>; -const Carousel3DDocument = makeInterface(documentSchema); +type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; +const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @observer export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocument) { @@ -39,44 +38,37 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume e.stopPropagation(); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - panelHeight = () => this.props.PanelHeight() - 50; @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : <> -
-
-
-
- -
-
- -
+
+
+
+
; } @computed get buttons() { return <>
- +
- +
; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 3b2e5e4fc..8d6866632 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -21,6 +21,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { ScriptBox } from '../ScriptBox'; import { Touchable } from '../Touchable'; import { CollectionCarouselView } from './CollectionCarouselView'; +import { CollectionCarousel3DView } from './CollectionCarousel3DView'; import { CollectionDockingView } from "./CollectionDockingView"; import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @@ -63,6 +64,7 @@ export enum CollectionViewType { Multirow = "multirow", Time = "time", Carousel = "carousel", + Carousel3D = "3D carousel", Linear = "linear", Staff = "staff", Map = "map", @@ -183,6 +185,7 @@ export class CollectionView extends Touchable); } case CollectionViewType.Pile: { return (); } case CollectionViewType.Carousel: { return (); } + case CollectionViewType.Carousel3D: { return (); } case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (); } case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (); } case CollectionViewType.Time: { return (); } @@ -222,6 +225,7 @@ export class CollectionView extends Touchable func(CollectionViewType.Multirow), icon: "columns" }); subItems.push({ description: "Masonry", event: () => func(CollectionViewType.Masonry), icon: "columns" }); subItems.push({ description: "Carousel", event: () => func(CollectionViewType.Carousel), icon: "columns" }); + subItems.push({ description: "3D Carousel", event: () => func(CollectionViewType.Carousel3D), icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 5dc0b09ac..53860d8ad 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -75,6 +75,7 @@ export class CollectionViewBaseChrome extends React.Component Date: Mon, 18 May 2020 00:33:19 -0700 Subject: rough 3D layout, add prev/next images --- .../collections/CollectionCarousel3DView.scss | 27 ++++++--------- .../views/collections/CollectionCarousel3DView.tsx | 39 +++++++++++++++++++--- 2 files changed, 46 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 2142eca39..ee92cde4c 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -2,27 +2,21 @@ background: white; height: 100%; - .collectionCarouselView-center-container { + .collectionCarouselView-image { + overflow: hidden; //fix ContentFittingView size + position: absolute; + height: 100%; width: 70%; + top: 0; + left: 0; + right: 0; + bottom: 0; margin: auto; - overflow: hidden; //fix ContentFittingView position!! - - .collectionCarouselView-caption { - height: 50; - display: inline-block; - width: 100%; - margin: auto; - } - - .collectionCarouselView-image { - height: calc(100% - 50px); - width: 70%; - display: inline-block; - user-select: none; - } + user-select: none; } .collectionCarouselView-prev { + overflow: hidden; position: absolute; height: 50%; width: 50%; @@ -32,6 +26,7 @@ } .collectionCarouselView-next { + overflow: hidden; position: absolute; height: 50%; width: 50%; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 8839658d6..4452ceb6b 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -34,17 +34,48 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume e.stopPropagation(); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; } + goback = (e: React.MouseEvent) => { e.stopPropagation(); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - panelHeight = () => this.props.PanelHeight() - 50; + @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); + const prevIndex = (index - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : <> -
-
+
+ +
+
+ +
Date: Mon, 18 May 2020 00:59:32 -0700 Subject: fit ContentFittingViews into main/prev/next panels --- src/client/views/collections/CollectionCarousel3DView.scss | 11 +++-------- src/client/views/collections/CollectionCarousel3DView.tsx | 11 +++++++++-- 2 files changed, 12 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index ee92cde4c..0f2d20242 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -3,10 +3,9 @@ height: 100%; .collectionCarouselView-image { - overflow: hidden; //fix ContentFittingView size position: absolute; height: 100%; - width: 70%; + width: 60%; top: 0; left: 0; right: 0; @@ -16,21 +15,17 @@ } .collectionCarouselView-prev { - overflow: hidden; position: absolute; height: 50%; - width: 50%; - background-color: lightgrey; + width: 30%; left: 0; top: 25%; } .collectionCarouselView-next { - overflow: hidden; position: absolute; height: 50%; - width: 50%; - background-color: lightgrey; + width: 30%; right: 0; top: 25%; } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 4452ceb6b..c2ed39cc9 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -40,6 +40,10 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } + mainPanelWidth = () => this.props.PanelWidth() * 0.6; + sidePanelWidth = () => this.props.PanelWidth() * 0.3; + sidePanelHeight = () => this.props.PanelHeight() * 0.5; + @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); const prevIndex = (index - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; @@ -55,7 +59,8 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume LayoutTemplateString={this.props.ChildLayoutString} Document={this.childLayoutPairs[prevIndex].layout} DataDoc={this.childLayoutPairs[prevIndex].data} - PanelHeight={this.props.PanelHeight} + PanelWidth={this.sidePanelWidth} + PanelHeight={this.sidePanelHeight} ScreenToLocalTransform={this.props.ScreenToLocalTransform} bringToFront={returnFalse} parentActive={this.props.active} @@ -70,7 +75,8 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume LayoutTemplateString={this.props.ChildLayoutString} Document={this.childLayoutPairs[nextIndex].layout} DataDoc={this.childLayoutPairs[nextIndex].data} - PanelHeight={this.props.PanelHeight} + PanelWidth={this.sidePanelWidth} + PanelHeight={this.sidePanelHeight} ScreenToLocalTransform={this.props.ScreenToLocalTransform} bringToFront={returnFalse} parentActive={this.props.active} @@ -85,6 +91,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume LayoutTemplateString={this.props.ChildLayoutString} Document={this.childLayoutPairs[index].layout} DataDoc={this.childLayoutPairs[index].data} + PanelWidth={this.mainPanelWidth} PanelHeight={this.props.PanelHeight} ScreenToLocalTransform={this.props.ScreenToLocalTransform} bringToFront={returnFalse} -- cgit v1.2.3-70-g09d2 From 8d4b00c3e2b62b1e83997f60e7df249e84766bdc Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 20 May 2020 00:44:27 -0700 Subject: basic image captioning --- .../collections/CollectionCarousel3DView.scss | 7 +++++++ .../views/collections/CollectionCarousel3DView.tsx | 23 ++++++++++++++++++---- 2 files changed, 26 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 0f2d20242..c1260f899 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -2,6 +2,13 @@ background: white; height: 100%; + .test-button { + position: absolute; + top: 0; + left: 0; + z-index: 999; + } + .collectionCarouselView-image { position: absolute; height: 100%; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index c2ed39cc9..d957b8749 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -13,6 +13,7 @@ import { Doc } from '../../../fields/Doc'; import { ContextMenu } from '../ContextMenu'; import { ObjectField } from '../../../fields/ObjectField'; import { returnFalse } from '../../../Utils'; +import { ScriptField } from '../../../fields/ScriptField'; type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @@ -40,6 +41,18 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } + addCaption = (e: React.MouseEvent) => { + e.stopPropagation(); + const index = NumCast(this.layoutDoc._itemIndex); + this.childLayoutPairs[index].layout._showCaption = "caption"; + } + + // @computed get gobackScript() { + // return ScriptField.MakeScript("this.layoutDoc._itemIndex = index", + // { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name, firstDoc: Doc.name }, + // { index: (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length }); + // } + mainPanelWidth = () => this.props.PanelWidth() * 0.6; sidePanelWidth = () => this.props.PanelWidth() * 0.3; sidePanelHeight = () => this.props.PanelHeight() * 0.5; @@ -50,10 +63,12 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : <> -
+ +
-
+
Date: Wed, 20 May 2020 02:14:58 -0700 Subject: added 3D perspective --- src/client/views/collections/CollectionCarousel3DView.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index c1260f899..7ae9dd2c6 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,6 +1,7 @@ .collectionCarouselView-outer { background: white; height: 100%; + perspective: 30em; .test-button { position: absolute; @@ -12,7 +13,7 @@ .collectionCarouselView-image { position: absolute; height: 100%; - width: 60%; + width: 50%; top: 0; left: 0; right: 0; @@ -24,17 +25,19 @@ .collectionCarouselView-prev { position: absolute; height: 50%; - width: 30%; + width: 25%; left: 0; top: 25%; + transform: rotateY(-20deg) } .collectionCarouselView-next { position: absolute; height: 50%; - width: 30%; + width: 25%; right: 0; top: 25%; + transform: rotateY(20deg) } } -- cgit v1.2.3-70-g09d2 From 210ce6f29e1674d4e2af893a9c5c995506e0c4b7 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 20 May 2020 23:04:09 -0700 Subject: eliminated prev/next buttons, add caption by clicking on image --- src/client/views/.DS_Store | Bin 6148 -> 6148 bytes .../collections/CollectionCarousel3DView.scss | 6 +++ .../views/collections/CollectionCarousel3DView.tsx | 57 ++++++++------------- 3 files changed, 26 insertions(+), 37 deletions(-) (limited to 'src') diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 5008ddfcf..3717a2923 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 7ae9dd2c6..25d1df2f4 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -20,6 +20,8 @@ bottom: 0; margin: auto; user-select: none; + transition: transform 0.5s; + transform-style: preserve-3d; } .collectionCarouselView-prev { @@ -65,4 +67,8 @@ .carouselView-back:hover, .carouselView-fwd:hover { background: lightgray; +} + +.carouselView-fwd:hover~.collectionCarouselView-image { + transform: translateX(50px) } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index d957b8749..fd1785641 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -1,4 +1,3 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observable, computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -31,28 +30,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } } - advance = (e: React.MouseEvent) => { - e.stopPropagation(); - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; - } - - goback = (e: React.MouseEvent) => { - e.stopPropagation(); - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; - } - addCaption = (e: React.MouseEvent) => { e.stopPropagation(); const index = NumCast(this.layoutDoc._itemIndex); - this.childLayoutPairs[index].layout._showCaption = "caption"; + if (this.childLayoutPairs[index].layout._showCaption !== "caption") { + this.childLayoutPairs[index].layout._showCaption = "caption"; + } } - // @computed get gobackScript() { - // return ScriptField.MakeScript("this.layoutDoc._itemIndex = index", - // { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name, firstDoc: Doc.name }, - // { index: (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length }); - // } - mainPanelWidth = () => this.props.PanelWidth() * 0.6; sidePanelWidth = () => this.props.PanelWidth() * 0.3; sidePanelHeight = () => this.props.PanelHeight() * 0.5; @@ -63,12 +48,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : <> - -
+
-
+
; } - @computed get buttons() { - return <> -
- -
-
- -
- ; - } - 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 @@ -164,7 +148,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume render() { return
{this.content} - {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)}
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 07566108db7da0a8e30dcb4c6b884482b57394a1 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 20 May 2020 23:15:06 -0700 Subject: code clean up --- .../collections/CollectionCarousel3DView.scss | 37 ---------------------- .../views/collections/CollectionCarousel3DView.tsx | 25 +++++---------- 2 files changed, 8 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 25d1df2f4..7da007ef3 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -3,13 +3,6 @@ height: 100%; perspective: 30em; - .test-button { - position: absolute; - top: 0; - left: 0; - z-index: 999; - } - .collectionCarouselView-image { position: absolute; height: 100%; @@ -41,34 +34,4 @@ top: 25%; transform: rotateY(20deg) } -} - -.carouselView-back, -.carouselView-fwd { - position: absolute; - display: flex; - top: 50%; - width: 30; - height: 30; - align-items: center; - border-radius: 5px; - justify-content: center; - background: rgba(255, 255, 255, 0.46); -} - -.carouselView-fwd { - right: 0; -} - -.carouselView-back { - left: 0; -} - -.carouselView-back:hover, -.carouselView-fwd:hover { - background: lightgray; -} - -.carouselView-fwd:hover~.collectionCarouselView-image { - transform: translateX(50px) } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index fd1785641..649ca4eba 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -30,18 +30,17 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } } - addCaption = (e: React.MouseEvent) => { - e.stopPropagation(); - const index = NumCast(this.layoutDoc._itemIndex); - if (this.childLayoutPairs[index].layout._showCaption !== "caption") { - this.childLayoutPairs[index].layout._showCaption = "caption"; - } + @computed get changeIndexScript() { + return ScriptField.MakeScript( + "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)", + { fieldKey: String.name, collectionLayoutDoc: Doc.name }, + { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc } + ); } mainPanelWidth = () => this.props.PanelWidth() * 0.6; sidePanelWidth = () => this.props.PanelWidth() * 0.3; sidePanelHeight = () => this.props.PanelHeight() * 0.5; - @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); const prevIndex = (index - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; @@ -51,11 +50,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
Date: Fri, 22 May 2020 17:08:16 -0700 Subject: styling changes --- package-lock.json | 44 ++++++++++++++++------ .../collections/CollectionCarousel3DView.scss | 10 ++--- .../views/collections/CollectionCarousel3DView.tsx | 43 ++++++++++----------- 3 files changed, 59 insertions(+), 38 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 6532f27ec..23d9fc590 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2702,7 +2702,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2720,11 +2721,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2737,15 +2740,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2848,7 +2854,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2858,6 +2865,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2870,17 +2878,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2897,6 +2908,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -2952,7 +2964,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -2977,7 +2990,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2987,6 +3001,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3055,7 +3070,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3085,6 +3101,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3102,6 +3119,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3140,11 +3158,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 7da007ef3..df64d8cbe 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,11 +1,11 @@ .collectionCarouselView-outer { background: white; height: 100%; - perspective: 30em; + perspective: 40em; - .collectionCarouselView-image { + .collectionCarouselView-center { position: absolute; - height: 100%; + height: 80%; width: 50%; top: 0; left: 0; @@ -23,7 +23,7 @@ width: 25%; left: 0; top: 25%; - transform: rotateY(-20deg) + transform: rotateY(-20deg); } .collectionCarouselView-next { @@ -32,6 +32,6 @@ width: 25%; right: 0; top: 25%; - transform: rotateY(20deg) + transform: rotateY(20deg); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 649ca4eba..0e704a1a0 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -38,8 +38,9 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume ); } - mainPanelWidth = () => this.props.PanelWidth() * 0.6; - sidePanelWidth = () => this.props.PanelWidth() * 0.3; + mainPanelWidth = () => this.props.PanelWidth() * 0.5; + mainPanelHeight = () => this.props.PanelHeight() * 0.8; + sidePanelWidth = () => this.props.PanelWidth() * 0.25; sidePanelHeight = () => this.props.PanelHeight() * 0.5; @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); @@ -47,31 +48,35 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : <> -
+
-
+
-
+
Date: Sat, 23 May 2020 23:57:10 -0700 Subject: reorganized & condensed render function --- .../views/collections/CollectionCarousel3DView.tsx | 87 +++++++++------------- 1 file changed, 37 insertions(+), 50 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 0e704a1a0..f95645a6c 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -43,62 +43,49 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume sidePanelWidth = () => this.props.PanelWidth() * 0.25; sidePanelHeight = () => this.props.PanelHeight() * 0.5; @computed get content() { - const index = NumCast(this.layoutDoc._itemIndex); - const prevIndex = (index - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; - const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; - return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : + const centerIndex = NumCast(this.layoutDoc._itemIndex); + const prevIndex = (centerIndex - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + const nextIndex = (centerIndex + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + + const displayDoc = (index: number, onClickAction: ScriptField | undefined, width: () => number, height: () => number) => { + return ; + }; + + const showCaptionScript = ScriptField.MakeScript( + "child._showCaption = 'caption'", + { child: Doc.name }, + { child: this.childLayoutPairs[centerIndex].layout } + ); + + const changeIndexScript = ScriptField.MakeScript( + "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)", + { fieldKey: String.name, collectionLayoutDoc: Doc.name }, + { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc } + ); + + return !(this.childLayoutPairs?.[centerIndex]?.layout instanceof Doc) ? (null) : <>
- + {displayDoc(centerIndex, showCaptionScript, this.mainPanelWidth, this.mainPanelHeight)}
- + {displayDoc(prevIndex, changeIndexScript, this.sidePanelWidth, this.sidePanelHeight)}
- + {displayDoc(nextIndex, changeIndexScript, this.sidePanelWidth, this.sidePanelHeight)}
; } -- cgit v1.2.3-70-g09d2 From 481ce09aa523de3792295e766c1bc4c80982bf53 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Tue, 26 May 2020 23:31:44 -0700 Subject: re-structured 3D carousel --- .../collections/CollectionCarousel3DView.scss | 46 +++------ .../views/collections/CollectionCarousel3DView.tsx | 106 +++++++++++++-------- 2 files changed, 80 insertions(+), 72 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index df64d8cbe..d1504dd12 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,37 +1,21 @@ .collectionCarouselView-outer { - background: white; height: 100%; - perspective: 40em; + position: relative; + background-color: white; +} - .collectionCarouselView-center { - position: absolute; - height: 80%; - width: 50%; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - user-select: none; - transition: transform 0.5s; - transform-style: preserve-3d; - } - - .collectionCarouselView-prev { - position: absolute; - height: 50%; - width: 25%; - left: 0; - top: 25%; - transform: rotateY(-20deg); - } +.carousel-wrapper { + display: flex; + position: absolute; + top: 10px; + align-items: center; + transition: transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); - .collectionCarouselView-next { - position: absolute; - height: 50%; - width: 25%; - right: 0; - top: 25%; - transform: rotateY(20deg); + .collectionCarouselView-item { + flex: 1; + transition: opacity 0.5s linear; + transition: transform 0.5s linear; + transition: height 0.5s linear; + transition: width 0.5s linear; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index f95645a6c..9665e23ff 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -13,6 +13,7 @@ import { ContextMenu } from '../ContextMenu'; import { ObjectField } from '../../../fields/ObjectField'; import { returnFalse } from '../../../Utils'; import { ScriptField } from '../../../fields/ScriptField'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @@ -30,32 +31,36 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } } - @computed get changeIndexScript() { - return ScriptField.MakeScript( - "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)", - { fieldKey: String.name, collectionLayoutDoc: Doc.name }, - { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc } - ); - } - mainPanelWidth = () => this.props.PanelWidth() * 0.5; - mainPanelHeight = () => this.props.PanelHeight() * 0.8; + mainPanelHeight = () => this.props.PanelHeight() * 0.9; sidePanelWidth = () => this.props.PanelWidth() * 0.25; sidePanelHeight = () => this.props.PanelHeight() * 0.5; + @computed get content() { - const centerIndex = NumCast(this.layoutDoc._itemIndex); - const prevIndex = (centerIndex - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; - const nextIndex = (centerIndex + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + const currentIndex = NumCast(this.layoutDoc._itemIndex); + + + const displayDoc = (childPair: { layout: Doc, data: Doc }, width: () => number, height: () => number) => { + const showCaptionScript = ScriptField.MakeScript( + "child._showCaption = 'caption'", + { child: Doc.name }, + { child: childPair.layout } + ); + + // const changeIndexScript = ScriptField.MakeScript( + // "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)", + // { fieldKey: String.name, collectionLayoutDoc: Doc.name }, + // { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc } + // ); - const displayDoc = (index: number, onClickAction: ScriptField | undefined, width: () => number, height: () => number) => { return ; }; - const showCaptionScript = ScriptField.MakeScript( - "child._showCaption = 'caption'", - { child: Doc.name }, - { child: this.childLayoutPairs[centerIndex].layout } - ); - - const changeIndexScript = ScriptField.MakeScript( - "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)", - { fieldKey: String.name, collectionLayoutDoc: Doc.name }, - { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc } - ); - - return !(this.childLayoutPairs?.[centerIndex]?.layout instanceof Doc) ? (null) : - <> -
- {displayDoc(centerIndex, showCaptionScript, this.mainPanelWidth, this.mainPanelHeight)} -
-
- {displayDoc(prevIndex, changeIndexScript, this.sidePanelWidth, this.sidePanelHeight)} -
-
- {displayDoc(nextIndex, changeIndexScript, this.sidePanelWidth, this.sidePanelHeight)} -
- ; + return ( + this.childLayoutPairs.map((child, index) => { + if (index === currentIndex) { + return ( +
+ {displayDoc(child, this.mainPanelWidth, this.mainPanelHeight)} +
); + } else { + return ( +
+ {displayDoc(child, this.sidePanelWidth, this.sidePanelHeight)} +
); + } + })); + } + + advance = (e: React.MouseEvent) => { + e.stopPropagation(); + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; + } + goback = (e: React.MouseEvent) => { + e.stopPropagation(); + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } onContextMenu = (e: React.MouseEvent): void => { @@ -124,9 +130,27 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } } + @computed get buttons() { + return <> +
+ +
+
+ +
+ ; + } + render() { + const index = NumCast(this.layoutDoc._itemIndex); + const offset = (index - 1) * (this.mainPanelWidth() - this.sidePanelWidth()) / this.childLayoutPairs.length; + const translateX = (1 - index) / this.childLayoutPairs.length * 100; + return
- {this.content} +
+ {this.content} +
+ {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)}
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 04e285a5b65d0b66c0792fafcd97d7f80e05b7f4 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Tue, 26 May 2020 23:33:31 -0700 Subject: added dots bar for navigating through carousel --- .../collections/CollectionCarousel3DView.scss | 23 ++++++++++++++++++++++ .../views/collections/CollectionCarousel3DView.tsx | 10 ++++++++++ 2 files changed, 33 insertions(+) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index d1504dd12..47ee8ef53 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -18,4 +18,27 @@ transition: height 0.5s linear; transition: width 0.5s linear; } +} + +.dot-bar { + display: flex; + position: absolute; + justify-content: center; + bottom: 5%; + width: 100%; + + .dot, + .dot-active { + height: 15px; + width: 15px; + border-radius: 50%; + margin: 3px; + display: inline-block; + background-color: lightgrey; + cursor: pointer; + } + + .dot-active { + background-color: grey; + } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 9665e23ff..aefac3512 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -141,6 +141,13 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume ; } + @computed get dots() { + return (this.childLayoutPairs.map((_child, index) => { + return
this.layoutDoc._itemIndex = index} />; + })); + } + render() { const index = NumCast(this.layoutDoc._itemIndex); const offset = (index - 1) * (this.mainPanelWidth() - this.sidePanelWidth()) / this.childLayoutPairs.length; @@ -151,6 +158,9 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume {this.content}
{this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)} +
+ {this.dots} +
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 8de2aa4c90926ce733f0cd6021c226ab91df15ee Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 27 May 2020 01:31:59 -0700 Subject: formatting changes --- .../collections/CollectionCarousel3DView.scss | 9 ++--- .../views/collections/CollectionCarousel3DView.tsx | 38 ++++++++-------------- 2 files changed, 17 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 47ee8ef53..601071917 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -7,16 +7,13 @@ .carousel-wrapper { display: flex; position: absolute; - top: 10px; + top: 15%; align-items: center; - transition: transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); .collectionCarouselView-item { flex: 1; - transition: opacity 0.5s linear; - transition: transform 0.5s linear; - transition: height 0.5s linear; - transition: width 0.5s linear; + transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index aefac3512..b47ce0836 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -11,9 +11,10 @@ import { CollectionSubView } from './CollectionSubView'; import { Doc } from '../../../fields/Doc'; import { ContextMenu } from '../ContextMenu'; import { ObjectField } from '../../../fields/ObjectField'; -import { returnFalse } from '../../../Utils'; +import { returnFalse, Utils } from '../../../Utils'; import { ScriptField } from '../../../fields/ScriptField'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Id } from '../../../fields/FieldSymbols'; type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @@ -31,15 +32,11 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } } - mainPanelWidth = () => this.props.PanelWidth() * 0.5; - mainPanelHeight = () => this.props.PanelHeight() * 0.9; - sidePanelWidth = () => this.props.PanelWidth() * 0.25; - sidePanelHeight = () => this.props.PanelHeight() * 0.5; - + panelWidth = () => this.props.PanelWidth() / 3; + panelHeight = () => this.props.PanelHeight() * 0.6; @computed get content() { const currentIndex = NumCast(this.layoutDoc._itemIndex); - const displayDoc = (childPair: { layout: Doc, data: Doc }, width: () => number, height: () => number) => { const showCaptionScript = ScriptField.MakeScript( "child._showCaption = 'caption'", @@ -70,20 +67,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }; return ( - this.childLayoutPairs.map((child, index) => { - if (index === currentIndex) { - return ( -
- {displayDoc(child, this.mainPanelWidth, this.mainPanelHeight)} -
); - } else { - return ( -
- {displayDoc(child, this.sidePanelWidth, this.sidePanelHeight)} -
); - } + this.childLayoutPairs.map((childPair, index) => { + return ( +
+ {displayDoc(childPair, this.panelWidth, this.panelHeight)} +
); })); } @@ -143,18 +134,17 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get dots() { return (this.childLayoutPairs.map((_child, index) => { - return
this.layoutDoc._itemIndex = index} />; })); } render() { const index = NumCast(this.layoutDoc._itemIndex); - const offset = (index - 1) * (this.mainPanelWidth() - this.sidePanelWidth()) / this.childLayoutPairs.length; const translateX = (1 - index) / this.childLayoutPairs.length * 100; return
-
+
{this.content}
{this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)} -- cgit v1.2.3-70-g09d2 From 7551a05109cafd4f1aba1b717a54c0eb32209234 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Sun, 31 May 2020 14:30:45 -0700 Subject: add hold down arrow to autoscroll functionality --- .../collections/CollectionCarousel3DView.scss | 4 +- .../views/collections/CollectionCarousel3DView.tsx | 56 +++++++++++++++++++--- 2 files changed, 51 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 601071917..650b76b31 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -9,11 +9,11 @@ position: absolute; top: 15%; align-items: center; - transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); .collectionCarouselView-item { flex: 1; - transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index b47ce0836..4ec5394da 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -78,13 +78,51 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume })); } - advance = (e: React.MouseEvent) => { + handleArrowClick = (e: React.MouseEvent, direction: number) => { e.stopPropagation(); - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; + this.rotate(direction); } - goback = (e: React.MouseEvent) => { - e.stopPropagation(); - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + + rotate = (direction: number) => { + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; + } + + timer?: NodeJS.Timeout; + interval?: NodeJS.Timeout; + onPress = (e: React.PointerEvent, direction: number) => { + e.stopPropagation; + document.removeEventListener("pointerup", this.onRelease); + document.addEventListener("pointerup", this.onRelease); + + this.timer = setTimeout(() => { + this.startScroll(direction); + }, 1500); + } + + onRelease = () => { + if (this.timer) { + clearTimeout(this.timer); + this.timer = undefined; + } + this.stopScroll(); + } + + startScroll = (direction: number) => { + this.interval = setInterval(() => { + this.rotate(direction); + }, 500); + } + + stopScroll = () => { + if (this.timer) { + clearTimeout(this.timer); + this.timer = undefined; + } + + if (this.interval) { + clearInterval(this.interval); + this.interval = undefined; + } } onContextMenu = (e: React.MouseEvent): void => { @@ -123,10 +161,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get buttons() { return <> -
+
this.handleArrowClick(e, -1)} + onPointerDown={(e) => this.onPress(e, -1)}>
-
+
this.handleArrowClick(e, 1)} + onPointerDown={(e) => this.onPress(e, 1)}>
; -- cgit v1.2.3-70-g09d2 From 3a1541e1ef4277471075936aedadd4541384f470 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Mon, 1 Jun 2020 13:26:49 -0700 Subject: cleanup --- .../collections/CollectionCarousel3DView.scss | 5 +++ .../views/collections/CollectionCarousel3DView.tsx | 47 ++++++++-------------- 2 files changed, 21 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 650b76b31..6c746490a 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -38,4 +38,9 @@ .dot-active { background-color: grey; } +} + +.carouselView-back, +.carouselView-forward { + cursor: pointer; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 4ec5394da..0baf44aeb 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -36,30 +36,17 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume panelHeight = () => this.props.PanelHeight() * 0.6; @computed get content() { const currentIndex = NumCast(this.layoutDoc._itemIndex); - - const displayDoc = (childPair: { layout: Doc, data: Doc }, width: () => number, height: () => number) => { - const showCaptionScript = ScriptField.MakeScript( - "child._showCaption = 'caption'", - { child: Doc.name }, - { child: childPair.layout } - ); - - // const changeIndexScript = ScriptField.MakeScript( - // "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)", - // { fieldKey: String.name, collectionLayoutDoc: Doc.name }, - // { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc } - // ); - + const displayDoc = (childPair: { layout: Doc, data: Doc }, onClickScript: ScriptField | undefined) => { return { + const showCaptionScript = ScriptField.MakeScript( + "child._showCaption = 'caption'", + { child: Doc.name }, + { child: childPair.layout } + ); + return (
- {displayDoc(childPair, this.panelWidth, this.panelHeight)} + {displayDoc(childPair, index === currentIndex ? showCaptionScript : undefined)}
); })); } handleArrowClick = (e: React.MouseEvent, direction: number) => { e.stopPropagation(); - this.rotate(direction); + this.changeSlide(direction); } - rotate = (direction: number) => { + changeSlide = (direction: number) => { this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; } @@ -91,25 +84,17 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume interval?: NodeJS.Timeout; onPress = (e: React.PointerEvent, direction: number) => { e.stopPropagation; - document.removeEventListener("pointerup", this.onRelease); - document.addEventListener("pointerup", this.onRelease); + document.removeEventListener("pointerup", this.stopScroll); + document.addEventListener("pointerup", this.stopScroll); this.timer = setTimeout(() => { this.startScroll(direction); }, 1500); } - onRelease = () => { - if (this.timer) { - clearTimeout(this.timer); - this.timer = undefined; - } - this.stopScroll(); - } - startScroll = (direction: number) => { this.interval = setInterval(() => { - this.rotate(direction); + this.changeSlide(direction); }, 500); } -- cgit v1.2.3-70-g09d2 From 7788d70d5ae6a5ccdf7cd354c31f463fb00731a2 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Tue, 2 Jun 2020 14:02:02 -0700 Subject: fix timeout bug, disable pointer events for items on the side --- .../collections/CollectionCarousel3DView.scss | 8 ++- .../views/collections/CollectionCarousel3DView.tsx | 61 +++++++++++----------- 2 files changed, 37 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 6c746490a..d00a666f8 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -11,9 +11,15 @@ align-items: center; transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); - .collectionCarouselView-item { + .collectionCarouselView-item, + .collectionCarouselView-item-active { flex: 1; transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + pointer-events: none; + } + + .collectionCarouselView-item-active { + pointer-events: unset; } } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 0baf44aeb..bad3096c8 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -36,10 +36,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume panelHeight = () => this.props.PanelHeight() * 0.6; @computed get content() { const currentIndex = NumCast(this.layoutDoc._itemIndex); - const displayDoc = (childPair: { layout: Doc, data: Doc }, onClickScript: ScriptField | undefined) => { + const displayDoc = (childPair: { layout: Doc, data: Doc }) => { return { - const showCaptionScript = ScriptField.MakeScript( - "child._showCaption = 'caption'", - { child: Doc.name }, - { child: childPair.layout } - ); - return ( -
- {displayDoc(childPair, index === currentIndex ? showCaptionScript : undefined)} + {displayDoc(childPair)}
); })); } - handleArrowClick = (e: React.MouseEvent, direction: number) => { - e.stopPropagation(); - this.changeSlide(direction); - } - changeSlide = (direction: number) => { this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - timer?: NodeJS.Timeout; - interval?: NodeJS.Timeout; - onPress = (e: React.PointerEvent, direction: number) => { + timer?: number; + interval?: number; + onArrowDown = (e: React.PointerEvent, direction: number) => { e.stopPropagation; - document.removeEventListener("pointerup", this.stopScroll); - document.addEventListener("pointerup", this.stopScroll); + document.removeEventListener("pointerup", () => this.onArrowRelease(direction)); + document.addEventListener("pointerup", () => this.onArrowRelease(direction)); - this.timer = setTimeout(() => { + this.layoutDoc.startScrollTimeout = 1500; + this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling + window.clearTimeout(this.timer); + this.timer = undefined; this.startScroll(direction); - }, 1500); + }, this.layoutDoc.startScrollTimeout); } startScroll = (direction: number) => { - this.interval = setInterval(() => { + this.layoutDoc.scrollInterval = 500; + this.interval = window.setInterval(() => { this.changeSlide(direction); - }, 500); + }, this.layoutDoc.scrollInterval); } - stopScroll = () => { + onArrowRelease = (direction: number) => { + document.removeEventListener("pointerup", () => this.onArrowRelease(direction)); + if (this.timer) { - clearTimeout(this.timer); + this.changeSlide(direction); // if click wasn't long enough to activate autoscroll, only advance/go back 1 slide + window.clearTimeout(this.timer); this.timer = undefined; } if (this.interval) { - clearInterval(this.interval); + window.clearInterval(this.interval); // stop scrolling this.interval = undefined; } } @@ -147,13 +148,11 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get buttons() { return <>
this.handleArrowClick(e, -1)} - onPointerDown={(e) => this.onPress(e, -1)}> + onPointerDown={(e) => this.onArrowDown(e, -1)}>
this.handleArrowClick(e, 1)} - onPointerDown={(e) => this.onPress(e, 1)}> + onPointerDown={(e) => this.onArrowDown(e, 1)}>
; -- cgit v1.2.3-70-g09d2 From ced0c14ea8410eeedcbdc8eba4e0227840c488b5 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Tue, 2 Jun 2020 20:08:06 -0700 Subject: arrows bug fix --- package-lock.json | 84 +++++++++++++--------- .../views/collections/CollectionCarousel3DView.tsx | 27 ++++--- 2 files changed, 68 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 842553659..6ee723aab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2827,7 +2827,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2845,11 +2846,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2862,15 +2865,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2973,7 +2979,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2983,6 +2990,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2995,17 +3003,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3022,6 +3033,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3077,7 +3089,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3102,7 +3115,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3112,6 +3126,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3180,7 +3195,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3210,6 +3226,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3227,6 +3244,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3265,11 +3283,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } @@ -9486,7 +9506,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "resolved": false, "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9792,7 +9812,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10291,7 +10311,7 @@ }, "glob": { "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "resolved": false, "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10379,7 +10399,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "resolved": false, "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10515,7 +10535,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", + "resolved": false, "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10591,7 +10611,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", + "resolved": false, "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11100,7 +11120,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", + "resolved": false, "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11108,7 +11128,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11160,7 +11180,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", + "resolved": false, "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11274,7 +11294,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", + "resolved": false, "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11294,7 +11314,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", + "resolved": false, "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11304,7 +11324,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", + "resolved": false, "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11739,7 +11759,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11750,7 +11770,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11809,7 +11829,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "resolved": false, "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11830,7 +11850,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", + "resolved": false, "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11894,7 +11914,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "resolved": false, "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12193,7 +12213,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "resolved": false, "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12201,7 +12221,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", + "resolved": false, "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12513,7 +12533,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", + "resolved": false, "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index bad3096c8..097bbb7b3 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -71,15 +71,29 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } changeSlide = (direction: number) => { + console.log("old", NumCast(this.layoutDoc._itemIndex), direction); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; + console.log("new", NumCast(this.layoutDoc._itemIndex)); + } + + startScroll = (direction: number) => { + this.layoutDoc.scrollInterval = 500; + this.interval = window.setInterval(() => { + this.changeSlide(direction); + }, this.layoutDoc.scrollInterval); } timer?: number; interval?: number; onArrowDown = (e: React.PointerEvent, direction: number) => { + console.log("onArrowDown", direction); e.stopPropagation; - document.removeEventListener("pointerup", () => this.onArrowRelease(direction)); - document.addEventListener("pointerup", () => this.onArrowRelease(direction)); + + const listener = () => { // is able to pass in the direction parameter and then correctly remove the listener + this.onArrowRelease(direction); + document.removeEventListener("pointerup", listener); + }; + document.addEventListener("pointerup", listener); this.layoutDoc.startScrollTimeout = 1500; this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling @@ -89,16 +103,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }, this.layoutDoc.startScrollTimeout); } - startScroll = (direction: number) => { - this.layoutDoc.scrollInterval = 500; - this.interval = window.setInterval(() => { - this.changeSlide(direction); - }, this.layoutDoc.scrollInterval); - } - onArrowRelease = (direction: number) => { - document.removeEventListener("pointerup", () => this.onArrowRelease(direction)); - if (this.timer) { this.changeSlide(direction); // if click wasn't long enough to activate autoscroll, only advance/go back 1 slide window.clearTimeout(this.timer); -- cgit v1.2.3-70-g09d2 From 2ca409065cd851e58033c5b1ac06f503a9ffe141 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 3 Jun 2020 17:16:52 -0700 Subject: clean up --- src/client/views/collections/CollectionCarousel3DView.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 097bbb7b3..2f161e255 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -61,7 +61,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.childLayoutPairs.map((childPair, index) => { return (
@@ -71,9 +71,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } changeSlide = (direction: number) => { - console.log("old", NumCast(this.layoutDoc._itemIndex), direction); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; - console.log("new", NumCast(this.layoutDoc._itemIndex)); } startScroll = (direction: number) => { @@ -86,7 +84,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume timer?: number; interval?: number; onArrowDown = (e: React.PointerEvent, direction: number) => { - console.log("onArrowDown", direction); e.stopPropagation; const listener = () => { // is able to pass in the direction parameter and then correctly remove the listener @@ -95,7 +92,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }; document.addEventListener("pointerup", listener); - this.layoutDoc.startScrollTimeout = 1500; + this.layoutDoc.startScrollTimeout = 500; this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling window.clearTimeout(this.timer); this.timer = undefined; @@ -174,7 +171,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const index = NumCast(this.layoutDoc._itemIndex); const translateX = (1 - index) / this.childLayoutPairs.length * 100; - return
+ return
{this.content}
-- cgit v1.2.3-70-g09d2 From 05fe7bb89e51f3d8b643726f3283ba8adee740e4 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 4 Jun 2020 16:22:27 -0700 Subject: hover to show autoscroll button --- src/client/views/DocumentDecorations.tsx | 7 +- .../collections/CollectionCarousel3DView.scss | 49 ++++++++++-- .../views/collections/CollectionCarousel3DView.tsx | 86 +++++++++++++--------- src/client/views/collections/CollectionView.tsx | 2 +- 4 files changed, 100 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 04f02c683..7cdf955a1 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -38,6 +38,11 @@ library.add(faCheckCircle); library.add(faCloudUploadAlt); library.add(faSyncAlt); library.add(faShare); +library.add(faAngleDoubleLeft); +library.add(faAngleDoubleRight); +library.add(faAngleLeft); +library.add(faAngleRight); +library.add(faPause); @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index d00a666f8..ff63f4116 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,4 +1,4 @@ -.collectionCarouselView-outer { +.collectionCarousel3DView-outer { height: 100%; position: relative; background-color: white; @@ -11,14 +11,14 @@ align-items: center; transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); - .collectionCarouselView-item, - .collectionCarouselView-item-active { + .collectionCarousel3DView-item, + .collectionCarousel3DView-item-active { flex: 1; transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none; } - .collectionCarouselView-item-active { + .collectionCarousel3DView-item-active { pointer-events: unset; } } @@ -46,7 +46,44 @@ } } -.carouselView-back, -.carouselView-forward { +.carousel3DView-back, +.carousel3DView-fwd, +.carousel3DView-back-scroll, +.carousel3DView-fwd-scroll { + position: absolute; + display: flex; + width: 30; + height: 30; + align-items: center; + border-radius: 5px; + justify-content: center; + background: rgba(255, 255, 255, 0.46); cursor: pointer; +} + +.carousel3DView-fwd { + top: 50%; + right: 0; +} + +.carousel3DView-back { + top: 50%; + left: 0; +} + +.carousel3DView-fwd-scroll { + top: calc(50% - 30px); + right: 0; +} + +.carousel3DView-back-scroll { + top: calc(50% - 30px); + left: 0; +} + +.carousel3DView-back:hover, +.carousel3DView-fwd:hover, +.carousel3DView-back-scroll:hover, +.carousel3DView-fwd-scroll:hover { + background: lightgray; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 2f161e255..1fa96df65 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -21,6 +21,10 @@ const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @observer export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocument) { + @computed get scrollSpeed() { + return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed + } + private _dropDisposer?: DragManager.DragDropDisposer; componentWillUnmount() { this._dropDisposer?.(); } @@ -74,43 +78,32 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - startScroll = (direction: number) => { - this.layoutDoc.scrollInterval = 500; - this.interval = window.setInterval(() => { - this.changeSlide(direction); - }, this.layoutDoc.scrollInterval); + onArrowClick = (e: React.MouseEvent, direction: number) => { + e.stopPropagation(); + this.changeSlide(direction); } - timer?: number; interval?: number; - onArrowDown = (e: React.PointerEvent, direction: number) => { - e.stopPropagation; + startAutoScroll = (direction: number) => { + this.interval = window.setInterval(() => { + this.changeSlide(direction); + }, this.scrollSpeed); + } - const listener = () => { // is able to pass in the direction parameter and then correctly remove the listener - this.onArrowRelease(direction); - document.removeEventListener("pointerup", listener); - }; - document.addEventListener("pointerup", listener); + stopAutoScroll = () => { + window.clearInterval(this.interval); + this.interval = undefined; + } - this.layoutDoc.startScrollTimeout = 500; - this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling - window.clearTimeout(this.timer); - this.timer = undefined; - this.startScroll(direction); - }, this.layoutDoc.startScrollTimeout); + toggleAutoScroll = (direction: number) => { + this.layoutDoc.autoScrollOn = this.layoutDoc.autoScrollOn ? false : true; + this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll(); } - onArrowRelease = (direction: number) => { - if (this.timer) { - this.changeSlide(direction); // if click wasn't long enough to activate autoscroll, only advance/go back 1 slide - window.clearTimeout(this.timer); - this.timer = undefined; - } + showAutoScrollButton = (direction: string) => { + // keep pause button visible while autoscroll is on, and don't show the other side's autoscroll button + !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction); - if (this.interval) { - window.clearInterval(this.interval); // stop scrolling - this.interval = undefined; - } } onContextMenu = (e: React.MouseEvent): void => { @@ -148,14 +141,35 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } @computed get buttons() { - return <> -
this.onArrowDown(e, -1)}> - + if (!this.props.active()) return null; + return
this.showAutoScrollButton("none")}> +
this.onArrowClick(e, -1)} + onMouseEnter={() => this.showAutoScrollButton("back")}> +
-
this.onArrowDown(e, 1)}> - +
this.onArrowClick(e, 1)} + onMouseEnter={() => this.showAutoScrollButton("fwd")}> + +
+ {this.autoScrollButton} +
; + } + + @computed get autoScrollButton() { + const direction = this.layoutDoc.showScrollButton; + if (direction !== "back" && direction !== "fwd") return null; + + const offset = (direction === "back") ? -1 : 1; + return <> +
this.toggleAutoScroll(offset)}> + {this.layoutDoc.autoScrollOn ? + : + direction === "back" ? + : + }
; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a0f6ad9c7..82aa3dbd5 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -64,7 +64,7 @@ export enum CollectionViewType { Multirow = "multirow", Time = "time", Carousel = "carousel", - Carousel3D = "3D carousel", + Carousel3D = "3D Carousel", Linear = "linear", Staff = "staff", Map = "map", -- cgit v1.2.3-70-g09d2 From 45f4e8f821817e724fd2567ef05c178d7f7640ea Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 4 Jun 2020 16:33:45 -0700 Subject: added customizable scrollSpeed field in dropdown bar --- .../views/collections/CollectionViewChromes.scss | 75 ++++++++++++++-------- .../views/collections/CollectionViewChromes.tsx | 36 +++++++++++ 2 files changed, 83 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 03bd9a01a..b98dab707 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -3,7 +3,7 @@ .collectionViewChrome-cont { position: absolute; - width:100%; + width: 100%; opacity: 0.9; z-index: 9001; transition: top .5s; @@ -13,7 +13,7 @@ .collectionViewChrome { display: flex; padding-bottom: 1px; - height:32px; + height: 32px; border-bottom: .5px solid rgb(180, 180, 180); overflow: hidden; @@ -35,7 +35,7 @@ outline-color: black; } - .collectionViewBaseChrome-button{ + .collectionViewBaseChrome-button { font-size: 75%; text-transform: uppercase; letter-spacing: 2px; @@ -46,6 +46,7 @@ padding: 12px 10px 11px 10px; margin-left: 10px; } + .collectionViewBaseChrome-cmdPicker { margin-left: 3px; margin-right: 0px; @@ -54,15 +55,17 @@ border: none; color: grey; } + .commandEntry-outerDiv { pointer-events: all; background-color: gray; display: flex; flex-direction: row; - height:30px; + height: 30px; + .commandEntry-drop { - color:white; - width:25px; + color: white; + width: 25px; margin-top: auto; margin-bottom: auto; } @@ -76,15 +79,17 @@ pointer-events: all; // margin-top: 10px; } + .collectionViewBaseChrome-template, .collectionViewBaseChrome-viewModes { display: grid; background: rgb(238, 238, 238); - color:grey; - margin-top:auto; - margin-bottom:auto; + color: grey; + margin-top: auto; + margin-bottom: auto; margin-left: 5px; } + .collectionViewBaseChrome-viewModes { margin-left: 25px; } @@ -92,7 +97,7 @@ .collectionViewBaseChrome-viewSpecs { margin-left: 5px; display: grid; - + .collectionViewBaseChrome-filterIcon { position: relative; display: flex; @@ -165,7 +170,8 @@ .collectionStackingViewChrome-cont, - .collectionTreeViewChrome-cont { + .collectionTreeViewChrome-cont, + .collection3DCarouselViewChrome-cont { display: flex; justify-content: space-between; } @@ -189,23 +195,26 @@ .collectionStackingViewChrome-pivotField-cont, - .collectionTreeViewChrome-pivotField-cont { + .collectionTreeViewChrome-pivotField-cont, + .collection3DCarouselViewChrome-scrollSpeed-cont { justify-self: right; display: flex; font-size: 75%; letter-spacing: 2px; .collectionStackingViewChrome-pivotField-label, - .collectionTreeViewChrome-pivotField-label { + .collectionTreeViewChrome-pivotField-label, + .collection3DCarouselViewChrome-scrollSpeed-label { vertical-align: center; padding-left: 10px; - margin:auto; + margin: auto; } .collectionStackingViewChrome-pivotField, - .collectionTreeViewChrome-pivotField { + .collectionTreeViewChrome-pivotField, + .collection3DCarouselViewChrome-scrollSpeed { color: white; - width:100%; + width: 100%; min-width: 100px; display: flex; align-items: center; @@ -215,7 +224,7 @@ input, .editableView-container-editing-oneLine, .editableView-container-editing { - margin:auto; + margin: auto; border: 0px; color: grey; text-align: center; @@ -233,7 +242,8 @@ } .collectionStackingViewChrome-pivotField:hover, - .collectionTreeViewChrome-pivotField:hover { + .collectionTreeViewChrome-pivotField:hover, + .collection3DCarouselViewChrome-scrollSpeed:hover { cursor: text; } } @@ -244,7 +254,10 @@ display: flex; position: relative; align-items: center; - .fwdKeyframe, .numKeyframe, .backKeyframe { + + .fwdKeyframe, + .numKeyframe, + .backKeyframe { cursor: pointer; position: absolute; width: 20; @@ -253,26 +266,31 @@ background: gray; display: flex; align-items: center; - color:white; + color: white; } + .backKeyframe { - left:0; + left: 0; + svg { - display:block; - margin:auto; + display: block; + margin: auto; } } + .numKeyframe { - left:20; + left: 20; display: flex; flex-direction: column; padding: 5px; } + .fwdKeyframe { - left:40; + left: 40; + svg { - display:block; - margin:auto; + display: block; + margin: auto; } } } @@ -334,8 +352,9 @@ flex-direction: column; height: 40px; } + .commandEntry-inputArea { - display:flex; + display: flex; flex-direction: row; width: 150px; margin: auto auto auto auto; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 199902923..e17e86e05 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -202,6 +202,7 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Tree: return (); case CollectionViewType.Masonry: return (); + case CollectionViewType.Carousel3D: return (); default: return null; } } @@ -563,3 +564,38 @@ export class CollectionTreeViewChrome extends React.Component { + @computed get scrollSpeed() { + return this.props.CollectionView.props.Document._autoScrollSpeed; + } + + @action + setValue = (value: string) => { + const numValue = Number(StrCast(value)); + if (numValue > 0) { + this.props.CollectionView.props.Document._autoScrollSpeed = numValue; + return true; + } + return false; + } + + render() { + return ( +
+
+
+ AUTOSCROLL SPEED: +
+
+ StrCast(this.scrollSpeed)} + oneLine + SetValue={this.setValue} + contents={this.scrollSpeed ? this.scrollSpeed : 1000} /> +
+
+
+ ); + } +} -- cgit v1.2.3-70-g09d2 From 633c62652ad7cef151c68d0cf6e2c420ed07de87 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 4 Jun 2020 22:34:59 -0700 Subject: show autoscroll button on arrow click, then fade away after a while if it's not clicked --- .../collections/CollectionCarousel3DView.scss | 40 +++++++++++---- .../views/collections/CollectionCarousel3DView.tsx | 60 +++++++++++----------- 2 files changed, 58 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index ff63f4116..5f8895c1f 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -32,8 +32,8 @@ .dot, .dot-active { - height: 15px; - width: 15px; + height: 10px; + width: 10px; border-radius: 50%; margin: 3px; display: inline-block; @@ -49,7 +49,9 @@ .carousel3DView-back, .carousel3DView-fwd, .carousel3DView-back-scroll, -.carousel3DView-fwd-scroll { +.carousel3DView-fwd-scroll, +.carousel3DView-back-scroll-hidden, +.carousel3DView-fwd-scroll-hidden { position: absolute; display: flex; width: 30; @@ -61,24 +63,40 @@ cursor: pointer; } -.carousel3DView-fwd { +.carousel3DView-fwd, +.carousel3DView-back { top: 50%; +} + +.carousel3DView-fwd-scroll, +.carousel3DView-back-scroll, +.carousel3DView-fwd-scroll-hidden, +.carousel3DView-back-scroll-hidden { + top: calc(50% - 30px); +} + +.carousel3DView-fwd, +.carousel3DView-fwd-scroll, +.carousel3DView-fwd-scroll-hidden { right: 0; } -.carousel3DView-back { - top: 50%; +.carousel3DView-back, +.carousel3DView-back-scroll, +.carousel3DView-back-scroll-hidden { left: 0; } -.carousel3DView-fwd-scroll { - top: calc(50% - 30px); - right: 0; +.carousel3DView-fwd-scroll-hidden, +.carousel3DView-back-scroll-hidden { + opacity: 0; + transition: opacity 0.5s linear; + pointer-events: none; } +.carousel3DView-fwd-scroll, .carousel3DView-back-scroll { - top: calc(50% - 30px); - left: 0; + opacity: 1; } .carousel3DView-back:hover, diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 1fa96df65..a7d9c41c8 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -46,8 +46,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume onClick={ScriptField.MakeScript( "child._showCaption = 'caption'", { child: Doc.name }, - { child: childPair.layout } - )} + { child: childPair.layout })} renderDepth={this.props.renderDepth + 1} LayoutTemplate={this.props.ChildLayoutTemplate} LayoutTemplateString={this.props.ChildLayoutString} @@ -61,17 +60,16 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume />; }; - return ( - this.childLayoutPairs.map((childPair, index) => { - return ( -
- {displayDoc(childPair)} -
); - })); + return (this.childLayoutPairs.map((childPair, index) => { + return ( +
+ {displayDoc(childPair)} +
); + })); } changeSlide = (direction: number) => { @@ -81,6 +79,8 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume onArrowClick = (e: React.MouseEvent, direction: number) => { e.stopPropagation(); this.changeSlide(direction); + !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = (direction === 1) ? "fwd" : "back"); // while autoscroll is on, keep the other autoscroll button hidden + !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on } interval?: number; @@ -93,6 +93,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume stopAutoScroll = () => { window.clearInterval(this.interval); this.interval = undefined; + this.fadeScrollButton(); } toggleAutoScroll = (direction: number) => { @@ -100,10 +101,10 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll(); } - showAutoScrollButton = (direction: string) => { - // keep pause button visible while autoscroll is on, and don't show the other side's autoscroll button - !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction); - + fadeScrollButton = () => { + window.setTimeout(() => { + !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = "none"); //fade away after 1.5s if it's not clicked. + }, 1500); } onContextMenu = (e: React.MouseEvent): void => { @@ -142,15 +143,15 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get buttons() { if (!this.props.active()) return null; - return
this.showAutoScrollButton("none")}> + return
this.onArrowClick(e, -1)} - onMouseEnter={() => this.showAutoScrollButton("back")}> + >
this.onArrowClick(e, 1)} - onMouseEnter={() => this.showAutoScrollButton("fwd")}> + >
{this.autoScrollButton} @@ -158,18 +159,15 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } @computed get autoScrollButton() { - const direction = this.layoutDoc.showScrollButton; - if (direction !== "back" && direction !== "fwd") return null; - - const offset = (direction === "back") ? -1 : 1; + const whichButton = this.layoutDoc.showScrollButton; return <> -
this.toggleAutoScroll(offset)}> - {this.layoutDoc.autoScrollOn ? - : - direction === "back" ? - : - } +
this.toggleAutoScroll(-1)}> + {this.layoutDoc.autoScrollOn ? : } +
+
this.toggleAutoScroll(1)}> + {this.layoutDoc.autoScrollOn ? : }
; } -- cgit v1.2.3-70-g09d2 From bcb2e70a5cd4628dd2909279ec61c4c644e07c37 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Fri, 5 Jun 2020 19:35:32 -0700 Subject: minor fixes --- src/client/views/collections/CollectionCarousel3DView.tsx | 5 +++-- src/client/views/collections/CollectionViewChromes.scss | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index a7d9c41c8..1344b70f4 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -1,9 +1,9 @@ -import { observable, computed } from 'mobx'; +import { computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { documentSchema, collectionSchema } from '../../../fields/documentSchemas'; import { makeInterface } from '../../../fields/Schema'; -import { NumCast, StrCast, ScriptCast, Cast } from '../../../fields/Types'; +import { NumCast, StrCast, ScriptCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import "./CollectionCarousel3DView.scss"; @@ -86,6 +86,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume interval?: number; startAutoScroll = (direction: number) => { this.interval = window.setInterval(() => { + console.log(this.interval, this.scrollSpeed); this.changeSlide(direction); }, this.scrollSpeed); } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index b98dab707..2ab771089 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -226,7 +226,7 @@ .editableView-container-editing { margin: auto; border: 0px; - color: grey; + color: grey !important; text-align: center; letter-spacing: 2px; outline-color: black; -- cgit v1.2.3-70-g09d2 From 1a6feb447f9c4fd461ba02dc45a93e569a283be0 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Sat, 6 Jun 2020 00:04:54 -0700 Subject: initial commit --- deploy/mobile/image.html | 2 +- package-lock.json | 84 ++++--- src/mobile/ImageUpload.scss | 55 +++-- src/mobile/ImageUpload.tsx | 74 ++---- src/mobile/MobileInkOverlay.tsx | 4 +- src/mobile/MobileInterface.scss | 9 + src/mobile/MobileInterface.tsx | 526 +++++++++++++++++++++++++++++----------- src/mobile/MobileMain.tsx | 25 ++ src/mobile/MobileMenu.scss | 240 ++++++++++++++++++ src/mobile/SideBar.scss | 79 ++++++ src/mobile/SideBar.tsx | 39 +++ src/mobile/WorkSpaceButton.scss | 0 src/mobile/WorkSpaceButton.tsx | 14 ++ webpack.config.js | 64 ++--- 14 files changed, 936 insertions(+), 279 deletions(-) create mode 100644 src/mobile/MobileMain.tsx create mode 100644 src/mobile/MobileMenu.scss create mode 100644 src/mobile/SideBar.scss create mode 100644 src/mobile/SideBar.tsx create mode 100644 src/mobile/WorkSpaceButton.scss create mode 100644 src/mobile/WorkSpaceButton.tsx (limited to 'src') diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html index 6424d2a60..beca8b68b 100644 --- a/deploy/mobile/image.html +++ b/deploy/mobile/image.html @@ -9,7 +9,7 @@

Capture Image:

- + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 842553659..6ee723aab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2827,7 +2827,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2845,11 +2846,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2862,15 +2865,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2973,7 +2979,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2983,6 +2990,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2995,17 +3003,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3022,6 +3033,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3077,7 +3089,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3102,7 +3115,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3112,6 +3126,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3180,7 +3195,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3210,6 +3226,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3227,6 +3244,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3265,11 +3283,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } @@ -9486,7 +9506,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "resolved": false, "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9792,7 +9812,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10291,7 +10311,7 @@ }, "glob": { "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "resolved": false, "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10379,7 +10399,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "resolved": false, "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10515,7 +10535,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", + "resolved": false, "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10591,7 +10611,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", + "resolved": false, "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11100,7 +11120,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", + "resolved": false, "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11108,7 +11128,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11160,7 +11180,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", + "resolved": false, "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11274,7 +11294,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", + "resolved": false, "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11294,7 +11314,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", + "resolved": false, "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11304,7 +11324,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", + "resolved": false, "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11739,7 +11759,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11750,7 +11770,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11809,7 +11829,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "resolved": false, "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11830,7 +11850,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", + "resolved": false, "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11894,7 +11914,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "resolved": false, "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12193,7 +12213,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "resolved": false, "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12201,7 +12221,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", + "resolved": false, "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12513,7 +12533,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", + "resolved": false, "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index eea69b81c..6ebf33438 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,12 +1,26 @@ @import "../client/views/globalCssVariables.scss"; .imgupload_cont { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - width: 100vw; - height: 100vh; + // display: flex; + // justify-content: center; + // flex-direction: column; + // align-items: center; + // width: 100vw; + // height: 100vh; + + .upload_label { + font-weight: normal !important; + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 35px; + text-transform: uppercase; + color: black; + } .button_file { text-align: center; @@ -21,14 +35,27 @@ display: none; } - .upload_label, + // .upload_label, + // .upload_button { + // background: $dark-color; + // font-size: 500%; + // font-family: $sans-serif; + // text-align: center; + // padding: 5vh; + // margin-bottom: 20px; + // color: white; + // } + .upload_button { - background: $dark-color; - font-size: 500%; - font-family: $sans-serif; - text-align: center; - padding: 5vh; - margin-bottom: 20px; - color: white; + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 35px; + text-transform: uppercase; + color: black; } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index b15042f9f..c35c4a917 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -4,16 +4,18 @@ import { Docs } from '../client/documents/Documents'; import "./ImageUpload.scss"; import React = require('react'); import { DocServer } from '../client/DocServer'; -import { Opt, Doc } from '../fields/Doc'; -import { Cast } from '../fields/Types'; -import { listSpec } from '../fields/Schema'; -import { List } from '../fields/List'; import { observer } from 'mobx-react'; import { observable } from 'mobx'; import { Utils } from '../Utils'; -import MobileInterface from './MobileInterface'; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { resolvedPorts } from '../client/views/Main'; +import { Networking } from '../client/Network'; +import { Doc, Opt } from '../fields/Doc'; +import { Cast } from '../fields/Types'; +import { listSpec } from '../fields/Schema'; +import { List } from '../fields/List'; + +export interface ImageUploadProps { + Document: Doc; +} // const onPointerDown = (e: React.TouchEvent) => { // let imgInput = document.getElementById("input_image_file"); @@ -24,7 +26,7 @@ import { resolvedPorts } from '../client/views/Main'; const inputRef = React.createRef(); @observer -class Uploader extends React.Component { +export class Uploader extends React.Component { @observable error: string = ""; @observable status: string = ""; @@ -39,20 +41,15 @@ class Uploader extends React.Component { if (files && files.length !== 0) { console.log(files[0]); const name = files[0].name; - const formData = new FormData(); - formData.append("file", files[0]); - - const upload = window.location.origin + "/uploadFormData"; + const res = await Networking.UploadFilesToServer(files[0]); this.status = "uploading image"; - console.log("uploading image", formData); - const res = await fetch(upload, { - method: 'POST', - body: formData - }); this.status = "upload image, getting json"; - const json = await res.json(); - json.map(async (file: any) => { - const path = window.location.origin + file; + + res.map(async ({ result }) => { + if (result instanceof Error) { + return; + } + const path = Utils.prepend(result.accessPaths.agnostic.client); const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); this.status = "getting user document"; @@ -75,12 +72,10 @@ class Uploader extends React.Component { pending.data = new List([doc]); } this.status = "finished"; + console.log("hi"); } - }); - - // console.log(window.location.origin + file[0]) - //imgPrev.setAttribute("src", window.location.origin + files[0].name) + }); } } } catch (error) { @@ -91,12 +86,12 @@ class Uploader extends React.Component { render() { return (
- + - + {/*
Upload
*/} -

{this.status}

-

{this.error}

+ {/*

{this.status}

+

{this.error}

*/}
); } @@ -104,25 +99,4 @@ class Uploader extends React.Component { } -// DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "image upload"); -(async () => { - const info = await CurrentUserUtils.loadCurrentUser(); - DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, info.email + "mobile"); - await Docs.Prototypes.initialize(); - if (info.id !== "__guest__") { - // a guest will not have an id registered - await CurrentUserUtils.loadUserDocument(info); - } - document.getElementById('root')!.addEventListener('wheel', event => { - if (event.ctrlKey) { - event.preventDefault(); - } - }, true); - ReactDOM.render(( - // - - ), - document.getElementById('root') - ); -} -)(); \ No newline at end of file +// DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload"); diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx index 973931615..1b3388161 100644 --- a/src/mobile/MobileInkOverlay.tsx +++ b/src/mobile/MobileInkOverlay.tsx @@ -4,11 +4,9 @@ import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition import { observable, action } from "mobx"; import { GestureUtils } from "../pen-gestures/GestureUtils"; import "./MobileInkOverlay.scss"; -import { StrCast, Cast } from '../fields/Types'; import { DragManager } from "../client/util/DragManager"; import { DocServer } from '../client/DocServer'; -import { Doc, DocListCastAsync } from '../fields/Doc'; -import { listSpec } from '../fields/Schema'; +import { Doc } from '../fields/Doc'; @observer diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss index 4d86e208f..f75e60a37 100644 --- a/src/mobile/MobileInterface.scss +++ b/src/mobile/MobileInterface.scss @@ -16,4 +16,13 @@ height: 100%; position: relative; touch-action: none; + width: 100%; +} + +.mobileInterface-background { + height: 100%; + width: 100%; + position: relative; + touch-action: none; + background-color: pink; } \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 6c2e797d6..1f7244653 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,47 +1,56 @@ import React = require('react'); import { library } from '@fortawesome/fontawesome-svg-core'; -import { faEraser, faHighlighter, faLongArrowAltLeft, faMousePointer, faPenNib } from '@fortawesome/free-solid-svg-icons'; +import { faEraser, faHighlighter, faLongArrowAltLeft, faMousePointer, faPenNib, faThumbtack, faHome } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { DocServer } from '../client/DocServer'; +import * as rp from 'request-promise'; import { Docs } from '../client/documents/Documents'; -import { DocumentManager } from '../client/util/DocumentManager'; -import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu'; -import { Scripting } from '../client/util/Scripting'; +import { DocumentView } from '../client/views/nodes/DocumentView'; +import { emptyPath, emptyFunction, returnFalse, returnOne, returnTrue, returnZero, Utils } from '../Utils'; import { Transform } from '../client/util/Transform'; -import { DocumentDecorations } from '../client/views/DocumentDecorations'; -import GestureOverlay from '../client/views/GestureOverlay'; +import { Scripting } from '../client/util/Scripting'; import { InkingControl } from '../client/views/InkingControl'; -import { DocumentView } from '../client/views/nodes/DocumentView'; -import { RadialMenu } from '../client/views/nodes/RadialMenu'; -import { PreviewCursor } from '../client/views/PreviewCursor'; +import "./MobileInterface.scss"; +import "./MobileMenu.scss"; +import { DocServer } from '../client/DocServer'; +import { DocumentManager } from '../client/util/DocumentManager'; +import SettingsManager from '../client/util/SettingsManager'; +import { Uploader } from "./ImageUpload"; +import { DockedFrameRenderer } from '../client/views/collections/CollectionDockingView'; import { Doc, DocListCast, FieldResult } from '../fields/Doc'; -import { Id } from '../fields/FieldSymbols'; +import { FieldValue, Cast, StrCast } from '../fields/Types'; import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; -import { Cast, FieldValue } from '../fields/Types'; -import { WebField } from "../fields/URLField"; +import { nullAudio, WebField } from '../fields/URLField'; +import { Id } from '../fields/FieldSymbols'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero } from '../Utils'; -import "./MobileInterface.scss"; -import { CollectionView } from '../client/views/collections/CollectionView'; library.add(faLongArrowAltLeft); +library.add(faHome); @observer -export default class MobileInterface extends React.Component { +export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } + @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } // @observable private currentView: "main" | "ink" | "upload" = "main"; - private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); + @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); @observable private renderView?: () => JSX.Element; + @observable private sidebarActive = true; + + public _activeDoc: Doc = this.mainDoc; // private inkDoc?: Doc; public drawingInk: boolean = false; - // private uploadDoc?: Doc; + // private _uploadDoc: Doc = this.userDoc; + private _child: Doc | null = null; + private _parents: Array = []; + private _menu: Doc = this.mainDoc; + private _open: boolean = false; + private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; constructor(props: Readonly<{}>) { super(props); @@ -50,7 +59,7 @@ export default class MobileInterface extends React.Component { @action componentDidMount = () => { - library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer]); + library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); if (this.userDoc && !this.mainContainer) { this.userDoc.activeMobile = this.mainDoc; @@ -81,6 +90,7 @@ export default class MobileInterface extends React.Component { onSwitchUpload = async () => { let width = 300; let height = 300; + const res = await rp.get(Utils.prepend("/getUserDocumentId")); // get width and height of the collection doc if (this.mainContainer) { @@ -102,34 +112,243 @@ export default class MobileInterface extends React.Component { }); } - renderDefaultContent = () => { + back = () => { + const doc = Cast(this._parents.pop(), Doc) as Doc; + if (doc === Cast(this._menu, Doc) as Doc) { + this._child = null; + this.userDoc.activeMobile = this.mainDoc; + } else { + if (doc) { + this._child = doc; + this.switchCurrentView((userDoc: Doc) => doc); + } + } + if (doc) { + this._activeDoc = doc; + } + } + + returnHome = () => { + this._parents = []; + this._activeDoc = this._menu; + this.switchCurrentView((userDoc: Doc) => this._menu); + this._child = null; + } + + displayWorkspaces = () => { if (this.mainContainer) { - return window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={returnEmptyString} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} />; + const backgroundColor = () => "white"; + return ( +
+ window.screen.width} + PanelHeight={() => window.screen.height} + renderDepth={0} + focus={emptyFunction} + backgroundColor={backgroundColor} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
+ ); + } + } + + handleClick(doc: Doc) { + const children = DocListCast(doc.data); + if (doc.type !== "collection") { + this._parents.push(this._activeDoc); + this._activeDoc = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this.toggleSidebar(); + } else if (doc.type === "collection" && children.length === 0) { + console.log("This collection has no children"); + } else { + this._parents.push(this._activeDoc); + this._activeDoc = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._child = doc; + } + + // let sidebar = document.getElementById("sidebar") as HTMLElement; + // sidebar.classList.toggle('active'); + } + + createPathname = () => { + let pathname = ""; + this._parents.map((doc: Doc, index: any) => { + if (doc === this.mainDoc) { + pathname = pathname + doc.title; + } else { + pathname = pathname + " > " + doc.title; + } + }); + if (this._activeDoc === this.mainDoc) { + pathname = pathname + this._activeDoc.title; + } else { + pathname = pathname + " > " + this._activeDoc.title; + } + return pathname; + } + + @action + toggleSidebar = () => this.sidebarActive = !this.sidebarActive + + openLibrary() { + this._activeDoc = this.mainDoc; + this.switchCurrentView(() => this.mainDoc); + this._child = this._library; + } + + renderDefaultContent = () => { + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + }); + return ( + <> +
+
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+
+
+
+
{this.createPathname()}
+
+
+ + {this._child ? + <> +
←
+
{buttons}
+
Home
+ : + <> + {buttons} + {/*
+ Library +
*/} + +
Record Audio
+
Presentation
+
SettingsManager.Instance.open()}>Settings
+ + } +
+ {this._child ? null :
{this.renderView}
} + + ); + } + + pinToPresentation = () => { + // Only making button available if it is an image + if (this._activeDoc.type === "image") { + const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); + return
{ + if (isPinned) { + DockedFrameRenderer.UnpinDoc(this._activeDoc); + } + else { + DockedFrameRenderer.PinDoc(this._activeDoc); + } + }}> + +
; + } + } + + recordAudio = async () => { + // upload to server with known URL + this._parents.push(this._activeDoc); + const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; + if (audioDoc) { + console.log("audioClicked: " + audioDoc.title); + this._activeDoc = audioDoc; + this.switchCurrentView((userDoc: Doc) => audioDoc); + this.toggleSidebar(); + } + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + if (audioRightSidebar) { + console.log(audioRightSidebar.title); + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + if (data) { + data.push(audioDoc); + } + } + } + + openDefaultPresentation = () => { + this._parents.push(this._activeDoc); + const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + + if (presentation) { + console.log("presentation clicked: " + presentation.title); + this._activeDoc = presentation; + this.switchCurrentView((userDoc: Doc) => presentation); + this.toggleSidebar(); + } + } + + // mobileHome = () => { + // return ( + //
+ //
+ + //
+ //
+ + //
+ //
+ + //
+ //
+ + //
+ //
+ + //
+ //
+ // ); + // } + + renderActiveCollection = (userDoc: Doc) => { + if (this.activeContainer) { + const active = Cast(this.activeContainer.data, listSpec(Doc)); + if (active) { + return ( +
HELLO!
+ ); + } } - return "hello"; } onBack = (e: React.MouseEvent) => { @@ -164,60 +383,15 @@ export default class MobileInterface extends React.Component { panelHeight = () => window.innerHeight; panelWidth = () => window.innerWidth; - renderInkingContent = () => { - console.log("rendering inking content"); - // TODO: support panning and zooming - // TODO: handle moving of ink strokes - if (this.mainContainer) { - return ( -
-
-
- -
-
- -
-
- - -
-
- - -
- ); - } - } + //WAS 3 + + //WAS 1 upload = async (e: React.MouseEvent) => { if (this.mainContainer) { const data = Cast(this.mainContainer.data, listSpec(Doc)); if (data) { - const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked + const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked const children = DocListCast(collectionDoc.data); const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 @@ -260,45 +434,6 @@ export default class MobileInterface extends React.Component { } } - renderUploadContent() { - if (this.mainContainer) { - return ( -
-
- - {/* */} - {/* */} - -
- window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={returnEmptyString} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> -
- ); - } - } - onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); @@ -314,18 +449,22 @@ export default class MobileInterface extends React.Component { {this.renderView ? this.renderView() : this.renderDefaultContent()} */} - + {/* */} + + {this.displayWorkspaces()} + {this.pinToPresentation()} + {/* */} {/* */} - - - {this.renderView ? this.renderView() : this.renderDefaultContent()} - - + {/* */} +
+ {this.renderDefaultContent()} +
+ {/* */} {/* */} - - + {/* + */} {/* */} @@ -335,9 +474,102 @@ export default class MobileInterface extends React.Component { } Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); -Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); -Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); -Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); -Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); -Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); +// WAS 2 + +// 1 +// renderUploadContent() { +// if (this.mainContainer) { +// return ( +//
+//
+// +// {/* */} +// {/* */} +// +//
+// window.screen.width} +// PanelHeight={() => window.screen.height} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={returnEmptyString} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} /> +//
+// ); +// } +// } + +// 2 +// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); +// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); +// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); +// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); + // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); + +// 3 + // renderInkingContent = () => { + // console.log("rendering inking content"); + // // TODO: support panning and zooming + // // TODO: handle moving of ink strokes + // if (this.mainContainer) { + // return ( + //
+ //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + // + //
+ //
+ // + // + //
+ // ); + // } + // } diff --git a/src/mobile/MobileMain.tsx b/src/mobile/MobileMain.tsx new file mode 100644 index 000000000..34f06438f --- /dev/null +++ b/src/mobile/MobileMain.tsx @@ -0,0 +1,25 @@ +import { DocServer } from '../client/DocServer'; +import { Docs } from '../client/documents/Documents'; +import * as ReactDOM from "react-dom"; +import { MobileInterface } from './MobileInterface'; +import * as React from "react"; +import { AssignAllExtensions } from '../extensions/General/Extensions'; +import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; + +AssignAllExtensions(); + +(async () => { + const info = await CurrentUserUtils.loadCurrentUser(); + DocServer.init(window.location.protocol, window.location.hostname, 4321, info.email + " (mobile)"); + await Docs.Prototypes.initialize(); + if (info.id !== "__guest__") { + // a guest will not have an id registered + await CurrentUserUtils.loadUserDocument(info); + } + document.getElementById('root')!.addEventListener('wheel', event => { + if (event.ctrlKey) { + event.preventDefault(); + } + }, true); + ReactDOM.render(, document.getElementById('root')); +})(); \ No newline at end of file diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss new file mode 100644 index 000000000..250340e36 --- /dev/null +++ b/src/mobile/MobileMenu.scss @@ -0,0 +1,240 @@ +$navbar-height: 120px; +$pathbar-height: 50px; + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: "Open Sans"; +} + +body { + overflow: hidden; +} + +.navbar { + position: fixed; + top: 0px; + left: 0px; + width: 100vw; + height: $navbar-height; + background-color: whitesmoke; + border-bottom: 5px solid black; +} + +.navbar .toggle-btn { + position: absolute; + right: 20px; + top: 30px; + height: 70px; + width: 70px; + transition: all 300ms ease-in-out 200ms; +} + +.navbar .header { + position: absolute; + top: 50%; + top: calc(9px + 50%); + right: 50%; + transform: translate(50%, -50%); + font-size: 40; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; +} + +.navbar .toggle-btn span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70%; + height: 4px; + background: black; + transition: all 200ms ease; +} + +.navbar .toggle-btn span:nth-child(1) { + transition: top 200ms ease-in-out; + top: 30%; +} + +.navbar .toggle-btn span:nth-child(3) { + transition: top 200ms ease-in-out; + top: 70%; +} + +.navbar .toggle-btn.active { + transition: transform 200ms ease-in-out 200ms; + transform: rotate(135deg); +} + +.navbar .toggle-btn.active span:nth-child(1) { + top: 50%; +} + +.navbar .toggle-btn.active span:nth-child(2) { + transform: translate(-50%, -50%) rotate(90deg); +} + +.navbar .toggle-btn.active span:nth-child(3) { + top: 50%; +} + +.sidebar { + position: absolute; + top: 200px; + opacity: 0; + right: -100%; + width: 100%; + height: calc(100% - (200px)); + z-index: 5; + background-color: whitesmoke; + transition: all 400ms ease 50ms; + padding: 20px; + // border-right: 5px solid black; +} + +.sidebar .item { + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 35px; + text-transform: uppercase; + color: black; +} + +.sidebar .home { + position: absolute; + top: -135px; + right: calc(50% + 80px); + transform: translate(0%, -50%); + font-size: 40; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; + z-index: 200; +} + +.type { + display: inline; + text-transform: lowercase; + margin-left: 20px; + font-size: 35px; + font-style: italic; + color: rgb(28, 28, 28); +} + +.right { + margin-left: 20px; + z-index: 200; +} + +.left { + width: 100%; + height: 100%; +} + +.sidebar .logout { + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 30px; + text-transform: uppercase; + color: black; +} + +.sidebar .settings { + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 30px; + text-transform: uppercase; + color: black; +} + + +.sidebar.active { + right: 0%; + opacity: 1; +} + +.back { + position: absolute; + top: -140px; + left: 50px; + transform: translate(0%, -50%); + color: black; + font-size: 60; + user-select: none; + text-transform: uppercase; + z-index: 100; + font-family: Arial, Helvetica, sans-serif; +} + + +.pathbar { + position: absolute; + top: 118px; + background: #1a1a1a; + z-index: 20; + border-radius: 0px; + width: 100%; + height: 80px; + transition: all 400ms ease 50ms; +} + +.pathname { + position: relative; + font-size: 25; + top: 50%; + width: 90%; + left: 3%; + color: whitesmoke; + transform: translate(0%, -50%); + z-index: 20; + font-family: sans-serif; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; + text-align: left; + text-transform: uppercase; +} + +.homeContainer { + position: relative; + top: 200px; + height: calc(100% - 250px); + width: 90%; + overflow: scroll; + left: 5%; + background-color: lightpink; +} + +.pinButton { + position: relative; + width: 100px; + height: 100px; + font-size: 90px; + text-align: center; + left: 50%; + transform: translate(-50%, 0); + border-style: solid; + border-radius: 50px; + border-width: medium; + background-color: pink; + z-index: 100; +} \ No newline at end of file diff --git a/src/mobile/SideBar.scss b/src/mobile/SideBar.scss new file mode 100644 index 000000000..fb6d13a2b --- /dev/null +++ b/src/mobile/SideBar.scss @@ -0,0 +1,79 @@ +* { + margin:0px; + padding:0px; + box-sizing:border-box; + font-family:"Open Sans"; +} +body { + overflow:hidden; +} +.navbar { + position:fixed; + top:0px; + left:0px; + width:100vw; + height:50px; + background:rgba(0,0,0,0.95); +} +.navbar .toggle-btn { + position:absolute; + right:20px; + height:50px; + width:50px; + transition:all 300ms ease-in-out 200ms; +} +.navbar .toggle-btn span { + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); + width:70%; + height:4px; + background:#eee; + transition:all 200ms ease; +} +.navbar .toggle-btn span:nth-child(1) { + transition:top 200ms ease-in-out; + top:30%; +} +.navbar .toggle-btn span:nth-child(3) { + transition:top 200ms ease-in-out; + top:70%; +} +.navbar .toggle-btn.active { + transition:transform 200ms ease-in-out 200ms; + transform:rotate(135deg); +} +.navbar .toggle-btn.active span:nth-child(1) { + top:50%; +} +.navbar .toggle-btn.active span:nth-child(2) { + transform:translate(-50%,-50%) rotate(90deg); +} +.navbar .toggle-btn.active span:nth-child(3) { + top:50%; +} +.sidebar { + position:absolute; + top:50px; + opacity:0; + right:-100%; + width:100vw; + height:calc(100vh - 45px); + z-index:5; + background:rgba(40,40,40,1); + transition:all 400ms ease 50ms; + padding:15px; +} +.sidebar .item { + width:100%; + padding:13px 6px; + border-bottom:1px solid rgba(200,200,200,0.7); + font-size:18px; + text-transform:uppercase; + color:rgba(250,250,250,0.95); +} +.sidebar.active { + right:0%; + opacity:1; +} \ No newline at end of file diff --git a/src/mobile/SideBar.tsx b/src/mobile/SideBar.tsx new file mode 100644 index 000000000..a06069ed8 --- /dev/null +++ b/src/mobile/SideBar.tsx @@ -0,0 +1,39 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./SideBar.scss"; +import { computed } from "mobx"; +import { DocumentView } from '../client/views/nodes/DocumentView'; + +@observer +export class SideBar extends React.Component<{ views: (DocumentView | undefined)[], stack?: any }, {}>{ + + constructor(props: { views: (DocumentView | undefined)[] }) { + super(props); + } + + @computed + onClick() { + document.getElementsByClassName('sidebar') + [0].classList.toggle('active'); + } + + render() { + return ( + <> +
+
+ + + +
+
+
+
Workspace1
+
Workspace2
+
Workspace3
+
+ + ); + } + +} \ No newline at end of file diff --git a/src/mobile/WorkSpaceButton.scss b/src/mobile/WorkSpaceButton.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/mobile/WorkSpaceButton.tsx b/src/mobile/WorkSpaceButton.tsx new file mode 100644 index 000000000..70c3e6edc --- /dev/null +++ b/src/mobile/WorkSpaceButton.tsx @@ -0,0 +1,14 @@ +import React = require('react'); +import { observer } from "mobx-react"; +import { observable } from 'mobx'; + +interface IProps { + open: boolean; +} + +@observer +export class MenuButton extends React.Component { + @observable static Instance: MenuButton; + + +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index bd1d3b5a9..a5fe6ad80 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,7 +43,7 @@ module.exports = { repl: ["./src/debug/Repl.tsx", 'webpack-hot-middleware/client?reload=true'], test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'], inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'], - imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'], + mobileInterface: ["./src/mobile/MobileMain.tsx", 'webpack-hot-middleware/client?reload=true'], }, optimization: { noEmitOnErrors: true @@ -66,42 +66,42 @@ module.exports = { }, module: { rules: [{ - test: [/\.tsx?$/], - use: [{ - loader: 'ts-loader', - options: { - transpileOnly: true - } - }] - }, - { - test: /\.scss|css$/, - use: [{ - loader: "style-loader" + test: [/\.tsx?$/], + use: [{ + loader: 'ts-loader', + options: { + transpileOnly: true + } + }] }, { - loader: "css-loader" + test: /\.scss|css$/, + use: [{ + loader: "style-loader" + }, + { + loader: "css-loader" + }, + { + loader: "sass-loader" + } + ] }, { - loader: "sass-loader" + test: /\.(jpg|png|pdf)$/, + use: [{ + loader: 'file-loader' + }] + }, + { + test: /\.(png|jpg|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + limit: 8192 + } + }] } - ] - }, - { - test: /\.(jpg|png|pdf)$/, - use: [{ - loader: 'file-loader' - }] - }, - { - test: /\.(png|jpg|gif)$/i, - use: [{ - loader: 'url-loader', - options: { - limit: 8192 - } - }] - } ] }, plugins, -- cgit v1.2.3-70-g09d2 From 1f437abfeabf897887fb9e3097df06a1934ae884 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Sat, 6 Jun 2020 01:14:09 -0700 Subject: fixed import ordering --- src/client/views/webcam/WebCamLogic.js | 5 +---- src/mobile/MobileInterface.tsx | 33 ++++++++++++++++++++++----------- src/mobile/MobileMain.tsx | 14 +++++++------- 3 files changed, 30 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js index a8a2f5fa4..5f6202bc8 100644 --- a/src/client/views/webcam/WebCamLogic.js +++ b/src/client/views/webcam/WebCamLogic.js @@ -1,8 +1,5 @@ 'use strict'; import io from "socket.io-client"; -import { - resolvedPorts -} from "../Main"; var socket; var isChannelReady = false; @@ -32,7 +29,7 @@ export function initialize(roomName, handlerUI) { room = roomName; - socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${resolvedPorts.socket}`); + socket = io.connect(`${window.location.protocol}//${window.location.hostname}:4321`); if (room !== '') { socket.emit('create or join', room); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 1f7244653..052c8975a 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,33 +1,44 @@ -import React = require('react'); +import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; -import { faEraser, faHighlighter, faLongArrowAltLeft, faMousePointer, faPenNib, faThumbtack, faHome } from '@fortawesome/free-solid-svg-icons'; +import { + faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, + faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, + faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, + faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft +} from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as rp from 'request-promise'; +import { Doc, DocListCast, FieldResult } from '../fields/Doc'; +import { Id } from '../fields/FieldSymbols'; +import { FieldValue, Cast, StrCast } from '../fields/Types'; +import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; +import { emptyPath, emptyFunction, returnFalse, returnOne, returnTrue, returnZero, Utils } from '../Utils'; +import { DocServer } from '../client/DocServer'; import { Docs } from '../client/documents/Documents'; +import { Scripting } from '../client/util/Scripting'; import { DocumentView } from '../client/views/nodes/DocumentView'; -import { emptyPath, emptyFunction, returnFalse, returnOne, returnTrue, returnZero, Utils } from '../Utils'; import { Transform } from '../client/util/Transform'; -import { Scripting } from '../client/util/Scripting'; import { InkingControl } from '../client/views/InkingControl'; import "./MobileInterface.scss"; import "./MobileMenu.scss"; -import { DocServer } from '../client/DocServer'; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; import { DockedFrameRenderer } from '../client/views/collections/CollectionDockingView'; -import { Doc, DocListCast, FieldResult } from '../fields/Doc'; -import { FieldValue, Cast, StrCast } from '../fields/Types'; import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; import { nullAudio, WebField } from '../fields/URLField'; -import { Id } from '../fields/FieldSymbols'; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -library.add(faLongArrowAltLeft); -library.add(faHome); +library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, + faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, + faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, + faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft); @observer export class MobileInterface extends React.Component { diff --git a/src/mobile/MobileMain.tsx b/src/mobile/MobileMain.tsx index 34f06438f..3d4680d58 100644 --- a/src/mobile/MobileMain.tsx +++ b/src/mobile/MobileMain.tsx @@ -1,10 +1,10 @@ -import { DocServer } from '../client/DocServer'; -import { Docs } from '../client/documents/Documents'; -import * as ReactDOM from "react-dom"; -import { MobileInterface } from './MobileInterface'; -import * as React from "react"; -import { AssignAllExtensions } from '../extensions/General/Extensions'; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; +import { MobileInterface } from "./MobileInterface"; +import { Docs } from "../client/documents/Documents"; +import { CurrentUserUtils } from "../client/util/CurrentUserUtils"; +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import { DocServer } from "../client/DocServer"; +import { AssignAllExtensions } from "../extensions/General/Extensions"; AssignAllExtensions(); -- cgit v1.2.3-70-g09d2 From 0bd7f4f85be56de4326f0671453fc5e5e917a5d0 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 7 Jun 2020 21:22:25 -0700 Subject: pull current work in --- deploy/mobile/image.html | 3 +- src/client/util/CurrentUserUtils.ts | 105 +- src/client/views/GestureOverlay.tsx | 14 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/mobile/MobileHome.scss | 101 ++ src/mobile/MobileInterface.tsx | 1819 ++++++++++++++++++-- src/mobile/MobileMenu.scss | 122 +- src/mobile/SideBar.scss | 79 - src/mobile/SideBar.tsx | 39 - src/mobile/WorkSpaceButton.scss | 0 src/mobile/WorkSpaceButton.tsx | 14 - 11 files changed, 1916 insertions(+), 382 deletions(-) create mode 100644 src/mobile/MobileHome.scss delete mode 100644 src/mobile/SideBar.scss delete mode 100644 src/mobile/SideBar.tsx delete mode 100644 src/mobile/WorkSpaceButton.scss delete mode 100644 src/mobile/WorkSpaceButton.tsx (limited to 'src') diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html index beca8b68b..d30ad6ac2 100644 --- a/deploy/mobile/image.html +++ b/deploy/mobile/image.html @@ -1,13 +1,12 @@ - Test view + Dash Mobile
-

Capture Image:

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 496099557..8ed275efc 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -386,25 +386,56 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } - static setupMobileButtons(doc: Doc, buttons?: string[]) { + // static setupMobileButtons(doc: Doc, buttons?: string[]) { + // const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ + // { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" }, + // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, + // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, + // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "pink", activePen: doc }, + // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.inkPen = this;', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "white", activePen: doc }, + // // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "red", activePen: doc }, + // { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" }, + // // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" }, + // ]; + // return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({ + // _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, + // onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, + // ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, + // backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory: data.dragFactory, + // })); + // } + + static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ - { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" }, - { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, - { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, - { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "pink", activePen: doc }, - { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.inkPen = this;', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "white", activePen: doc }, - // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "red", activePen: doc }, - { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" }, - // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" }, + { title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" }, + { title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" }, + { title: "upload", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "lightgrey" }, + { title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" }, + { title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" }, + { title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" } ]; return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({ - _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, - onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, - ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, - backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory: data.dragFactory, + _nativeWidth: 150, _nativeHeight: 150, _width: 150, _height: 150, + dropAction: undefined, + title: data.title, + icon: data.icon, + ignoreClick: data.ignoreClick, + onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, + onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, + ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, + activePen: data.activePen, + backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), + dragFactory: data.dragFactory, })); } + static setupMobileMenu() { + const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), { + _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _autoHeight: true, _yMargin: 80 + }), Doc) as Doc; + return menu; + } + static setupThumbButtons(doc: Doc) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, @@ -438,16 +469,20 @@ export class CurrentUserUtils { return Cast(userDoc.thumbDoc, Doc); } - static setupMobileDoc(userDoc: Doc) { - return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), { - columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5 - }); + static setupLibrary(userDoc: Doc) { + return CurrentUserUtils.setupWorkspaces(userDoc); } static setupMobileInkingDoc(userDoc: Doc) { return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" }); } + static setupMobileDoc(userDoc: Doc) { + return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons2(userDoc), { + columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5 + }); + } + static setupMobileUploadDoc(userDoc: Doc) { // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" }) const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", { @@ -608,6 +643,42 @@ export class CurrentUserUtils { dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc + static setupMobileButtons2(doc?: Doc, buttons?: string[]) { + const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ + { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" }, + { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." }, + { title: "UPLOAD", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, + // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" }, + { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } + ]; + return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, _backgroundColor: data.backgroundColor }, [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])); + } + + static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, { + ...opts, + dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, + borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", + })) as any as Doc + + static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, { + ...opts, + dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25, + backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", + })) as any as Doc + + + static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonTitle, { + ...opts, + title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)" + })) as any as Doc + + static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonInfo, { + ...opts, + title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2, + })) as any as Doc + + /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window static setupDockedButtons(doc: Doc) { if (doc["dockedBtn-pen"] === undefined) { diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 4352ac52c..a11c97b09 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -27,7 +27,7 @@ import { listSpec } from "../../fields/Schema"; import { List } from "../../fields/List"; import { CollectionViewType } from "./collections/CollectionView"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; -import MobileInterface from "../../mobile/MobileInterface"; +import { MobileInterface } from "../../mobile/MobileInterface"; import { MobileInkOverlayContent } from "../../server/Message"; import MobileInkOverlay from "../../mobile/MobileInkOverlay"; import { RadialMenu } from "./nodes/RadialMenu"; @@ -115,12 +115,12 @@ 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) { - te.preventDefault(); - te.stopPropagation(); - RadialMenu.Instance.closeMenu(); - return; - } + // if (RadialMenu.Instance._display === true) { + // te.preventDefault(); + // te.stopPropagation(); + // RadialMenu.Instance.closeMenu(); + // return; + // } // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers // so that we can know, for example, if two fingers are pinching out or in. diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 80ee2a65d..8b0c72f5e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -597,7 +597,7 @@ export class CollectionFreeFormView extends CollectionSubView { // bcz: theres should be a better way of doing these than referencing these static instances directly MarqueeOptionsMenu.Instance?.fadeOut(true);// I think it makes sense for the marquee menu to go away when panned. -syip2 - PDFMenu.Instance.fadeOut(true); + // PDFMenu.Instance.fadeOut(true); const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); this.setPan((this.Document._panX || 0) - dx, (this.Document._panY || 0) - dy, undefined, true); diff --git a/src/mobile/MobileHome.scss b/src/mobile/MobileHome.scss new file mode 100644 index 000000000..e1566b622 --- /dev/null +++ b/src/mobile/MobileHome.scss @@ -0,0 +1,101 @@ +$navbar-height: 120px; +$pathbar-height: 50px; + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: "Open Sans"; +} + +.homeContainer { + position: relative; + top: 200px; + overflow: scroll; + width: 100%; + left: 0; + height: calc(100% - 120px); + overflow-y: scroll; +} + +.homeButton { + width: 96%; + margin-left: 2.5%; + height: 250px; + border-radius: 30px; + margin-top: 15px; + margin-bottom: 15px; +} + +.iconRight { + position: absolute; + width: 50%; + height: 80px; + transform: translate(0, 50%); + right: 0px; + text-align: center; + font-size: 80; +} + +.iconLeft { + position: absolute; + width: 50%; + height: 80px; + transform: translate(0%, 50%); + left: 0px; + text-align: center; + font-size: 80; +} + +.textLeft { + position: absolute; + width: 50%; + left: 0px; + font-size: 40px; + text-align: left; + margin-left: 110px; + margin-top: 40px; + font-family: sans-serif; + font-weight: bold; +} + +.textRight { + position: absolute; + width: 50%; + right: 0px; + font-size: 40px; + text-align: right; + margin-right: 110px; + margin-top: 40px; + font-family: sans-serif; + font-weight: bold; +} + +.menuView { + position: absolute; + top: 135px; + left: 50%; + transform: translate(-50%, 0%); + display: flex; +} + +.iconView { + height: 60px; + width: 60px; + background-color: darkgray; + border-radius: 5px; + border-style: solid; + border-width: 2px; + border-color: black; +} + +.listView { + height: 60px; + width: 60px; + margin-left: 20; + background-color: darkgray; + border-radius: 5px; + border-style: solid; + border-width: 2px; + border-color: black; +} \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 052c8975a..6b75ce07d 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -6,7 +6,7 @@ import { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; @@ -25,6 +25,7 @@ import { Transform } from '../client/util/Transform'; import { InkingControl } from '../client/views/InkingControl'; import "./MobileInterface.scss"; import "./MobileMenu.scss"; +import "./MobileHome.scss"; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; @@ -32,26 +33,1056 @@ import { DockedFrameRenderer } from '../client/views/collections/CollectionDocki import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; import { nullAudio, WebField } from '../fields/URLField'; +import GestureOverlay from "../client/views/GestureOverlay"; library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); + +// @observer +// export class MobileInterface extends React.Component { +// @observable static Instance: MobileInterface; +// @computed private get userDoc() { return Doc.UserDoc(); } +// @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } +// @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } +// // @observable private currentView: "main" | "ink" | "upload" = "main"; +// @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); +// @observable private renderView?: () => JSX.Element; +// @observable private sidebarActive = true; + +// public _activeDoc: Doc = this.mainDoc; +// public _homeDoc: Doc = this.mainDoc; +// private _homeMenu: boolean = true; + +// // private inkDoc?: Doc; +// public drawingInk: boolean = false; +// private _ink: boolean = false; + +// // private _uploadDoc: Doc = this.userDoc; +// private _child: Doc | null = null; +// private _parents: Array = []; +// private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); +// private _open: boolean = false; + +// constructor(props: Readonly<{}>) { +// super(props); +// MobileInterface.Instance = this; +// } + +// @action +// componentDidMount = () => { +// library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); + +// if (this.userDoc && !this.mainContainer) { +// this.userDoc.activeMobile = this._homeDoc; +// } + +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// InkingControl.Instance.updateSelectedColor("#FF0000"); +// InkingControl.Instance.switchWidth("2"); +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } + +// @action +// switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { +// if (!this.userDoc) return; + +// this.userDoc.activeMobile = doc(this.userDoc); +// onSwitch && onSwitch(); + +// this.renderView = renderView; +// } + +// onSwitchInking = () => { +// const button = document.getElementById("inkButton") as HTMLElement; +// const color = InkingControl.Instance.selectedColor; +// button.style.backgroundColor = this._ink ? "white" : color; +// button.style.color = this._ink ? "black" : "white"; + +// if (!this._ink) { +// console.log("INK IS ACTIVE"); +// InkingControl.Instance.switchTool(InkTool.Pen); +// MobileInterface.Instance.drawingInk = true; +// this._ink = true; +// } else { +// console.log("INK IS INACTIVE"); +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// this._ink = false; +// } +// } + +// onSwitchUpload = async () => { +// let width = 300; +// let height = 300; +// const res = await rp.get(Utils.prepend("/getUserDocumentId")); + +// // get width and height of the collection doc +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked +// const docView = DocumentManager.Instance.getDocumentView(collectionDoc); +// if (docView) { +// width = docView.nativeWidth ? docView.nativeWidth : 300; +// height = docView.nativeHeight ? docView.nativeHeight : 300; +// } +// } +// } +// DocServer.Mobile.dispatchOverlayTrigger({ +// enableOverlay: true, +// width: width, +// height: height, +// text: "Documents uploaded from mobile will show here", +// }); +// } + +// back = () => { +// let header = document.getElementById("header") as HTMLElement; +// let doc = Cast(this._parents.pop(), Doc) as Doc; +// if (doc === Cast(this._library, Doc) as Doc) { +// this._child = null; +// this.userDoc.activeMobile = this._library; +// } else if (doc === Cast(this._homeDoc, Doc) as Doc) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } else { +// if (doc) { +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// header.textContent = String(doc.title); +// } +// } +// if (doc) { +// this._activeDoc = doc; +// } +// this._ink = false; +// } + +// returnHome = () => { +// if (this._homeMenu === false || this._open === true) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } +// if (this._open) { +// this.toggleSidebar(); +// } +// } + +// returnMain = () => { +// this._parents = []; +// // this.toggleSidebar(); +// this._activeDoc = this._library; +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._homeMenu = false; +// this._child = null; +// } + +// displayWorkspaces = () => { +// if (this.mainContainer) { +// const backgroundColor = () => "white"; +// if (this._activeDoc.title === "mobile audio") { +// return ( +//
+// window.screen.width} +// PanelHeight={() => window.screen.height} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={backgroundColor} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} +// /> +//
+// ); +// } else { +// return ( +//
+// +//
+// ); +// } +// } +// } + +// returnWidth = () => 2000; +// returnHeight = () => 2000; + +// handleClick(doc: Doc) { +// let children = DocListCast(doc.data); +// if (doc.type !== "collection") { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this.toggleSidebar(); +// } else if (doc.type === "collection" && children.length === 0) { +// console.log("This collection has no children"); +// } else { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this._child = doc; +// } + +// // let sidebar = document.getElementById("sidebar") as HTMLElement; +// // sidebar.classList.toggle('active'); +// } + +// createPathname = () => { +// let docArray = []; +// this._parents.map((doc: Doc, index: any) => { +// // if (doc === this.mainDoc) { +// // pathname = pathname; +// // } else if (doc.type === "audio" || doc.type === "presentation") { +// // pathname = pathname; +// // } else if (doc.type !== "collection") { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + doc.title; +// // titleArray.push(doc.title); +// // docArray.push(doc); +// // } +// docArray.push(doc); +// }); +// docArray.push(this._activeDoc); +// // if (this._activeDoc.title === "mobile audio") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc.title === "Presentation") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc === this.mainDoc) { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + this._activeDoc.title; +// // docArray.push(this._activeDoc); +// // titleArray.push(this._activeDoc.title); +// // } + +// return docArray; +// } + +// renderPathbar = () => { +// // if (this._homeMenu == false) { +// let docArray = this.createPathname(); +// let items = docArray.map((doc: Doc, index: any) => { +// if (index == 0) { +// return ( +//
+//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } else if (doc === this._activeDoc) { +// return ( +//
+// +//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } else { +// return ( +//
+// +//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } + +// }); +// if (this._parents.length !== 0) { +// return (
+//
+// {items} +//
+//
+// +//
+//
+//
); +// } else { +// return (
+//
+// {items} +//
+//
+//
); +// } +// // } +// // } else { + +// // return ( +// //
+// //
+// //
+// //
this.returnHome()}>Home +// //
+// //
+// //
+// //
+// //
+// // ); +// // } + +// // } +// } + +// handlePathClick = (doc: Doc, index: number) => { +// if (doc === this._library) { +// this._activeDoc = doc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } else if (doc === this._homeDoc) { +// this.returnHome(); +// } else { +// console.log(index); +// this._activeDoc = doc; +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } +// } + +// @action +// toggleSidebar = () => this.sidebarActive = !this.sidebarActive + +// switchToLibrary = () => { +// this._parents.push(this._activeDoc); +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._activeDoc = this._library; +// this._homeMenu = false; +// this.toggleSidebar(); +// } + +// // renderDefaultContent = () => { +// // let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// // if (doc.type !== "ink") { +// // return ( +// //
doc.click}>{doc.title} +// //
); +// // } +// // }); + +// // if (this._homeMenu === true) { +// // return ( +// //
+// //
+// // +// // +// // +// //
+// // {this.renderPathbar()} +// // +// //
+// // ); +// // } + +// // const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// // const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { +// // return ( +// //
this.handleClick(doc)}>{doc.title} +// //
{doc.type}
+// // +// //
); +// // }); +// // return ( +// // <> +// //
+// //
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+// //
+// //
+// //
+// //
{this.createPathname()}
+// //
+// //
+// // +// // {this._child ? +// // <> +// //
←
+// //
{buttons}
+// //
Home
+// // : +// // <> +// // {buttons} +// // {/*
+// // Library +// //
*/} +// // +// //
Record Audio
+// //
Presentation
+// //
SettingsManager.Instance.open()}>Settings
+// // +// // } +// //
+// // {this._child ? null :
{this.renderView}
} +// // +// // ); +// // } + +// renderDefaultContent = () => { +// let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
doc.click}>{doc.title} +//
); +// } +// }); + +// if (this._homeMenu === true) { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +//
+// ); +// } +// const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
this.handleClick(doc)}>{doc.title} +//
{doc.type}
+// +//
); +// } +// }); + +// if (this._child) { +// buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
this.handleClick(doc)}>{doc.title} +//
{doc.type}
+// +//
); +// } +// }); +// } + +// if (!this._child) { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +// {/*
+// {this.renderView} +//
*/} +//
+// ); +// } +// else { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +//
+// ); +// } +// } + +// recordAudio = async () => { +// // upload to server with known URL +// if (this._activeDoc.title !== "mobile audio") { +// this._parents.push(this._activeDoc); +// } +// const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; +// console.log(audioDoc); +// if (audioDoc) { +// console.log("audioClicked: " + audioDoc.title); +// this._activeDoc = audioDoc; +// this.switchCurrentView((userDoc: Doc) => audioDoc); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// // this.audioState = await audioDoc.getProto; +// // if (this.audioState) { +// // console.log(this.audioState); +// // const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// // if (data) { +// // data.push(audioDoc); +// // } +// // } +// } + +// uploadAudio = () => { +// const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// const audioDoc = this._activeDoc; +// const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// console.log(audioDoc.proto); +// if (data) { +// data.push(audioDoc); +// } +// // this.recordAudio(); +// } + +// uploadAudioButton = () => { +// if (this._activeDoc.type === "audio") { +// return
+// +//
; +// } +// } + +// toggleSelector = () => { +// console.log("toggle selector!"); +// let toolbar = document.getElementById("toolbar") as HTMLElement; +// toolbar.classList.toggle('active'); +// } + +// colorTool = () => { +// if (this._activeDoc._viewType === "docking") { +// const color = InkingControl.Instance.selectedColor; +// console.log(color); +// return ( +//
+//
+//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); +// Doc.UserDoc().inkColor = "rgb(255,0,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); +// Doc.UserDoc().inkColor = "rgb(0,128,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); +// Doc.UserDoc().inkColor = "rgb(0,0,255)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
+//
+// ) => InkingControl.Instance.switchWidth(e.target.value)} /> +//
+//
+//
+// ); +// } +// } + +// drawInk = () => { +// if (this._activeDoc._viewType === "docking") { +// const inkIsOn = this._ink; +// return
+// +//
; +// } +// } + +// downloadDocument = () => { +// if (this._activeDoc.type === "image") { +// const url = this._activeDoc["data-path"]?.toString(); +// return
{ +// window.open(url); +// console.log(url); +// }}> +// +//
; +// } +// } + +// pinToPresentation = () => { +// // Only making button available if it is an image +// if (this._activeDoc.type === "image") { +// const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); +// return
{ +// if (isPinned) { +// DockedFrameRenderer.UnpinDoc(this._activeDoc); +// } +// else { +// DockedFrameRenderer.PinDoc(this._activeDoc); +// } +// }}> +// +//
; +// } +// } + +// setupDefaultPresentation = () => { +// if (this._activeDoc.title !== "Presentation") { +// this._parents.push(this._activeDoc); +// } + +// const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + +// if (presentation) { +// console.log(this._activeDoc.mobile); +// console.log("presentation clicked: " + presentation.title); +// this._activeDoc = presentation; +// this.switchCurrentView((userDoc: Doc) => presentation); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// } + +// // mobileHome = () => { +// // return ( +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+// // ); +// // } + +// renderActiveCollection = (userDoc: Doc) => { +// if (this.activeContainer) { +// const active = Cast(this.activeContainer.data, listSpec(Doc)); +// if (active) { +// return ( +//
HELLO!
+// ); +// } +// } +// } + +// onBack = (e: React.MouseEvent) => { +// this.switchCurrentView((userDoc: Doc) => this.mainDoc); +// InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool + +// DocServer.Mobile.dispatchOverlayTrigger({ +// enableOverlay: false, +// width: window.innerWidth, +// height: window.innerHeight +// }); + +// // this.inkDoc = undefined; +// this.drawingInk = false; +// } + +// shiftLeft = (e: React.MouseEvent) => { +// DocServer.Mobile.dispatchOverlayPositionUpdate({ +// dx: -10 +// }); +// e.preventDefault(); +// e.stopPropagation(); +// } + +// shiftRight = (e: React.MouseEvent) => { +// DocServer.Mobile.dispatchOverlayPositionUpdate({ +// dx: 10 +// }); +// e.preventDefault(); +// e.stopPropagation(); +// } + +// panelHeight = () => window.innerHeight; +// panelWidth = () => window.innerWidth; +// //WAS 3 + +// //WAS 1 + +// upload = async (e: React.MouseEvent) => { +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked +// const children = DocListCast(collectionDoc.data); +// const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { +// title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 +// }); +// if (uploadDoc) { +// DocServer.Mobile.dispatchMobileDocumentUpload({ +// docId: uploadDoc[Id], +// }); +// } +// } +// } +// e.stopPropagation(); +// e.preventDefault(); +// } + +// addWebToCollection = async () => { +// let url = "https://en.wikipedia.org/wiki/Hedgehog"; +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const webDoc = await data[0]; +// const urlField: FieldResult = Cast(webDoc.data, WebField); +// url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog"; + +// } +// } +// Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" }); +// } + +// clearUpload = async () => { +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; +// const children = DocListCast(collectionDoc.data); +// children.forEach(doc => { +// }); +// // collectionDoc[data] = new List(); +// } +// } +// } + +// onDragOver = (e: React.DragEvent) => { +// e.preventDefault(); +// e.stopPropagation(); +// } + +// render() { +// // const content = this.currentView === "main" ? this.mainContent : +// // this.currentView === "ink" ? this.inkContent : +// // this.currentView === "upload" ? this.uploadContent : <>; +// return ( +//
+// {/* +// +// {this.renderView ? this.renderView() : this.renderDefaultContent()} +// */} +// {/* */} +// +// {/* {this.menuOptions()} */} +// {/* {this.displayHome()} */} +//
+// {this.pinToPresentation()} +// {this.downloadDocument()} +// {this.drawInk()} +// {this.uploadAudioButton()} +// {this.colorTool()} +//
+// + +// +// {this.renderDefaultContent()} +// {this.displayWorkspaces()} +// {/* */} +// {/* +// +// */} +// {/* */} +// {/*
+// {this.renderDefaultContent()} +//
*/} +// {/* */} +// {/* */} +// {/* +// */} +// {/* +// +// */} +//
+// ); +// } +// } + +// Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); +// Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); +// Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); +// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); +// // WAS 2 + +// // 1 +// // renderUploadContent() { +// // if (this.mainContainer) { +// // return ( +// //
+// //
+// // +// // {/* */} +// // {/* */} +// // +// //
+// // window.screen.width} +// // PanelHeight={() => window.screen.height} +// // renderDepth={0} +// // focus={emptyFunction} +// // backgroundColor={returnEmptyString} +// // parentActive={returnTrue} +// // whenActiveChanged={emptyFunction} +// // bringToFront={emptyFunction} +// // ContainingCollectionView={undefined} +// // ContainingCollectionDoc={undefined} /> +// //
+// // ); +// // } +// // } + +// // 2 +// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); +// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); +// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); +// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); +// // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); + + +// // 3 +// // renderInkingContent = () => { +// // console.log("rendering inking content"); +// // // TODO: support panning and zooming +// // // TODO: handle moving of ink strokes +// // if (this.mainContainer) { +// // return ( +// //
+// //
+// //
+// // +// //
+// //
+// // +// //
+// //
+// // +// // +// //
+// //
+// // +// // +// //
+// // ); +// // } +// // } @observer export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - // @observable private currentView: "main" | "ink" | "upload" = "main"; - @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); + // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } + @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; - @observable private sidebarActive = true; + @observable private audioState: any; public _activeDoc: Doc = this.mainDoc; + public _homeDoc: Doc = this.mainDoc; + private _homeMenu: boolean = true; // private inkDoc?: Doc; public drawingInk: boolean = false; @@ -59,9 +1090,11 @@ export class MobileInterface extends React.Component { // private _uploadDoc: Doc = this.userDoc; private _child: Doc | null = null; private _parents: Array = []; - private _menu: Doc = this.mainDoc; + private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); private _open: boolean = false; - private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + + // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + private _ink: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -71,33 +1104,31 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); - + if (this.userDoc.activeMobile) { + console.log(Doc.UserDoc().activeMobile) + } if (this.userDoc && !this.mainContainer) { - this.userDoc.activeMobile = this.mainDoc; + this.userDoc.activeMobile = this._homeDoc; } + InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + InkingControl.Instance.updateSelectedColor("#FF0000"); + console.log(this.userDoc.inkColor); + console.log(InkingControl.Instance.selectedColor); + InkingControl.Instance.switchWidth("2"); + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } @action switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { if (!this.userDoc) return; - this.userDoc.activeMobile = doc(this.userDoc); + Doc.UserDoc().activeMobile = doc(this.userDoc); onSwitch && onSwitch(); this.renderView = renderView; } - onSwitchInking = () => { - InkingControl.Instance.switchTool(InkTool.Pen); - MobileInterface.Instance.drawingInk = true; - - DocServer.Mobile.dispatchOverlayTrigger({ - enableOverlay: true, - width: window.innerWidth, - height: window.innerHeight - }); - } - onSwitchUpload = async () => { let width = 300; let height = 300; @@ -123,70 +1154,167 @@ export class MobileInterface extends React.Component { }); } + toggleSidebar = () => { + if (this._open === false) { + this._open = true; + } else { + this._open = false; + } + console.log("clicked"); + let menuButton = document.getElementById("menuButton") as HTMLElement; + menuButton.classList.toggle('active'); + + let sidebar = document.getElementById("sidebar") as HTMLElement; + sidebar.classList.toggle('active'); + + let header = document.getElementById("header") as HTMLElement; + + if (!sidebar.classList.contains('active')) { + header.textContent = String(this._activeDoc.title); + } else { + header.textContent = "library"; + } + } + + switchToLibrary = () => { + this._parents.push(this._activeDoc); + this.switchCurrentView((userDoc: Doc) => this._library); + this._activeDoc = this._library; + this._homeMenu = false; + this.toggleSidebar(); + } + back = () => { - const doc = Cast(this._parents.pop(), Doc) as Doc; - if (doc === Cast(this._menu, Doc) as Doc) { + let header = document.getElementById("header") as HTMLElement; + let doc = Cast(this._parents.pop(), Doc) as Doc; + if (doc === Cast(this._library, Doc) as Doc) { + this._child = null; + this.userDoc.activeMobile = this._library; + } else if (doc === Cast(this._homeDoc, Doc) as Doc) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; this._child = null; - this.userDoc.activeMobile = this.mainDoc; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } else { if (doc) { this._child = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + header.textContent = String(doc.title); } } if (doc) { this._activeDoc = doc; } + this._ink = false; } returnHome = () => { + if (this._homeMenu === false || this._open === true) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); + } + if (this._open) { + this.toggleSidebar(); + } + } + + returnMain = () => { + console.log("home"); this._parents = []; - this._activeDoc = this._menu; - this.switchCurrentView((userDoc: Doc) => this._menu); + // this.toggleSidebar(); + this._activeDoc = this._library; + this.switchCurrentView((userDoc: Doc) => this._library); + this._homeMenu = false; this._child = null; } + // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); } + displayWorkspaces = () => { if (this.mainContainer) { const backgroundColor = () => "white"; - return ( -
- window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={backgroundColor} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - /> -
- ); + if (this._activeDoc.title === "mobile audio") { + return ( +
+ window.screen.width} + PanelHeight={() => window.screen.height} + renderDepth={0} + focus={emptyFunction} + backgroundColor={backgroundColor} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
+ ); + } else { + return ( +
+ +
+ ); + } } } + returnWidth = () => 2000; + returnHeight = () => 2000; + handleClick(doc: Doc) { - const children = DocListCast(doc.data); + console.log(screen.height) + console.log(screen.width) + let children = DocListCast(doc.data); if (doc.type !== "collection") { this._parents.push(this._activeDoc); this._activeDoc = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; this.toggleSidebar(); } else if (doc.type === "collection" && children.length === 0) { console.log("This collection has no children"); @@ -194,6 +1322,7 @@ export class MobileInterface extends React.Component { this._parents.push(this._activeDoc); this._activeDoc = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; this._child = doc; } @@ -201,167 +1330,426 @@ export class MobileInterface extends React.Component { // sidebar.classList.toggle('active'); } + /** + * Handles creation of array which is then rendered in renderPathbar() + */ createPathname = () => { - let pathname = ""; + // let pathname = 'workspaces'; + // let titleArray = []; + let docArray = []; this._parents.map((doc: Doc, index: any) => { - if (doc === this.mainDoc) { - pathname = pathname + doc.title; + // if (doc === this.mainDoc) { + // pathname = pathname; + // } else if (doc.type === "audio" || doc.type === "presentation") { + // pathname = pathname; + // } else if (doc.type !== "collection") { + // pathname = pathname; + // } else { + // pathname = pathname + " > " + doc.title; + // titleArray.push(doc.title); + // docArray.push(doc); + // } + docArray.push(doc); + }); + docArray.push(this._activeDoc); + // if (this._activeDoc.title === "mobile audio") { + // pathname = this._activeDoc.title; + // } else if (this._activeDoc.title === "Presentation") { + // pathname = this._activeDoc.title; + // } else if (this._activeDoc === this.mainDoc) { + // pathname = pathname; + // } else { + // pathname = pathname + " > " + this._activeDoc.title; + // docArray.push(this._activeDoc); + // titleArray.push(this._activeDoc.title); + // } + + return docArray; + } + + // Renders the graphical pathbar + renderPathbar = () => { + // if (this._homeMenu == false) { + let docArray = this.createPathname(); + let items = docArray.map((doc: Doc, index: any) => { + if (index == 0) { + return ( +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
); + } else if (doc === this._activeDoc) { + return ( +
+ +
this.handlePathClick(doc, index)}>{doc.title} +
+
); } else { - pathname = pathname + " > " + doc.title; + return ( +
+ +
this.handlePathClick(doc, index)}>{doc.title} +
+
); } + }); - if (this._activeDoc === this.mainDoc) { - pathname = pathname + this._activeDoc.title; + if (this._parents.length !== 0) { + return (
+
+ {items} +
+
+ +
+
+
); } else { - pathname = pathname + " > " + this._activeDoc.title; + return (
+
+ {items} +
+
+
); } - return pathname; - } + // } + // } else { - @action - toggleSidebar = () => this.sidebarActive = !this.sidebarActive + // return ( + //
+ //
+ //
+ //
this.returnHome()}>Home + //
+ //
+ //
+ //
+ //
+ // ); + // } - openLibrary() { - this._activeDoc = this.mainDoc; - this.switchCurrentView(() => this.mainDoc); - this._child = this._library; + // } + } + + handlePathClick = (doc: Doc, index: number) => { + if (doc === this._library) { + this._activeDoc = doc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } else if (doc === this._homeDoc) { + this.returnHome(); + } else { + console.log(index); + this._activeDoc = doc; + this._child = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } } renderDefaultContent = () => { - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; - const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { - return ( -
this.handleClick(doc)}>{doc.title} -
{doc.type}
- -
); - }); - return ( - <> -
-
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+ let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return (
-
-
-
{this.createPathname()}
+ className="item" + key={index} + onClick={() => doc.click}>{doc.title} +
); + } + }); + + if (this._homeMenu === true) { + return ( +
+
+ + + +
+ {this.renderPathbar()} +
-
- - {this._child ? - <> -
←
-
{buttons}
-
Home
- : - <> + ); + } + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + } + }); + + if (this._child) { + buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + } + }); + } + + if (!this._child) { + return ( +
+
+ + + +
+ {this.renderPathbar()} + +
+ {/*
+ {this.renderView} +
*/}
- {this._child ? null :
{this.renderView}
} - - ); + ); + } + else { + return ( +
+
+ + + +
+ {this.renderPathbar()} + +
+ ); + } } - pinToPresentation = () => { - // Only making button available if it is an image + uploadAudioButton = () => { + if (this._activeDoc.type === "audio") { + return
+ +
; + } + } + + toggleSelector = () => { + console.log("toggle selector!"); + let toolbar = document.getElementById("toolbar") as HTMLElement; + toolbar.classList.toggle('active'); + } + + colorTool = () => { + if (this._activeDoc._viewType === "docking") { + const color = InkingControl.Instance.selectedColor; + console.log(color); + return ( +
+
+
+
{ + InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); + Doc.UserDoc().inkColor = "rgb(255,0,0)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
{ + InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); + Doc.UserDoc().inkColor = "rgb(0,128,0)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
{ + InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); + Doc.UserDoc().inkColor = "rgb(0,0,255)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
+
+ ) => InkingControl.Instance.switchWidth(e.target.value)} /> +
+
+
+ ); + } + } + + onSwitchInking = () => { + const button = document.getElementById("inkButton") as HTMLElement; + const color = InkingControl.Instance.selectedColor; + button.style.backgroundColor = this._ink ? "white" : color; + button.style.color = this._ink ? "black" : "white"; + + if (!this._ink) { + console.log("INK IS ACTIVE"); + InkingControl.Instance.switchTool(InkTool.Pen); + MobileInterface.Instance.drawingInk = true; + this._ink = true; + } else { + console.log("INK IS INACTIVE"); + InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + this._ink = false; + } + } + + drawInk = () => { + if (this._activeDoc._viewType === "docking") { + const inkIsOn = this._ink; + return
+ +
; + } + } + + downloadDocument = () => { if (this._activeDoc.type === "image") { - const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); - return
{ - if (isPinned) { - DockedFrameRenderer.UnpinDoc(this._activeDoc); - } - else { - DockedFrameRenderer.PinDoc(this._activeDoc); - } + window.open(url); + console.log(url); }}> -
; } } recordAudio = async () => { - // upload to server with known URL - this._parents.push(this._activeDoc); + // upload to server with known URL + if (this._activeDoc.title !== "mobile audio") { + this._parents.push(this._activeDoc); + } const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; + console.log(audioDoc); if (audioDoc) { console.log("audioClicked: " + audioDoc.title); this._activeDoc = audioDoc; this.switchCurrentView((userDoc: Doc) => audioDoc); - this.toggleSidebar(); - } - const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - if (audioRightSidebar) { - console.log(audioRightSidebar.title); - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - if (data) { - data.push(audioDoc); - } + this._homeMenu = false; + // this.toggleSidebar(); } + // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + // this.audioState = await audioDoc.getProto; + // if (this.audioState) { + // console.log(this.audioState); + // const data = Cast(audioRightSidebar.data, listSpec(Doc)); + // if (data) { + // data.push(audioDoc); + // } + // } } - openDefaultPresentation = () => { - this._parents.push(this._activeDoc); - const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; - - if (presentation) { - console.log("presentation clicked: " + presentation.title); - this._activeDoc = presentation; - this.switchCurrentView((userDoc: Doc) => presentation); - this.toggleSidebar(); + uploadAudio = () => { + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._activeDoc; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + console.log(audioDoc.proto); + if (data) { + data.push(audioDoc); } + // this.recordAudio(); } - // mobileHome = () => { - // return ( - //
- //
- - //
- //
- - //
- //
- - //
- //
- - //
- //
- - //
- //
- // ); + // renderActiveCollection = (userDoc: Doc) => { + // if (this.activeContainer) { + // const active = Cast(this.activeContainer.data, listSpec(Doc)); + // if (active) { + // return ( + //
HELLO!
+ // ); + // } + // } // } - renderActiveCollection = (userDoc: Doc) => { - if (this.activeContainer) { - const active = Cast(this.activeContainer.data, listSpec(Doc)); - if (active) { - return ( -
HELLO!
- ); - } - } - } - onBack = (e: React.MouseEvent) => { this.switchCurrentView((userDoc: Doc) => this.mainDoc); InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool @@ -445,6 +1833,44 @@ export class MobileInterface extends React.Component { } } + pinToPresentation = () => { + // Only making button available if it is an image + if (this._activeDoc.type === "image") { + const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); + return
{ + if (isPinned) { + DockedFrameRenderer.UnpinDoc(this._activeDoc); + } + else { + DockedFrameRenderer.PinDoc(this._activeDoc); + } + }}> + +
; + } + } + + setupDefaultPresentation = () => { + if (this._activeDoc.title !== "Presentation") { + this._parents.push(this._activeDoc); + } + + const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + + if (presentation) { + console.log(this._activeDoc.mobile); + console.log("presentation clicked: " + presentation.title); + this._activeDoc = presentation; + this.switchCurrentView((userDoc: Doc) => presentation); + this._homeMenu = false; + // this.toggleSidebar(); + } + } + onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); @@ -453,7 +1879,7 @@ export class MobileInterface extends React.Component { render() { // const content = this.currentView === "main" ? this.mainContent : // this.currentView === "ink" ? this.inkContent : - // this.currentView === "upload" ? this.uploadContent : <>; + // this.currentView === "upload" ? this.uploadContent : <>;onDragOver={this.onDragOver} return (
{/* @@ -462,16 +1888,28 @@ export class MobileInterface extends React.Component { */} {/* */} - {this.displayWorkspaces()} - {this.pinToPresentation()} + {/* {this.menuOptions()} */} + {/* {this.displayHome()} */} +
+ {this.pinToPresentation()} + {this.downloadDocument()} + {this.drawInk()} + {this.uploadAudioButton()} + {this.colorTool()} +
+ + {this.displayWorkspaces()} + {this.renderDefaultContent()} + + {/* */} {/* */} {/* */} -
+ {/*
{this.renderDefaultContent()} -
+
*/} {/* */} {/* */} {/* @@ -485,6 +1923,13 @@ export class MobileInterface extends React.Component { } Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); +Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); +Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); + + // WAS 2 // 1 @@ -527,15 +1972,7 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render // } // } -// 2 -// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); -// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); -// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); -// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); - // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); - - -// 3 +// 3 // renderInkingContent = () => { // console.log("rendering inking content"); // // TODO: support panning and zooming @@ -583,4 +2020,4 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render //
// ); // } - // } + // } \ No newline at end of file diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 250340e36..f600ff637 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -83,15 +83,17 @@ body { .sidebar { position: absolute; - top: 200px; + top: 120px; opacity: 0; right: -100%; width: 100%; - height: calc(100% - (200px)); - z-index: 5; + height: calc(100% - (120px)); + z-index: 101; background-color: whitesmoke; transition: all 400ms ease 50ms; padding: 20px; + // overflow-y: auto; + // -webkit-overflow-scrolling: touch; // border-right: 5px solid black; } @@ -106,14 +108,23 @@ body { font-size: 35px; text-transform: uppercase; color: black; + } -.sidebar .home { +.sidebar .ink:focus { + outline: 1px solid blue; +} + +.sidebarButtons { + top: 80px; + position: relative; +} + +.home { position: absolute; - top: -135px; - right: calc(50% + 80px); - transform: translate(0%, -50%); - font-size: 40; + top: 30px; + left: 30px; + font-size: 60; user-select: none; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; @@ -173,23 +184,26 @@ body { .back { position: absolute; - top: -140px; - left: 50px; - transform: translate(0%, -50%); - color: black; - font-size: 60; + top: 44%; + left: 42px; + background-color: black; + width: 50px; + height: 50px; + text-align: center; + border-radius: 10px; + transform: translate(0, -50%); + font-size: 25px; user-select: none; - text-transform: uppercase; z-index: 100; - font-family: Arial, Helvetica, sans-serif; } .pathbar { position: absolute; top: 118px; + left: 0px; background: #1a1a1a; - z-index: 20; + z-index: 120; border-radius: 0px; width: 100%; height: 80px; @@ -200,8 +214,8 @@ body { position: relative; font-size: 25; top: 50%; - width: 90%; - left: 3%; + width: 86%; + left: 12%; color: whitesmoke; transform: translate(0%, -50%); z-index: 20; @@ -214,27 +228,71 @@ body { text-transform: uppercase; } -.homeContainer { - position: relative; - top: 200px; - height: calc(100% - 250px); - width: 90%; - overflow: scroll; - left: 5%; - background-color: lightpink; -} - -.pinButton { +.docButton { position: relative; width: 100px; height: 100px; font-size: 90px; text-align: center; - left: 50%; - transform: translate(-50%, 0); border-style: solid; border-radius: 50px; border-width: medium; - background-color: pink; + margin: 10px; z-index: 100; +} + +.docButtonContainer { + top: 90%; + position: absolute; + display: flex; + transform: translate(-50%, 0); + left: 50%; + z-index: 100; +} + +.scrollmenu { + overflow: auto; + white-space: nowrap; +} + +.pathbarItem { + position: relative; + display: inline-flex; + color: whitesmoke; + text-align: center; + transform: translate(100px, 0px); + font-size: 30px; + padding: 10px; + text-transform: uppercase; +} + +.pathbarText { + font-family: sans-serif; + text-align: center; + height: 50px; + padding: 10px; + background-color: rgb(48, 40, 40); + font-size: 30px; + border-radius: 10px; + text-transform: uppercase; + margin-left: 20px; + position: relative; +} + + +.pathIcon { + transform: translate(0px, 8px); + position: relative; +} + +.hidePath { + position: absolute; + height: 100%; + width: 200px; + left: 0px; + top: 0px; + background-image: linear-gradient(to right, #1a1a1a, rgba(255, 0, 0, 0)); + text-align: center; + user-select: none; + z-index: 99; } \ No newline at end of file diff --git a/src/mobile/SideBar.scss b/src/mobile/SideBar.scss deleted file mode 100644 index fb6d13a2b..000000000 --- a/src/mobile/SideBar.scss +++ /dev/null @@ -1,79 +0,0 @@ -* { - margin:0px; - padding:0px; - box-sizing:border-box; - font-family:"Open Sans"; -} -body { - overflow:hidden; -} -.navbar { - position:fixed; - top:0px; - left:0px; - width:100vw; - height:50px; - background:rgba(0,0,0,0.95); -} -.navbar .toggle-btn { - position:absolute; - right:20px; - height:50px; - width:50px; - transition:all 300ms ease-in-out 200ms; -} -.navbar .toggle-btn span { - position:absolute; - top:50%; - left:50%; - transform:translate(-50%,-50%); - width:70%; - height:4px; - background:#eee; - transition:all 200ms ease; -} -.navbar .toggle-btn span:nth-child(1) { - transition:top 200ms ease-in-out; - top:30%; -} -.navbar .toggle-btn span:nth-child(3) { - transition:top 200ms ease-in-out; - top:70%; -} -.navbar .toggle-btn.active { - transition:transform 200ms ease-in-out 200ms; - transform:rotate(135deg); -} -.navbar .toggle-btn.active span:nth-child(1) { - top:50%; -} -.navbar .toggle-btn.active span:nth-child(2) { - transform:translate(-50%,-50%) rotate(90deg); -} -.navbar .toggle-btn.active span:nth-child(3) { - top:50%; -} -.sidebar { - position:absolute; - top:50px; - opacity:0; - right:-100%; - width:100vw; - height:calc(100vh - 45px); - z-index:5; - background:rgba(40,40,40,1); - transition:all 400ms ease 50ms; - padding:15px; -} -.sidebar .item { - width:100%; - padding:13px 6px; - border-bottom:1px solid rgba(200,200,200,0.7); - font-size:18px; - text-transform:uppercase; - color:rgba(250,250,250,0.95); -} -.sidebar.active { - right:0%; - opacity:1; -} \ No newline at end of file diff --git a/src/mobile/SideBar.tsx b/src/mobile/SideBar.tsx deleted file mode 100644 index a06069ed8..000000000 --- a/src/mobile/SideBar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import "./SideBar.scss"; -import { computed } from "mobx"; -import { DocumentView } from '../client/views/nodes/DocumentView'; - -@observer -export class SideBar extends React.Component<{ views: (DocumentView | undefined)[], stack?: any }, {}>{ - - constructor(props: { views: (DocumentView | undefined)[] }) { - super(props); - } - - @computed - onClick() { - document.getElementsByClassName('sidebar') - [0].classList.toggle('active'); - } - - render() { - return ( - <> -
-
- - - -
-
-
-
Workspace1
-
Workspace2
-
Workspace3
-
- - ); - } - -} \ No newline at end of file diff --git a/src/mobile/WorkSpaceButton.scss b/src/mobile/WorkSpaceButton.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/mobile/WorkSpaceButton.tsx b/src/mobile/WorkSpaceButton.tsx deleted file mode 100644 index 70c3e6edc..000000000 --- a/src/mobile/WorkSpaceButton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React = require('react'); -import { observer } from "mobx-react"; -import { observable } from 'mobx'; - -interface IProps { - open: boolean; -} - -@observer -export class MenuButton extends React.Component { - @observable static Instance: MenuButton; - - -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 673be18526a5591b9021993fe4e9421e6373017c Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 8 Jun 2020 14:06:02 +0800 Subject: updated window height --- src/mobile/MobileInterface.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 6b75ce07d..f3fa7de30 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1250,7 +1250,6 @@ export class MobileInterface extends React.Component { pinToPres={emptyFunction} rootSelected={returnFalse} removeDocument={undefined} - onClick={undefined} ScreenToLocalTransform={Transform.Identity} ContentScaling={returnOne} NativeHeight={returnZero} @@ -1295,7 +1294,6 @@ export class MobileInterface extends React.Component { bringToFront={emptyFunction} ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} - // mobile={true} />
); @@ -1303,12 +1301,10 @@ export class MobileInterface extends React.Component { } } - returnWidth = () => 2000; - returnHeight = () => 2000; + returnWidth = () => window.innerWidth; + returnHeight = () => (window.innerHeight - 300); handleClick(doc: Doc) { - console.log(screen.height) - console.log(screen.width) let children = DocListCast(doc.data); if (doc.type !== "collection") { this._parents.push(this._activeDoc); -- cgit v1.2.3-70-g09d2 From 4bcefa13f3e2d48cd6a7ca77af32ae4f3917fbfb Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 7 Jun 2020 23:45:45 -0700 Subject: added color picker (bit buggy) --- src/mobile/MobileInterface.tsx | 177 ++++------------------------------------- src/mobile/MobileMenu.scss | 61 +++++++++++++- 2 files changed, 74 insertions(+), 164 deletions(-) (limited to 'src') diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 6b75ce07d..8a0432d06 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -34,6 +34,9 @@ import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; import { nullAudio, WebField } from '../fields/URLField'; import GestureOverlay from "../client/views/GestureOverlay"; +import { SelectionManager } from "../client/util/SelectionManager"; +import { SketchPicker } from "react-color"; +import { ScriptField } from "../fields/ScriptField"; library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -498,137 +501,6 @@ library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTras // // ); // // } -// renderDefaultContent = () => { -// let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { -// if (doc.type !== "ink") { -// return ( -//
doc.click}>{doc.title} -//
); -// } -// }); - -// if (this._homeMenu === true) { -// return ( -//
-//
-// -// -// -//
-// {this.renderPathbar()} -// -//
-// ); -// } -// const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; -// let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { -// if (doc.type !== "ink") { -// return ( -//
this.handleClick(doc)}>{doc.title} -//
{doc.type}
-// -//
); -// } -// }); - -// if (this._child) { -// buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { -// if (doc.type !== "ink") { -// return ( -//
this.handleClick(doc)}>{doc.title} -//
{doc.type}
-// -//
); -// } -// }); -// } - -// if (!this._child) { -// return ( -//
-//
-// -// -// -//
-// {this.renderPathbar()} -// -// {/*
-// {this.renderView} -//
*/} -//
-// ); -// } -// else { -// return ( -//
-//
-// -// -// -//
-// {this.renderPathbar()} -// -//
-// ); -// } -// } - // recordAudio = async () => { // // upload to server with known URL // if (this._activeDoc.title !== "mobile audio") { @@ -1079,6 +951,7 @@ export class MobileInterface extends React.Component { @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; @observable private audioState: any; + @observable private activeToolbar: boolean = false; public _activeDoc: Doc = this.mainDoc; public _homeDoc: Doc = this.mainDoc; @@ -1466,7 +1339,7 @@ export class MobileInterface extends React.Component {
doc.click}>{doc.title} + onClick={() => doc.proto?.onClick}>{doc.title}
); } }); @@ -1603,48 +1476,26 @@ export class MobileInterface extends React.Component { } } - toggleSelector = () => { - console.log("toggle selector!"); - let toolbar = document.getElementById("toolbar") as HTMLElement; - toolbar.classList.toggle('active'); - } + + @action + toggleSelector = () => this.activeToolbar = !this.activeToolbar + colorTool = () => { if (this._activeDoc._viewType === "docking") { const color = InkingControl.Instance.selectedColor; - console.log(color); + const selDoc = SelectionManager.SelectedDocuments()?.[0]?.rootDoc; return (
-
+
-
{ - InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); - Doc.UserDoc().inkColor = "rgb(255,0,0)"; - console.log(InkingControl.Instance.selectedColor); - }}> -
-
{ - InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); - Doc.UserDoc().inkColor = "rgb(0,128,0)"; - console.log(InkingControl.Instance.selectedColor); - }}> -
-
{ - InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); - Doc.UserDoc().inkColor = "rgb(0,0,255)"; - console.log(InkingControl.Instance.selectedColor); - }}> -
+
) => InkingControl.Instance.switchWidth(e.target.value)} /> diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index f600ff637..2641cdfd2 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -237,7 +237,7 @@ body { border-style: solid; border-radius: 50px; border-width: medium; - margin: 10px; + margin: 20px; z-index: 100; } @@ -295,4 +295,63 @@ body { text-align: center; user-select: none; z-index: 99; +} + +.toolbar { + left: 50%; + transform: translate(-50%); + position: absolute; + height: max-content; + top: 0px; + border-radius: 20px; + background-color: lightgrey; + opacity: 0; + transition: all 400ms ease 50ms; +} + +.toolbar.active { + display: inline-block; + width: fit-content; + padding: 5px; + opacity: 1; + height: max-content; + top: -450px; +} + +.toolbar .colorSelector { + display: inline-flex; + width: fit-content; + padding: 5px; + height: max-content; + pointer-events: all; +} + +.widthSelector { + display: inline-flex; + width: 90%; + height: 100px; + padding: 5px; +} + +.slider { + -webkit-appearance: none; + /* Override default CSS styles */ + appearance: none; + width: 100%; + /* Full-width */ + height: 25px; + /* Specified height */ + background: #d3d3d3; + /* Grey background */ + outline: none; + /* Remove outline */ +} + +.colorButton { + width: 70px; + margin: 10px; + height: 70px; + border-style: solid; + border-width: 3px; + border-radius: 100%; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 520200a2a63a4189d5c6cac2b2ff48f009bb6f72 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Tue, 9 Jun 2020 00:21:50 -0700 Subject: cleaned code --- src/client/util/CurrentUserUtils.ts | 4 +- src/mobile/ImageUpload.tsx | 1 + src/mobile/MobileInterface.tsx | 190 ++++++++++++------------------------ src/mobile/MobileMenu.scss | 22 ++++- 4 files changed, 82 insertions(+), 135 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8ed275efc..f2278bf3d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -409,7 +409,7 @@ export class CurrentUserUtils { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ { title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" }, { title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" }, - { title: "upload", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "lightgrey" }, + { title: "upload", icon: "upload", click: 'console.log("hi")', backgroundColor: "lightgrey" }, { title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" }, { title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" }, { title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" } @@ -647,7 +647,7 @@ export class CurrentUserUtils { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." }, - { title: "UPLOAD", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "UPLOAD", icon: "upload", click: 'console.log("hi")', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" }, { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index c35c4a917..8d7ccf450 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -12,6 +12,7 @@ import { Doc, Opt } from '../fields/Doc'; import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; +import { Scripting } from '../client/util/Scripting'; export interface ImageUploadProps { Document: Doc; diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index c51b5b654..e9d35096d 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -952,6 +952,7 @@ export class MobileInterface extends React.Component { @observable private renderView?: () => JSX.Element; @observable private audioState: any; @observable private activeToolbar: boolean = false; + @observable private sidebarActive: boolean = false; public _activeDoc: Doc = this.mainDoc; public _homeDoc: Doc = this.mainDoc; @@ -986,8 +987,6 @@ export class MobileInterface extends React.Component { InkingControl.Instance.switchTool(InkTool.None); MobileInterface.Instance.drawingInk = false; InkingControl.Instance.updateSelectedColor("#FF0000"); - console.log(this.userDoc.inkColor); - console.log(InkingControl.Instance.selectedColor); InkingControl.Instance.switchWidth("2"); this.switchCurrentView((userDoc: Doc) => this._homeDoc); } @@ -1027,34 +1026,37 @@ export class MobileInterface extends React.Component { }); } - toggleSidebar = () => { - if (this._open === false) { - this._open = true; - } else { - this._open = false; - } - console.log("clicked"); - let menuButton = document.getElementById("menuButton") as HTMLElement; - menuButton.classList.toggle('active'); + @action + toggleSidebar = () => this.sidebarActive = !this.sidebarActive - let sidebar = document.getElementById("sidebar") as HTMLElement; - sidebar.classList.toggle('active'); + // toggleSidebar = () => { + // if (this._open === false) { + // this._open = true; + // } else { + // this._open = false; + // } + // console.log("clicked"); + // let menuButton = document.getElementById("menuButton") as HTMLElement; + // //menuButton.classList.toggle('active'); - let header = document.getElementById("header") as HTMLElement; + // let sidebar = document.getElementById("sidebar") as HTMLElement; + // //sidebar.classList.toggle('active'); - if (!sidebar.classList.contains('active')) { - header.textContent = String(this._activeDoc.title); - } else { - header.textContent = "library"; - } - } + // let header = document.getElementById("header") as HTMLElement; + + // if (!sidebar.classList.contains('active')) { + // header.textContent = String(this._activeDoc.title); + // } else { + // header.textContent = "library"; + // } + // } switchToLibrary = () => { this._parents.push(this._activeDoc); this.switchCurrentView((userDoc: Doc) => this._library); this._activeDoc = this._library; this._homeMenu = false; - this.toggleSidebar(); + this.sidebarActive = true; } back = () => { @@ -1084,14 +1086,14 @@ export class MobileInterface extends React.Component { } returnHome = () => { - if (this._homeMenu === false || this._open === true) { + if (this._homeMenu === false || this.sidebarActive === true) { this._homeMenu = true; this._parents = []; this._activeDoc = this._homeDoc; this._child = null; this.switchCurrentView((userDoc: Doc) => this._homeDoc); } - if (this._open) { + if (this.sidebarActive) { this.toggleSidebar(); } } @@ -1207,32 +1209,9 @@ export class MobileInterface extends React.Component { // let titleArray = []; let docArray = []; this._parents.map((doc: Doc, index: any) => { - // if (doc === this.mainDoc) { - // pathname = pathname; - // } else if (doc.type === "audio" || doc.type === "presentation") { - // pathname = pathname; - // } else if (doc.type !== "collection") { - // pathname = pathname; - // } else { - // pathname = pathname + " > " + doc.title; - // titleArray.push(doc.title); - // docArray.push(doc); - // } docArray.push(doc); }); docArray.push(this._activeDoc); - // if (this._activeDoc.title === "mobile audio") { - // pathname = this._activeDoc.title; - // } else if (this._activeDoc.title === "Presentation") { - // pathname = this._activeDoc.title; - // } else if (this._activeDoc === this.mainDoc) { - // pathname = pathname; - // } else { - // pathname = pathname + " > " + this._activeDoc.title; - // docArray.push(this._activeDoc); - // titleArray.push(this._activeDoc.title); - // } - return docArray; } @@ -1320,7 +1299,6 @@ export class MobileInterface extends React.Component { } else if (doc === this._homeDoc) { this.returnHome(); } else { - console.log(index); this._activeDoc = doc; this._child = doc; this.switchCurrentView((userDoc: Doc) => doc); @@ -1335,7 +1313,7 @@ export class MobileInterface extends React.Component {
doc.proto?.onClick}>{doc.title} + onClick={() => doc.onClick}>{doc.title}
); } }); @@ -1346,6 +1324,7 @@ export class MobileInterface extends React.Component {
+
this.stop(e)}>
); } - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + + let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + if (this._child) { + workspaces = this._child + } + let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { if (doc.type !== "ink") { return ( @@ -1375,88 +1359,39 @@ export class MobileInterface extends React.Component { } }); - if (this._child) { - buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { - if (doc.type !== "ink") { - return ( -
this.handleClick(doc)}>{doc.title} -
{doc.type}
- -
); - } - }); - } - - if (!this._child) { - return ( -
-
- - - -
- {this.renderPathbar()} -