title bar fixes and more dark scheme stuff

7 files changed, 41 insertions, 24 deletions

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index 29b750720..b510385ff 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -2868,7 +2868,7 @@
 	 * @type {String}
 	 */
     lm.controls.Tab._template = '<li class="lm_tab"><i class="lm_left"></i>' +
-        '<span class="lm_title"></span><div class="lm_close_tab"></div>' +
+        '<div class="lm_title_wrap"><input class="lm_title"/></div><div class="lm_close_tab"></div>' +
         '<i class="lm_right"></i></li>';
 
     lm.utils.copy(lm.controls.Tab.prototype, {
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index b8fd7be0b..df594be4d 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -32,9 +32,11 @@
 }
 
 .mainView-container-dark {
-    .lm_splitter {
+    .lm_goldenlayout {
         background: dimgray;
-        opacity: 0.5;
+    }
+    .marquee {
+        border-color: white;
     }
 }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5d739474e..de76106d1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -276,10 +276,11 @@ export class MainView extends React.Component {
 
     childBackgroundColor = (doc: Doc) => {
         if (this.darkScheme) {
-            return doc.type === DocumentType.TEXT ? "#2d2d2d" : "black";
+            return doc.type === DocumentType.TEXT || doc.type === DocumentType.BUTTON ? "#2d2d2d" :
+                (doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) || doc.type === DocumentType.BUTTON ? "#2d2d2d" : "black";
         }
         return doc.type === DocumentType.TEXT ? "#f1efeb" :
-            doc.type === DocumentType.COL && doc._viewType === CollectionViewType.Tree ? "lightgray" : "white";
+            (doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) || doc.type === DocumentType.BUTTON ? "lightgray" : "white";
     }
     sidebarBackgroundColor = (doc: Doc) => {
         return this.childBackgroundColor(doc);
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 819332d86..2fafcecb2 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,8 +1,22 @@
 @import "../../views/globalCssVariables.scss";
 
-.lm_active .messageCounter {
-    color: white;
-    background: #999999;
+.lm_title {
+    margin-top: 3px;
+    background: black;
+    border-radius: 5px;
+    border: solid 1px dimgray;
+    border-width: 2px 2px 0px;
+    height: 20px;
+    transform: translate(0px, -3px);
+}
+.lm_title_wrap {
+    overflow: hidden;
+    height: 19px;
+    margin-top: -3px;
+    display:inline-block;
+}
+.lm_active .lm_title {
+    border: solid 1px lightgray;
 }
 .lm_header .lm_tab .lm_close_tab {
     position: absolute;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 67a7577eb..6abfb59c3 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -379,16 +379,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         });
         window.addEventListener("pointerup", onPointerUp);
         const className = (e.target as any).className;
-        if (className === "messageCounter") {
-            e.stopPropagation();
-            e.preventDefault();
-            const x = e.clientX;
-            const y = e.clientY;
-            const docid = (e.target as any).DashDocId;
-            const tab = (e.target as any).parentElement as HTMLElement;
-            DocServer.GetRefField(docid).then(action(async (sourceDoc: Opt<Field>) =>
-                (sourceDoc instanceof Doc) && DragManager.StartLinkTargetsDrag(tab, x, y, sourceDoc)));
-        }
         if (className === "lm_drag_handle" || className === "lm_close" || className === "lm_maximise" || className === "lm_minimise" || className === "lm_close_tab") {
             this._flush = true;
         }
@@ -430,6 +420,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
 
     tabCreated = async (tab: any) => {
+        tab.titleElement[0].Tab = tab;
         if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
             if (tab.contentItem.config.fixed) {
                 tab.contentItem.parent.config.fixed = true;
@@ -438,6 +429,14 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             const doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId) as Doc;
             const dataDoc = await DocServer.GetRefField(tab.contentItem.config.props.dataDocumentId) as Doc;
             if (doc instanceof Doc) {
+                //tab.titleElement[0].outerHTML = `<input class='lm_title' style="background:black" value='${doc.title}' />`;
+                tab.titleElement[0].onclick = (e: any) => tab.titleElement[0].focus();
+                tab.titleElement[0].onchange = (e: any) => {
+                    tab.titleElement[0].size = e.currentTarget.value.length + 1;
+                    Doc.SetInPlace(doc, "title", e.currentTarget.value, true);
+                }
+                tab.titleElement[0].size = StrCast(doc.title).length + 1;
+                tab.titleElement[0].value = doc.title;
                 const gearSpan = document.createElement("span");
                 gearSpan.className = "collectionDockingView-gear";
                 gearSpan.style.position = "relative";
@@ -464,15 +463,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                     }}><DockingViewButtonSelector Document={doc} Stack={stack} /></span>, gearSpan);
                 tab.reactComponents = [gearSpan];
                 tab.element.append(gearSpan);
-                tab.reactionDisposer = reaction(() => [doc.title, Doc.IsBrushedDegree(doc)], () => {
-                    tab.titleElement[0].textContent = doc.title, { fireImmediately: true };
-                    tab.titleElement[0].style.outline = `${["transparent", "white", "white"][Doc.IsBrushedDegreeUnmemoized(doc)]} ${["none", "dashed", "solid"][Doc.IsBrushedDegreeUnmemoized(doc)]} 1px`;
+                tab.reactionDisposer = reaction(() => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), ({ title, degree }) => {
+                    tab.titleElement[0].textContent = title, { fireImmediately: true };
+                    tab.titleElement[0].style.padding = degree ? 0 : 2;
+                    tab.titleElement[0].style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`;
                 });
                 //TODO why can't this just be doc instead of the id?
                 tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
             }
         }
-        tab.titleElement[0].Tab = tab;
         tab.closeElement.off('click') //unbind the current click handler
             .click(async function () {
                 tab.reactionDisposer && tab.reactionDisposer();
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index be971eda6..48294f9c2 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -293,7 +293,8 @@ export class CollectionView extends Touchable<FieldViewProps> {
         return (<div className={"collectionView"}
             style={{
                 pointerEvents: this.props.Document.isBackground ? "none" : "all",
-                boxShadow: this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined : `#9c9396 ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
+                boxShadow: this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined :
+                    `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31)" : "#9c9396"} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
             }}
             onContextMenu={this.onContextMenu}>
             {this.showIsTagged()}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index d09837d96..888e27f28 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -227,7 +227,7 @@ export class CurrentUserUtils {
         // Finally, setup the list of buttons to display in the sidebar
         doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.ToolsBtn as Doc], {
             _width: 500, _height: 80, boxShadow: "0 0", sectionFilter: "title", hideHeadings: true, ignoreClick: true,
-            backgroundColor: "rgb(100, 100, 100)", _chromeStatus: "disabled", title: "library stack",
+            _chromeStatus: "disabled", title: "library stack",
             _yMargin: 10,
         });
     }