From 73dc79ddc41b56e2f36a5b2e442fe9c71648b118 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 17 Mar 2021 15:08:47 -0400 Subject: rearranged top bar buttons - moved some into PropertiesButtons. Cleaned up 'editing' field for key frames to not write to the document. --- src/client/views/PropertiesButtons.tsx | 51 +++++++++- src/client/views/collections/CollectionMenu.scss | 1 - src/client/views/collections/CollectionMenu.tsx | 104 +++++++++------------ .../collectionFreeForm/CollectionFreeFormView.tsx | 6 +- src/client/views/nodes/DocumentView.tsx | 2 + src/client/views/nodes/PresBox.tsx | 10 +- 6 files changed, 103 insertions(+), 71 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d303495a4..7a83295c7 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -82,6 +82,9 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get autoHeightButton() { return this.propertyToggleBtn("Auto\xA0Size", "_autoHeight", on => `Automatical vertical sizing to show all content`, on => "arrows-alt-v"); } + @computed get gridButton() { + return this.propertyToggleBtn("Grid", "_backgroundGrid-show", on => `Display background grid in collection`, on => "border-all"); + } @computed get onClickButton() { @@ -98,6 +101,27 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get perspectiveButton() { + return !this.selectedDoc ? (null) : Choose view perspective} placement="top"> +
+
+ +
e.stopPropagation()} > + +
+ +
+
Perspective
+
+ ; + } + + @undoBatch + handlePerspectiveChange = (e: any) => { + this.selectedDoc && (this.selectedDoc._viewType = e.target.value); + SelectionManager.Views().filter(dv => dv.docView).map(dv => dv.docView!).forEach(docView => docView.layoutDoc._viewType = e.target.value); + } @undoBatch @action @@ -139,6 +163,21 @@ export class PropertiesButtons extends React.Component<{}, {}> { {Doc.UserDoc().noviceMode ? (null) :
Edit onClick Script
} ; } + @computed + get onPerspectiveFlyout() { + const excludedViewTypes = Doc.UserDoc().noviceMode ? [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Stacking, CollectionViewType.Map, CollectionViewType.Linear] : + [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear]; + + const makeLabel = (value: string, label: string) =>
+ +
; + return
+ {Object.values(CollectionViewType).filter(type => !excludedViewTypes.includes(type)).map(type => makeLabel(type, type))} +
; + } render() { const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)]; @@ -153,16 +192,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{toggle(this.titleButton)} {toggle(this.captionButton)} - {toggle(this.chromeButton, { display: isCollection ? "" : "none" })} {toggle(this.lockButton)} {toggle(this.dictationButton)} - {toggle(this.autoHeightButton, { display: !isText && !isStacking ? "none" : "" })} {toggle(this.onClickButton)} - {toggle(this.clustersButton, { display: !isFreeForm ? "none" : "" })} - {toggle(this.panButton, { display: !isFreeForm ? "none" : "" })} - {toggle(this.fitContentButton, { display: !isFreeForm && !isText ? "none" : "" })} {toggle(this.fitWidthButton)} + {toggle(this.fitContentButton, { display: !isFreeForm ? "none" : "" })} + {toggle(this.autoHeightButton, { display: !isText && !isStacking ? "none" : "" })} {toggle(this.maskButton, { display: !isInk ? "none" : "" })} + {toggle(this.chromeButton, { display: isCollection ? "" : "none" })} + {toggle(this.gridButton, { display: isCollection ? "" : "none" })} + {toggle(this.clustersButton, { display: !isFreeForm ? "none" : "" })} + {toggle(this.panButton, { display: !isFreeForm ? "none" : "" })} + {toggle(this.perspectiveButton, { display: !isCollection ? "none" : "" })}
; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 47adb6a1c..2c81d727e 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -318,7 +318,6 @@ .collectionMenu-webUrlButtons { margin-left: 44; background: lightGray; - width: 100%; display: flex; } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index dd0cb86c2..6a9ad27c0 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -223,7 +223,6 @@ export class CollectionViewBaseChrome extends React.Component(); private _viewRef = React.createRef(); @observable private _currentKey: string = ""; @@ -430,14 +429,13 @@ export class CollectionViewBaseChrome extends React.Component; - const targetDoc = this.selectedDoc; - {/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) :
{"Pin to presentation trail with current view"}
} placement="top"> */ } - return (targetDoc && targetDoc.type !== DocumentType.PRES && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ?
{"Pin with current view"}
} placement="top"> - - : (null); + return !this.selectedDoc ? (null) : + {"Pin with current view"}} placement="top"> + + ; } @@ -488,48 +486,40 @@ export class CollectionViewBaseChrome extends React.Component{"Show Lightbox of Documents"}} placement="top"> - ; } - @computed get gridbackgroundButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) : {"Toggle background grid"}} placement="top"> - - ; - } render() { return (
- {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} - {!this._buttonizableCommands ? (null) : this.templateChrome} - {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : - Toggle Overlay Layer
} placement="bottom"> - - } - {this.notACollection ? (null) : this.lightboxButton} - {this.notACollection ? (null) : this.gridbackgroundButton} {this.aliasButton} {/* {this.pinButton} */} {this.pinWithViewButton} + {this.lightboxButton} + Toggle Overlay Layer
} placement="bottom"> + + + {this.subChrome} + {/* {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} */} + {!this._buttonizableCommands ? (null) : this.templateChrome}
- {this.subChrome} ); @@ -737,38 +727,36 @@ export class CollectionFreeFormViewChrome extends React.Component - {!Doc.UserDoc().noviceMode && !this.isText && !this.props.isDoc ? - <> - Back Frame} placement="bottom"> -
- -
- - Toggle View All} placement="bottom"> -
this.document.editing = !this.document.editing)} > - {NumCast(this.document._currentFrame)} -
- - Forward Frame} placement="bottom"> -
- -
- - - : null} - {!this.selectedDocumentView?.ComponentView?.menuControls ? (null) : this.selectedDocumentView?.ComponentView?.menuControls?.()} {!this.isText ? <> {this.drawButtons} {this.widthPicker} {this.colorPicker} {this.fillPicker} + {Doc.UserDoc().noviceMode || this.props.isDoc ? (null) : + <> + Back Frame} placement="bottom"> +
+ +
+ + Toggle View All} placement="bottom"> +
this.props.docView.ComponentView?.setKeyFrameEditing?.(!this.props.docView.ComponentView?.getKeyFrameEditing?.()))} > + {NumCast(this.document._currentFrame)} +
+ + Forward Frame} placement="bottom"> +
+ +
+ + } : - (null) + } - {
} + {!this.selectedDocumentView?.ComponentView?.menuControls ? (null) : this.selectedDocumentView?.ComponentView?.menuControls?.()} ; } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 0ee2fad2e..57dba0f75 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -110,6 +110,7 @@ export class CollectionFreeFormView extends CollectionSubView(); @observable _marqueeRef = React.createRef(); + @observable _keyframeEditing = false; @observable _focusFilters: Opt; // docFilters that are overridden when previewing a link to an anchor which has docFilters set on it @observable _focusRangeFilters: Opt; // docRangeFilters that are overridden when previewing a link to an anchor which has docRangeFilters set on it @observable ChildDrag: DocumentView | undefined; // child document view being dragged. needed to update drop areas of groups when a group item is dragged. @@ -147,6 +148,8 @@ export class CollectionFreeFormView extends CollectionSubView this._keyframeEditing = set; + getKeyFrameEditing = () => this._keyframeEditing; onChildClickHandler = () => this.props.childClickScript || ScriptCast(this.Document.onChildClick); onChildDoubleClickHandler = () => this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); parentActive = (outsideReaction: boolean) => this.props.active(outsideReaction) || this.props.parentActive?.(outsideReaction) || this.backgroundActive || this.layoutDoc._viewType === CollectionViewType.Pile ? true : false; @@ -1051,7 +1054,6 @@ export class CollectionFreeFormView extends CollectionSubView; } - addDocTab = action((doc: Doc, where: string) => { if (where === "inParent") { ((doc instanceof Doc) ? [doc] : doc).forEach(doc => { @@ -1076,7 +1078,7 @@ export class CollectionFreeFormView extends CollectionSubView boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height. However, some content views (e.g., FreeFormView w/ fitToBox set) may ignore the native dimensions so this flags the DocumentView to not do Nativre scaling. shrinkWrap?: () => void; // requests a document to display all of its contents with no white space. currently only implemented (needed?) for freeform views menuControls?: () => JSX.Element; // controls to display in the top menu bar when the document is selected. + getKeyFrameEditing?: () => boolean; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown) + setKeyFrameEditing?: (set: boolean) => void; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown) } export interface DocumentViewSharedProps { renderDepth: number; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 682ec5356..3c1fda465 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -224,7 +224,7 @@ export class PresBox extends ViewBoxBaseComponent setTimeout(() => targetDoc._viewTransition = undefined, 1010); this.nextKeyframe(targetDoc, activeItem); if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc); - else targetDoc.editing = true; + else targetDoc.keyFrameEditing = true; } _mediaTimer!: [NodeJS.Timeout, Doc]; @@ -1902,8 +1902,8 @@ export class PresBox extends ViewBoxBaseComponent
{ e.stopPropagation(); this.prevKeyframe(targetDoc, activeItem); }}>
-
targetDoc.editing = !targetDoc.editing)} > +
targetDoc.keyFrameEditing = !targetDoc.keyFrameEditing)} > {NumCast(targetDoc._currentFrame)}
{ e.stopPropagation(); this.nextKeyframe(targetDoc, activeItem); }}> @@ -2063,7 +2063,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { - targetDoc.editing = false; + targetDoc.keyFrameEditing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc._currentFrame = 0; @@ -2074,7 +2074,7 @@ export class PresBox extends ViewBoxBaseComponent activeItem.presProgressivize = false; targetDoc.presProgressivize = false; targetDoc._currentFrame = 0; - targetDoc.editing = true; + targetDoc.keyFrameEditing = true; } } -- cgit v1.2.3-70-g09d2