menu UI updates

8 files changed, 62 insertions, 86 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 194c38a6f..0887759ee 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -3,6 +3,8 @@ import v5 = require("uuid/v5");
 import { ColorState } from 'react-color';
 import { Socket } from 'socket.io';
 import { Message } from './server/Message';
+import { Colors } from './client/views/global/globalEnums';
+import Color = require('color');
 
 export namespace Utils {
     export let DRAG_THRESHOLD = 4;
@@ -556,46 +558,12 @@ export function simulateMouseClick(element: Element | null | undefined, x: numbe
 }
 
 export function lightOrDark(color: any) {
-
-    // Variables for red, green, blue values
-    var r, g, b, hsp;
-
-    // Check the format of the color, HEX or RGB?
-    if (color.match(/^rgb/)) {
-
-        // If RGB --> store the red, green, blue values in separate variables
-        color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
-
-        r = color[1];
-        g = color[2];
-        b = color[3];
-    }
-    else {
-
-        // If hex --> Convert it to RGB: http://gist.github.com/983661
-        color = +("0x" + color.slice(1).replace(
-            color.length < 5 && /./g, '$&$&'));
-
-        r = color >> 16;
-        g = color >> 8 & 255;
-        b = color & 255;
-    }
-
-    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
-    hsp = Math.sqrt(
-        0.299 * (r * r) +
-        0.587 * (g * g) +
-        0.114 * (b * b)
-    );
-
-    // Using the HSP value, determine whether the color is light or dark
-    if (hsp > 127.5) {
-        return 'light';
-    }
-    else {
-
-        return 'dark';
-    }
+    const nonAlphaColor = color.startsWith("#") ? (color as string).substring(0, 7) :
+    color.startsWith("rgba") ? color.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : color;
+    const col = Color(nonAlphaColor).rgb();
+    const colsum = (col.red() + col.green() + col.blue());
+    if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY;
+    else return Colors.WHITE;
 }
 
 
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 4ff0446ad..0440367de 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -990,10 +990,10 @@ export class CurrentUserUtils {
             if (type === "TextMenu") {
                 const textBtns = (CurrentUserUtils.textTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, btnType, click, script, userColorBtn }) => {
                     textDocList.push(Docs.Create.FontIconDocument({
-                        _nativeWidth: width ? width : 30,
-                        _nativeHeight: 30,
-                        _width: width ? width : 30,
-                        _height: 30,
+                        _nativeWidth: width ? width : 25,
+                        _nativeHeight: 25,
+                        _width: width ? width : 25,
+                        _height: 25,
                         icon,
                         toolTip,
                         userColorBtn,
@@ -1006,7 +1006,8 @@ export class CurrentUserUtils {
                         system: true,
                         dontUndo: true,
                         title,
-                        backgroundColor: "black",
+                        color: Colors.WHITE,
+                        backgroundColor: "transparent",
                         _dropAction: "alias",
                         _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
                         onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
@@ -1016,10 +1017,10 @@ export class CurrentUserUtils {
             } else if (type === "InkMenu") {
                 const inkBtns = (CurrentUserUtils.inkTools(doc)).map(({ title, toolTip, icon, btnType, click }) => {
                     textDocList.push(Docs.Create.FontIconDocument({
-                        _nativeWidth: width ? width : 30,
-                        _nativeHeight: 30,
-                        _width: width ? width : 30,
-                        _height: 30,
+                        _nativeWidth: width ? width : 25,
+                        _nativeHeight: 25,
+                        _width: width ? width : 25,
+                        _height: 25,
                         icon,
                         toolTip,
                         script,
@@ -1031,7 +1032,8 @@ export class CurrentUserUtils {
                         system: true,
                         dontUndo: true,
                         title,
-                        backgroundColor: "black",
+                        color: Colors.WHITE,
+                        backgroundColor: "transparent",
                         _dropAction: "alias",
                         _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
                         onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
@@ -1040,14 +1042,12 @@ export class CurrentUserUtils {
                 docList.push(CurrentUserUtils.blist({ linearViewSubMenu: true, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
             } else {
                 docList.push(Docs.Create.FontIconDocument({
-                    _nativeWidth: width ? width : 30,
-                    _nativeHeight: 30,
-                    _width: width ? width : 30,
-                    _height: 30,
+                    _nativeWidth: width ? width : 25,
+                    _nativeHeight: 25,
+                    _width: width ? width : 25,
+                    _height: 25,
                     icon,
                     toolTip,
-                    // testToggle: toggle ? ScriptField.MakeScript(toggle, { scriptContext: "any" }) : undefined,
-                    // toggle: toggle,
                     script,
                     btnType: btnType,
                     btnList: new List<string>(list),
@@ -1057,7 +1057,8 @@ export class CurrentUserUtils {
                     system: true,
                     dontUndo: true,
                     title,
-                    backgroundColor: "black",
+                    color: Colors.WHITE,
+                    backgroundColor: "transparent",
                     _dropAction: "alias",
                     _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
                     onClick: click ? ScriptField.MakeScript(click, { scriptContext: "any" }) : undefined
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 85520f6b3..470ae7c77 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -21,6 +21,7 @@ import "./nodes/FilterBox.scss";
 import "./StyleProvider.scss";
 import React = require("react");
 import Color = require('color');
+import { lightOrDark } from '../../Utils';
 
 export enum StyleLayers {
     Background = "background"
@@ -101,12 +102,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             if (docColor) return docColor;
             const backColor = backgroundCol();
             if (!backColor) return undefined;
-            const nonAlphaColor = backColor.startsWith("#") ? (backColor as string).substring(0, 7) :
-                backColor.startsWith("rgba") ? backColor.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : backColor;
-            const col = Color(nonAlphaColor).rgb();
-            const colsum = (col.red() + col.green() + col.blue());
-            if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY;
-            return Colors.WHITE;
+            return lightOrDark(backColor)
         case StyleProp.Hidden: return BoolCast(doc?._hidden);
         case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], doc?._viewType === CollectionViewType.Pile ? "50%" : "");
         case StyleProp.TitleHeight: return 15;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 1969d728c..9ff1a0f61 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -124,6 +124,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 tab.element[0].prepend(iconWrap);
                 tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
                     ({ layer, color }) => {
+                        console.log("TabDocView: " + this.tabColor);
+                        console.log("lightOrDark: " + lightOrDark(this.tabColor));
                         const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
                         titleEle.style.color = textColor;
                         titleEle.style.backgroundColor = "transparent";
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 9c766e03f..b37233892 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -5,12 +5,16 @@
     overflow: visible;
     height: 100%;
     pointer-events: none;
-    // background-color: rgba(0, 0, 0, 0.2);
     
     &.true {
         padding-left: 5px;
         padding-right: 5px;
         border-left: $standard-border;
+        background-color: #4476f780;
+    }
+
+    >input:not(:checked)~&.true {
+        background-color: transparent;
     }
 
     .collectionLinearView {
@@ -78,24 +82,25 @@
         }
 
         >label {
-            background: $dark-gray;
+            pointer-events: all;
+            cursor: pointer;
+            background-color: $medium-blue;
+            padding: 5;
+            border-radius: 2px;
+            height: 25;
+
+            margin: 0;
             color: $white;
             display: flex;
-            border-radius: 18px;
-            font-size: 12.5px;
-            font-weight:100;
+            font-weight: 100;
             width: fit-content;
-            height: 100%;
-            margin-top: auto;
-            margin-bottom: auto;
-            margin-right: 3px;
-            cursor: pointer;
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
+            transition:0.1s;
 
             &:hover {
-                background: $medium-gray;
+                transform: scale(1.05);
             }
         }
 
@@ -122,7 +127,6 @@
             .collectionLinearView-docBtn-scalable {
                 position: relative;
                 margin: auto;
-                margin-left: 3px;
                 transform-origin: center 80%;
             }
 
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index a8846fd45..5d89d82b4 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -114,12 +114,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const icon: string = StrCast(this.props.Document.icon);
 
-        const menuOpener = <label htmlFor={`${guid}`} style={{ pointerEvents: "all", cursor: "pointer", background: backgroundColor === color ? "black" : backgroundColor, }}
+        const menuOpener = <label htmlFor={`${guid}`} style={{ pointerEvents: "all", cursor: "pointer", background: backgroundColor === color ? "black" : undefined, }}
             onPointerDown={e => e.stopPropagation()} >
             <p>{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : "–" : icon ? icon : "+"}</p>
         </label>;
 
-        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`}>
+        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{backgroundColor: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : "transparent"}}>
             <div className="collectionLinearView" ref={this.createDashEventsTarget} >
                 {!expandable ? (null) : <Tooltip title={<><div className="dash-tooltip">{BoolCast(this.props.Document.linearViewIsExpanded) ? "Close menu" : "Open menu"}</div></>} placement="top">
                     {menuOpener}
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index 72fab74d9..8dfb66e30 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -6,7 +6,11 @@
     justify-content: center;
     align-items: center;
     font-size: 80%;
-    border-radius: 7px;
+    border-radius: 2px;
+
+    &:hover {
+        background-color: rgba(0,0,0,0.3) !important;
+    }
 
     .menuButton-wrap {
         grid-column: 1;
@@ -94,8 +98,7 @@
         width: 100px;
         display: grid;
         grid-auto-columns: 80px 20px;
-        justify-items: flex-start;
-        padding-left: 10px;
+        justify-items: center;
         font-family: 'Roboto';
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -113,14 +116,15 @@
             height: fit-content;
             top: 100%;
             z-index: 21;
-            background-color: #e3e3e3;
-            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-            border-radius: 3px;
+            background-color: $white;
+            box-shadow: 0px 3px 4px rgba(0,0,0,0.3);
+            padding: 1px;
 
             .list-item {
-                color: black;
+                color: $black;
                 width: 100%;
                 height: 25px;
+                font-weight: 400;
                 display: flex;
                 justify-content: left;
                 align-items: center;
@@ -169,7 +173,8 @@
     .menuButton-dropdown-header{
         width: 100%;
         font-weight: 300;
-        overflow:hidden;
+        padding: 5px;
+        overflow: hidden;
         font-size: 12px;
         white-space: nowrap;
         text-overflow: ellipsis;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 9a54579dc..84ad03fa2 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -169,7 +169,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         
         return (
             <div className={`menuButton ${this.type} ${active}`}
-                style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.LIGHT_BLUE : backgroundColor, color: this.rootDoc.dropDownOpen ? Colors.BLACK : color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}>
                 <div className="menuButton-dropdown-header">
                     {text && text[0].toUpperCase() + text.slice(1)}