added button to lightbox to create a tab from current document. changed stepInto to first shrinkwrap(), then to step through collection

2 files changed, 44 insertions, 8 deletions

diff --git a/src/client/views/LightboxView.scss b/src/client/views/LightboxView.scss
index 4ea2dc2d6..5d42cd97f 100644
--- a/src/client/views/LightboxView.scss
+++ b/src/client/views/LightboxView.scss
@@ -1,3 +1,32 @@
+
+    .lightboxView-navBtn {
+        margin: auto;
+        position: absolute;
+        right: 10;
+        top: 10;
+        background: transparent;
+        border-radius: 8;
+        color:white;
+        opacity: 0.7;
+        width: 35; 
+        &:hover {
+            opacity: 1;
+        }
+    }
+    .lightboxView-tabBtn {
+        margin: auto;
+        position: absolute;
+        right: 35;
+        top: 10;
+        background: transparent;
+        border-radius: 8;
+        color:white;
+        opacity: 0.7;
+        width: 35;
+        &:hover {
+            opacity: 1;
+        }
+    }
 .lightboxView-frame {
     position: absolute; 
     top: 0; left: 0;
@@ -15,7 +44,6 @@
             position: relative;
             background: transparent;
             border-radius: 8;
-            color:white;
             opacity: 0.7;
             width: 35;
             &:hover {
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index ce36d9182..88739fe91 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,19 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, trace } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import "normalize.css";
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { Cast, NumCast, StrCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, returnFalse } from '../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
 import { DocumentManager } from '../util/DocumentManager';
 import { LinkManager } from '../util/LinkManager';
 import { SelectionManager } from '../util/SelectionManager';
 import { Transform } from '../util/Transform';
+import { CollectionDockingView } from './collections/CollectionDockingView';
 import { TabDocView } from './collections/TabDocView';
 import "./LightboxView.scss";
-import { DocumentView, ViewAdjustment } from './nodes/DocumentView';
+import { DocumentView } from './nodes/DocumentView';
 import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
 
 interface LightboxViewProps {
@@ -160,7 +161,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
         const { doc, target } = LightboxView._history?.lastElement();
         const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc);
         if (docView) {
-            LightboxView._docTarget = undefined;
+            LightboxView._docTarget = target;
             const focusSpeed = 1000;
             doc._viewTransition = `transform ${focusSpeed}ms`;
             if (!target) docView.ComponentView?.shrinkWrap?.();
@@ -197,7 +198,6 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                 TabDocView.PinDoc(coll, { hidePresBox: true });
             }
         }
-        setTimeout(LightboxView.Next);
     }
 
     future = () => LightboxView._future;
@@ -228,7 +228,6 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                             const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
                             if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
                             else target && targetView?.focus(target, { willZoom: true, scale: 0.9, instant: true });
-                            LightboxView._docTarget = undefined;
                         }));
                     })}
                         Document={LightboxView.LightboxDoc}
@@ -270,7 +269,16 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         LightboxView.Next();
                     })}
                 <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} tourMap={this.tourMap} />
-                <div className="lightboxView-navBtn" title={"toggle fit width"} style={{ position: "absolute", right: 10, top: 10, color: "white" }}
+                <div className="lightboxView-tabBtn" title={"open in tab"}
+                    onClick={e => {
+                        e.stopPropagation();
+                        CollectionDockingView.AddSplit(LightboxView._docTarget || LightboxView._doc!, "onRight");
+                        SelectionManager.DeselectAll();
+                        LightboxView.SetLightboxDoc(undefined);
+                    }}>
+                    <FontAwesomeIcon icon={"file-download"} size="2x" />
+                </div>
+                <div className="lightboxView-navBtn" title={"toggle fit width"}
                     onClick={e => { e.stopPropagation(); LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth; }}>
                     <FontAwesomeIcon icon={"arrows-alt-h"} size="2x" />
                 </div>