fixes for marquee/insert cursor color on dark backgrounds and drag label

6 files changed, 40 insertions, 24 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 05da5ebed..831a22866 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -339,6 +339,7 @@ export namespace DragManager {
             dragLabel.style.zIndex = '100001';
             dragLabel.style.fontSize = '10px';
             dragLabel.style.position = 'absolute';
+            dragLabel.style.background = '#ffffff90';
             dragLabel.innerText = 'drag titlebar to embed on drop'; // bcz: need to move this to a status bar
             dragDiv.appendChild(dragLabel);
             DragManager.Root().appendChild(dragDiv);
@@ -454,7 +455,7 @@ export namespace DragManager {
         runInAction(() => docsBeingDragged.push(...docsToDrag));
 
         const hideDragShowOriginalElements = (hide: boolean) => {
-            dragLabel.style.display = hide ? '' : 'none';
+            dragLabel.style.display = hide && !CanEmbed ? '' : 'none';
             !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
             setTimeout(() => eles.forEach(ele => (ele.hidden = hide)));
         };
diff --git a/src/client/views/PreviewCursor.scss b/src/client/views/PreviewCursor.scss
index 7be765ea9..82488c750 100644
--- a/src/client/views/PreviewCursor.scss
+++ b/src/client/views/PreviewCursor.scss
@@ -1,4 +1,3 @@
-.previewCursor-Dark,
 .previewCursor {
     color: black;
     position: absolute;
@@ -9,7 +8,3 @@
     opacity: 1;
     z-index: 1001;
 }
-
-.previewCursor-Dark {
-    color: white;
-}
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 82d2bff56..1d88e9ad6 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -1,9 +1,9 @@
 import { action, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc } from '../../fields/Doc';
+import { Doc, Opt } from '../../fields/Doc';
 import { StrCast } from '../../fields/Types';
-import { returnFalse } from '../../Utils';
+import { lightOrDark, returnFalse } from '../../Utils';
 import { Docs, DocumentOptions, DocUtils } from '../documents/Documents';
 import { ImageUtils } from '../util/Import & Export/ImageUtils';
 import { Transform } from '../util/Transform';
@@ -21,6 +21,7 @@ export class PreviewCursor extends React.Component<{}> {
     static _slowLoadDocuments?: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise<void>;
     @observable static _clickPoint = [0, 0];
     @observable public static Visible = false;
+    public static Doc: Opt<Doc>;
     constructor(props: any) {
         super(props);
         document.addEventListener('keydown', this.onKeyPress);
@@ -178,7 +179,12 @@ export class PreviewCursor extends React.Component<{}> {
     }
     render() {
         return !PreviewCursor._clickPoint || !PreviewCursor.Visible ? null : (
-            <div className={`previewCursor${StrCast(Doc.ActiveDashboard?.colorScheme)}`} onBlur={this.onBlur} tabIndex={0} ref={e => e?.focus()} style={{ transform: `translate(${PreviewCursor._clickPoint[0]}px, ${PreviewCursor._clickPoint[1]}px)` }}>
+            <div
+                className="previewCursor"
+                onBlur={this.onBlur}
+                tabIndex={0}
+                ref={e => e?.focus()}
+                style={{ color: lightOrDark(PreviewCursor.Doc?.backgroundColor ?? 'white'), transform: `translate(${PreviewCursor._clickPoint[0]}px, ${PreviewCursor._clickPoint[1]}px)` }}>
                 I
             </div>
         );
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index d93015506..b13753025 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -37,6 +37,10 @@
     display: flex;
 }
 
+.lm_active {
+    height: 27px !important;
+}
+
 .lm_active .lm_title {
     -webkit-appearance: none;
     // font-weight: 700;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
index e0f5cbe5b..7c9d0f6e1 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
@@ -17,7 +17,6 @@
     box-sizing: border-box;
     position: absolute;
     border-width: 1px;
-    border-color: black;
     pointer-events: none;
     .marquee-legend {
         bottom: -18px;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 1c3da1dc5..cd7bd28e9 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -10,7 +10,7 @@ import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
 import { Cast, DocCast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { distributeAcls, GetEffectiveAcl, SharingPermissions } from '../../../../fields/util';
-import { intersectRect, returnFalse, Utils } from '../../../../Utils';
+import { intersectRect, lightOrDark, returnFalse, Utils } from '../../../../Utils';
 import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
 import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents';
 import { DocumentType } from '../../../documents/DocumentTypes';
@@ -39,7 +39,7 @@ interface MarqueeViewProps {
     trySelectCluster: (addToSel: boolean) => boolean;
     nudge?: (x: number, y: number, nudgeTime?: number) => boolean;
     ungroup?: () => void;
-    setPreviewCursor?: (func: (x: number, y: number, drag: boolean, hide: boolean) => void) => void;
+    setPreviewCursor?: (func: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => void;
     slowLoadDocuments: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise<void>;
 }
 
@@ -197,18 +197,18 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         const headers = ns[0].split('\t');
         csvRows.push(headers.join(','));
         ns[0] = '';
-        const eachCell = ns.join('\t').split('\t')
-        let eachRow = []
-        for (let i=1; i<eachCell.length; i++){
+        const eachCell = ns.join('\t').split('\t');
+        let eachRow = [];
+        for (let i = 1; i < eachCell.length; i++) {
             eachRow.push(eachCell[i].replace(/\,/g, ''));
-            if (i % headers.length == 0){
-                csvRows.push(eachRow)
+            if (i % headers.length == 0) {
+                csvRows.push(eachRow);
                 eachRow = [];
             }
         }
-        
-        const blob = new Blob([csvRows.join('\n')], {type: 'text/csv'})
-        const options = { x: x, y: y, title: 'droppedTable', _width: 300, _height: 100, type:'text/csv'}
+
+        const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' });
+        const options = { x: x, y: y, title: 'droppedTable', _width: 300, _height: 100, type: 'text/csv' };
         const file = new File([blob], 'droppedTable', options);
         const loading = Docs.Create.LoadingDocument(file, options);
         DocUtils.uploadFileToDoc(file, {}, loading);
@@ -225,7 +225,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             // allow marquee if right click OR alt+left click OR in adding presentation slide & left key drag mode
             if (e.button === 2 || (e.button === 0 && e.altKey)) {
                 // if (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))) {
-                this.setPreviewCursor(e.clientX, e.clientY, true, false);
+                this.setPreviewCursor(e.clientX, e.clientY, true, false, this.props.Document);
                 // (!e.altKey) && e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors.
                 e.preventDefault();
                 // }
@@ -298,17 +298,19 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         }
     }
 
-    setPreviewCursor = action((x: number, y: number, drag: boolean, hide: boolean) => {
+    setPreviewCursor = action((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => {
         if (hide) {
             this._downX = this._lastX = x;
             this._downY = this._lastY = y;
             this._commandExecuted = false;
             PreviewCursor.Visible = false;
+            PreviewCursor.Doc = undefined;
         } else if (drag) {
             this._downX = this._lastX = x;
             this._downY = this._lastY = y;
             this._commandExecuted = false;
             PreviewCursor.Visible = false;
+            PreviewCursor.Doc = undefined;
             this.cleanupInteractions(true);
             document.addEventListener('pointermove', this.onPointerMove, true);
             document.addEventListener('pointerup', this.onPointerUp, true);
@@ -318,6 +320,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             this._downY = y;
             const effectiveAcl = GetEffectiveAcl(this.props.Document[DocData]);
             if ([AclAdmin, AclEdit, AclAugment].includes(effectiveAcl)) {
+                PreviewCursor.Doc = doc;
                 PreviewCursor.Show(x, y, this.onKeyPress, this.props.addLiveTextDocument, this.props.getTransform, this.props.addDocument, this.props.nudge, this.props.slowLoadDocuments);
             }
             this.clearSelection();
@@ -332,7 +335,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
                 if (!(e.nativeEvent as any).marqueeHit) {
                     (e.nativeEvent as any).marqueeHit = true;
                     if (!this.props.trySelectCluster(e.shiftKey)) {
-                        this.setPreviewCursor(e.clientX, e.clientY, false, false);
+                        this.setPreviewCursor(e.clientX, e.clientY, false, false, this.props.Document);
                     } else e.stopPropagation();
                 }
             }
@@ -629,12 +632,20 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
                     transform: `translate(${p[0]}px, ${p[1]}px)`,
                     width: Math.abs(v[0]),
                     height: Math.abs(v[1]),
+                    color: lightOrDark(this.props.Document?.backgroundColor ?? 'white'),
+                    borderColor: lightOrDark(this.props.Document?.backgroundColor ?? 'white'),
                     zIndex: 2000,
                 }}>
                 {' '}
                 {this._lassoFreehand ? (
                     <svg height={2000} width={2000}>
-                        <polyline points={this._lassoPts.reduce((s, pt) => s + pt[0] + ',' + pt[1] + ' ', '')} fill="none" stroke="black" strokeWidth="1" strokeDasharray="3" />
+                        <polyline //
+                            points={this._lassoPts.reduce((s, pt) => s + pt[0] + ',' + pt[1] + ' ', '')}
+                            fill="none"
+                            stroke={lightOrDark(this.props.Document?.backgroundColor ?? 'white')}
+                            strokeWidth="1"
+                            strokeDasharray="3"
+                        />
                     </svg>
                 ) : (
                     <span className="marquee-legend" />