fixed some z-index issues with lightbox and typing new notes + videobox zooming zindex

8 files changed, 15 insertions, 8 deletions

diff --git a/src/client/views/LightboxView.scss b/src/client/views/LightboxView.scss
index 9847966bf..35f11b699 100644
--- a/src/client/views/LightboxView.scss
+++ b/src/client/views/LightboxView.scss
@@ -4,7 +4,7 @@
     width: 100%;
     height: 100%;
     background: #000000bb;
-    z-index: 10000;
+    z-index: 1000;
     .lightboxView-contents {
         position: absolute;
     }
diff --git a/src/client/views/PreviewCursor.scss b/src/client/views/PreviewCursor.scss
index d384fd284..de9bd69c4 100644
--- a/src/client/views/PreviewCursor.scss
+++ b/src/client/views/PreviewCursor.scss
@@ -7,4 +7,5 @@
     left:0;
     pointer-events: none;
     opacity: 1;
+    z-index: 1001;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 180eaba4e..47adb6a1c 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -6,7 +6,7 @@
     display: inline-flex;
     width: 100%;
     opacity: 0.9;
-    z-index: 9001;
+    z-index: 901;
     transition: top .5s;
     background: #323232;
     color: white;
@@ -30,7 +30,7 @@
         height: 32px;
         border-bottom: .5px solid rgb(180, 180, 180);
         overflow: visible;
-        z-index: 9001;
+        z-index: 901;
         border: unset;
 
         .collectionViewBaseChrome {
@@ -325,7 +325,7 @@
 .webBox-urlEditor {
     position: relative;
     opacity: 0.9;
-    z-index: 9001;
+    z-index: 901;
     transition: top .5s;
 
     .urlEditor {
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index b9123587b..dd8d77603 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -13,6 +13,11 @@
     .collectionStackedTimeline {
         background: beige;
     }
+    .videoBox-stackPanel {
+        z-index: -1;
+        width: 100%;
+        position: absolute; 
+    }
 }
 
 .videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen,
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 324861573..a821eb7c2 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -489,7 +489,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
     setAnchorTime = (time: number) => this.player!.currentTime = this.layoutDoc._currentTimecode = time;
     timelineHeight = () => this.props.PanelHeight() * (100 - this.heightPercent) / 100;
     @computed get renderTimeline() {
-        return <div style={{ width: "100%", transition: this.transition, height: `${100 - this.heightPercent}%`, position: "absolute" }}>
+        return <div className="videoBox-stackPanel" style={{ transition: this.transition, height: `${100 - this.heightPercent}%` }}>
             <CollectionStackedTimeline ref={this._stackedTimeline} {...this.props}
                 fieldKey={this.annotationKey}
                 renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 5a7c1c904..ca6611a6b 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -96,7 +96,7 @@
     }
 
     .webBox-annotationToggle {
-        z-index: 9001;
+        z-index: 901;
         position: absolute;
         top: 2;
         left: 2;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2434bee40..a91157519 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -66,6 +66,7 @@ import { StyleProp } from '../../StyleProvider';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
 import { DocumentManager } from '../../../util/DocumentManager';
+import { LightboxView } from '../../LightboxView';
 const translateGoogleApi = require("translate-google-api");
 
 export interface FormattedTextBoxProps {
@@ -1244,7 +1245,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             (this._editorView as any).TextView = this;
         }
 
-        const selectOnLoad = this.rootDoc[Id] === FormattedTextBox.SelectOnLoad;
+        const selectOnLoad = this.rootDoc[Id] === FormattedTextBox.SelectOnLoad && (!LightboxView.LightboxDoc || this.props.docViewPath.includes(LightboxView.LightboxDocView.current!));
         if (selectOnLoad && !this.props.dontRegisterView && !this.props.dontSelectOnLoad && this.isActiveTab(this.ProseRef)) {
             FormattedTextBox.SelectOnLoad = "";
             this.props.select(false);
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 76f9b66eb..4f5b7e41a 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -13,7 +13,7 @@
     overflow-x: visible;
     background: lightgrey;
     overflow: visible;
-    z-index: 10000;
+    z-index: 1000;
 
     .searchBox-bar {
         height: $searchpanel-height;