adjustments to treeview and ctrl-q pasting.

6 files changed, 39 insertions, 15 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 6a2e33836..ba9f32d7d 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -65,7 +65,7 @@ $linkGap : 3px;
         cursor: ew-resize;
     }
     .title{
-        background: lightblue;
+        background: $alt-accent;
         grid-column-start: 3;
         grid-column-end: 4;
         pointer-events: auto;
diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index ea401eaf9..dfa110f8d 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -1,5 +1,20 @@
-.editableView-container-editing {
+.editableView-container-editing, .editableView-container-editing-oneLine {
     overflow-wrap: break-word;
     word-wrap: break-word;
     hyphens: auto;
+    overflow: hidden;
+}
+.editableView-container-editing-oneLine {
+    span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display:block;
+    }
+    input {
+        display:block;
+    }
+}
+.editableView-input {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 73467eb9d..78143ccda 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -24,6 +24,7 @@ export interface EditableProps {
     contents: any;
     height: number;
     display?: string;
+    oneLine?: boolean;
 }
 
 /**
@@ -54,11 +55,11 @@ export class EditableView extends React.Component<EditableProps> {
 
     render() {
         if (this.editing) {
-            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
-                style={{ display: this.props.display }}></input>;
+            return <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ display: this.props.display }} />;
         } else {
             return (
-                <div className="editableView-container-editing" style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
+                <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
                     onClick={action(() => this.editing = true)} >
                     <span>{this.props.contents}</span>
                 </div>
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 78c84cc89..9bd32a89f 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -93,6 +93,15 @@ class TreeView extends React.Component<TreeViewProps> {
         return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div>;
     }
 
+    @action
+    onMouseEnter = () => {
+        this._isOver = true;
+    }
+    @observable _isOver: boolean = false;
+    @action
+    onMouseLeave = () => {
+        this._isOver = false;
+    }
     /**
      * Renders the EditableView title element for placement into the tree.
      */
@@ -101,7 +110,8 @@ class TreeView extends React.Component<TreeViewProps> {
         let onItemDown = SetupDrag(reference, () => this.props.document, this.props.moveDocument, this.props.dropAction);
         let editableView = (titleString: string) =>
             (<EditableView
-                display={"inline"}
+                oneLine={!this._isOver ? true : false}
+                display={"block"}
                 contents={titleString}
                 height={36}
                 GetValue={() => StrCast(this.props.document.title)}
@@ -118,7 +128,7 @@ class TreeView extends React.Component<TreeViewProps> {
                 <FontAwesomeIcon icon="angle-right" size="lg" />
             </div>);
         return (
-            <div className="docContainer" ref={reference} onPointerDown={onItemDown}
+            <div className="docContainer" ref={reference} onPointerDown={onItemDown} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
                 style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                 {editableView(StrCast(this.props.document.title))}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 9ace0272a..718a75770 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -59,13 +59,9 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         if (e.key === "q" && e.ctrlKey) {
             e.preventDefault();
             (async () => {
-                let text = await navigator.clipboard.readText();
-                let ns = text.split("\n").filter(t => t != "\r");
+                let text: string = await navigator.clipboard.readText();
+                let ns = text.split("\n").filter(t => t.trim() != "\r" && t.trim() != "");
                 for (let i = 0; i < ns.length - 1; i++) {
-                    if (ns[i].trim() === "") {
-                        ns.splice(i, 1);
-                        continue;
-                    }
                     while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
                         ns[i].endsWith(";\r") || ns[i].endsWith(";") ||
                         ns[i].endsWith(".\r") || ns[i].endsWith(".") ||
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index cb4d1ad87..838d4d9ac 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -2,10 +2,12 @@
 // colors
 $light-color: #fcfbf7;
 $light-color-secondary:#f1efeb;
-$main-accent: #61aaa3;
+//$main-accent: #61aaa3;
+$main-accent: #aaaaa3;
 // $alt-accent: #cdd5ec;
 // $alt-accent: #cdeceb;
-$alt-accent: #59dff7;
+//$alt-accent: #59dff7;
+$alt-accent: #c2c2c5;
 $lighter-alt-accent: rgb(207, 220, 240);
 $intermediate-color: #9c9396;
 $dark-color: #121721;