From 73dc79ddc41b56e2f36a5b2e442fe9c71648b118 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
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/collections/CollectionMenu.tsx | 104 +++++++++++-------------
 1 file changed, 46 insertions(+), 58 deletions(-)

(limited to 'src/client/views/collections/CollectionMenu.tsx')

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<CollectionMenuProp
             case CollectionViewType.Carousel3D: return this._freeform_commands;
         }
     }
-    private _picker: any;
     private _commandRef = React.createRef<HTMLInputElement>();
     private _viewRef = React.createRef<HTMLInputElement>();
     @observable private _currentKey: string = "";
@@ -430,14 +429,13 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     @computed
     get pinWithViewButton() {
         const presPinWithViewIcon = <img src={`/assets/pinWithView.png`} style={{ margin: "auto", width: 19 }} />;
-        const targetDoc = this.selectedDoc;
-        {/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} 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)) ? <Tooltip title={<><div className="dash-tooltip">{"Pin with current view"}</div></>} placement="top">
-            <button className="antimodeMenu-button" style={{ borderRight: "1px solid gray", borderLeft: "1px solid gray", justifyContent: 'center' }}
-                onClick={() => this.pinWithView(targetDoc)}>
-                {presPinWithViewIcon}
-            </button>
-        </Tooltip> : (null);
+        return !this.selectedDoc ? (null) :
+            <Tooltip title={<div className="dash-tooltip">{"Pin with current view"}</div>} placement="top">
+                <button className="antimodeMenu-button" style={{ justifyContent: 'center' }}
+                    onClick={() => this.pinWithView(this.selectedDoc)}>
+                    {presPinWithViewIcon}
+                </button>
+            </Tooltip>;
     }
 
 
@@ -488,48 +486,40 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
 
     @computed get lightboxButton() {
         const targetDoc = this.selectedDoc;
-        return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"Show Lightbox of Documents"}</div>} placement="top">
-            <button className="antimodeMenu-button" onPointerDown={() => {
+        return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"View in Lightbox"}</div>} placement="top">
+            <button className="antimodeMenu-button" style={{ borderRight: "1px solid gray", justifyContent: 'center' }} onPointerDown={() => {
                 const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
-                if (docs.length) {
-                    LightboxView.SetLightboxDoc(targetDoc, undefined, docs);
-                }
+                LightboxView.SetLightboxDoc(targetDoc, undefined, docs);
             }}>
                 <FontAwesomeIcon className="documentdecorations-icon" icon="desktop" size="lg" />
             </button>
         </Tooltip>;
     }
-    @computed get gridbackgroundButton() {
-        const targetDoc = this.selectedDoc;
-        return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"Toggle background grid"}</div>} placement="top">
-            <button className="antimodeMenu-button" onPointerDown={action(() => targetDoc["_backgroundGrid-show"] = !targetDoc["_backgroundGrid-show"])}>
-                <FontAwesomeIcon className="documentdecorations-icon" icon={targetDoc["_backgroundGrid-show"] ? "border-all" : ["far", "square"]} size="lg" />
-            </button>
-        </Tooltip>;
-    }
 
     render() {
         return (
             <div className="collectionMenu-cont" >
                 <div className="collectionMenu">
                     <div className="collectionViewBaseChrome">
-                        {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes}
-                        {!this._buttonizableCommands ? (null) : this.templateChrome}
-                        {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
-                            <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
-                                <button className={"antimodeMenu-button"} key="float"
-                                    style={{ backgroundColor: this.props.docView.layoutDoc.z ? "121212" : undefined, borderRight: "1px solid gray" }}
-                                    onClick={undoBatch(() => this.props.docView.props.CollectionFreeFormDocumentView?.().float())}>
-                                    <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
-                                </button>
-                            </Tooltip>}
-                        {this.notACollection ? (null) : this.lightboxButton}
-                        {this.notACollection ? (null) : this.gridbackgroundButton}
                         {this.aliasButton}
                         {/* {this.pinButton} */}
                         {this.pinWithViewButton}
+                        {this.lightboxButton}
+                        <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
+                            <button className={"antimodeMenu-button"} key="float"
+                                style={{
+                                    backgroundColor: this.props.docView.layoutDoc.z ? "121212" : undefined, borderRight: "1px solid gray",
+                                    pointerEvents: this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? "none" : undefined,
+                                    color: this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? "dimgrey" : undefined
+                                }}
+                                onClick={undoBatch(() => this.props.docView.props.CollectionFreeFormDocumentView?.().float())}>
+                                <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
+                            </button>
+                        </Tooltip>
+                        {this.subChrome}
+                        {/* {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} */}
+                        {!this._buttonizableCommands ? (null) : this.templateChrome}
                     </div>
-                    {this.subChrome}
                 </div>
             </div>
         );
@@ -737,38 +727,36 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     render() {
         return !this.props.docView.layoutDoc ? (null) :
             <div className="collectionFreeFormMenu-cont">
-                {!Doc.UserDoc().noviceMode && !this.isText && !this.props.isDoc ?
-                    <>
-                        <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
-                            <div className="backKeyframe" onClick={this.prevKeyframe}>
-                                <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
-                            </div>
-                        </Tooltip>
-                        <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
-                            <div className="numKeyframe" style={{ color: this.document.editing ? "white" : "black", backgroundColor: this.document.editing ? "#5B9FDD" : "#AEDDF8" }}
-                                onClick={action(() => this.document.editing = !this.document.editing)} >
-                                {NumCast(this.document._currentFrame)}
-                            </div>
-                        </Tooltip>
-                        <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
-                            <div className="fwdKeyframe" onClick={this.nextKeyframe}>
-                                <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
-                            </div>
-                        </Tooltip>
-                    </>
-                    : 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) :
+                            <>
+                                <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
+                                    <div className="backKeyframe" onClick={this.prevKeyframe}>
+                                        <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
+                                    </div>
+                                </Tooltip>
+                                <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
+                                    <div className="numKeyframe" style={{ color: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? "white" : "black", backgroundColor: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? "#5B9FDD" : "#AEDDF8" }}
+                                        onClick={action(() => this.props.docView.ComponentView?.setKeyFrameEditing?.(!this.props.docView.ComponentView?.getKeyFrameEditing?.()))} >
+                                        {NumCast(this.document._currentFrame)}
+                                    </div>
+                                </Tooltip>
+                                <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
+                                    <div className="fwdKeyframe" onClick={this.nextKeyframe}>
+                                        <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
+                                    </div>
+                                </Tooltip>
+                            </>}
                     </> :
-                    (null)
+                    <RichTextMenu />
                 }
-                {<div style={{ display: !this.isText ? "none" : undefined }}><RichTextMenu /></div>}
+                {!this.selectedDocumentView?.ComponentView?.menuControls ? (null) : this.selectedDocumentView?.ComponentView?.menuControls?.()}
             </div>;
     }
 }
-- 
cgit v1.2.3-70-g09d2