made goldenlayout tabs/buttons follow color scheme + added hover highlights. got rid of old color scheme code.

4 files changed, 414 insertions, 42 deletions

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index b13753025..132250bae 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,5 +1,284 @@
 @import '../global/globalCssVariables.scss';
-@import '../../../../node_modules/golden-layout/src/css/goldenlayout-base.css';
+
+.lm_root {
+    position: relative;
+}
+.lm_row > .lm_item {
+    float: left;
+}
+.lm_content {
+    overflow: hidden;
+    position: relative;
+}
+.lm_dragging,
+.lm_dragging * {
+    cursor: move !important;
+    user-select: none;
+}
+.lm_maximised {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 40;
+}
+.lm_maximise_placeholder {
+    display: none;
+}
+.lm_splitter {
+    position: relative;
+    z-index: 20;
+}
+.lm_splitter:hover,
+.lm_splitter.lm_dragging {
+    background: orange;
+}
+.lm_splitter.lm_vertical .lm_drag_handle {
+    width: 100%;
+    position: absolute;
+    cursor: ns-resize;
+}
+.lm_splitter.lm_horizontal {
+    float: left;
+    height: 100%;
+}
+.lm_splitter.lm_horizontal .lm_drag_handle {
+    height: 100%;
+    position: absolute;
+    cursor: ew-resize;
+}
+.lm_header {
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+}
+// .lm_header [class^='lm_'] {
+//     box-sizing: content-box !important;
+// }
+.lm_header .lm_controls {
+    position: absolute;
+    right: 3px;
+}
+.lm_header .lm_controls > li {
+    cursor: pointer;
+    float: left;
+    width: 18px;
+    height: 18px;
+    text-align: center;
+}
+.lm_header ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+.lm_header .lm_tabs {
+    position: absolute;
+}
+.lm_header .lm_tab {
+    cursor: pointer;
+    float: left;
+    height: 25px;
+    padding: 0 10px 5px;
+    padding-right: 25px;
+    position: relative;
+    box-shadow: unset !important;
+}
+.lm_header .lm_tab i {
+    width: 2px;
+    height: 19px;
+    position: absolute;
+}
+.lm_header .lm_tab i.lm_left {
+    top: 0;
+    left: -2px;
+}
+.lm_header .lm_tab i.lm_right {
+    top: 0;
+    right: -2px;
+}
+.lm_header .lm_tab .lm_title {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.lm_header .lm_tab .lm_close_tab {
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-align: center;
+}
+.lm_stack.lm_left .lm_header,
+.lm_stack.lm_right .lm_header {
+    height: 100%;
+}
+.lm_dragProxy.lm_left .lm_header,
+.lm_dragProxy.lm_right .lm_header,
+.lm_stack.lm_left .lm_header,
+.lm_stack.lm_right .lm_header {
+    width: 20px;
+    float: left;
+    vertical-align: top;
+}
+.lm_dragProxy.lm_left .lm_header .lm_tabs,
+.lm_dragProxy.lm_right .lm_header .lm_tabs,
+.lm_stack.lm_left .lm_header .lm_tabs,
+.lm_stack.lm_right .lm_header .lm_tabs {
+    transform-origin: left top;
+    top: 0;
+    width: 1000px;
+}
+.lm_dragProxy.lm_left .lm_header .lm_controls,
+.lm_dragProxy.lm_right .lm_header .lm_controls,
+.lm_stack.lm_left .lm_header .lm_controls,
+.lm_stack.lm_right .lm_header .lm_controls {
+    bottom: 0;
+}
+.lm_dragProxy.lm_left .lm_items,
+.lm_dragProxy.lm_right .lm_items,
+.lm_stack.lm_left .lm_items,
+.lm_stack.lm_right .lm_items {
+    float: left;
+}
+.lm_dragProxy.lm_left .lm_header .lm_tabs,
+.lm_stack.lm_left .lm_header .lm_tabs {
+    transform: rotate(-90deg) scaleX(-1);
+    left: 0;
+}
+.lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,
+.lm_stack.lm_left .lm_header .lm_tabs .lm_tab {
+    transform: scaleX(-1);
+    margin-top: 1px;
+}
+.lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,
+.lm_stack.lm_left .lm_header .lm_tabdropdown_list {
+    top: initial;
+    right: initial;
+    left: 20px;
+}
+.lm_dragProxy.lm_right .lm_content {
+    float: left;
+}
+.lm_dragProxy.lm_right .lm_header .lm_tabs,
+.lm_stack.lm_right .lm_header .lm_tabs {
+    transform: rotate(90deg) scaleX(1);
+    left: 100%;
+    margin-left: 0;
+}
+.lm_dragProxy.lm_right .lm_header .lm_controls,
+.lm_stack.lm_right .lm_header .lm_controls {
+    left: 3px;
+}
+.lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,
+.lm_stack.lm_right .lm_header .lm_tabdropdown_list {
+    top: initial;
+    right: 20px;
+}
+.lm_dragProxy.lm_bottom .lm_header .lm_tab,
+.lm_stack.lm_bottom .lm_header .lm_tab {
+    margin-top: 0;
+    border-top: none;
+}
+.lm_dragProxy.lm_bottom .lm_header .lm_controls,
+.lm_stack.lm_bottom .lm_header .lm_controls {
+    top: 3px;
+}
+.lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,
+.lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {
+    top: initial;
+    bottom: 20px;
+}
+.lm_drop_tab_placeholder {
+    float: left;
+    width: 100px;
+    height: 10px;
+    visibility: hidden;
+}
+.lm_header .lm_controls .lm_tabdropdown:before {
+    content: '';
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    display: inline-block;
+    border-top: 5px dashed;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    color: white;
+}
+.lm_header .lm_tabdropdown_list {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    z-index: 5;
+    overflow: hidden;
+}
+.lm_header .lm_tabdropdown_list .lm_tab {
+    clear: both;
+    padding-right: 10px;
+    margin: 0;
+}
+.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
+    width: 100px;
+}
+.lm_header .lm_tabdropdown_list .lm_close_tab {
+    display: none !important;
+}
+.lm_dragProxy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30;
+}
+.lm_dragProxy .lm_header {
+    background: transparent;
+}
+.lm_dragProxy .lm_content {
+    border-top: none;
+    overflow: hidden;
+}
+.lm_dropTargetIndicator {
+    display: none;
+    position: absolute;
+    z-index: 20;
+}
+.lm_dropTargetIndicator .lm_inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 0;
+    left: 0;
+}
+.lm_transition_indicator {
+    display: none;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 20;
+}
+.lm_popin {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 9999;
+}
+.lm_popin > * {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.lm_popin > .lm_bg {
+    z-index: 10;
+}
+.lm_popin > .lm_icon {
+    z-index: 20;
+} /*# sourceMappingURL=goldenlayout-base.css.map */
+
 @import '../../../../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
 
 .lm_title {
@@ -46,18 +325,33 @@
     // font-weight: 700;
 }
 
+.lm_header .lm_tabs {
+    overflow-y: hidden;
+    width: 100%;
+}
+ul.lm_tabs::before {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 1;
+    pointer-events: none;
+    border: solid 1px black;
+}
 .lm_header .lm_tab {
     // padding: 0px;  // moved to MainView.scss, othwerise they get overridden by default stylings
     // opacity: 0.7;
     // box-shadow: none;
     // height: 25px;
     // border-bottom: black solid;
+    border-bottom: unset !important;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
 
     .collectionDockingView-gear {
         display: none;
     }
 }
-
 .lm_header .lm_tab.lm_active {
     padding: 0;
     opacity: 1;
@@ -65,7 +359,11 @@
     box-shadow: none;
     height: 27px;
     margin-right: 2px;
-    // border-bottom: unset;
+    z-index: 2 !important;
+    border-right: solid 2px;
+    border-left: solid 2px;
+    border-top: solid 2px;
+    border-color: black;
 
     .collectionDockingView-gear {
         display: inline-block;
@@ -123,20 +421,63 @@
 }
 
 .lm_close_tab {
+    display: inline-flex !important;
+    opacity: 0 !important;
     padding: 0;
     align-self: center;
     margin-right: 5px;
-    background-color: black;
     border-radius: 3px;
-    opacity: 1 !important;
     width: 15px !important;
     height: 15px !important;
     position: relative !important;
-    display: inline-flex !important;
     align-items: center;
     top: 0 !important;
     right: unset !important;
     left: 0 !important;
+    background-image: unset !important;
+    &::before {
+        content: 'x';
+        color: rgb(50, 50, 50);
+        margin: auto;
+        position: relative;
+        top: -2px;
+    }
+    &:hover {
+        display: inline-flex !important;
+        &::before {
+            color: white;
+        }
+    }
+}
+.lm_close {
+    background-image: unset !important;
+    &:hover {
+        background: gray;
+        color: white !important;
+    }
+    &::before {
+        content: 'x';
+        margin: auto;
+        position: relative;
+        top: -2;
+        font-size: medium;
+        font-family: sans-serif;
+    }
+}
+.lm_active .lm_close_tab {
+    opacity: 1 !important;
+}
+.lm_tab:hover {
+    .lm_close_tab {
+        opacity: 1 !important;
+    }
+}
+
+.lm_iconWrap {
+    &:hover {
+        background: gray;
+        color: white !important;
+    }
 }
 
 .lm_tab,
@@ -154,14 +495,6 @@
     top: 0;
     left: 0;
 
-    // overflow: hidden;  // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu)
-    .collectionDockingView-gear {
-        padding-left: 5px;
-        height: 15px;
-        width: 18px;
-        margin: auto;
-    }
-
     .collectionDockingView-drag {
         touch-action: none;
         position: absolute;
@@ -180,7 +513,6 @@
         display: flex;
         align-content: center;
         justify-content: center;
-        background: $dark-gray;
     }
 
     .lm_controls > li {
@@ -190,14 +522,38 @@
     }
 
     .lm_controls .lm_popout {
-        transform: rotate(45deg);
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
+        background-image: unset;
+        left: -3;
+        &:hover {
+            background: gray;
+            color: white !important;
+        }
+    }
+    li.lm_popout::before {
+        content: '+';
+        margin: auto;
+        font-size: x-large;
+        top: -8;
+        position: relative;
+    }
+    .lm_maximise {
+        background-image: unset !important;
+        &::before {
+            content: '\25A3';
+            margin: auto;
+            font-size: medium;
+            position: relative;
+        }
+        &:hover {
+            background: gray;
+            color: white !important;
+        }
     }
 
     .lm_maximised .lm_controls .lm_maximise {
-        opacity: 1;
-        transform: scale(0.8);
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
+        &::before {
+            content: '\25A2';
+        }
     }
 
     .flexlayout__layout {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 8472c59db..4873a61ff 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -10,7 +10,7 @@ import { List } from '../../../fields/List';
 import { ImageCast, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { GetEffectiveAcl, inheritParentAcls } from '../../../fields/util';
-import { emptyFunction, incrementTitleCopy } from '../../../Utils';
+import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, incrementTitleCopy } from '../../../Utils';
 import { DocServer } from '../../DocServer';
 import { Docs } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
@@ -31,6 +31,7 @@ import { CollectionFreeFormView } from './collectionFreeForm';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { TabDocView } from './TabDocView';
 import React = require('react');
+import { SettingsManager } from '../../util/SettingsManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -60,7 +61,7 @@ export class CollectionDockingView extends CollectionSubView() {
         return this._goldenLayout._maximisedItem !== null;
     }
     private _goldenLayout: any = null;
-
+    static _highlightStyleSheet: any = addStyleSheet();
     constructor(props: SubCollectionViewProps) {
         super(props);
         if (this.props.renderDepth < 0) runInAction(() => (CollectionDockingView.Instance = this));
@@ -330,6 +331,16 @@ export class CollectionDockingView extends CollectionSubView() {
                 width => !this._goldenLayout && width > 20 && setTimeout(() => this.setupGoldenLayout()), // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows
                 { fireImmediately: true }
             );
+            reaction(
+                () => [SettingsManager.userBackgroundColor, SettingsManager.userBackgroundColor],
+                () => {
+                    clearStyleSheetRules(CollectionDockingView._highlightStyleSheet);
+                    addStyleSheetRule(CollectionDockingView._highlightStyleSheet, 'lm_controls', { background: `${SettingsManager.userBackgroundColor} !important` });
+                    addStyleSheetRule(CollectionDockingView._highlightStyleSheet, 'lm_controls', { color: `${SettingsManager.userColor} !important` });
+                    addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${SettingsManager.userBackgroundColor} !important` });
+                },
+                { fireImmediately: true }
+            );
         }
     };
 
@@ -505,6 +516,23 @@ export class CollectionDockingView extends CollectionSubView() {
             }
         });
 
+        let addNewDoc = action(() => {
+            const dashboard = Doc.ActiveDashboard;
+            if (dashboard) {
+                dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1;
+                const docToAdd = Docs.Create.FreeformDocument([], {
+                    _width: this.props.PanelWidth(),
+                    _height: this.props.PanelHeight(),
+                    _layout_fitWidth: true,
+                    _freeform_backgroundGrid: true,
+                    title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`,
+                });
+                Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd);
+                inheritParentAcls(this.dataDoc, docToAdd, false);
+                CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack);
+            }
+        });
+
         stack.header?.controlsContainer
             .find('.lm_close') //get the close icon
             .off('click') //unbind the current click handler
@@ -524,31 +552,18 @@ export class CollectionDockingView extends CollectionSubView() {
                 })
             );
 
+        stack.element.click((e: any) => {
+            if (stack.contentItems.length === 0 && Array.from(document.elementsFromPoint(e.originalEvent.x, e.originalEvent.y)).some(ele => ele?.className === 'empty-tabs-message')) {
+                addNewDoc();
+            }
+        });
         stack.header?.controlsContainer
             .find('.lm_maximise') //get the close icon
             .click(() => setTimeout(this.stateChanged));
         stack.header?.controlsContainer
             .find('.lm_popout') //get the popout icon
             .off('click') //unbind the current click handler
-            .click(
-                action(() => {
-                    // stack.config.fixed = !stack.config.fixed;  // force the stack to have a fixed size
-                    const dashboard = Doc.ActiveDashboard;
-                    if (dashboard) {
-                        dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1;
-                        const docToAdd = Docs.Create.FreeformDocument([], {
-                            _width: this.props.PanelWidth(),
-                            _height: this.props.PanelHeight(),
-                            _layout_fitWidth: true,
-                            _freeform_backgroundGrid: true,
-                            title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`,
-                        });
-                        Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd);
-                        inheritParentAcls(this.dataDoc, docToAdd, false);
-                        CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack);
-                    }
-                })
-            );
+            .click(addNewDoc);
     };
 
     render() {
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index dab53b671..26aa5a121 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -132,6 +132,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
 
             if (tab.element[0].children[1].children.length === 1) {
                 iconWrap.className = 'lm_iconWrap lm_moreInfo';
+                iconWrap.title = 'click for menu, drag to embed in document';
                 const dragBtnDown = (e: React.PointerEvent) => {
                     setupMoveUpEvents(
                         this,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index 1e76d373c..15b6e1d37 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -350,7 +350,7 @@ export function computeTimelineLayout(poolData: Map<string, PoolData>, pivotDoc:
         groupNames.push({ type: 'text', text: toLabel(Math.ceil(maxTime)), x: Math.ceil(maxTime - minTime) * scaling, y: 0, height: fontHeight, fontSize, payload: undefined });
     }
 
-    const divider = { type: 'div', color: Doc.ActiveDashboard?.colorScheme === ColorScheme.Dark ? 'dimgray' : 'black', x: 0, y: 0, width: panelDim[0], height: -1, payload: undefined };
+    const divider = { type: 'div', color: 'black', x: 0, y: 0, width: panelDim[0], height: -1, payload: undefined };
     return normalizeResults(panelDim, fontHeight, docMap, poolData, viewDefsToJSX, groupNames, (maxTime - minTime) * scaling, [divider]);
 
     function layoutDocsAtTime(keyDocs: Doc[], key: number) {